/* ===== Base reset ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body{ overflow-x:hidden; }

/* ===== Proměnné ===== */
:root{
  --bg:#0f1114;
  --panel:#14181f;
  --panel2:#101319;
  --text:#e9edf2;
  --muted:#aab4c0;
  --line:rgba(255,255,255,.10);
  --red:#d21414;
  --red2:#ff2b2b;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --radius:14px;
  --radius2:10px;
  --maxw:1320px;

  /* Sticky offset – fallback (JS přepíše na reálnou výšku sticky MENU) */
  --stickyOffset: 62px;        /* desktop headmenu */
  --stickyOffset_m: 0px;       /* tablet/mobil: headmenu je hidden -> offset 0 */
  --stickyOffset_s: 0px;
}

:root{
  color-scheme: dark;
}


/* fallback bez JS: přepni jen --stickyOffset */
@media (max-width: 980px){
  :root{ --stickyOffset: var(--stickyOffset_m); }
}
@media (max-width: 560px){
  :root{ --stickyOffset: var(--stickyOffset_s); }
}

/* ===== Kotvy (#sekce) – jedna pravda: používá se jen --stickyOffset ===== */
html{
  scroll-padding-top: calc(var(--stickyOffset) + 8px);
}
section[id]{
  scroll-margin-top: calc(var(--stickyOffset) + 8px);
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(210,20,20,.18), transparent 70%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,43,43,.10), transparent 55%),
    linear-gradient(180deg, #0d0f12 0%, #0f1114 60%, #0b0c0f 100%);
  color:var(--text);
  line-height:1.45;
}

a{color:inherit; text-decoration:none}

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

/* rozšířený container jen pro header */
.container.headerWide{
  max-width:1600px;
  padding-left:6px;   /* auto víc doleva */
  padding-right:18px;
}

/* Top bar */
.topbar{
  background: rgba(0,0,0,.35);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  font-size:20px;
  color:var(--muted);
}
.topbar__left{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(210,20,20,.15);
}

/* =========================================================
   HEADER (AUTO | TITLE | (MONEY + PHONE)) + headmenu
   ========================================================= */

/* ❗FIX: header NESMÍ řezat drawer (byl overflow:hidden) */
header{
  overflow-x:hidden;
  overflow-y:visible;
}

/* DŮLEŽITÉ: header NENÍ sticky (sticky je jen .headmenu) */
header{
  position:relative;
  top:auto;
  z-index:50;
  background: rgba(20,20,20,.92);
  border-bottom: 4px solid var(--red);
  backdrop-filter: blur(10px);
}

/* Desktop grid: auto | title | right */
header .header__row{
  display:grid;
  grid-template-columns: minmax(260px, 360px) minmax(420px, 1fr) auto;
  align-items:center;
  column-gap:18px;
  padding:14px 0;
}

/* AUTO */
header .hdr-auto{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}
header .brand__logo{
  width:320px;
  max-width:320px;
  height:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
  margin:0;
}

/* TITLE */
header .hdr-title{
  min-width:0;
  text-align:center;
  justify-self:center;
  line-height:1.05;
  padding:0 10px;
}
header .hdr-title .big-title{
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight:900;
  letter-spacing:.4px;
  margin:0;
  color:#fff;
  text-shadow: 0 6px 14px rgba(0,0,0,.55);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* FIX “oříznutého Y” */
  line-height:1.12;
  padding-top:4px;
  padding-bottom:6px;
}
header .hdr-title .big-sub{
  display:block;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  margin-top:4px;
  color:rgba(255,255,255,.88);
  text-align:center;
}

/* RIGHT: money + phone */
header .hdr-right{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
}
header .hdr-money{
  display:flex;
  align-items:center;
  justify-content:center;
}
header .hdr-money img{
  width:200px;
  max-width:200px;
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
}

header .header__cta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;

  /* FIX: jistota, že CTA vrstvy jsou klikatelné */
  position:relative;
  z-index:120;
}

