:root{
  --red:#da0808;
  --red-dark:#b10606;

  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f9fafb;

  --text:#101828;
  --muted:#667085;

  --line:#e5e7eb;
  --shadow: 0 10px 30px rgba(16,24,40,.08);

  --radius:18px;
  --max:1180px;
}

/* Dark theme overrides (whole site) */
[data-theme="dark"]{
  --bg:#0b1220;
  --surface:#0f172a;
  --surface-2:#111c33;

  --text:#eef2ff;
  --muted:#b6c0d1;

  --line:rgba(255,255,255,.12);
  --shadow: 0 16px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(1.2) blur(10px);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.logo{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--red),#ff3b3b);
  display:grid;place-items:center;color:#fff;font-weight:800;
  box-shadow:0 10px 18px rgba(218,8,8,.22);
  letter-spacing:.5px;
}
.brand-title{display:flex;flex-direction:column;line-height:1.05}
.brand-title b{font-size:14px}
.brand-title span{font-size:12px;color:var(--muted)}

nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
nav a{font-size:14px;color:var(--text);padding:8px 10px;border-radius:10px;opacity:.92}
nav a:hover{background:var(--surface-2)}
nav a.active{background:rgba(218,8,8,.10); border: 1px solid rgba(218, 8, 8, .55);}
[data-theme="dark"] nav a.active{
  background: rgba(218, 8, 8, .30);
  border: 1px solid rgba(218, 8, 8, .70);
}


.actions{display:flex;gap:10px;align-items:center}
.btn{
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  padding:10px 14px;border-radius:12px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 10px 18px rgba(218,8,8,.18);
}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
/* .icon-btn{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
} */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  width:auto;      /* was 42px */
  height:auto;     /* was 42px */
  padding:10px 12px;

  white-space:nowrap;
  line-height:1;
}

.icon-btn span{
  font-weight:700;
  font-size:12px;
  color:var(--muted);
}

