/* V75 — inner-page header background exactly follows the approved homepage dark header tone.
   Loaded last. Home page itself is untouched. */
body:not([data-page="home"]) .nav,
body:not([data-page="home"]) .nav.scrolled,
:root[data-theme="light"] body:not([data-page="home"]) .nav,
:root[data-theme="light"] body:not([data-page="home"]) .nav.scrolled,
:root[data-theme="dark"] body:not([data-page="home"]) .nav,
:root[data-theme="dark"] body:not([data-page="home"]) .nav.scrolled{
  background:linear-gradient(90deg,#182315 0%,#141d13 35%,#111911 68%,#0f1710 100%) !important;
  border-bottom:1px solid #354137 !important;
  box-shadow:none !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

/* V103 — iPhone model pages: make the "Other device" card match the approved Android dark style */
body[data-page="iphone-model"] .model-other-device,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-device,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-device{
  color:#f5f7f5 !important;
  background:linear-gradient(180deg,#09140c,#0b1a10) !important;
}

body[data-page="iphone-model"] .model-other-card,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-card,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-card{
  background:
    radial-gradient(circle at 88% 15%,rgba(183,255,50,.12),transparent 28%),
    linear-gradient(135deg,#102016,#172e1e) !important;
  border:1px solid rgba(183,255,50,.42) !important;
  box-shadow:0 20px 54px rgba(0,0,0,.18) !important;
}

body[data-page="iphone-model"] .model-other-copy h2,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-copy h2,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-copy h2{
  color:#f5f7f5 !important;
}

body[data-page="iphone-model"] .model-other-copy h2 span,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-copy h2 span,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-copy h2 span{
  color:#b7ff32 !important;
}

body[data-page="iphone-model"] .model-other-copy p,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-copy p,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-copy p{
  color:#b9c4bd !important;
}

body[data-page="iphone-model"] .model-other-benefits,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-benefits,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-benefits{
  color:#d9dfdb !important;
}

body[data-page="iphone-model"] .model-other-icon,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-icon,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-icon{
  background:radial-gradient(circle,rgba(183,255,50,.08),transparent 66%) !important;
  border-color:rgba(183,255,50,.35) !important;
  box-shadow:inset 0 0 34px rgba(183,255,50,.05) !important;
}

body[data-page="iphone-model"] .model-other-icon::before,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-icon::before,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-icon::before{
  border-color:#b7ff32 !important;
  box-shadow:0 0 16px rgba(183,255,50,.18) !important;
}

body[data-page="iphone-model"] .model-other-icon::after,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-icon::after,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-icon::after,
body[data-page="iphone-model"] .model-other-icon span,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-icon span,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-icon span{
  color:#b7ff32 !important;
  background-color:#b7ff32 !important;
}

/* V103 hotfix — keep the iPhone other-device icon identical to Android */
body[data-page="iphone-model"] .model-other-icon::after,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-icon::after,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-icon::after{
  background:#b7ff32 !important;
}

body[data-page="iphone-model"] .model-other-icon span,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-icon span,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-icon span{
  color:#b7ff32 !important;
  background:transparent !important;
}

/* V104 — iPhone model pages: sync CTA button colors with approved Android palette */
body[data-page="iphone-model"] .model-compact-actions .btn-primary,
body[data-page="iphone-model"] .model-other-btn,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-actions .btn-primary,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-btn,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-actions .btn-primary,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-btn{
  background:linear-gradient(180deg,#caff32,#b7ed2b) !important;
  color:#14200d !important;
  border:0 !important;
  box-shadow:0 12px 26px rgba(111,162,40,.16) !important;
}

body[data-page="iphone-model"] .model-compact-actions .btn-primary:hover,
body[data-page="iphone-model"] .model-other-btn:hover,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-actions .btn-primary:hover,
:root[data-theme="light"] body[data-page="iphone-model"] .model-other-btn:hover,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-actions .btn-primary:hover,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-other-btn:hover{
  background:linear-gradient(180deg,#d4ff49,#bdf132) !important;
  box-shadow:0 18px 34px rgba(111,162,40,.22) !important;
}

body[data-page="iphone-model"] .model-compact-actions .btn-ghost,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-actions .btn-ghost,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-actions .btn-ghost{
  background:rgba(90,116,70,.46) !important;
  color:#f8fcf4 !important;
  border:1px solid rgba(219,255,137,.40) !important;
  box-shadow:none !important;
}

body[data-page="iphone-model"] .model-compact-actions .btn-ghost:hover,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-actions .btn-ghost:hover,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-actions .btn-ghost:hover{
  background:rgba(105,134,82,.56) !important;
  color:#f8fcf4 !important;
  border-color:rgba(223,255,128,.46) !important;
  box-shadow:0 10px 22px rgba(92,129,66,.18) !important;
}

/* V105 — global theme toggle + iPhone top pills aligned to approved dark Android reference */
.theme-toggle,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="dark"] .theme-toggle{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:4px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(20,29,21,.96),rgba(12,18,14,.96)) !important;
  border:1px solid rgba(178,225,104,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 12px 24px rgba(0,0,0,.18) !important;
}

.theme-toggle button,
:root[data-theme="light"] .theme-toggle button,
:root[data-theme="dark"] .theme-toggle button{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  background:transparent !important;
  color:rgba(230,237,228,.42) !important;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease !important;
}

.theme-toggle button svg,
:root[data-theme="light"] .theme-toggle button svg,
:root[data-theme="dark"] .theme-toggle button svg{
  width:16px !important;
  height:16px !important;
}

.theme-toggle button.active,
:root[data-theme="light"] .theme-toggle button.active,
:root[data-theme="dark"] .theme-toggle button.active{
  background:linear-gradient(180deg,#caff32 0%,#b8ee2b 100%) !important;
  color:#12190f !important;
  box-shadow:0 8px 18px rgba(185,238,43,.28) !important;
}

.theme-toggle button:not(.active):hover,
:root[data-theme="light"] .theme-toggle button:not(.active):hover,
:root[data-theme="dark"] .theme-toggle button:not(.active):hover{
  background:rgba(255,255,255,.05) !important;
  color:rgba(241,246,239,.78) !important;
}

@media(max-width:767px){
  .theme-toggle,
  :root[data-theme="light"] .theme-toggle,
  :root[data-theme="dark"] .theme-toggle{padding:4px !important;gap:3px !important;}
  .theme-toggle button,
  :root[data-theme="light"] .theme-toggle button,
  :root[data-theme="dark"] .theme-toggle button{width:32px !important;height:32px !important;}
}

body[data-page="iphone-model"] .model-compact-pill,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-pill,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-pill{
  background:linear-gradient(180deg,rgba(19,30,21,.92) 0%,rgba(11,18,13,.94) 100%) !important;
  border:1px solid rgba(168,224,88,.34) !important;
  color:#edf3e8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.16) !important;
}

body[data-page="iphone-model"] .model-compact-pill strong,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-pill strong,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-pill strong{
  color:#f8fcf4 !important;
}

body[data-page="iphone-model"] .model-compact-pill .model-compact-price,
:root[data-theme="light"] body[data-page="iphone-model"] .model-compact-pill .model-compact-price,
:root[data-theme="dark"] body[data-page="iphone-model"] .model-compact-pill .model-compact-price{
  color:#caff32 !important;
}

/* V106 — return device/service chooser colors to MIKRON standard on phone pages */
.nav .dropdown-panel,
.mobile-drawer,
.calc-modal-panel{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(161,219,60,.10), transparent 42%),
    radial-gradient(100% 120% at 100% 100%, rgba(82,136,35,.14), transparent 48%),
    linear-gradient(135deg, rgba(18,28,22,.98) 0%, rgba(23,36,28,.97) 52%, rgba(16,26,20,.98) 100%) !important;
  border-color:rgba(200,255,87,.28) !important;
  box-shadow:0 24px 64px rgba(0,0,0,.34), 0 0 0 1px rgba(200,255,87,.08) inset !important;
}

.nav .dropdown-panel a{
  background:linear-gradient(180deg, rgba(17,26,20,.72) 0%, rgba(13,21,16,.78) 100%) !important;
  border:1px solid rgba(200,255,87,.34) !important;
  color:#f4f7f2 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.nav .dropdown-panel a:hover,
.nav .dropdown-panel a:focus-visible,
.nav .dropdown-panel a.active{
  background:linear-gradient(180deg, rgba(24,36,27,.92) 0%, rgba(17,27,20,.95) 100%) !important;
  border-color:rgba(204,255,98,.72) !important;
  color:#ffffff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18), 0 0 18px rgba(183,255,50,.10) !important;
}

.nav .dropdown-panel .ico{
  background:linear-gradient(180deg, rgba(28,40,31,.95) 0%, rgba(18,27,21,.94) 100%) !important;
  border:1px solid rgba(200,255,87,.75) !important;
  color:#c8ff38 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.nav .dropdown-panel a:hover .ico,
.nav .dropdown-panel a:focus-visible .ico,
.nav .dropdown-panel a.active .ico{
  background:linear-gradient(180deg, rgba(38,56,40,.96) 0%, rgba(24,37,28,.96) 100%) !important;
  border-color:rgba(214,255,120,.9) !important;
  color:#ddff73 !important;
  box-shadow:0 0 14px rgba(183,255,50,.14) !important;
}

/* Also normalize the device buttons inside the cost popup/widget */
.calc-device-btn{
  background:linear-gradient(180deg, rgba(17,27,20,.88) 0%, rgba(12,20,15,.92) 100%) !important;
  border:1px solid rgba(200,255,87,.28) !important;
  color:#eef4ea !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.12) !important;
}
.calc-device-btn:hover,
.calc-device-btn.active{
  background:linear-gradient(180deg, rgba(25,38,28,.94) 0%, rgba(16,27,20,.96) 100%) !important;
  border-color:rgba(206,255,104,.68) !important;
  color:#cfff42 !important;
}

/* V107 — unify all service price cards to the approved premium style */
body:not([data-page="home"]) #services-list .service-list{
  gap:24px !important;
}

body:not([data-page="home"]) #services-list .service-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:56px minmax(0,1fr) !important;
  align-items:start !important;
  gap:18px !important;
  min-height:168px !important;
  padding:26px 28px !important;
  border-radius:26px !important;
  border:1px solid rgba(190,255,84,.42) !important;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(79,144,32,.12) 0%, transparent 48%),
    radial-gradient(120% 150% at 0% 100%, rgba(182,255,74,.08) 0%, transparent 40%),
    linear-gradient(90deg, rgba(10,20,14,.96) 0%, rgba(6,28,17,.98) 52%, rgba(10,30,17,.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 44px rgba(0,0,0,.26),
    0 0 0 1px rgba(190,255,84,.05) !important;
  overflow:hidden !important;
  transform:none !important;
}

body:not([data-page="home"]) #services-list .service-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 140% at 18% 50%, rgba(183,255,50,.10), transparent 55%),
    linear-gradient(90deg, transparent 0%, rgba(183,255,50,.05) 50%, transparent 100%);
  pointer-events:none;
}
body:not([data-page="home"]) #services-list .service-item::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(220,255,153,.34), transparent);
  pointer-events:none;
}

body:not([data-page="home"]) #services-list .service-item:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(206,255,104,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 54px rgba(0,0,0,.30),
    0 0 26px rgba(183,255,50,.10) !important;
}

body:not([data-page="home"]) #services-list .service-item > div{
  position:relative;
  z-index:1;
}

body:not([data-page="home"]) #services-list .service-item .ico{
  position:relative;
  z-index:1;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg, rgba(48,81,28,.78) 0%, rgba(33,61,24,.90) 100%) !important;
  border:1px solid rgba(194,255,95,.42) !important;
  color:#c8ff38 !important;
  font-family:'Segoe UI Variable Display','SF Pro Display','Aptos Display','Segoe UI',sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18), 0 0 16px rgba(183,255,50,.10) !important;
}