.btn--call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  border-radius:22px;
  background: linear-gradient(180deg, var(--red2), var(--red));
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-weight:900;
  font-size:26px;
  letter-spacing:.6px;
  white-space:nowrap;
  box-shadow: 0 14px 30px rgba(210,20,20,.55);
}
.btn--call:hover{
  filter:brightness(1.06);
  box-shadow: 0 18px 36px rgba(210,20,20,.65);
}

/* hamburger default hidden (jen mobil) */
.hamburger{
  display:none;                 /* zapne se v @media */
  width:44px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  cursor:pointer;

  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  color:var(--text);

  /* FIX: aby šel klikat */
  position:relative;
  z-index:130;
  pointer-events:auto;
  touch-action: manipulation;
}
.hamburger:hover{ background:rgba(255,255,255,.06); }
.hamburger:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(210,20,20,.18);
  border-color:rgba(210,20,20,.55);
}

/* červená lišta menu – STICKY */
.headmenu{
  position:sticky;
  top:0;
  z-index:60;
  background: var(--red);
  border-top: 1px solid rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.headmenu__nav{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 0;
}
.headmenu__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.55);
  background: rgba(0,0,0,.12);
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  white-space:nowrap;
}
.headmenu__link:hover{
  background: rgba(0,0,0,.22);
  border-color: rgba(0,0,0,.75);
}

/* Drawer */
/* ❗FIX: Drawer jako panel POD headerem + nad obsahem */
.drawer{
  border-top:1px solid var(--line);
  background:rgba(15,17,20,.96);
  backdrop-filter: blur(8px);

  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:125;

  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.drawer[hidden]{ display:none !important; }  /* respektuje hidden atribut */

.drawer__links{
  display:flex;
  flex-direction:column;
  padding:10px 0 14px;
}
.drawer__links a{
  padding:12px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--text);
}
.drawer__links a:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
}

/* výraznější CTA v draweru (odkaz "Ocenit vůz") */
.drawer__cta{
  border-color:rgba(210,20,20,.45) !important;
  background:rgba(210,20,20,.10) !important;
}

/* Mobil/tablet */
@media (max-width: 980px){
  .hamburger{ display:inline-flex; }

  /* schovej červený pruh, použij drawer */
  .headmenu{ display:none; }

  /* aby drawer nepřetekl přes obrazovku */
  .drawer{
    max-height: calc(100vh - 16px);
    overflow:auto;
  }
}

/* HEADER responsive */
@media (max-width: 1400px){
  header .brand__logo{ width:300px; max-width:300px; }
  header .hdr-money img{ width:190px; max-width:190px; }
  .btn--call{ font-size:24px; padding:14px 22px; }
}

@media (max-width: 1280px){
  header .hdr-money img{ width:170px; max-width:170px; }
  .btn--call{ font-size:22px; padding:14px 20px; }
}

@media (max-width: 1200px){
  .container.headerWide{ padding-left: 12px; }
  header .header__row{
    grid-template-columns: minmax(240px, 300px) minmax(360px, 1fr) auto;
  }
  header .brand__logo{ width:270px; max-width:270px; }
  header .hdr-money img{ width:160px; max-width:160px; }
  .btn--call{ font-size:20px; padding:12px 18px; }
}

/* TABLET */
@media (max-width: 980px){
  header .header__row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "auto phone"
      "title title"
      "money money";
    gap:10px 12px;
    padding:12px 0;
  }

  .hdr-auto{ grid-area:auto; }
  .header__cta{ grid-area:phone; justify-self:end; }
  .hdr-title{ grid-area:title; }
  .hdr-money{ grid-area:money; }

  header .brand__logo{ width:210px; max-width:210px; }
  header .hdr-title .big-title{
    font-size:40px;
    line-height:1.12;
    padding-bottom:2px;
  }
  header .hdr-title .big-sub{ font-size:12px; }
  header .hdr-money img{ width:140px; max-width:140px; }

  .btn--call{
    font-size:18px;
    padding:12px 14px;
    border-radius:16px;
    box-shadow: 0 10px 22px rgba(210,20,20,.35);
  }
}