.pill{
  font-size:12px;border-radius:999px;
  padding:6px 10px;display:inline-flex;gap:8px;align-items:center;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted)
}
.pill i{width:7px;height:7px;border-radius:999px;background:#22c55e;display:inline-block}

/* HERO (bright version) */
.hero{padding:28px 0 10px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.hero-left{
  background:
    radial-gradient(1200px 500px at 30% 0%, rgba(218,8,8,.16), transparent 60%),
    var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px;
  overflow:hidden;
  position:relative;
}
.hero-left:after{
  content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(218,8,8,.18));
  border-radius:50%;
  filter:blur(1px);
  opacity:.9;
}
[data-theme="dark"] .hero-left:after{opacity:.35}

.h1{font-size:38px;line-height:1.08;margin:12px 0 10px}
.lead{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  /* max-width:60ch; */
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* bright right side (no black mixed) */
.hero-right{
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(218,8,8,.14), transparent 55%),
    var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;
}
.card-mini{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:16px;padding:14px
}
.card-mini h3{margin:0 0 8px;font-size:14px}
.card-mini p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

.section{padding:22px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.section-head h2{margin:0;font-size:22px}
.section-head p{margin:0;color:var(--muted);font-size:14px;max-width: 130ch}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(16,24,40,.05);
  padding:16px;
}
[data-theme="dark"] .card{box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}

.kpi{display:grid;gap:10px}
.kpi-row{display:flex;gap:10px;flex-wrap:wrap}
.kpi-badge{
  font-size:12px;color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:6px 10px;border-radius:999px
}

footer{
  padding:26px 0 34px;border-top:1px solid var(--line);
  background:var(--surface);margin-top:10px
}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.muted{color:var(--muted);font-size:14px;line-height:1.6}
.links{display:flex;gap:10px;flex-wrap:wrap}
.links a{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.links a:hover{background:var(--surface-2)}

.table{
  width:100%;border-collapse:separate;border-spacing:0;
  overflow:hidden;border-radius:16px;border:1px solid var(--line);
  background:var(--surface)
}
.table th,.table td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.table th{background:var(--surface-2);color:var(--muted);font-weight:700}
.table tr:last-child td{border-bottom:none}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  nav{display:none}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .h1{font-size:32px}
}

.lang{display:inline-flex;gap:8px;align-items:center}
.lang-btn{
  padding:10px 10px;
  border-radius:12px;
  font-weight:800;
  font-size:12px;
  opacity:.9;
}
.lang-btn.is-active{
  background: rgba(218, 8, 8, .22);
  border: 1px solid rgba(218, 8, 8, .55);
  /* color: #fff; */
  box-shadow: 0 10px 20px rgba(218, 8, 8, .18);
}
[data-theme="dark"] .lang-btn.is-active{
  background: rgba(218, 8, 8, .30);
  border: 1px solid rgba(218, 8, 8, .70);
}




/* Информация о МЦ дизайн большого файла */
details.card{padding:0}
details.card summary{
  list-style:none;
  cursor:pointer;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
}
details.card summary::-webkit-details-marker{display:none}
.details-body{padding:0 16px 16px;color:var(--muted);line-height:1.65}

.person{
  display:flex; gap:12px; align-items:flex-start;
}
.avatar{
  width:44px; height:44px; border-radius:14px;
  background: rgba(218,8,8,.16);
  border: 1px solid rgba(218,8,8,.28);
  display:grid; place-items:center;
  font-weight:900; color: var(--red);
  flex:0 0 auto;
}
.person b{display:block}
.person small{color:var(--muted);line-height:1.4}






/* body[data-page="doctors"] main.wrap{

}
body[data-page="doctors"] .section{
  background: transparent;
} */

/* --- Tables (Doctors/Schedule) --- */
.table-wrap{ width:100%; overflow:auto; border-radius:14px; border:1px solid var(--border); }
.table{ width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
.table th, .table td{ padding:12px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); }
.table th{ position:sticky; top:0; background:var(--card); font-weight:700; }
.table tr:last-child td{ border-bottom:none; }
.table td .muted{ display:block; margin-top:4px; }

.input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  outline:none;
  width: 260px;
}
.input:focus{ border-color: rgba(218,8,8,.5); box-shadow: 0 0 0 4px rgba(218,8,8,.10); }

/* Grid helpers (if not already present) */
.grid3{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 1100px){ .grid3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .grid3{ grid-template-columns:1fr; } }


.grid4{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 1100px){ .grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .grid4{ grid-template-columns:1fr; } }


/* ===========================
   OPTION A — DOCTORS CARDS
=========================== */

.filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.workday-list{
  margin:10px 0 0;
  padding-left:18px;
  line-height:1.7;
}

/* Doctors grid */
/* .doctors-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

@media (max-width: 800px){
  .doctors-grid{
    grid-template-columns:1fr;
  }
}

.doctor-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:var(--card);
  transition:.2s ease;
  background-color: #f6f7f9;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.doctor-card:hover{
  border-color: rgba(218,8,8,.4);
}

.doctor-header{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.doctor-name{
  font-weight:700;
  font-size:16px;
}

.doctor-specialty{
  margin-top:6px;
  color:var(--muted);
}

.doctor-focus{
  margin-top:10px;
  line-height:1.6;
  color:var(--text);
}

.doctor-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(218,8,8,.2);
  background:rgba(218,8,8,.08);
} */

/* ===== Doctors page: make cards feel "real" ===== */

/* Give the page a slightly tinted background so white cards pop */
body[data-page="doctors"] main.wrap{
  /* if you already have a page background, skip this block */
}
body[data-page="doctors"] .section{
  /* subtle tint behind cards */
  background: transparent;
}

/* Grid spacing */
.doctors-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:16px;
}
@media (max-width: 900px){
  .doctors-grid{ grid-template-columns:1fr; }
}

