@import url("tokens-b.css");

/* Dark variant B for every page except the custom homepage layout. */
html {
 background: var(--bg) !important;
 color: var(--text);
}
body {
 background: var(--bg) !important;
 color: var(--text) !important;
 font-family: var(--body) !important;
 font-size: 18px !important;
 line-height: 1.6 !important;
}
button, input, textarea, select {
 font-family: var(--body) !important;
 font-size: 18px !important;
}
h1, h2, h3, h4, .type-display, .type-title, .type-h2 {
 font-family: var(--head) !important;
 font-weight: 500 !important;
 letter-spacing: -0.003em;
 color: var(--text) !important;
 background: transparent !important;
 text-transform: uppercase;
}
h1, .type-display { font-size: clamp(36px, 8vw, 64px) !important; line-height: 1.02 !important; }
h2, .type-title, .type-h2 { line-height: 1.15 !important; }
p, li, td, th, label, .type-body, .type-caption, .type-price, .bolezni-note {
 color: var(--text);
 font-size: 18px;
 line-height: 1.6;
}
.type-body, .type-caption, .bolezni-note, .text-slate-500, .text-slate-600, .text-slate-400, .text-slate-300, .text-white\/70, .text-white\/80 {
 color: var(--muted) !important;
}
.text-navy, .text-slate-800, .text-slate-700, .text-slate-900, .text-white {
 color: var(--text) !important;
}
.text-primary-700, .text-primary-600, .text-primary-500 {
 color: var(--mint) !important;
}
.cta-hit .text-primary-700, .cta-hit .text-primary-600 {
 color: #fff !important;
}
#pain-guide, #study-videos {
 background: transparent !important;
 color: var(--text) !important;
}
#pain-guide p, #study-videos p { color: var(--muted) !important; }
#pain-guide [data-sound-toggle], #study-videos [data-sound-toggle] {
 background: transparent !important;
 color: #fff !important;
 border: 1.5px solid rgba(255,255,255,.45) !important;
 box-shadow: none !important;
}
.text-xs, .text-sm, .text-\[11px\] { font-size: 16px !important; line-height: 1.45 !important; }

header.site-content {
 background: rgba(13, 29, 28, .94) !important;
 border-color: var(--line) !important;
 color: var(--text) !important;
 backdrop-filter: blur(12px);
}
header.site-content a { color: var(--text) !important; }
header.site-content a > span.grid {
 background: var(--bg2) url("/favicon-512.png") center/cover no-repeat !important;
 color: transparent !important;
 border-radius: 10px !important;
}
header.site-content nav a { font-size: 16px !important; }
header.site-content a.bg-emerald-500,
header.site-content a.rounded-xl {
 background: var(--wa) !important;
 color: #fff !important;
 border-radius: 10px !important;
 min-height: 48px;
}
#menuButton {
 border-color: var(--line) !important;
 color: var(--text) !important;
 min-width: 48px;
 min-height: 48px;
 background: transparent !important;
}
#mobileMenu, #mobileMenu.bg-white\/90 {
 background: var(--bg) !important;
 border-color: var(--line) !important;
 color: var(--text) !important;
}
#mobileMenu a {
 color: var(--text) !important;
 min-height: 52px;
 font-size: 18px !important;
 display: flex;
 align-items: center;
}
#mobileMenu a.bg-emerald-500, #mobileMenu a.rounded-xl {
 background: var(--wa) !important;
 color: #fff !important;
 justify-content: center;
}