/* SMALL MOBILE */
@media (max-width: 560px){
  header .header__row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "auto"
      "title"
      "money"
      "phone";
    justify-items:center;
    gap:10px;
  }

  header .brand__logo{ width:200px; max-width:200px; }

  header .hdr-title .big-title{
    font-size:34px;
    line-height:1.15;
    padding-bottom:6px;
    overflow:visible;
    white-space:normal;
  }

  header .hdr-money img{ width:120px; max-width:120px; }

  header .header__cta{
    width:100%;
    justify-self:center;
    justify-content:center;
  }
  .btn--call{
    width:100%;
    justify-content:center;
    font-size:18px;
    padding:14px 16px;
  }
}

/* =========================================================
   Hero + zbytek stránky
   ========================================================= */

.hero{ padding:10px 0 16px; }

.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:stretch;
}

.hero__left{
  padding:26px;
  border-radius:var(--radius);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(210,20,20,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero__left:after{
  content:"";
  position:absolute;
  right:-140px;
  top:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,43,43,.35), transparent 70%);
  filter:blur(2px);
  opacity:.9;
}

/* kicker */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  margin-bottom:10px;
}
.kicker span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* NOVĚ: kicker nad formulářem – lehce kompaktnější */
.kicker--card{
  margin:0 0 10px;
}
.kicker--card span{
  font-size:12px;
  padding:6px 10px;
}

h1{
  margin:8px 0 10px;
  font-size:42px;
  line-height:1.05;
  letter-spacing:.2px;
}
.sub{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;
  max-width:56ch;
}

.benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
  position:relative;
  z-index:2;
}
.benefit{
  display:flex;
  gap:10px;
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}
.check{
  width:22px;
  height:22px;
  border-radius:6px;
  background:rgba(210,20,20,.18);
  border:1px solid rgba(210,20,20,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:var(--red2);
  flex:0 0 auto;
}
.benefit b{display:block; font-size:16px}
.benefit small{display:block; margin-top:2px; color:var(--muted); font-size:14px}

/* Form card */
.card{
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  height:100%;
}

.card__head{
  padding:18px 18px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.card__headRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.card__body{
  padding:16px 18px 18px;
  flex:1;
  display:flex;
}

.card__body form{
  flex:1;
  display:flex;
  flex-direction:column;
}
.card__body form .grid{
  flex:1;
}
.card__title{
  margin:0;
  font-size:25px;
  font-weight:900;
  letter-spacing:.2px;
}

.card__hint{
  margin:6px 0 0;
  color:var(--muted);
  font-size:25px;
}

form{margin:0}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
input,select, textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--text);
  padding:11px 12px;
  outline:none;
  font-size:14px;
}
/* ---------------------------------------------------
   CUSTOM SELECT – dark highlight (NO BLUE ANYWHERE)
   --------------------------------------------------- */

#palivo{
  width:100%;
  background: rgb(19,20,23);
  color: var(--text);
  padding: 11px 12px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid rgb(49, 50, 52);
  outline: none;
  color-scheme: dark;
  

  /* lepší šipka vizuálně */
  appearance: auto; /* nech native */
}

#palivo:focus{
  border-color: rgba(210,20,20,.55);
  box-shadow: 0 0 0 4px rgba(210,20,20,.16);
}

/* optiony – funguje všude, ale Chrome může stále přebít aktivní řádek modře */
#palivo option{
  background: rgb(19,20,23);
  color: var(--text);
}

/* hover/selected – Firefox často OK, Chrome někdy ignoruje */
#palivo option:hover{
  background: rgb(27,34,48);
  color: #fff;
}
#palivo option:checked{
  background: rgb(27,34,48);
  color: #fff;
}