/* Real card look */
.doctor-card{
  background: #ffffff;                 /* force white surface */
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow:
    0 10px 25px rgba(15, 23, 42, .08),
    0 2px 6px rgba(15, 23, 42, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover = lifted card */
.doctor-card:hover{
  transform: translateY(-2px);
  border-color: rgba(218, 8, 8, .22);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .12),
    0 6px 14px rgba(15, 23, 42, .08);
}

/* Header typography */
.doctor-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.doctor-name{
  font-weight:800;
  font-size:16px;
  line-height:1.25;
  color:#0b1220;
}
.doctor-specialty{
  margin-top:6px;
  color: rgba(15, 23, 42, .65);
  font-weight:600;
  font-size:13px;
}

/* Focus text */
.doctor-focus{
  margin-top:12px;
  line-height:1.6;
  color: rgba(15, 23, 42, .85);
}

/* Chips: make them look like pills */
.doctor-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.chip{
  background: rgba(218, 8, 8, .08);
  border: 1px solid rgba(218, 8, 8, .20);
  color: rgba(15, 23, 42, .85);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* Optional: small accent line at top of card (nice premium look) */
/* .doctor-card::before{
  content:"";
  display:block;
  height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(218,8,8,.55), rgba(218,8,8,.15));
  margin-bottom:12px;
} */




/* SERVICES */
.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
@media(max-width:900px){
  .grid3{ grid-template-columns:1fr; }
}

.service-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:
    0 10px 25px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.05);
}

.service-card h3{
  margin:0 0 10px;
  font-weight:800;
}

.service-card ul{
  margin:0;
  padding-left:18px;
  line-height:1.65;
}


.service-details summary{
  cursor:pointer;
  font-weight:600;
  margin-top:10px;
  color:var(--red);
}

.service-details[open] summary{
  margin-bottom:8px;
}

.details-body{
  line-height:1.65;
  color:var(--text);
}



/* Expanded diagnostics panel */
.diag-expanded{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  padding:18px;
  box-shadow: 0 18px 45px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.08);
  margin-top:18px;
}

/* Clickable header to go back */
.diag-expanded-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
}

.diag-expanded-title{
  font-weight:900;
  font-size:22px;
  line-height:1.2;
}

.diag-back{
  color: var(--red);
  font-weight:800;
  white-space:nowrap;
}

/* Make paragraphs readable */
.diag-expanded-body{
  margin-top:12px;
  line-height:1.75;
  color: rgba(15,23,42,.88);
}

.diag-expanded-body p{
  margin: 10px 0;
}

.diag-expanded-body ul{
  margin: 10px 0;
  padding-left: 18px;
  line-height: 1.75;
}

/* When a card is in "clickable" mode */
.service-card.is-clickable{
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card.is-clickable:hover{
  transform: translateY(-2px);
  border-color: rgba(218,8,8,.22);
  box-shadow: 0 18px 45px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.08);
}






/* ===== Responsive nav: burger + drawer ===== */

.nav-desktop { display:flex; gap:18px; align-items:center; }
.burger { display:none; }

/* burger icon */
.burger{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(15,23,42,.85);
  border-radius:999px;
}

/* Drawer overlay */
.drawer-overlay{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 999;
}

/* Drawer panel */
.drawer{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(360px, 92vw);
  background:#fff;
  border-left:1px solid rgba(15,23,42,.10);
  box-shadow: -20px 0 60px rgba(15,23,42,.20);
  transform: translateX(105%);
  transition: transform .22s ease;
  z-index: 1000;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.drawer.open{ transform: translateX(0); }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 6px 10px;
}
.drawer-title{
  font-weight:900;
  font-size:16px;
}
.drawer-close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
}

.drawer-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px;
}
.drawer-nav a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.02);
  font-weight:700;
}
.drawer-nav a:hover{
  border-color: rgba(218,8,8,.22);
  background: rgba(218,8,8,.06);
}

.drawer-actions{
  margin-top:auto;
  padding:6px;
}

/* Collapse breakpoint */
@media (max-width: 980px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
}