/* =========================================================
   HA Marketing — Modern Blue Luxury UI
   Inspired by a clean blue/white/gold mobile super-app layout.
   Applied as the LAST stylesheet to preserve functionality.
   ========================================================= */
:root{
  --ha-blue-950:#0b2340;
  --ha-blue-900:#11355d;
  --ha-blue-800:#164a82;
  --ha-blue-700:#1767d8;
  --ha-blue-600:#2d7df2;
  --ha-blue-500:#4a9bff;
  --ha-blue-300:#a9d0ff;
  --ha-blue-100:#eaf4ff;
  --ha-blue-50:#f6faff;
  --ha-gold-700:#9a6816;
  --ha-gold-600:#b9811e;
  --ha-gold-500:#dda83e;
  --ha-gold-300:#f4d78f;
  --ha-ink:#132b45;
  --ha-muted:#708197;
  --ha-line:#d9e7f4;
  --ha-card:#ffffff;
  --ha-bg:#f4f8fc;
  --ha-shadow:0 10px 30px rgba(26,74,126,.10);
  --ha-shadow-strong:0 18px 44px rgba(31,84,144,.16);
  --ha-radius:24px;
}

html[data-ha-modern="1"]{color-scheme:light!important;background:var(--ha-bg)!important}
html[data-ha-modern="1"] body{
  margin:0!important;
  min-height:100vh!important;
  color:var(--ha-ink)!important;
  background:
    radial-gradient(circle at 6% 0%,rgba(244,215,143,.18),transparent 24%),
    radial-gradient(circle at 94% 4%,rgba(74,155,255,.16),transparent 28%),
    linear-gradient(180deg,#f9fcff 0%,#f4f8fc 52%,#eef5fb 100%)!important;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
}
html[data-ha-modern="1"] body::before{opacity:.06!important}
html[data-ha-modern="1"] *,html[data-ha-modern="1"] *::before,html[data-ha-modern="1"] *::after{box-sizing:border-box}
html[data-ha-modern="1"] a{text-decoration:none}

/* General text hierarchy */
html[data-ha-modern="1"] :is(h1,h2,h3,h4,h5,h6,.title,.name,.heading,.section-title,b,strong,label){
  color:var(--ha-ink)!important;
  text-shadow:none!important;
}
html[data-ha-modern="1"] :is(p,.muted,.sub,.subtitle,.desc,.description,small,.help,.hint){
  color:var(--ha-muted)!important;
  text-shadow:none!important;
}

/* Universal premium surfaces */
html[data-ha-modern="1"] :is(
  .card,.c,.box,.panel,.tile,.qcard,.category,.role,.tool,
  .order,.order-row,.request-card,.provider-card,.service-card,
  .product-card,.store-card,.info-card,.status-card,.items,.delivery,
  .result,.feature,.option,.section-shell,.modal-content,.sheet-content,
  .dialog,.popup,.drawer,.side,.conversation,.messages,.composer,.list,
  .service-card,.store-action,.profile-card,.stat-card
){
  background:linear-gradient(145deg,#ffffff,#f8fbff)!important;
  color:var(--ha-ink)!important;
  border:1px solid rgba(92,143,205,.17)!important;
  box-shadow:var(--ha-shadow)!important;
}
html[data-ha-modern="1"] :is(.card,.c,.qcard,.category,.role,.tool,.service-card,.product-card,.store-card){
  border-radius:20px!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
html[data-ha-modern="1"] :is(.card,.c,.qcard,.category,.role,.tool,.service-card,.product-card,.store-card):hover{
  transform:translateY(-2px)!important;
  border-color:rgba(45,125,242,.28)!important;
  box-shadow:var(--ha-shadow-strong)!important;
}

/* Hero / promotional blocks */
html[data-ha-modern="1"] :is(.hero,.banner,.intro,.welcome,.hero-card){
  position:relative!important;
  overflow:hidden!important;
  color:var(--ha-ink)!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(244,215,143,.35),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(74,155,255,.24),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f0f7ff 58%,#e7f2ff 100%)!important;
  border:1px solid rgba(80,138,209,.20)!important;
  box-shadow:var(--ha-shadow)!important;
}
html[data-ha-modern="1"] :is(.hero,.banner,.intro,.welcome,.hero-card)::after{
  content:"";
  position:absolute;inset:auto -12% -55% auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(74,155,255,.13),transparent 64%);pointer-events:none;
}

/* Inputs / search */
html[data-ha-modern="1"] :is(input,select,textarea,.input,.search,.search-box,.searchbar){
  background:#fff!important;
  color:var(--ha-ink)!important;
  border:1px solid #d5e4f3!important;
  box-shadow:0 7px 22px rgba(26,74,126,.07)!important;
  outline:none!important;
}
html[data-ha-modern="1"] :is(input,textarea)::placeholder{color:#98a5b5!important;opacity:1!important}
html[data-ha-modern="1"] :is(input,select,textarea):focus{border-color:var(--ha-blue-500)!important;box-shadow:0 0 0 4px rgba(74,155,255,.12)!important}
html[data-ha-modern="1"] option{background:#fff!important;color:var(--ha-ink)!important}

/* Buttons */
html[data-ha-modern="1"] :is(button,.btn,.b,.button,a.btn,.primary,.cta,.go,.action,.save,.submit,input[type="submit"]){
  border-radius:14px!important;
  font-weight:800!important;
  background:linear-gradient(135deg,var(--ha-blue-500),var(--ha-blue-700))!important;
  color:#fff!important;
  border:1px solid rgba(23,103,216,.42)!important;
  box-shadow:0 9px 22px rgba(45,125,242,.18)!important;
}
html[data-ha-modern="1"] :is(.light,.secondary,.ghost,.btn-light){
  background:linear-gradient(145deg,#fff,#eef5ff)!important;
  color:var(--ha-blue-800)!important;
  border:1px solid #d5e4f3!important;
  box-shadow:0 7px 18px rgba(26,74,126,.07)!important;
}
html[data-ha-modern="1"] :is(.danger,.reject,.delete,.remove,.red){background:#fff1f3!important;color:#b73644!important;border-color:#f1bcc3!important}
html[data-ha-modern="1"] :is(.ok,.success,.green){background:#effaf5!important;color:#217950!important;border-color:#bfe5cf!important}
html[data-ha-modern="1"] .blue{background:#edf5ff!important;color:#185fb8!important;border-color:#b9d6f8!important}
html[data-ha-modern="1"] :is(.gold,.orange,.accent){color:var(--ha-gold-700)!important}

/* Chips / badges */
html[data-ha-modern="1"] :is(.chip,.badge,.tag,.pill,.status,.label,.count){
  background:#f0f6ff!important;color:var(--ha-blue-800)!important;border:1px solid #d4e4f5!important;
  border-radius:999px!important;
}

/* Tables */
html[data-ha-modern="1"] table{background:#fff!important;color:var(--ha-ink)!important;border-color:#dbe7f2!important;border-radius:16px!important;overflow:hidden}
html[data-ha-modern="1"] th{background:#edf5ff!important;color:var(--ha-blue-900)!important}
html[data-ha-modern="1"] th,html[data-ha-modern="1"] td{border-color:#e1ebf4!important}
html[data-ha-modern="1"] tr:nth-child(even) td{background:#fbfdff!important}

/* Generic bars */
html[data-ha-modern="1"] :is(header,.header,.topbar,.navbar,.nav,.top,.head,.toolbar,.appbar){
  background:rgba(255,255,255,.96)!important;
  color:var(--ha-ink)!important;
  border-color:#dce8f3!important;
  box-shadow:0 8px 24px rgba(26,74,126,.07)!important;
  backdrop-filter:blur(12px);
}

/* Maps and media stay natural */
html[data-ha-modern="1"] :is(#map,.map,.leaflet-container,.map-shell,img,video,canvas,iframe){filter:none!important}

/* =========================================================
   Modern shared app shell for main sections
   ========================================================= */
.ha-modern-appbar{
  position:relative;z-index:80;
  background:linear-gradient(140deg,#0d5fd5 0%,#287de9 55%,#54a8ff 100%);
  color:#fff;
  padding:18px 18px 24px;
  border-bottom-left-radius:28px;border-bottom-right-radius:28px;
  box-shadow:0 14px 34px rgba(21,86,163,.22);
  overflow:hidden;
}
.ha-modern-appbar::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.07);right:-90px;top:-135px}
.ha-modern-appbar::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(255,211,111,.10);left:-70px;bottom:-125px}
.ha-modern-toprow{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:auto}
.ha-modern-brand{display:flex;align-items:center;gap:12px;min-width:0}
.ha-modern-logo{width:55px;height:55px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#fff,#eef6ff);color:var(--ha-blue-800);font-weight:950;font-size:24px;box-shadow:0 10px 22px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.7)}
.ha-modern-brandtext{line-height:1.2;min-width:0}
.ha-modern-brandtext b{display:block;color:#fff!important;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-modern-brandtext small{display:block;color:rgba(255,255,255,.82)!important;font-size:11px;margin-top:5px}
.ha-modern-location{display:flex;align-items:center;gap:8px;font-size:12px;text-align:right;color:#fff;opacity:.96;cursor:pointer}
.ha-modern-location .pin{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.20)}
.ha-modern-search{position:relative;z-index:1;max-width:1120px;margin:15px auto 0;background:#fff;border-radius:22px;padding:10px 13px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 28px rgba(17,68,127,.18)}
.ha-modern-search .sicon{font-size:20px;color:#6b7c92}
.ha-modern-search input{flex:1;border:0!important;box-shadow:none!important;background:transparent!important;height:30px;padding:0 4px!important;font-size:14px;color:var(--ha-ink)!important}
.ha-modern-search input:focus{box-shadow:none!important}

.ha-modern-section-intro{max-width:1120px;margin:16px auto 4px;padding:0 18px}
.ha-modern-intro-card{position:relative;overflow:hidden;min-height:170px;border-radius:26px;padding:24px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:
 radial-gradient(circle at 15% 20%,rgba(244,215,143,.33),transparent 28%),
 radial-gradient(circle at 88% 30%,rgba(74,155,255,.25),transparent 32%),
 linear-gradient(135deg,#fff 0%,#f0f7ff 58%,#e7f2ff 100%);border:1px solid #d9e8f6;box-shadow:var(--ha-shadow)}
.ha-modern-intro-copy{position:relative;z-index:2;max-width:650px}
.ha-modern-kicker{display:inline-flex;align-items:center;gap:6px;background:#eef5ff;color:var(--ha-blue-800);border:1px solid #d5e4f5;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;margin-bottom:8px}
.ha-modern-intro-card h1{font-size:clamp(23px,4vw,38px)!important;margin:0 0 7px!important;color:var(--ha-blue-950)!important;line-height:1.25!important}
.ha-modern-intro-card p{margin:0!important;color:#66798f!important;line-height:1.7!important;font-size:13px!important}
.ha-modern-intro-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:10px 18px;border-radius:14px;background:linear-gradient(135deg,var(--ha-gold-300),var(--ha-gold-500));color:#6d4808!important;font-weight:900;box-shadow:0 9px 22px rgba(218,164,62,.20)}
.ha-modern-intro-art{position:relative;z-index:1;min-width:150px;display:grid;place-items:center;font-size:86px;filter:drop-shadow(0 12px 18px rgba(31,84,144,.14))}

/* Existing main content becomes a premium canvas */
body.ha-modern-main > :not(.ha-modern-appbar):not(.ha-modern-section-intro):not(.ha-modern-bottomnav):not(script):not(style){
  max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;
}
body.ha-modern-main .page,body.ha-modern-main .wrap,body.ha-modern-main main{background:transparent!important}
body.ha-modern-main .page{padding-top:8px!important}
body.ha-modern-main .wrap{padding-top:12px!important}

/* Hide only old chrome on main pages, not the useful content */
body.ha-modern-main > nav.bottom,
body.ha-modern-main > nav.bottomnav,
body.ha-modern-main > .bottom,
body.ha-modern-main > .bottom-nav,
body.ha-modern-main > header.topbar{display:none!important}
body.ha-modern-main .ha-theme-toggle{display:none!important}

/* Make grids compact and easy to scan */
body.ha-modern-main :is(.grid,.g,.service-grid,.categories,.cards,.cards-grid,.section-grid){gap:12px!important}
body.ha-modern-main :is(.card,.c,.service-card,.category,.tool){min-height:unset!important}
body.ha-modern-main :is(.icon,.ico,.iconbox,.service-card .ico){filter:none!important}
body.ha-modern-main :is(.card,.c,.service-card,.category,.tool) :is(h2,h3,.name){font-weight:850!important}

/* Home page specific cleanup: preserve existing content but remove the old giant dark branding */
body.ha-modern-main.ha-modern-home .hero{min-height:auto!important;margin:14px auto!important;border-radius:26px!important;padding:22px!important;background:
 radial-gradient(circle at 10% 10%,rgba(244,215,143,.32),transparent 28%),
 radial-gradient(circle at 90% 16%,rgba(74,155,255,.24),transparent 32%),linear-gradient(135deg,#fff,#eef6ff)!important}
body.ha-modern-main.ha-modern-home .hero-controls,
body.ha-modern-main.ha-modern-home .brand-hero,
body.ha-modern-main.ha-modern-home .hero-decoration{display:none!important}
body.ha-modern-main.ha-modern-home .promo-pill{margin:0 auto!important;background:#fff!important;border-color:#dce8f3!important;color:var(--ha-ink)!important;box-shadow:none!important}
body.ha-modern-main.ha-modern-home .promo-pill strong{color:var(--ha-blue-900)!important}
body.ha-modern-main.ha-modern-home .content{padding:14px 0 100px!important}
body.ha-modern-main.ha-modern-home .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
body.ha-modern-main.ha-modern-home .card{background:linear-gradient(145deg,#fff,#f7fbff)!important;border-color:#dce8f3!important;box-shadow:var(--ha-shadow)!important}
body.ha-modern-main.ha-modern-home .card h2{color:var(--ha-ink)!important}
body.ha-modern-main.ha-modern-home .card p{color:var(--ha-muted)!important}
body.ha-modern-main.ha-modern-home .iconbox{background:linear-gradient(145deg,#fff,#edf5ff)!important;border:1px solid #d8e7f5!important;box-shadow:0 9px 20px rgba(28,75,129,.10)!important}
body.ha-modern-main.ha-modern-home .card h2::after{background:linear-gradient(90deg,#c78d24,#f4d78f,#c78d24)!important;box-shadow:none!important}
body.ha-modern-main.ha-modern-home .drawer-overlay{background:rgba(15,41,70,.28)!important}
body.ha-modern-main.ha-modern-home .shortcuts{background:#fff!important;border-color:#dce8f3!important;box-shadow:var(--ha-shadow-strong)!important}
body.ha-modern-main.ha-modern-home .shortcuts a{background:#f7fbff!important;color:var(--ha-ink)!important;border-color:#e1ebf5!important}
body.ha-modern-main.ha-modern-home .drawer-title{color:var(--ha-blue-900)!important}

/* Shared bottom navigation */
.ha-modern-bottomnav{position:fixed;z-index:99980;left:0;right:0;bottom:0;padding:6px 10px max(7px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #dce8f3;box-shadow:0 -10px 28px rgba(26,74,126,.10);backdrop-filter:blur(12px)}
.ha-modern-bottominner{max-width:760px;margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.ha-modern-navitem{min-height:54px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#72849a;font-size:10px;font-weight:850}
.ha-modern-navitem .ni{font-size:20px;line-height:1}
.ha-modern-navitem.active{background:linear-gradient(180deg,#eef5ff,#dcecff);color:var(--ha-blue-700);box-shadow:inset 0 0 0 1px rgba(45,125,242,.10)}
body.ha-modern-main{padding-bottom:88px!important}

/* Micro-interactions, intentionally subtle */
html[data-ha-modern="1"] :is(a,button,.card,.c,.service-card,.product-card){-webkit-tap-highlight-color:transparent}
html[data-ha-modern="1"] :is(a,button):active{transform:scale(.985)}

@media(max-width:720px){
  .ha-modern-appbar{padding:14px 13px 20px;border-bottom-left-radius:24px;border-bottom-right-radius:24px}
  .ha-modern-logo{width:48px;height:48px;border-radius:15px;font-size:21px}
  .ha-modern-brandtext b{font-size:17px}
  .ha-modern-brandtext small{font-size:10px}
  .ha-modern-location{font-size:10px}.ha-modern-location .pin{width:32px;height:32px}
  .ha-modern-search{margin-top:12px;border-radius:18px;padding:8px 11px}.ha-modern-search input{font-size:13px}
  .ha-modern-section-intro{padding:0 11px;margin-top:12px}
  .ha-modern-intro-card{min-height:145px;border-radius:22px;padding:18px 16px;gap:10px}
  .ha-modern-intro-card h1{font-size:22px!important}.ha-modern-intro-card p{font-size:11px!important}
  .ha-modern-intro-art{min-width:86px;font-size:58px}
  .ha-modern-intro-cta{font-size:12px;padding:9px 14px}
  body.ha-modern-main.ha-modern-home .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
  body.ha-modern-main.ha-modern-home .card{padding:14px 7px!important;border-radius:18px!important}
  body.ha-modern-main.ha-modern-home .iconbox{width:58px!important;height:58px!important;border-radius:17px!important}
  .ha-modern-bottomnav{padding-left:4px;padding-right:4px}.ha-modern-bottominner{gap:3px}.ha-modern-navitem{min-height:50px;border-radius:13px;font-size:9px}.ha-modern-navitem .ni{font-size:18px}
}