/* FOCUS (modrá systémová = přebít) */
#palivo option:focus {
  background: #1e2633 !important;
  color: #fff !important;
}

/* Edge/Windows HIGH-CONTRAST fix – musí tu být */
@media (forced-colors: active) {
  #palivo option:checked,
  #palivo option:hover,
  #palivo option:focus {
    forced-color-adjust: none;
  }
}





/* tvoje globální focus pro ostatní prvky může zůstat */
input:focus, select:focus, textarea:focus{
  border-color: rgba(210,20,20,.55);
  box-shadow: 0 0 0 4px rgba(210,20,20,.16);
}

textarea{min-height:92px; resize:vertical}
.span2{grid-column:1 / -1}

.form__row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  flex-wrap:wrap;
}
.fineprint{
  font-size:12px;
  color:var(--muted);
  margin:0;
}
.fineprint a{color:#fff; border-bottom:1px dotted rgba(255,255,255,.35)}

.form__actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn--red{
  background: linear-gradient(180deg, var(--red2), var(--red));
  border-color: rgba(255,255,255,.10);
  box-shadow:0 10px 20px rgba(210,20,20,.22);
}
.btn--red:hover{
  filter:brightness(1.03);
  box-shadow:0 14px 26px rgba(210,20,20,.28);
}
.btn--ghost{
  background:transparent;
  border-color: rgba(210,20,20,.45);
  color:var(--text);
}
.btn--ghost:hover{
  background:rgba(210,20,20,.10);
  border-color: rgba(210,20,20,.65);
}
.btn--block{
  height:48px;
  padding:0 18px;
  border-radius:14px;
}

.photos{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.photoRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.photoRow input[type="file"]{padding:9px 10px}

.linkbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.linkbtn:hover{background:rgba(255,255,255,.06)}
.linkbtn--red{
  border-color: rgba(210,20,20,.40);
  background: rgba(210,20,20,.10);
}
.linkbtn--red:hover{
  background: rgba(210,20,20,.16);
  border-color: rgba(210,20,20,.55);
}

/* Sections */
.section{padding:18px 0}
.section__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}
.panel{
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  padding:16px;
}
.panel h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:900;
}
.panel h2{
  margin:0 0 6px;
  font-size:16px;
  font-weight:900;
}
.panel p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.mini{
  border-radius:var(--radius);
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  padding:16px;
  min-height:110px;
}
.mini b{display:block; font-size:14px; margin-bottom:6px}
.mini small{color:var(--muted); font-size:12px}

.reviews{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:14px;
  align-items:stretch;
}
.quote{
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  padding:16px;
}
.stars{letter-spacing:2px; color:#ffd36a; font-size:14px}
.quote p{margin:10px 0 0; color:var(--muted); font-size:13px}
.who{margin-top:10px; font-weight:900; font-size:13px}

/* Footer */
footer{
  margin-top:18px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.28);
  padding:18px 0;
  color:var(--muted);
  font-size:13px;
}
.footer__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer__links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.footer__links a{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
.footer__links a:hover{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
}

/* Sticky call button (mobile) */
.stickyCall{
  display:none;
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:60;
  gap:10px;
}
.stickyCall .btn{flex:1}
@media (max-width: 560px){
  .stickyCall{display:flex}
  body{padding-bottom:86px}
}

.topbar__phone{
  color:#fff;
  font-weight:900;
  text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.35);
}
.topbar__phone:hover{
  border-bottom-color: rgba(255,255,255,.7);
}

/* =========================================================
   HERO responsive (aby karta i levý box byly OK na mobilu)
   ========================================================= */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .benefits{ grid-template-columns: 1fr; }
}

.hero__left .kicker{ display:none; }

.kicker--top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.kicker--top span{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
  font-size:12px;
  color:var(--muted);
}

/* HERO: pod sebe (podle nákresu) */
.hero__grid{
  grid-template-columns: 1fr !important;
  gap:18px;
}

