/* ============================================================
   AK eshop — spoločné štýly
   ============================================================ */

:root {
  --ink:    #1a1a1a;
  --muted:  #6b7280;
  --line:   #e5e7eb;
  --bg:     #f7f8fa;
  --card:   #ffffff;
  --brand:  #1e4f8f;
  --brand-d:#163a6b;
  --ok:     #1a7f37;
  --warn:   #b45309;
  --bad:    #c0392b;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--brand); }

/* --- rozloženie --------------------------------------------------------- */

.topbar {
  background: var(--brand);
  color: #fff;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.topbar .brand {
  font-weight: 700;
  padding: 12px 0;
  margin-right: 8px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Znak klubu je celý svetlomodrý a jeho vnútro (hrad, krídla) je
   priehľadné — v bielej verzii ním presvitá modrý pruh, takže kresba
   zostane čitateľná bez toho, aby sme do znaku zasahovali. */
.topbar .brand img { display: block; height: 34px; width: auto; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 14px 12px;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a.active { color: #fff; border-bottom-color: #fff; font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: rgba(255,255,255,.8); }
.topbar .who a { color: #fff; }

/* Horný pruh na telefóne.
   Na širokej obrazovke drží rozťahovacia medzera prihlásenie pri pravom
   okraji. Na úzkej ho ale vytlačí až za okraj a text sa oreže — preto
   sa medzera vypína a pruh sa skladá do dvoch riadkov:
   názov s prihlásením hore, odkazy pod nimi. */
@media (max-width: 700px) {
  .topbar {
    padding: 0 16px 8px;
    gap: 0;
    align-items: center;
  }
  .topbar .spacer { display: none; }

  .topbar .brand {
    flex: 1 1 auto;
    padding: 10px 0;
    margin: 0;
    gap: 8px;
  }
  .topbar .brand img { height: 30px; }
  /* Na úzkom displeji hovorí znak sám za seba a názov by len tlačil
     odkaz „Pre členov" za okraj. */
  .topbar .brand span { display: none; }
  .topbar .who {
    order: 2;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Odkazy dostanú celý riadok. Keď sa nezmestia, dajú sa posunúť
     prstom — je to prehľadnejšie než keď sa lámu do troch riadkov. */
  .topbar nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a {
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 30px 22px 60px; }
.wrap.narrow { max-width: 560px; }

h1 { font-size: 22px; margin: 0 0 4px; }
.lead { color: var(--muted); margin: 0 0 26px; font-size: 14px; }

h2 { font-size: 14px; margin: 0 0 16px; text-transform: uppercase;
     letter-spacing: .05em; color: var(--muted); }

/* --- karty -------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.card.tight { padding: 16px 18px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }

/* --- tabuľky ------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #f1f2f4; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
     color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
td.num, th.num { text-align: right; white-space: nowrap; }

/* Stĺpec s tlačidlami akcií.

   Pôvodne mal `white-space:nowrap` a pevnú šírku. Tlačidlá sa preto
   nemali kam zalomiť, riadok narástol nad šírku karty a tabuľka
   pretiekla cez jej pravý okraj. Flex so zalamovaním to rieši:
   pri úzkom okne sa tlačidlá preskladajú pod seba a karta drží tvar. */
td.akcie {
  text-align: right;
  white-space: normal;
  /* Šírka 1 % je zaužívaný trik: prehliadač stĺpec zmenší na obsah
     a zvyšok riadku nechá ostatným. Bez toho by si stĺpec s tlačidlami
     ukrojil viac miesta, než potrebuje. */
  width: 1%;
}
/* Každá akcia na vlastný riadok a všetky rovnako široké — inak sa
   pri rôznej dĺžke textu ("Deaktivovať" vs "Odobrať správcu") schodovito
   rozsypú a pôsobí to neusporiadane. */
td.akcie > form,
td.akcie > a.btn,
td.akcie > button {
  display: block;
  margin: 3px 0;
}
td.akcie .btn {
  display: block;
  width: 100%;
  white-space: nowrap;
  padding: 3px 12px;      /* nižšie než bežné small — riadkov je viac pod sebou */
  text-align: center;
}
td.akcie > span { display: block; }

/* --- tabuľka položiek na telefóne -------------------------------------- */

/* Tabuľky s položkami (doklad, košík, rekapitulácia) majú tri až štyri
   číselné stĺpce s pevnou šírkou. Na displeji širokom 390 px zostane po
   odrátaní okrajov okolo 310 px — samotné tie stĺpce sa nezmestia a
   tabuľka pretečie cez pravý okraj. Na šírku problém nie je, preto sa to
   prejavuje len v jednej polohe telefónu.

   Vodorovné rolovanie by tu bolo zlé riešenie: na doklade aj v košíku
   musí byť vidieť všetko naraz. Každá položka sa preto rozloží na blok
   a k hodnotám sa doplnia popisky, ktoré inak nesie hlavička. */
@media (max-width: 560px) {
  .polozky, .polozky tbody, .polozky tr, .polozky td { display: block; width: auto; }
  .polozky tr:first-child { display: none; }          /* hlavička stĺpcov */
  .polozky tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .polozky td { border: none; padding: 2px 0; text-align: left; white-space: normal; }
  .polozky td.nazov { font-weight: 600; margin-bottom: 4px; }
  .polozky td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 13px;
  }
  /* Súčet ako jeden riadok — popis vľavo, suma vpravo. */
  .polozky tr.sucet {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: none; padding-top: 14px;
  }
  .polozky tr.sucet td { padding: 0; }
  .polozky .skryt-mobil { display: none; }
}

/* --- formuláre ---------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 5px; }
.field { margin-bottom: 16px; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d5d8dd;
  border-radius: 7px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(30,79,143,.12);
}
input[readonly] { background: #f6f7f8; color: var(--muted); }
textarea { min-height: 90px; resize: vertical; }

.btn {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--brand);
  border-radius: 7px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #1a4680; }
.btn.ghost { background: #fff; color: var(--brand); }
.btn.ghost:hover { background: #f2f6fb; }
.btn.small { padding: 5px 12px; font-size: 13px; font-weight: 500; }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: #a5342a; }
/* Neaktívne tlačidlo musí byť vidieť — inak sa naň klikne a zdanlivo
   sa nič nestane. */
.btn[disabled], .btn[disabled]:hover {
  opacity: .4;
  cursor: not-allowed;
  background: var(--brand);
}

.actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; }

/* --- štítky ------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.b-ok   { background: #e6f4ea; color: var(--ok); }
.b-warn { background: #fef3c7; color: var(--warn); }
.b-bad  { background: #fdecea; color: var(--bad); }
.b-mute { background: #eef0f3; color: var(--muted); }

code {
  background: #f1f2f4;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- hlásenia ----------------------------------------------------------- */

.flash {
  padding: 11px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid;
}
.flash.info    { background: #eef4fc; border-color: #cfe0f5; color: #17457e; }
.flash.success { background: #e9f7ed; border-color: #c3e8ce; color: #14652c; }
.flash.error   { background: #fdecea; border-color: #f6cfcb; color: #8f2a21; }
.flash.warn    { background: #fef6e7; border-color: #f6e0b4; color: #8a5a08; }

.empty { color: var(--muted); font-size: 14px; padding: 22px 0; text-align: center; }

/* --- Ikony pri platobných voľbách -------------------------------------
   Tlačidlo "Zaplatiť kartou" a popis pod QR kódom nesú malú ikonu, aby sa
   dve možnosti platby dali rozlíšiť jedným pohľadom, bez čítania. Ikony sú
   kreslené inline v HTML a preberajú farbu textu, takže tu stačí veľkosť
   a zarovnanie. */
.pay-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Priebežný súčet na stránke poplatkov -----------------------------
   Tlačidlo pod ním rovno vystaví doklad, takže suma tam nie je ozdoba —
   je to posledná možnosť všimnúť si preklep v počte pristátí. Preto je
   zámerne výrazná a nie schovaná medzi poliami. */
.sumar {
  margin: 20px 0 4px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.sumar-riadok {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  padding: 3px 0;
}

.sumar-spolu {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.sumar-spolu strong {
  font-size: 22px;
  font-weight: 600;
  color: var(--brand);
}

/* Keď je lietadlo len jedno, rozpis po riadkoch nič nepridáva —
   suma je rovnaká ako celkový súčet. */
.sumar-riadky:has(.sumar-riadok:only-child) { display: none; }


/* ------------------------------------------------------------------
   Nevyplnené povinné pole.
   Hláška hore povie čo chýba, ale na dlhom formulári ju človek potom
   hľadá políčko po políčku. Preto sa chyba označí aj priamo pri poli
   a zmizne, len čo doň niekto začne písať.
   ------------------------------------------------------------------ */
.fld-err,
.fld-err:focus {
  border-color: #d2453c;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(210, 69, 60, .12);
}


/* Tlačidlá potvrdzovacej obrazovky. „Potvrdiť" je plné, „Upraviť"
   ghost — aby bolo na prvý pohľad jasné, ktoré krok dokončí. */
.recap-akcie {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px 0 40px;
}


/* ------------------------------------------------------------------
   Prepínač jazyka — len na stránke pristávacích poplatkov.

   Sedí v riadku s nadpisom, nie v hornom pruhu. Dôvod je v tom, kto
   ho potrebuje: pilot, ktorý cvakol QR kód na letisku a dostal jazyk,
   ktorému nerozumie. Ten pozerá na nadpis — a prepínač musí byť tam,
   kde už oko je.

   Obe skratky naraz, aktuálna vyplnená. Jedno slovo by sa nečítalo
   ako prepínač, iba ako ďalší odkaz.
   ------------------------------------------------------------------ */
.nadpis-riadok {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nadpis-riadok h1 { margin-bottom: 0; }

.lang-switch {
  display: flex;
  flex: none;
  border: 1px solid var(--line, #dfe3e8);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  background: #fff;
}
.lang-switch > * {
  padding: 6px 11px;
  line-height: 1.3;
  text-decoration: none;
}
.lang-switch a { color: var(--muted, #6b7280); }
.lang-switch a:hover { background: #eef2f7; color: var(--ink, #1a1a1a); }
/* Aktuálny jazyk je <span> — nie je kam viesť, tak to ani nevyzerá
   ako odkaz a nedá sa naň dostať tabulátorom. */
.lang-switch .on { background: #1e4f8f; color: #fff; }

/* Na papieri prepínač nič neznamená. */
@media print { .lang-switch { display: none; } }