body:not([data-page="home"]) #services-list .service-item h4{
  margin:0 0 10px !important;
  color:#f7fbf5 !important;
  font-family:'Segoe UI Variable Display','SF Pro Display','Aptos Display','Segoe UI',sans-serif !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  text-shadow:0 1px 0 rgba(0,0,0,.28) !important;
}

body:not([data-page="home"]) #services-list .service-item p{
  margin:0 !important;
  color:rgba(232,239,233,.84) !important;
  font-family:'Segoe UI Variable Text','SF Pro Text','Aptos','Segoe UI',sans-serif !important;
  font-size:15px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
  max-width:60ch;
}

body:not([data-page="home"]) #services-list .service-item .price{
  margin-top:18px !important;
  display:inline-block !important;
  color:#bfff3a !important;
  font-family:'Segoe UI Variable Display','SF Pro Display','Aptos Display','Segoe UI',sans-serif !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
  text-shadow:0 0 12px rgba(183,255,50,.08) !important;
}

body:not([data-page="home"]) #services-list .price-note{
  background:rgba(13,24,17,.72) !important;
  border:1px solid rgba(190,255,84,.24) !important;
  color:#d6ddd4 !important;
}

@media (max-width:760px){
  body:not([data-page="home"]) #services-list .service-list{gap:16px !important;}
  body:not([data-page="home"]) #services-list .service-item{
    grid-template-columns:44px minmax(0,1fr) !important;
    min-height:auto !important;
    padding:20px 18px !important;
    border-radius:22px !important;
    gap:14px !important;
  }
  body:not([data-page="home"]) #services-list .service-item .ico{
    width:44px !important;height:44px !important;min-width:44px !important;
    border-radius:13px !important;font-size:24px !important;
  }
  body:not([data-page="home"]) #services-list .service-item h4{font-size:17px !important;}
  body:not([data-page="home"]) #services-list .service-item p{font-size:14px !important;}
  body:not([data-page="home"]) #services-list .service-item .price{font-size:17px !important;margin-top:14px !important;}
}

:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item{
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(158,212,79,.16) 0%, transparent 48%),
    radial-gradient(120% 150% at 0% 100%, rgba(187,227,124,.16) 0%, transparent 40%),
    linear-gradient(90deg, rgba(244,249,239,.98) 0%, rgba(233,243,224,.98) 52%, rgba(244,249,239,.98) 100%) !important;
  border-color:rgba(133,177,68,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 14px 34px rgba(102,122,83,.12) !important;
}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item::before{
  background:radial-gradient(60% 140% at 18% 50%, rgba(165,214,91,.14), transparent 55%), linear-gradient(90deg, transparent 0%, rgba(151,204,70,.06) 50%, transparent 100%);
}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item::after{background:linear-gradient(90deg, transparent, rgba(140,180,71,.28), transparent);}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item h4{color:#132015 !important;text-shadow:none !important;}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item p{color:#425143 !important;}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item .price{color:#6aa400 !important;text-shadow:none !important;}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .service-item .ico{
  background:linear-gradient(180deg, rgba(193,232,120,.88) 0%, rgba(169,214,94,.92) 100%) !important;
  border-color:rgba(132,177,63,.44) !important;
  color:#254109 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56), 0 10px 24px rgba(121,158,72,.16) !important;
}
:root[data-theme="light"] body:not([data-page="home"]) #services-list .price-note{
  background:#f4f8ee !important;border-color:#d7e1cb !important;color:#556351 !important;
}