/* ať karta není "flex divná" a nic nezmizí */
.card__body{
  display:block !important;
  flex: unset !important;
}

/* form ať se chová normálně */
.card__body form{
  display:block !important;
}

/* =========================================================
   MOBIL (i když je zapnutá "desktop site"/web verze)
   - zařízení bez hoveru = telefon/tablet
   ========================================================= */
@media (hover: none) and (pointer: coarse){

  /* schovej topbar (topbar.php) */
  .topbar{ display:none !important; }

  /* zapni hamburger vždy na telefonu */
  .hamburger{ display:inline-flex !important; }

  /* schovej červený sticky headmenu, použij drawer */
  .headmenu{ display:none !important; }

  /* drawer ať je použitelný */
  .drawer{
    max-height: calc(100vh - 16px);
    overflow:auto;
  }

  /* zmenši auto a peníze v headeru (aby se vešly) */
  header .brand__logo{
    width:210px !important;
    max-width:210px !important;
  }
  header .hdr-money img{
    width:140px !important;
    max-width:140px !important;
  }

  /* CTA telefon ať není obří */
  .btn--call{
    font-size:18px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
  }

  /* header grid použij tablet layout i v desktop site */
  header .header__row{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "auto phone"
      "title title"
      "money money";
    gap:10px 12px !important;
    padding:12px 0 !important;
  }

  .hdr-auto{ grid-area:auto; }
  .header__cta{ grid-area:phone; justify-self:end; }
  .hdr-title{ grid-area:title; }
  .hdr-money{ grid-area:money; }
}
/* ============================================
   MOBILNÍ HEADER – úpravy pro malé displeje
   ============================================ */

