/* ============================================================
   NoteboOk servis – sdílené styly všech veřejných stránek
   Extrahováno z includes/header.php (render_head).
   Při každé změně navyšte verzi v odkazu: main.css?v=N
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg-page);color:var(--color-text);font-size:14px}

/* =============================================
   Globální základ a komponenty na design tokenech
   Přidáno v Sezení C. Aditivní – stávající třídy
   (.btn-blue, .fg, .card…) zůstávají beze změny.
   Pozn.: nový .card{} ze šablony záměrně vynechán –
   kolidoval by se stávajícím .card a přidal padding
   i stín všem kartám na webu (track, admin, login).
   ============================================= */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

img { max-width: 100%; height: auto; }

/* Container */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sekce */
.section { padding-block: var(--space-12); }
.section--subtle { background: var(--color-bg-subtle); }

/* Tlačítka (BEM varianta – doplňuje stávající .btn-blue/.btn-outline) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary-light); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); min-height: 52px; }
.btn--block { width: 100%; }

/* Karta – jen modifikátor (základní .card zůstává stávající) */
.card--elevated { box-shadow: var(--shadow-md); }

/* Nadpis sekce */
.section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  text-align: center;
  margin-bottom: var(--space-2);
}
.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-8);
}

/* Badge / pill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.badge--primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge--success { background: var(--color-success-light); color: var(--color-success); }

/* Formulář (BEM varianta – doplňuje stávající .fg) */
.form-group { margin-bottom: var(--space-5); }
.form-group label {
  display: block;
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-group .field-error {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* Radio group (BEM varianta) */
.radio-group { display: flex; flex-direction: column; gap: var(--space-2); }
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
}

/* ── Stávající sdílené styly (Sezení A/B) ────────────────────── */
nav{background:#fff;border-bottom:1px solid var(--color-border);padding:0 1.5rem;display:flex;align-items:center;gap:4px;height:56px;position:sticky;top:0;z-index:100;overflow:hidden}
.logo{text-decoration:none;white-space:nowrap;flex-shrink:0;display:flex;align-items:center}
.logo img{max-height:36px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;overflow:hidden;justify-content:flex-end}
.nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
.nav-a{font-size:13px;color:#555;text-decoration:none;padding:7px 10px;border-radius:var(--radius-md);white-space:nowrap}
.nav-a:hover{background:#f0f0f0;color:var(--color-text)}
.nav-a.active{background:#f0f0f0;color:var(--color-text);font-weight:var(--font-medium)}
.nav-a.btn{background:var(--color-primary);color:#fff;font-weight:var(--font-medium)}
.nav-a.btn:hover{background:var(--color-primary-hover);color:#fff}
.lang-btn{font-size:12px;font-weight:var(--font-semibold);color:var(--color-primary);text-decoration:none;padding:5px 10px;border-radius:6px;border:1.5px solid var(--color-primary);white-space:nowrap;letter-spacing:.5px}
.lang-btn:hover{background:var(--color-primary);color:#fff}
@media(max-width:640px){
  nav{padding:0 1rem;gap:2px}
  .nav-links{display:none}
  .nav-right{gap:2px}
  .nav-right .nav-a{padding:6px 8px;font-size:12px}
  .lang-btn{padding:5px 8px;font-size:11px;letter-spacing:0}
  .nav-user-name{display:none}
}
/* ── Header: telefon, hamburger, mobilní menu (Sezení C) ──────── */
.nav-phone{font-size:13px;font-weight:var(--font-semibold);color:var(--color-primary);text-decoration:none;white-space:nowrap;padding:5px 8px}
.nav-phone:hover{color:var(--color-primary-hover)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:8px;background:none;border:none;cursor:pointer;margin-left:2px}
.nav-burger span{display:block;height:2px;width:100%;background:var(--color-text);border-radius:2px;transition:transform .15s,opacity .15s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--color-border);box-shadow:0 4px 12px rgba(0,0,0,.06);position:sticky;top:56px;z-index:99;padding:6px 1rem 12px}
.nav-mobile-a{display:flex;align-items:center;min-height:48px;padding:11px 8px;font-size:15px;color:var(--color-text);text-decoration:none;border-bottom:1px solid #f0f0f0}
.nav-mobile-a:last-child{border-bottom:none}
.nav-mobile-a.active{color:var(--color-primary);font-weight:var(--font-semibold)}
@media(max-width:640px){
  .nav-phone{display:none}
  .nav-burger{display:flex}
  .nav-mobile:not([hidden]){display:flex}
}
/* ── Sdílené komponenty ──────────────────────────────────────── */
/* Stránkový hero banner */
.page-hero{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-hover),var(--color-primary));padding:2rem 2.5rem;color:#fff}
.page-hero h1{font-size:22px;font-weight:var(--font-medium);color:#fff;margin-bottom:4px}
.page-hero p{font-size:13px;color:rgba(255,255,255,.78)}
/* Card */
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:1rem}
/* Tlačítka */
.btn-blue{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);padding:9px 18px;font-size:14px;font-weight:var(--font-medium);cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;transition:background .15s}
.btn-blue:hover{background:var(--color-primary-hover)}
.btn-outline{background:#fff;border:1px solid #ddd;border-radius:var(--radius-md);padding:8px 16px;font-size:13px;cursor:pointer;text-decoration:none;color:#555;display:inline-block;transition:border .15s,color .15s}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
/* Formulářové skupiny */
.fg{margin-bottom:.875rem}
.fg label{display:block;font-size:12px;color:#555;margin-bottom:4px;font-weight:var(--font-medium)}
.fg input,.fg select,.fg textarea{width:100%;border:1px solid #ddd;border-radius:var(--radius-md);padding:9px 12px;font-size:14px;background:#fff;color:var(--color-text);outline:none;transition:border .15s,box-shadow .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(24,95,165,.08)}
/* Mřížky */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:580px){.row2,.row3{grid-template-columns:1fr}}
/* Oddělovač */
.divider{border:none;border-top:1px solid var(--color-border);margin:1rem 0}
/* Notifikační boxy */
.alert-err{background:var(--color-error-light);border:1px solid #FECACA;border-radius:var(--radius-md);padding:10px 14px;font-size:13px;color:var(--color-error);margin-bottom:1rem}
.alert-ok{background:var(--color-success-light);border:1px solid #BBF7D0;border-radius:var(--radius-md);padding:10px 14px;font-size:13px;color:var(--color-success-dark);margin-bottom:1rem}
/* Footer (Sezení C – strukturovaný layout, modré pozadí zachováno) */
.site-footer{background:var(--color-primary-dark);color:rgba(255,255,255,.75);margin-top:2rem;font-size:13px;line-height:1.7}
.site-footer__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.5rem 1rem}
.site-footer__logo{height:34px;width:auto;margin-bottom:.75rem;filter:brightness(0) invert(1)}
.site-footer__brand p{color:rgba(255,255,255,.6)}
.site-footer__col h3{font-size:12px;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.5);margin-bottom:.75rem}
.site-footer__col p{margin-bottom:.5rem;color:rgba(255,255,255,.85)}
.site-footer__col address{font-style:normal;color:rgba(255,255,255,.6);margin-bottom:.5rem}
.site-footer__col nav{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.5rem;background:none;height:auto;padding:0;position:static;overflow:visible;z-index:auto;border:none}
.site-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.site-footer a:hover{color:#fff}
.site-footer strong{color:#fff}
.site-footer__bottom{max-width:1100px;margin:0 auto;padding:.75rem 1.5rem;font-size:12px;color:rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
@media(min-width:768px){.site-footer__inner{grid-template-columns:2fr 1fr 1fr}}

/* Lišta souhlasu s cookies */
.cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:var(--color-primary-dark);color:rgba(255,255,255,.9);box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.cookie-consent__inner{max-width:1100px;margin:0 auto;padding:1rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.cookie-consent__inner p{margin:0;font-size:13px;line-height:1.6;flex:1 1 380px}
.cookie-consent__inner a{color:#fff;text-decoration:underline}
.cookie-consent__actions{display:flex;gap:.5rem;flex:0 0 auto}
.cookie-consent .btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.cookie-consent .btn-outline:hover{border-color:#fff;color:#fff}
/* Autocomplete dropdown (adresa / firma) */
.addr-dd{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-top:none;border-radius:0 0 8px 8px;z-index:300;max-height:220px;overflow-y:auto;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.addr-dd-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f3f3f3;line-height:1.4}
.addr-dd-item:last-child{border-bottom:none}
.addr-dd-item:hover,.addr-dd-item.addr-focus{background:var(--color-primary-light)}
.addr-dd-item strong{display:block;color:var(--color-text);font-weight:var(--font-medium)}
.addr-dd-item span{color:var(--color-text-light);font-size:12px}
.addr-ok{border-color:var(--color-success)!important;box-shadow:0 0 0 2px rgba(34,160,107,.18)!important}

/* ── Landing sekce: doprava, ceník, recenze ─────────────────── */
/* Nadpisy sekcí používají sdílené třídy .eyebrow/.sec-h/.sec-s (index.php),
   karty mají shodný vzhled s .why-c (bílá, rámeček, radius 12px). */
.delivery { margin-bottom: 3.5rem; }
.delivery__grid { display: grid; gap: 12px; }
.delivery__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
}
.delivery__item p { font-size: 13px; color: var(--color-text-muted); }
.delivery__price { display: block; font-weight: 700; color: var(--color-primary); margin: .25rem 0; }

.pricing { margin-bottom: 3.5rem; }
.pricing__grid { display: grid; gap: 12px; margin-bottom: 1rem; }
.pricing__item { display: flex; justify-content: space-between; padding: .75rem 1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pricing__price { font-weight: 700; color: var(--color-primary); }
.pricing__footnote { font-size: .85rem; color: var(--color-text-muted); text-align: center; }

.testimonials { padding: 2rem 1rem; margin-bottom: 1.5rem; }
.testimonials h2 { text-align: center; margin-bottom: 1.25rem; font-size: 24px; font-weight: 500; }
.testimonials__grid { display: flex; flex-direction: column; gap: 1rem; }
.testimonial { background: var(--color-bg-subtle); border-left: 4px solid var(--color-primary); padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin: 0; }
.testimonial p { margin-bottom: .4rem; font-style: italic; }
.testimonial cite { font-size: .85rem; color: #777; font-style: normal; }

/* ── Timeline stavu zakázky (track.php) ─────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.status-badge--closed {
  background: var(--color-success-light);
  color: var(--color-success);
}
.timeline { padding: 1rem 0; }
.timeline__step { display: flex; gap: 1rem; padding-bottom: 1.5rem; position: relative; }
.timeline__step:last-child { padding-bottom: .25rem; }
.timeline__step:not(:last-child)::before {
  content: ''; position: absolute; left: 11px; top: 28px;
  width: 2px; height: calc(100% - 12px); background: #e0e0e0;
}
.timeline__step--done:not(:last-child)::before { background: var(--color-primary); }
.timeline__dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #e0e0e0; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}
.timeline__step--done .timeline__dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.timeline__step--active .timeline__dot { border-color: var(--color-primary); color: var(--color-primary); }
.timeline__content strong { display: block; font-size: 13px; }
.timeline__step--active .timeline__content strong { color: var(--color-primary); }
.timeline__date { font-size: .8rem; color: var(--color-text-light); }

/* Desktop */
@media (min-width: 768px) {
  .delivery__grid { grid-template-columns: 1fr 1fr; }
  .pricing__grid { grid-template-columns: 1fr 1fr; }
  .testimonials__grid { flex-direction: row; }
  .testimonial { flex: 1; }
}