/* =================================================================
   Ordinace MUDr. Rozmanit – moderní design systém
   ================================================================= */

:root {
    --teal-900:#134e4a; --teal-800:#115e59; --teal-700:#0f766e; --teal-600:#0d9488;
    --teal-500:#14b8a6; --teal-100:#ccfbf1; --teal-50:#f0fdfa;
    --accent:#f97362; --accent-soft:#fff1ef;
    --ink:#0f2620; --slate:#475569; --muted:#64748b; --line:#e6edec;
    --bg:#ffffff; --bg-soft:#f3faf8; --bg-alt:#eef7f5;
    --white:#fff;
    --radius:18px; --radius-lg:26px; --radius-sm:12px;
    --shadow-sm:0 2px 10px rgba(15,46,32,.05);
    --shadow:0 14px 40px -12px rgba(15,46,32,.16);
    --shadow-lg:0 30px 70px -20px rgba(15,46,32,.30);
    --maxw:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --font:'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:'Inter', system-ui, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    margin:0; font-family:var(--font-body); color:var(--ink);
    background:var(--bg); line-height:1.65; font-size:16.5px;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--font); line-height:1.15; margin:0 0 .5em; color:var(--ink); font-weight:700; letter-spacing:-.02em; }
h1 { font-size:clamp(2.1rem,5vw,3.6rem); font-weight:800; }
h2 { font-size:clamp(1.7rem,3.4vw,2.6rem); }
h3 { font-size:1.18rem; }
p { margin:0 0 1rem; }
a { color:var(--teal-700); text-decoration:none; transition:color .2s; }
a:hover { color:var(--teal-600); }
img,svg,iframe { max-width:100%; display:block; }
ul { margin:0; padding:0; list-style:none; }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.skip-link { position:absolute; left:-999px; top:0; background:var(--teal-700); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* ---------- ikony ---------- */
.ic { width:24px; height:24px; flex:0 0 auto; }
.ic-sm { width:18px; height:18px; flex:0 0 auto; }
.rot { transform:rotate(180deg); }

/* ---------- tlačítka ---------- */
.btn {
    display:inline-flex; align-items:center; gap:.55em; justify-content:center;
    padding:.85em 1.5em; border-radius:999px; font-family:var(--font);
    font-weight:600; font-size:.98rem; cursor:pointer; border:1.5px solid transparent;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
    white-space:nowrap; line-height:1; text-decoration:none;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:linear-gradient(135deg,var(--teal-600),var(--teal-700)); color:#fff; box-shadow:0 10px 24px -8px rgba(13,148,136,.6); }
.btn-primary:hover { color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(13,148,136,.7); }
.btn-ghost { background:rgba(255,255,255,.7); color:var(--teal-800); border-color:var(--line); backdrop-filter:blur(6px); }
.btn-ghost:hover { background:#fff; color:var(--teal-800); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-outline { background:transparent; color:var(--teal-700); border-color:var(--teal-600); }
.btn-outline:hover { background:var(--teal-700); color:#fff; }
.btn-light { background:#fff; color:var(--teal-800); }
.btn-light:hover { color:var(--teal-900); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-lg { padding:1.05em 1.9em; font-size:1.05rem; }
.btn-sm { padding:.6em 1.1em; font-size:.88rem; }
.btn-block { width:100%; }

.eyebrow {
    display:inline-flex; align-items:center; gap:.5em; font-family:var(--font);
    font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--teal-700); background:var(--teal-50); padding:.5em 1em; border-radius:999px;
    border:1px solid var(--teal-100);
}
.eyebrow--center { margin:0 auto; }
.eyebrow svg { width:16px; height:16px; }

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
    position:sticky; top:0; z-index:100; transition:all .3s var(--ease);
    background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid transparent;
}
.site-header.is-scrolled { box-shadow:0 6px 24px -12px rgba(15,46,32,.22); border-bottom-color:var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:72px; gap:18px; }
.brand { display:flex; align-items:center; gap:.7em; font-family:var(--font); }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
    background:linear-gradient(135deg,var(--teal-500),var(--teal-700)); color:#fff; box-shadow:0 8px 18px -6px rgba(13,148,136,.6); }
.brand-mark .brand-ic { width:24px; height:24px; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong { font-size:1.05rem; color:var(--ink); font-weight:800; }
.brand-text small { font-size:.68rem; color:var(--muted); letter-spacing:.01em; }

.main-nav { display:flex; align-items:center; gap:1.6rem; }
.main-nav > a { font-family:var(--font); font-weight:600; font-size:.95rem; color:var(--slate); position:relative; }
.main-nav > a::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--teal-600); transition:width .25s var(--ease); border-radius:2px; }
.main-nav > a:hover { color:var(--teal-800); }
.main-nav > a:hover::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:.8rem; }
.lang-switch { display:inline-flex; align-items:center; gap:.35em; font-family:var(--font); font-weight:700; font-size:.85rem;
    color:var(--teal-800); border:1.5px solid var(--line); padding:.45em .8em; border-radius:999px; }
.lang-switch:hover { border-color:var(--teal-500); background:var(--teal-50); }
.nav-toggle { display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px; }

/* =================================================================
   HERO
   ================================================================= */
.hero { position:relative; overflow:hidden; padding:clamp(48px,7vw,96px) 0 clamp(60px,8vw,110px);
    background:linear-gradient(180deg,var(--teal-50) 0%, #ffffff 78%); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.blob-1 { width:540px; height:540px; top:-180px; right:-120px; background:radial-gradient(circle,#a7f3d0,transparent 70%); }
.blob-2 { width:480px; height:480px; bottom:-200px; left:-160px; background:radial-gradient(circle,#bae6fd,transparent 70%); opacity:.5; }
.grid-overlay { position:absolute; inset:0; background-image:linear-gradient(var(--teal-100) 1px,transparent 1px),linear-gradient(90deg,var(--teal-100) 1px,transparent 1px);
    background-size:46px 46px; opacity:.25; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%); }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-title { margin-top:.45em; background:linear-gradient(120deg,var(--ink) 35%,var(--teal-700)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { font-size:1.18rem; color:var(--slate); max-width:42ch; margin-bottom:1.8rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.2rem; }
.hero-badges { display:flex; flex-wrap:wrap; gap:1.3rem; }
.hero-badges li { display:flex; align-items:center; gap:.5em; font-size:.92rem; font-weight:600; color:var(--teal-800); }
.hero-badges svg { color:var(--teal-600); }

.hero-card { display:flex; justify-content:center; }
.hours-card { width:100%; max-width:380px; background:#fff; border-radius:var(--radius-lg); padding:30px;
    box-shadow:var(--shadow-lg); border:1px solid var(--line); position:relative; }
.hours-card::before { content:''; position:absolute; inset:0; border-radius:var(--radius-lg); padding:1.5px;
    background:linear-gradient(140deg,var(--teal-300,#5eead4),transparent 50%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.hours-head { display:flex; align-items:center; gap:.6em; font-family:var(--font); font-weight:700; font-size:1.1rem; color:var(--teal-800); margin-bottom:1.1rem; }
.hours-head svg { color:var(--teal-600); }
.hours-list li { display:flex; justify-content:space-between; align-items:center; padding:.62em 0; border-bottom:1px dashed var(--line); font-size:.98rem; }
.hours-list li:last-child { border-bottom:0; }
.hours-list span { color:var(--slate); }
.hours-list strong { color:var(--teal-800); font-family:var(--font); }
.hours-foot { font-size:.85rem; color:var(--muted); margin:.9rem 0 1.3rem; }

/* =================================================================
   QUICK INFO
   ================================================================= */
.quick { margin-top:-50px; position:relative; z-index:5; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.info-card { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .3s var(--ease); }
.info-card:hover { transform:translateY(-5px); }
.info-ic { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:var(--teal-50); color:var(--teal-700); margin-bottom:1rem; }
.info-card h3 { margin-bottom:.5rem; }
.info-card p { margin:.15rem 0; font-size:.97rem; }
.info-card .muted { color:var(--muted); font-size:.86rem; }
.link-arrow { display:inline-flex; align-items:center; gap:.35em; font-weight:600; margin-top:.4rem; }
.link-arrow svg { transition:transform .2s; }
.link-arrow:hover svg { transform:translateX(4px); }

/* =================================================================
   SECTIONS
   ================================================================= */
.section { padding:clamp(64px,8vw,110px) 0; }
.section--alt { background:var(--bg-soft); }
.section-head { text-align:center; max-width:680px; margin:0 auto clamp(40px,5vw,60px); }
.section-head h2 { margin-top:.5rem; }
.section-sub { color:var(--slate); font-size:1.1rem; }
.muted { color:var(--muted); }
.small { font-size:.9rem; }

/* services */
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal-100); }
.service-ic { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; margin-bottom:1.1rem;
    background:linear-gradient(135deg,var(--teal-50),var(--teal-100)); color:var(--teal-700); }
.service-ic svg { width:28px; height:28px; }
.service-card h3 { margin-bottom:.4rem; }
.service-card p { color:var(--slate); font-size:.96rem; margin:0; }

/* exams */
.exams-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.exam-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; transition:box-shadow .3s,transform .3s var(--ease); }
.exam-card:hover { box-shadow:var(--shadow); transform:translateY(-4px); }
.exam-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.exam-tag { font-family:var(--font); font-weight:800; font-size:.85rem; letter-spacing:.05em; color:#fff;
    background:linear-gradient(135deg,var(--teal-600),var(--teal-800)); padding:.35em .8em; border-radius:8px; }
.exam-ic { color:var(--teal-500); }
.exam-short { color:var(--slate); font-size:.95rem; flex:1; }
.exam-detail { color:var(--slate); font-size:.92rem; border-top:1px dashed var(--line); margin-top:.6rem; padding-top:.9rem; animation:fade .35s var(--ease); }
.exam-detail p { margin:0; }
.exam-toggle { margin-top:1rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.4em; background:none; border:0;
    color:var(--teal-700); font-family:var(--font); font-weight:700; font-size:.9rem; cursor:pointer; padding:0; }
.exam-toggle svg { transition:transform .25s; }
.exam-card.is-open .exam-toggle svg { transform:rotate(90deg); }
@keyframes fade { from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }

/* split (vaccines) */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.split-copy h2 { margin-top:.5rem; }
.vaccine-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vaccine-list li { display:flex; align-items:center; gap:.7em; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-weight:500; font-size:.96rem; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease); }
.vaccine-list li:hover { transform:translateX(4px); }
.tick { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:var(--teal-50); color:var(--teal-600); }

/* recipes */
.recipe-ways { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:30px; }
.way-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.way-card h3 { margin-bottom:.4rem; }
.way-card p { color:var(--slate); font-size:.95rem; }
.recipe-info { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rinfo-block { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.rinfo-block h4 { display:flex; align-items:center; gap:.5em; color:var(--teal-800); margin-bottom:.9rem; font-size:1.02rem; }
.rinfo-block h4 svg { color:var(--teal-600); }
.rinfo-block ul li { position:relative; padding:.4em 0 .4em 1.4em; color:var(--slate); font-size:.93rem; border-bottom:1px dashed var(--line); }
.rinfo-block ul li:last-child { border-bottom:0; }
.rinfo-block ul li::before { content:''; position:absolute; left:0; top:1.05em; width:7px; height:7px; border-radius:50%; background:var(--teal-500); }

/* prep */
.prep-grid { display:grid; grid-template-columns:1.4fr .9fr; gap:28px; align-items:start; }
.prep-blood, .prep-urine { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; }
.prep-blood h3, .prep-urine h3 { display:flex; align-items:center; gap:.5em; color:var(--teal-800); margin-bottom:1.4rem; }
.prep-blood h3 svg, .prep-urine h3 svg { color:var(--teal-600); }
.prep-step { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px dashed var(--line); }
.prep-step:last-child { border-bottom:0; padding-bottom:0; }
.prep-num { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
    background:linear-gradient(135deg,var(--teal-500),var(--teal-700)); color:#fff; font-family:var(--font); font-weight:700; font-size:.95rem; }
.prep-step strong { display:block; font-family:var(--font); color:var(--ink); }
.prep-step p { margin:.2rem 0 0; color:var(--slate); font-size:.92rem; }
.prep-urine { background:linear-gradient(160deg,var(--teal-50),#fff); }
.prep-urine p { color:var(--slate); font-size:.95rem; margin:0; }

/* insurance */
.insurance-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.insurance-chip { display:flex; align-items:center; gap:.7em; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 24px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s; }
.insurance-chip:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.ins-code { font-family:var(--font); font-weight:800; font-size:.8rem; color:#fff; background:var(--teal-600); padding:.25em .55em; border-radius:7px; }
.ins-name { font-family:var(--font); font-weight:700; color:var(--teal-900); font-size:1.05rem; }

/* team */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:40px; }
.member-card { text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 22px; transition:transform .3s var(--ease),box-shadow .3s; }
.member-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.member-avatar { display:grid; place-items:center; width:80px; height:80px; margin:0 auto 1.1rem; border-radius:50%;
    background:linear-gradient(135deg,var(--teal-100),var(--teal-50)); color:var(--teal-700); font-family:var(--font); font-weight:800; font-size:1.6rem; border:2px solid #fff; box-shadow:var(--shadow-sm); }
.member-card h3 { font-size:1.05rem; margin-bottom:.2rem; }
.member-card p { color:var(--muted); font-size:.9rem; margin:0; }
.register-banner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    background:linear-gradient(135deg,var(--teal-50),var(--accent-soft)); border:1px solid var(--teal-100); border-radius:var(--radius-lg); padding:34px 38px; }
.register-banner h3 { margin-bottom:.3rem; }
.register-banner p { color:var(--slate); margin:0; max-width:60ch; }

/* CTA band */
.cta-band { background:linear-gradient(135deg,var(--teal-700),var(--teal-900)); color:#fff; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(255,255,255,.07); top:-200px; right:-100px; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:clamp(48px,6vw,72px) 24px; position:relative; }
.cta-inner h2 { color:#fff; margin-bottom:.3rem; }
.cta-inner p { color:rgba(255,255,255,.85); margin:0; font-size:1.1rem; }

/* contact */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:stretch; }
.contact-info { display:grid; gap:20px; align-content:start; }
.cinfo { display:flex; gap:1rem; align-items:flex-start; }
.cinfo-ic { display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border-radius:13px; background:var(--teal-50); color:var(--teal-700); }
.cinfo h4 { margin:0 0 .2rem; font-size:1rem; }
.cinfo p { margin:0; color:var(--slate); font-size:.96rem; }
.emergency { margin-top:.5rem; }
.emergency h4 { margin-bottom:.7rem; }
.emergency-row { display:flex; gap:14px; flex-wrap:wrap; }
.emergency-chip { display:flex; flex-direction:column; background:var(--accent-soft); border:1px solid #fcd9d3; border-radius:14px; padding:12px 20px; }
.emergency-chip strong { font-family:var(--font); font-size:1.3rem; color:var(--accent); }
.emergency-chip span { font-size:.8rem; color:var(--slate); }
.contact-map { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); min-height:420px; border:1px solid var(--line); }
.contact-map iframe { width:100%; height:100%; min-height:420px; border:0; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer { background:var(--teal-900); color:#cdeee8; padding:64px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); }
.brand--footer .brand-text, .brand--footer strong { color:#fff; }
.brand--footer strong { font-family:var(--font); font-size:1.1rem; }
.footer-brand p { margin-top:1rem; color:#9fd3cb; max-width:34ch; font-size:.95rem; }
.footer-col h4 { color:#fff; font-size:.95rem; margin-bottom:1rem; letter-spacing:.02em; }
.footer-col a, .footer-col p { display:block; color:#a7d8d0; font-size:.92rem; margin:.45rem 0; }
.footer-col a:hover { color:#fff; }
.footer-col p { display:flex; align-items:center; gap:.5em; }
.footer-col p a { display:inline; margin:0; }
.footer-hours { font-weight:600; color:#fff !important; }
.footer-note { color:#7fc0b6 !important; font-size:.82rem !important; display:block !important; line-height:1.6; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:.85rem; color:#8fc8bf; flex-wrap:wrap; gap:10px; }
.footer-bottom a { color:#cdeee8; }

/* FAB */
.fab { position:fixed; bottom:22px; right:22px; z-index:90; display:none; align-items:center; gap:.5em;
    background:linear-gradient(135deg,var(--teal-600),var(--teal-700)); color:#fff; padding:.9em 1.3em; border-radius:999px;
    box-shadow:var(--shadow-lg); font-family:var(--font); font-weight:700; font-size:.92rem; }
.fab:hover { color:#fff; transform:translateY(-2px); }

/* =================================================================
   REVEAL ANIMACE
   ================================================================= */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0ms); }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

/* =================================================================
   BOOKING
   ================================================================= */
.booking-hero { text-align:center; padding:clamp(48px,6vw,80px) 0 0; background:linear-gradient(180deg,var(--teal-50),#fff); }
.booking-hero h1 { margin:.6rem 0 .4rem; }
.booking-section { padding-top:48px; }
.booking-wrap { display:grid; grid-template-columns:1fr 280px; gap:32px; align-items:start; }

.stepper { grid-column:1/-1; display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.stepper li { display:flex; align-items:center; gap:.6em; flex:1; min-width:160px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:14px; color:var(--muted); font-family:var(--font); font-weight:600; font-size:.92rem; transition:all .3s var(--ease); }
.step-num { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--bg-alt); color:var(--slate); font-size:.85rem; flex:0 0 auto; transition:all .3s; }
.stepper li.is-active { border-color:var(--teal-500); background:var(--teal-50); color:var(--teal-800); box-shadow:var(--shadow-sm); }
.stepper li.is-active .step-num { background:var(--teal-600); color:#fff; }
.stepper li.is-done .step-num { background:var(--teal-600); color:#fff; }

.booking-card { grid-column:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow); }
.step-title { margin-bottom:1.4rem; }
.step-sub { font-size:1rem; color:var(--teal-800); margin-bottom:.8rem; }
.step { animation:stepIn .4s var(--ease); }
@keyframes stepIn { from{opacity:0; transform:translateX(12px);} to{opacity:1; transform:none;} }

/* doctor pick */
.doctor-pick { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
.doctor-opt input { position:absolute; opacity:0; pointer-events:none; }
.doctor-card { display:flex; align-items:center; gap:1rem; padding:18px; border:1.5px solid var(--line); border-radius:16px; cursor:pointer; transition:all .25s var(--ease); position:relative; }
.doctor-card:hover { border-color:var(--teal-300,#5eead4); background:var(--teal-50); }
.doctor-av { display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--teal-50); color:var(--teal-700); }
.doctor-av svg { width:26px; height:26px; }
.doctor-meta strong { display:block; font-family:var(--font); font-size:1rem; }
.doctor-meta small { color:var(--muted); font-size:.85rem; }
.doctor-check { margin-left:auto; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); color:#fff; transition:all .25s; }
.doctor-check svg { width:14px; height:14px; opacity:0; }
.doctor-opt input:checked + .doctor-card { border-color:var(--teal-600); background:var(--teal-50); box-shadow:0 0 0 3px var(--teal-100); }
.doctor-opt input:checked + .doctor-card .doctor-check { background:var(--teal-600); border-color:var(--teal-600); }
.doctor-opt input:checked + .doctor-card .doctor-check svg { opacity:1; }
.doctor-opt input:focus-visible + .doctor-card { outline:2px solid var(--teal-500); outline-offset:2px; }

/* datetime */
.datetime-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.calendar { background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:18px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-family:var(--font); }
.cal-nav { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; color:var(--teal-700); }
.cal-nav:first-child svg { transform:rotate(180deg); }
.cal-nav:disabled { opacity:.35; cursor:not-allowed; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow { margin-bottom:6px; }
.cal-dow-cell { text-align:center; font-size:.72rem; font-weight:700; color:var(--muted); padding:4px 0; }
.cal-day { aspect-ratio:1; border:0; background:#fff; border-radius:10px; cursor:pointer; font-family:var(--font); font-weight:600; font-size:.92rem; color:var(--ink); transition:all .2s; border:1px solid transparent; }
.cal-day:hover:not(:disabled) { background:var(--teal-50); border-color:var(--teal-200,#99f6e4); }
.cal-day.is-off { color:#cbd5e1; background:transparent; cursor:not-allowed; }
.cal-day.is-today { box-shadow:inset 0 0 0 1.5px var(--teal-300,#5eead4); }
.cal-day.is-sel { background:var(--teal-600); color:#fff; box-shadow:0 6px 14px -4px rgba(13,148,136,.6); }

.slots-wrap { min-height:200px; }
.slots-hint { color:var(--muted); font-size:.92rem; background:var(--bg-soft); border:1px dashed var(--line); border-radius:14px; padding:24px; text-align:center; }
.slot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
.slot { padding:.7em 0; border:1.5px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; font-family:var(--font); font-weight:600; font-size:.9rem; color:var(--teal-800); transition:all .2s; }
.slot:hover { border-color:var(--teal-500); background:var(--teal-50); }
.slot.is-sel { background:var(--teal-600); color:#fff; border-color:var(--teal-600); box-shadow:0 6px 14px -4px rgba(13,148,136,.5); }

.step-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }

/* form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { display:flex; flex-direction:column; gap:.4em; }
.field--full { grid-column:1/-1; }
.field > span { font-family:var(--font); font-weight:600; font-size:.9rem; color:var(--ink); }
.field > span small { color:var(--muted); font-weight:400; }
.field input, .field textarea { padding:.8em 1em; border:1.5px solid var(--line); border-radius:12px; font-family:var(--font-body); font-size:.98rem; background:#fff; transition:border-color .2s,box-shadow .2s; resize:vertical; }
.field input:focus, .field textarea:focus { outline:0; border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); }
.field input.is-invalid { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.seg { display:flex; gap:10px; flex-wrap:wrap; }
.seg label { flex:1; min-width:140px; }
.seg input { position:absolute; opacity:0; }
.seg span { display:block; text-align:center; padding:.75em 1em; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; font-family:var(--font); font-weight:600; font-size:.92rem; color:var(--slate); transition:all .2s; }
.seg input:checked + span { border-color:var(--teal-600); background:var(--teal-50); color:var(--teal-800); box-shadow:0 0 0 2px var(--teal-100); }

/* summary */
.summary { display:grid; gap:2px; background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.sum-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; background:#fff; }
.sum-row span { color:var(--muted); font-size:.9rem; }
.sum-row strong { font-family:var(--font); text-align:right; }
.book-note { margin-top:24px; background:var(--teal-50); border:1px solid var(--teal-100); border-radius:16px; padding:22px 24px; }
.book-note h4 { display:flex; align-items:center; gap:.5em; color:var(--teal-800); margin-bottom:.8rem; font-size:1rem; }
.book-note ul li { position:relative; padding:.3em 0 .3em 1.3em; color:var(--slate); font-size:.92rem; }
.book-note ul li::before { content:''; position:absolute; left:0; top:.85em; width:6px; height:6px; border-radius:50%; background:var(--teal-500); }
.form-error { margin-top:18px; background:var(--accent-soft); border:1px solid #fcd9d3; color:#c0392b; padding:12px 16px; border-radius:12px; font-size:.92rem; }

/* done */
.done-card { text-align:center; max-width:520px; margin:0 auto; padding:20px 0; }
.done-ic { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 1.4rem; border-radius:50%;
    background:linear-gradient(135deg,var(--teal-500),var(--teal-700)); color:#fff; box-shadow:0 16px 34px -10px rgba(13,148,136,.7); animation:pop .5s var(--ease); }
.done-ic svg { width:42px; height:42px; stroke-width:2.4; }
@keyframes pop { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;} }
.summary--done { margin:1.4rem 0; text-align:left; }
.done-ref { margin-top:1rem; font-size:.95rem; color:var(--slate); }
.done-ref strong { color:var(--teal-700); font-family:var(--font); }
.done-actions { display:flex; gap:12px; justify-content:center; margin-top:1.6rem; flex-wrap:wrap; }

/* booking side */
.booking-side { grid-column:2; display:grid; gap:16px; position:sticky; top:90px; }
.side-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); }
.side-card h3 { display:flex; align-items:center; gap:.5em; font-size:.95rem; color:var(--teal-800); margin-bottom:.5rem; }
.side-card h3 svg { color:var(--teal-600); }
.side-card p { margin:0; color:var(--slate); font-size:.95rem; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:980px) {
    .hero-inner { grid-template-columns:1fr; }
    .hero-card { order:-1; max-width:420px; margin:0 auto; }
    .hero-badges { gap:1rem; }
    .quick-grid, .cards-grid, .recipe-info, .team-grid { grid-template-columns:repeat(2,1fr); }
    .split, .prep-grid, .contact-grid, .recipe-ways { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
    .booking-wrap { grid-template-columns:1fr; }
    .booking-card, .stepper { grid-column:1; }
    .booking-side { grid-column:1; grid-template-columns:repeat(3,1fr); position:static; }
}

@media (max-width:760px) {
    .nav-toggle { display:block; }
    .main-nav { position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
        background:#fff; padding:12px 24px 24px; box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .35s var(--ease); border-bottom:1px solid var(--line); }
    body.nav-open .main-nav { transform:translateY(0); }
    .main-nav > a { padding:14px 0; border-bottom:1px solid var(--line); }
    .nav-actions { padding-top:14px; justify-content:space-between; }
    .nav-actions .btn { flex:1; }
    .fab { display:inline-flex; }
    .datetime-grid, .form-grid, .doctor-pick { grid-template-columns:1fr; }
    .stepper li .step-label { display:none; }
    .stepper li { min-width:0; flex:0 0 auto; justify-content:center; }
    .stepper li.is-active .step-label { display:inline; }
    .cta-inner { flex-direction:column; align-items:flex-start; }
    .register-banner { flex-direction:column; align-items:flex-start; }
    .booking-side { grid-template-columns:1fr; }
}

@media (max-width:480px) {
    body { font-size:16px; }
    .quick-grid, .cards-grid, .recipe-info, .team-grid, .vaccine-list, .footer-grid { grid-template-columns:1fr; }
    .container { padding:0 18px; }
    .hero-cta .btn { flex:1; }
}