@media (max-width: 640px){

  /* 1) Schovat celý topbar */
  .topbar{
    display: none !important;
  }

  /* 2) Zmenšit auto */
  header .brand__logo{
    width: 160px !important;
    max-width: 160px !important;
  }

  /* 3) Schovat peníze */
  header .hdr-money{
    display: none !important;
  }

  /* 4) Přidat mobilní textovou verzi pod telefon */
  .mobileHeadline{
    display: block !important;
    text-align: center;
    color: #fff;
    margin-top: 10px;
    line-height: 1.2;
  }
  .mobileHeadline small{
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
  }

  /* CTA tlačítko celé přes řádek, vedle něj hamburger */
  header .header__cta{
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
  .btn--call{
    flex: 1;
    font-size: 18px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  /* hamburger napravo */
  .hamburger{
    width: 46px !important;
    height: 42px !important;
    flex: 0 0 auto;
  }

  /* 5) Zmenšit celkovou výšku headeru */
  header .header__row{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "auto phone"
      "mh mh";  /* mobile headline */
    padding: 10px 0 !important;
  }

  /* Mobile headline umístit */
  .hdr-title{
    display: none !important; /* schová desktop text */
  }

 
}

/* ============================================
   RESPONSIVE HEADER – FINÁL
   - <=900px: schovat TOPBAR + PENÍZE, zmenšit auto
   - <=640px: auto NAD telefon (na střed), text POD telefonem
   - <=420px: extra kompaktní
   ============================================ */

/* 1) Menší rozlišení */
@media (max-width: 900px){
  .topbar{ display:none !important; }
  header .hdr-money{ display:none !important; }

  header .brand__logo{
    width:180px !important;
    max-width:180px !important;
  }
}

/* 2) Mobil: auto nad telefon, text pod telefonem */
@media (max-width: 640px){

  header .header__row{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "auto"
      "phone"
      "title";
    justify-items:center;
    text-align:center;
    gap:10px !important;
    padding:12px 0 !important;
  }

  /* Přiřazení oblastí */
  header .hdr-auto{
    grid-area:auto;
    width:100%;
    display:flex;
    justify-content:center;
  }
  header .hdr-right{
    grid-area:phone;
    width:100%;
    display:flex;
    justify-content:center;
  }
  header .hdr-title{
    grid-area:title;
    display:block !important;
    width:100%;
    padding:0 10px;
  }

  /* Auto ještě menší */
  header .brand__logo{
    width:155px !important;
    max-width:155px !important;
    margin:0 auto !important;
  }

  /* Peníze pryč */
  header .hdr-money{ display:none !important; }

  /* Telefon + hamburger uprostřed a ať se neřeže */
  header .header__cta{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:nowrap;
  }

  .btn--call{
    width:min(520px, 100%) !important;
    max-width:100% !important;
    font-size:17px !important;
    padding:14px 14px !important;
    border-radius:18px !important;
    box-sizing:border-box;
  }

  .hamburger{
    flex:0 0 auto;
    width:46px !important;
    height:42px !important;
  }

  /* Text pod telefonem kompaktní */
  header .hdr-title .big-title{
    font-size:26px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    margin:0 !important;
  }
  header .hdr-title .big-sub{
    font-size:12px !important;
    margin-top:4px !important;
  }
}

/* 3) Extra malý mobil */
@media (max-width: 420px){
  header .brand__logo{
    width:145px !important;
    max-width:145px !important;
  }
  .btn--call{ font-size:16px !important; }
  header .hdr-title .big-title{ font-size:23px !important; }
  header .hdr-title .big-sub{ font-size:11px !important; }
}

/* ============================================
   RESPONSIVE HEADER (fix desktop + mobil pořadí)
   1) text 2) auto 3) telefon
   ============================================ */

@media (max-width: 900px){
  .topbar{ display:none !important; }
  header .hdr-money{ display:none !important; }
  header .hdr-money img{ display:none !important; }
}

@media (max-width: 640px){

  header .header__row{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "auto"
      "phone";
    justify-items:center;
    text-align:center;
    gap:10px !important;
    padding:12px 0 !important;
  }

  header .hdr-title{ grid-area:title; width:100%; padding:0 10px; }
  header .hdr-auto{ grid-area:auto; width:100%; display:flex; justify-content:center; }
  header .hdr-right{ grid-area:phone; width:100%; display:flex; justify-content:center; }

  header .brand__logo{
    width:155px !important;
    max-width:155px !important;
    margin:0 auto !important;
  }

  header .header__cta{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:nowrap;
  }

  .btn--call{
    width:min(520px, 100%) !important;
    max-width:100% !important;
    font-size:17px !important;
    padding:14px 14px !important;
    border-radius:18px !important;
    box-sizing:border-box;
  }

  .hamburger{
    flex:0 0 auto;
    width:46px !important;
    height:42px !important;
  }

  header .hdr-title .big-title{
    font-size:26px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    margin:0 !important;
  }
  header .hdr-title .big-sub{
    font-size:12px !important;
    margin-top:4px !important;
  }
}

@media (max-width: 420px){
  header .brand__logo{ width:145px !important; max-width:145px !important; }
  .btn--call{ font-size:16px !important; }
  header .hdr-title .big-title{ font-size:23px !important; }
  header .hdr-title .big-sub{ font-size:11px !important; }
}

/* ============================================
   MOBIL: Drawer jako overlay nad obsahem
   - menu se ukáže hned (bez scrollu)
   ============================================ */

/* ============================================
   TYPEAHEAD (ghost)
   ============================================ */
.typeahead{ position: relative; }

.typeahead__ghost{
  position:absolute;
  left:14px;          /* uprav podle paddingu inputu */
  top:36px;           /* uprav podle výšky labelu */
  pointer-events:none;
  color:rgba(255,255,255,.35);
  font-size:14px;
  line-height:44px;   /* jako výška inputu */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100% - 28px);
}

/* ============================================
   HEADMENU (UL) – jednotně
   ============================================ */
.headmenu__nav{ display:block; }

.headmenu__list{
  list-style:none;
  margin:0;
  padding:10px 0;
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.headmenu__list > li{ margin:0; padding:0; }

.headmenu__link{
  width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* ============================================
   O NÁS – moderní layout
   (beze změn, jen přehledně ponecháno)
   ============================================ */
.page{ background: transparent; }

.pageHero{ padding: 26px 0 10px; }

.pageHero__inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px){
  .pageHero__inner{ grid-template-columns: 1fr; }
}

.eyebrow{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  font-weight:800;
  letter-spacing:.2px;
  margin: 0 0 10px;
}

.pageHero__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05;
}

.pageHero__lead{
  margin: 0 0 14px;
  opacity: .92;
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}

.pageHero__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 12px 0 10px;
}