main, .bolezni-canvas, .site-content.bg-slate-50, #chto-pokazhet {
 background-color: transparent !important;
 color: var(--text) !important;
}
.bg-white, .bg-white\/40, .bg-white\/60, .bg-white\/80, .bg-white\/90,
.bg-slate-50, .bg-slate-50\/50, .bg-slate-50\/70, .bg-slate-100,
.vrachi-card, .cta-sheet-panel {
 background-color: var(--card) !important;
 color: var(--text) !important;
}
.disease-article {
 background: transparent !important;
 color: var(--text) !important;
 border-radius: 0 !important;
 padding: 0 !important;
 margin-top: 1.5rem;
 max-width: 68ch;
 font-family: var(--body) !important;
}
.disease-article:has(.condition-cards) { max-width: none; }
.disease-article strong { color: #fff !important; }
.disease-article p a,
.disease-article ul:not(.condition-cards) a { color: var(--mint) !important; }
.condition-cards a,
.zone-photo-card {
 background: var(--card) !important;
 color: var(--text) !important;
 border-color: var(--line) !important;
}
.card-more { color: var(--mint) !important; }
.page-crumbs {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem;
 margin: 0.25rem 0 0;
 color: var(--muted);
 font-size: 16px;
 line-height: 1.4;
}
.page-crumbs a { color: var(--muted) !important; text-decoration: none; }
.page-crumbs a:hover { color: #fff; }
.page-hero { padding: 0.25rem 0 0.5rem; }
.page-hero h1 { margin-top: 1.15rem; }
.page-hero .disease-article { margin-top: 1.25rem; }
.vrachi-page .page-hero {
 margin: 0 -1rem 1.25rem;
 padding: 0.75rem 1rem 1.75rem;
 background:
  linear-gradient(180deg, rgba(8,18,17,.5) 0%, rgba(13,29,28,.78) 48%, var(--bg) 100%),
  url("/static/images/home-hero-poster.webp") center 35% / cover no-repeat;
}
@media (min-width: 640px) {
 .vrachi-page .page-hero { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
 .vrachi-page .page-hero { margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
}
main.bolezni-canvas.pt-28,
main.site-content.pt-28,
section.hero-grid {
 padding-top: 1.25rem !important;
}
.bg-navy, .bg-navy\/80, .bg-navy\/30, thead.bg-navy {
 background-color: var(--bg2) !important;
}
.border-slate-200, .border-slate-200\/80, .border-white\/20 {
 border-color: var(--line) !important;
}
.hero-grid {
 background-image: none !important;
 background-color: rgba(13, 29, 28, .45) !important;
}
.site-video-bg { background-color: var(--bg) !important; }
.site-video-overlay { background: rgba(8, 18, 17, .72) !important; }
footer, footer.bg-navy, footer.bg-navy\/80 {
 background: var(--bg) !important;
 color: var(--muted) !important;
 border-top: 1px solid var(--line);
}
footer a { color: var(--mint) !important; }

a.cta-hit, a.bg-\[\#25D366\], a.bg-emerald-500 {
 background-color: var(--wa) !important;
 color: #fff !important;
 border-color: transparent !important;
 min-height: 56px;
 border-radius: 10px !important;
}
a.cta-hit.bg-white {
 background-color: var(--wa) !important;
 color: #fff !important;
}
a.cta-hit svg, a.cta-hit .text-\[\#25D366\] { color: #fff !important; }
a.bg-\[\#F15A24\] {
 background-color: var(--mint) !important;
 color: var(--bg) !important;
}
a.cta-hit:hover, a.bg-emerald-500:hover { background-color: var(--wa-h) !important; }
#stickyCta, .sticky-cta {
 background: rgba(8, 18, 17, .96) !important;
 border-top: 1px solid var(--line);
}
#stickyCta .cta-hit {
 height: auto !important;
 max-height: none !important;
 min-height: 56px !important;
 font-size: 16px !important;
 white-space: normal !important;
 line-height: 1.2 !important;
}
.cta-sheet { background: rgba(8, 18, 17, .55) !important; }

main a:not(.cta-hit):not(.back-link):not(.pager-arrow) { color: var(--mint); }
main a:not(.cta-hit):hover { color: #fff; }
.back-link {
 background: var(--card) !important;
 color: var(--text) !important;
 border-color: var(--line) !important;
 min-height: 48px !important;
 font-size: 16px !important;
}
.pager-arrow { background: var(--wa) !important; color: #fff !important; min-width: 48px; min-height: 48px; }
.pager-count { color: var(--text) !important; font-size: 16px !important; }

input, textarea, select, .condition-search-input {
 background: var(--bg2) !important;
 color: var(--text) !important;
 border: 1px solid var(--line) !important;
 border-radius: 10px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
table { color: var(--text); }
td, th { border-color: var(--line); }
.rounded-3xl, .rounded-2xl { border-radius: var(--r); }

.vrachi-page .vrachi-card h2 { font-size: 1.25rem !important; line-height: 1.25 !important; color: var(--text) !important; }
.vrachi-page .vrachi-card p, .vrachi-page .vrachi-card li { color: var(--muted) !important; font-size: 17px !important; }
.swipe-track.is-hinting, .flip-hint.is-hinting { animation: none !important; }

.map iframe, .min-h-\[420px\] { background: var(--bg2); }

/* Shared homepage header. Inner pages do not load home-b.css. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hdr{position:sticky;top:0;z-index:40;background:rgba(13,29,28,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{position:relative}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px}
.hdr a{color:var(--text);text-decoration:none}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:40px;width:40px;border-radius:10px}
.logo b{font-family:var(--head);font-weight:500;letter-spacing:.04em;font-size:20px;line-height:1;text-transform:uppercase;color:#fff}
.hdr-r{display:flex;gap:8px;align-items:center}
.hdr .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border-radius:10px;font-weight:600;font-size:16px;line-height:1.2;text-align:center}
.hdr .btn svg{width:20px;height:20px;flex:none}
.hdr .btn-wa{background:var(--wa);color:#fff}
.hdr .btn-wa:hover{background:var(--wa-h)}
.hdr .btn-line{border:1.5px solid rgba(255,255,255,.45);color:#fff;background:transparent}
.hdr .tel-long{display:none}
#mt{position:absolute;opacity:0;pointer-events:none}
.mlabel{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;border:1.5px solid var(--line);font-weight:600;font-size:16px;line-height:1;cursor:pointer;color:var(--text)}
.nav-desk{display:none}
.nav-mob{display:none;padding:8px 0 20px;max-height:calc(100dvh - 68px);overflow:auto}
.nav-mob a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-size:18px;color:var(--text)}
.nav-mob .group,.nav-desk .group{color:var(--muted);font-size:16px;margin-top:14px;letter-spacing:.06em;text-transform:uppercase}
#mt:checked~.nav-mob{display:block}
.has-sticky-cta .nav-mob{padding-bottom:calc(8rem + env(safe-area-inset-bottom))}
@media (min-width:1024px){
 .hdr .tel-long{display:inline-flex}
 .mlabel{display:none}
 .nav-desk{display:flex!important;flex-wrap:nowrap;gap:0 10px;padding:0;position:absolute;top:0;left:168px;right:360px;height:68px;align-items:center;justify-content:center;overflow:hidden}
 .nav-desk a{min-height:44px;border:0;font-size:15px;color:#E3ECEA;white-space:nowrap}
 .nav-desk .ref,.nav-desk .group{display:none}
 .nav-mob{display:none!important}
}
body.checkup-page section.bg-white\/60,
body.checkup-page section.bg-white\/40,
body.checkup-page section.bg-slate-50\/50,
body.checkup-page li.rounded-2xl,
body.checkup-page article.rounded-2xl,
body.checkup-page .faq-item,
body.checkup-page .rounded-3xl{
 background:transparent !important;
 border:0 !important;
 box-shadow:none !important;
}
body.checkup-page a.rounded-2xl:not(.cta-hit){
 background:transparent !important;
 border:0 !important;
 border-bottom:1px solid var(--line) !important;
 border-radius:0 !important;
 box-shadow:none !important;
}
body.checkup-page h1{font-size:clamp(40px,6vw,64px);line-height:1.05}
body.checkup-page h2{font-size:clamp(28px,4vw,40px);line-height:1.15}
body.checkup-page article p,
body.checkup-page .faq-answer,
body.checkup-page li.rounded-2xl{
 font-size:20px;
 line-height:1.6;
 color:var(--text) !important;
}
body.checkup-page .faq-answer{display:block}
body.checkup-page .faq-plus{display:none}
body.checkup-page .faq-button{font-size:22px;line-height:1.35;padding-left:0;padding-right:0}

/* Dark checkup promo. The old plate was a light JPEG. */
.checkup-promo{
 margin:1.5rem 0 0;
 padding:22px 18px 18px;
 background:var(--card);
 color:var(--text);
 border:1px solid var(--line);
 border-radius:16px;
}
.checkup-promo-title{
 margin:0 0 14px;
 font-family:var(--head);
 font-size:clamp(28px,7vw,40px);
 line-height:1.05;
 letter-spacing:.04em;
 text-transform:uppercase;
 color:#fff !important;
}
.checkup-promo ul{
 margin:0;
 padding:0;
 list-style:none;
 display:grid;
 gap:8px;
}
.checkup-promo li{
 position:relative;
 padding-left:18px;
 color:var(--text) !important;
 font-size:18px;
 line-height:1.45;
}
.checkup-promo li::before{
 content:"";
 position:absolute;
 left:0;
 top:.55em;
 width:8px;
 height:8px;
 border-radius:50%;
 background:var(--mint);
}
.checkup-promo-price{
 display:flex;
 flex-wrap:wrap;
 align-items:baseline;
 gap:10px 14px;
 margin:18px 0 8px;
}
.checkup-promo-price s{
 color:var(--muted);
 font-size:22px;
 font-weight:700;
}
.checkup-promo-price strong{
 color:#fff;
 font-size:clamp(36px,9vw,48px);
 line-height:1;
 font-weight:800;
 letter-spacing:-.02em;
}
.checkup-promo-price span{
 background:var(--mint);
 color:var(--bg);
 border-radius:999px;
 padding:4px 10px;
 font-size:16px;
 font-weight:800;
}
.checkup-promo-book,
.checkup-promo-meta{
 margin:0;
 font-weight:650;
}
.checkup-promo-book{color:var(--mint) !important}
.checkup-promo-meta{color:var(--text) !important}

/* Price tables stay real tables. On a phone each row is a card. */
@media (max-width:640px){
 .overflow-x-auto:has(table){
  overflow:visible !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
 }
 table.min-w-\[640px\]{
  display:block;
  width:100% !important;
  min-width:0 !important;
 }
 table.min-w-\[640px\] thead{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
 }
 table.min-w-\[640px\] tbody{
  display:grid;
  gap:12px;
  background:transparent !important;
 }
 table.min-w-\[640px\] tr{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 0;
  margin:0;
  padding:16px 16px 14px;
  background:var(--card) !important;
  border:1px solid var(--line);
  border-radius:16px;
 }
 table.min-w-\[640px\] th[scope="row"]{
  flex:1 0 100%;
  width:100%;
  padding:0 0 8px !important;
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  font-size:20px !important;
  line-height:1.35 !important;
  font-weight:650;
  color:#fff !important;
 }
 table.min-w-\[640px\] td{
  flex:0 0 auto;
  width:auto !important;
  padding:0 !important;
  text-align:left !important;
  white-space:normal !important;
  background:transparent !important;
  font-size:22px !important;
  line-height:1.3 !important;
  font-weight:700;
  color:var(--mint) !important;
 }
 table.min-w-\[640px\] td:nth-child(2)::before{
  content:"день ";
  color:var(--muted);
  font-size:18px;
  font-weight:600;
 }
 table.min-w-\[640px\] td:nth-child(3)::before{
  content:"ночь ";
  color:var(--muted);
  font-size:18px;
  font-weight:600;
 }
 table.min-w-\[640px\] td:nth-child(2)::after{
  content:" / ";
  color:var(--muted);
  font-weight:500;
 }
}

/* Inner pages use the homepage mobile dock: three buttons, after the hero. */
@media (max-width:767px){
 .social-float{display:none !important}
 body.has-sticky-cta{
  padding-bottom:calc(108px + env(safe-area-inset-bottom)) !important;
 }
 #stickyCta.sticky-cta,
 #stickyCta.article-cta-pending{
  transform:translateY(110%) !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
 }
 #stickyCta.sticky-cta.show,
 #stickyCta.article-cta-pending.show{
  transform:none !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
 }
 #stickyCta{
  z-index:50;
  background:rgba(8,18,17,.96) !important;
  border-top:1px solid var(--line) !important;
  transition:transform .35s ease;
 }
 #stickyCta .sticky-cta-panel{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  align-items:stretch;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
 }
 #stickyCta .sticky-cta-extra{display:none !important}
 #stickyCta .sticky-cta-actions{display:contents}
 #stickyCta .cta-hit{
  order:2;
  min-height:56px !important;
  height:auto !important;
  max-height:none !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  white-space:normal !important;
  text-transform:none !important;
  background:var(--wa) !important;
  color:#fff !important;
 }
 #stickyCta .sticky-cta-actions .cta-hit:nth-child(2){order:1}
 #stickyCta .sticky-cta-actions .cta-hit:nth-child(3){
  order:3;
  padding:0 14px !important;
  white-space:nowrap !important;
  background:#fff !important;
  color:var(--bg) !important;
 }
 #stickyCta .sticky-cta-actions .cta-hit:nth-child(4){display:none !important}
 #stickyCta .cta-hit svg{display:none !important}
}