/* =====================================================================
   components.css — tlačítka, kruhová tlačítka, karty, pole, drobné prvky
   Přesně dle předlohy „Rakar".
   ===================================================================== */

/* ---------- tlačítka (pilulky) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 30px;height:56px;border-radius:10px;border:1.5px solid transparent;
  font-family:var(--font-display);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;white-space:nowrap;
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.btn-primary:hover{background:#e2620f;border-color:#e2620f}
.btn-dark{background:var(--dark-block);color:#fff;border-color:var(--dark-block)}
.btn-dark:hover{background:var(--accent-fill);border-color:var(--accent-fill)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.btn-block{width:100%}
.btn .arr{width:18px;height:18px}

/* ---------- kruhové šipkové tlačítko ---------- */
.iconbtn{
  width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid transparent;transition:background .15s,color .15s,transform .15s,border-color .15s;
}
.iconbtn.navy{background:var(--dark-block);color:#fff}
.iconbtn.navy:hover{background:var(--accent-fill)}
.iconbtn.orange{background:var(--accent-fill);color:#fff}
.iconbtn.orange:hover{transform:translateY(-2px)}
.iconbtn.light{background:var(--surface-2);color:var(--ink)}
.iconbtn.light:hover{background:var(--accent-fill);color:#fff}
.iconbtn.outline{background:transparent;color:currentColor;border-color:rgba(255,255,255,.4)}
.iconbtn.outline:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.iconbtn.lg{width:56px;height:56px}

/* odkaz se šipkou */
.arrowlink{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-family:var(--font-display);font-weight:600;font-size:.92rem}
.arrowlink svg{transition:transform .15s}
.arrowlink:hover svg{transform:translateX(4px)}

/* ---------- karty ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-card)}

/* ---------- stránkovací ovladač (← 01/08 →) ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:44px}
.pager .count{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.pager .count b{color:var(--accent)}
section.dark .pager .count{color:#fff}

/* ---------- pilulkové filtry ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pill{
  padding:10px 24px;border-radius:var(--radius-pill);border:none;background:var(--surface-2);
  color:var(--ink-2);font-family:var(--font-display);font-weight:600;font-size:.88rem;cursor:pointer;transition:.15s;
}
.pill.on,.pill:hover{background:var(--accent-fill);color:#fff}

/* ---------- hvězdy ---------- */
.stars{color:var(--accent-fill);letter-spacing:3px;font-size:1.05rem;line-height:1}

/* ---------- odznaky ---------- */
.numbadge{
  width:44px;height:44px;flex:none;border-radius:50%;background:var(--dark-block);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.numbadge.orange{background:var(--accent-fill)}

/* ---------- formulářová pole ---------- */
label{display:block;font-size:.86rem;font-weight:600;margin-bottom:8px;color:var(--ink)}
label .req{color:var(--accent)}
label .opt{color:var(--muted);font-weight:400}
input,select,textarea{
  width:100%;padding:0 18px;height:54px;border:1.5px solid var(--line-2);border-radius:12px;
  background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:.95rem;
}
textarea{height:auto;min-height:130px;padding:14px 18px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--accent-fill);outline:none}
/* checkbox/radio nesmí dědit width:100%/height:54px z pravidla výše (dělalo bílý blok) */
input[type=checkbox],input[type=radio]{width:auto;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;flex:none;accent-color:var(--accent-fill);-webkit-appearance:auto;appearance:auto}

/* pole na tmavém navy podkladu (poptávka, patička) */
.on-dark label{color:#fff}
.on-dark input,.on-dark select,.on-dark textarea{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#fff;
}
.on-dark input::placeholder,.on-dark textarea::placeholder{color:var(--dark-block-muted)}

/* drop zóna */
.drop{border:2px dashed var(--line-2);border-radius:12px;padding:28px 18px;text-align:center;color:var(--muted);font-size:.9rem;background:var(--surface-2)}
.drop b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:4px}
.on-dark .drop{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.18);color:var(--dark-block-muted)}
.on-dark .drop b{color:#fff}

/* souhlas */
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--muted)}
.consent input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;padding:0}
.on-dark .consent{color:var(--dark-block-muted)}

/* poznámka */
.note{background:var(--accent-soft);border-left:3px solid var(--accent-fill);padding:14px 18px;border-radius:0 12px 12px 0;font-size:.92rem;color:var(--ink)}
.note b{color:var(--accent)}

/* === Přepínač jazyků + cookie lišta (sdíleno s Designem 1, tokeny D2) === */
.lang-dd{position:relative;display:inline-block}
.lang-dd-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;cursor:pointer;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;padding:7px 9px;border-radius:8px;transition:background .2s}
.lang-dd-btn .lang-code{color:var(--ink)}
.lang-dd-btn:hover{background:rgba(128,128,128,.14)}
.lang-dd .lang-flag{width:20px;height:14px;border-radius:2px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;vertical-align:middle}
.lang-dd .lang-caret{font-size:10px;opacity:.6;transition:transform .2s}
.lang-dd.open .lang-caret{transform:rotate(180deg)}
.lang-dd-menu{position:absolute;top:100%;right:0;margin-top:8px;min-width:180px;background:#fff;border:1px solid #e6e8ee;border-radius:12px;box-shadow:0 14px 40px rgba(15,20,35,.16);padding:6px;display:none;z-index:200}
.lang-dd.open .lang-dd-menu{display:block}
.lang-dd-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.lang-dd-menu a:hover{background:#f4f6fa}
.lang-dd-menu a.on{color:var(--accent);font-weight:700;background:var(--accent-soft,#fff6f0)}
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#fff;border-top:1px solid #e6e8ee;box-shadow:0 -10px 40px rgba(15,20,35,.14);padding:16px 20px}
.cb-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cb-text{flex:1;min-width:260px;font-size:14px;color:var(--ink);line-height:1.5}
.cb-text a{color:var(--accent);text-decoration:underline}
.cb-cats{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 22px;margin:2px 0 4px}
.cb-cat{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.cb-cat input{width:16px;height:16px}
.cb-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.cb-btn{padding:10px 18px;border-radius:999px;border:1px solid #d7dbe6;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap}
.cb-btn:hover{background:#f4f6fa}
.cb-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cb-btn.ghost{border-color:transparent;background:transparent}
/* logo (obrázek + wordmark) sdílené s Designem 1 */
.logo-img{height:44px;max-height:44px;width:auto;display:block}
.logo-wordmark{display:flex;flex-direction:column;gap:1px;line-height:.92}
.logo-word{font-family:var(--logo-font,"Michroma"),sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.5px;line-height:.92}
.logo-word.filled{background:var(--logo-color,var(--accent));color:#fff;padding:1px 8px 3px;border-radius:7px;font-size:17px;font-weight:900}
.logo-word.outline{color:transparent;-webkit-text-stroke:1.6px var(--logo-color,var(--accent));font-size:20px}
@media(max-width:600px){.logo-img{height:38px}.logo-word.filled{font-size:15px}.logo-word.outline{font-size:17px}}