.pageHero__badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  font-weight:800;
  font-size: 13px;
}

.pageHero__card{
  border-radius: 18px;
  border: 1px solid rgba(233, 237, 242, 1);
  background: rgba(0,0,0,.35);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.statGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  padding: 12px;
}

.stat__kicker{ opacity:.75; font-weight:800; font-size:12px; }
.stat__value{ font-weight:1000; font-size:20px; margin-top:4px; }
.stat__note{ opacity:.75; font-size:12px; margin-top:2px; }

.miniNote{
  margin-top: 12px;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,0,0,.10);
}

.sectionTitle{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 1000;
}

.section--tight{ padding-top: 26px; padding-bottom: 26px; }

.section--alt{
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cardsGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px){ .cardsGrid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .cardsGrid{ grid-template-columns: 1fr;} }

.card{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(233, 237, 242, 0.95);
  background: rgba(0,0,0,.30);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.card__title{ margin: 0 0 8px; font-size: 20px; font-weight: 1000; }
.card__text{ margin: 0; opacity: .9; line-height: 1.55; }

.steps{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
}

.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}

.step__num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  background: rgba(255,0,0,.22);
  border: 1px solid rgba(255,0,0,.35);
}

.step__body h3{ margin: 0 0 4px; font-weight: 1000; }
.step__body p{ margin: 0; opacity:.9; line-height: 1.55; }

.callout{
  margin-top: 14px;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,0,0,.35);
  background: linear-gradient(180deg, rgba(255,0,0,.16), rgba(0,0,0,.25));
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.callout__title{ font-weight: 1000; font-size: 16px; margin:0 0 6px; }
.callout__text{ opacity:.92; margin:0 0 10px; line-height:1.55; }
.callout__cta{ display:flex; gap:10px; flex-wrap:wrap; }

.reviewsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 950px){ .reviewsGrid{ grid-template-columns: 1fr; } }

.quoteCard{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
}

.quoteCard h3{ margin: 6px 0 8px; font-weight: 1000; }
.quoteCard p{ margin: 0 0 10px; opacity:.92; line-height:1.55; }
.quoteCard .who{ opacity:.75; font-size: 13px; }
.quoteCard .stars{ font-weight:1000; letter-spacing:1px; }

.faq{ display:grid; gap:10px; }

.faq__item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  padding: 12px 14px;
}

.faq__item > summary{
  cursor:pointer;
  font-weight: 1000;
  list-style:none;
}
.faq__item > summary::-webkit-details-marker{ display:none; }

.faq__body{ margin-top: 8px; opacity:.92; line-height: 1.55; }

.finalCta{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:center;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
}

@media (max-width: 850px){
  .finalCta{ flex-direction: column; align-items: flex-start; }
}

.finalCta__title{ margin:0 0 6px; font-weight:1000; }
.finalCta__text{ margin:0; opacity:.9; }
.finalCta__actions{ display:flex; gap:10px; flex-wrap:wrap; }


/* =========================================================
   DRAWER – SINGLE SOURCE OF TRUTH (put at END)
   ========================================================= */

/* Default hidden + open state */
#drawer{ display:none; }
#drawer[hidden]{ display:none !important; }
#drawer.is-open{ display:block !important; }

/* Lock background scroll when drawer open */
html.drawer-open,
html.drawer-open body{
  overflow:hidden !important;
  height:100%;
}

/* Hamburger clickable */
#siteHeader{ position: relative; z-index: 1000; }
.header__cta{ position: relative; z-index: 1001; }
.hamburger{
  position: relative;
  z-index: 1002;
  pointer-events: auto;
  touch-action: manipulation;
}

@media (max-width: 980px){

  /* Fullscreen overlay */
  #drawer{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
    background: rgba(0,0,0,.72) !important;
    padding: 18px 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }

  /* Panel */
  #drawer .drawer__links{
    position: relative;
    z-index: 2147483647 !important;
    pointer-events: auto !important;

    background: rgba(15,15,15,.92);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px;
  }

  /* Links */
  #drawer .drawer__links a{
    display: block;
    padding: 14px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    background: rgba(255,255,255,.03);
    margin-bottom: 10px;
    border: 1px solid transparent;
  }

  #drawer .drawer__links a:hover{
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
  }

  #drawer .drawer__cta{
    background: #c62828;
    text-align: center;
    margin-top: 6px;
  }

  /* When open, disable clicks under overlay (safe) */
  html.drawer-open .stickyCall,
  html.drawer-open .topbar,
  html.drawer-open #siteHeader,
  html.drawer-open #headmenu{
    pointer-events: none !important;
  }

  html.drawer-open #drawer,
  html.drawer-open #drawer *{
    pointer-events: auto !important;
  }
}

/* ===== Zvýšení nápisu vykupautomobilu.cz (desktop + mobil) ===== */

/* Desktop + větší displeje */
header .hdr-title .big-title{
    font-size: clamp(38px, 5.2vw, 63px); 
    line-height: 1.12;
    padding-top: 4px;
    padding-bottom: 6px;
}

/* Tablet a mobil */
@media (max-width: 980px){
  header .hdr-title .big-title{
      font-size: clamp(34px, 7vw, 62px);
      line-height: 1.15;
  }
}

/* Malé mobily */
@media (max-width: 560px){
  header .hdr-title .big-title{
      font-size: clamp(32px, 8.2vw, 44px);
      white-space: normal;     /* povolí zalomení pokud je potřeba */
      overflow: visible;
  }
}
/* FORCE mobile title size (override existing 40px rule) */
@media (max-width: 980px){
  header .hdr-title .big-title{
    font-size: 40px !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 560px){
  header .hdr-title .big-title{
    font-size: 32px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
}
/* =========================================================
   TABLET MODE FOR 1024×768 (and similar)
   - Přepne header chování na "tablet" dřív než 980px
   - Skryje obrázek peněz (hdr-money), aby se nerozbíjel layout
   ========================================================= */
@media (max-width: 1100px) and (min-width: 981px){
  /* zapnout hamburger + drawer místo červeného headmenu */
  .hamburger{ display:inline-flex !important; }
  .headmenu{ display:none !important; }

  /* header mřížka jako tablet (viz původní @media 980px) */
  header .header__row{
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "auto phone"
      "title title"
      "money money" !important;
    gap:10px 12px !important;
    padding:12px 0 !important;
  }

  .hdr-auto{ grid-area:auto; }
  .header__cta{ grid-area:phone; justify-self:end; }
  .hdr-title{ grid-area:title; }
  .hdr-money{ grid-area:money; }

  /* peníze na tomto break-pointu úplně schovat */
  header .hdr-money{ display:none !important; }

  /* jemné zmenšení, aby vše sedělo na 1024px */
  header .brand__logo{ width:220px !important; max-width:220px !important; }
  header .hdr-title .big-title{
    font-size: 44px !important;
    line-height:1.12 !important;
    white-space:nowrap !important;
  }
  header .hdr-title .big-sub{ font-size:12px !important; }
  .btn--call{
    font-size:18px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
  }
}

/* Pokud by se někde hdr-money zobrazil (jiný markup), schovej ho i na 1024px přes šířku */
@media (max-width: 1100px) and (min-width: 981px){
  header .hdr-money img{ display:none !important; }
}