/* ============================================
   Vydražto.online — šablona aukce
   --------------------------------------------
   Výchozí paleta je ZÁMĚRNĚ neutrální. Jeden kód obsluhuje N klubů
   a každý si nastaví svou barvu v administraci (`clients.color_*`,
   viz tenant_brand_css() v bootstrap.php). Cokoli výrazného tady
   by prosvítalo těm, kdo si barvu nevyplní — a dřív to tak bylo:
   soubor se jmenoval „Footzone brand" a celá šablona byla zlatá.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Plochy. Tmavé rozhraní stojí na jemných rozdílech jasu, ne na
       výrazných šedých deskách — ty byly dřív (#4b4b4b na černé) a
       karty kvůli nim vypadaly jako nedokončené placky. Odstupňování
       je teď po pár procentech a tvar drží vlasová linka. */
    /* Stránka NENÍ čistě černá. Absolutní černá je na displeji tvrdá,
       vysoký kontrast proti světlému textu unavuje a jakýkoli stín
       nebo přechod na ní vypadá jako šmouha. Odstín patičky (#0a0a0a)
       je o chlup nadzvednutý a rozhraní na něm drží líp.
       Patička a odpočet sdílejí tentýž tón — odděluje je vlasová
       linka, ne jiná barva. */
    --bg-deep: #0a0a0a;
    --surface: #0a0a0a;
    --bg-card: #161616;
    --bg-elevated: #1e1e1e;
    --bg-hover: #252525;
    /* Obrazová část karty — o stupeň tmavší než tělo karty, aby bylo
       poznat, kde končí fotka a začínají údaje. */
    --bg-media: #101010;
    --bg-media-0: rgba(16, 16, 16, 0);
    /* Táž barva karty s nulovou alfou — doběh přechodu pro prohlížeče
       bez color-mix(). Musí se měnit spolu s --bg-card. */
    --bg-card-0: rgba(22, 22, 22, 0);

    /* Zvýraznění: tlačítka, ceny, odkazy.

       Výchozí stav je ČERNOBÍLÝ, bez jediného odstínu. Jakýkoli nádech
       — i tlumená modrá, která tu byla předtím — je pořád něčí volba
       a klubu, co si barvu nevyplní, ji vnucuje. Bílá na černé nevnucuje
       nic a snese se s každou klubovou barvou, která přijde vedle.

       POZOR: barva klubu smí obarvit jen TOHLE — prvky, se kterými
       se pracuje. Plochy (--surface, --bg-*) zůstávají neutrální
       vždycky. Dřív se klubová barva pouštěla do --surface a patička
       pak byla celá zalitá klubovou barvou místo decentního doplňku. */
    --accent: #ffffff;
    --accent-light: #ffffff;
    --accent-dim: #a3a3a3;
    --accent-glow: rgba(255, 255, 255, 0.14);
    /* Záře tlačítek a jemný nádech na pozadí stránky. Byly to natvrdo
       zapsané zlaté rgba() hodnoty, které přejmenování tokenů minulo —
       tlačítko „Přihodit" proto svítilo zlatě i v neutrální šabloně. */
    --accent-shadow: rgba(255, 255, 255, 0.22);
    /* Plochý nádech v hlavičce aukce. Nízká alfa, jednolitá vrstva. */
    --accent-ambient: rgba(255, 255, 255, 0.05);
    /* Táž barva s nulovou průhledností — pro doběh dekorativní linky.
       NESMÍ to být klíčové slovo `transparent`: to je rgba(0,0,0,0),
       takže přechod nejde jen do ztracena, ale prochází šedou do černé
       a na tmavém pozadí z toho vznikne viditelná hrana. */
    --accent-0: rgba(255, 255, 255, 0);

    /* Text NA ploše akcentu. Nesmí to být natvrdo --bg-deep:
       akcent je pozadí tlačítek a klub si může nastavit tmavou barvu
       (třeba #C8102E), na které je skoro černý text nečitelný.
       Pro každého tenanta ho dopočítá tenant_brand_css() podle jasu. */
    --on-accent: #0a0a0a;

    /* Text je záměrně TLUMENĚJŠÍ než --accent. V černobílé šabloně
       nejde odkaz odlišit odstínem, takže ho odliší jas: běžný text
       je šedobílý, odkaz čistě bílý. Podtržení při najetí dodává
       zbytek — viz pravidlo pro a:hover níž. */
    --text-primary: #e4e4e4;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;

    --border: rgba(255, 255, 255, 0.09);
    /* Linka, která má být vidět — okraj karty pod kurzorem, oddělovač
       v hlavičce. Bez ní se muselo sahat po stínech, a stín na černém
       pozadí nedělá nic než šmouhu. */
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-hover: rgba(255, 255, 255, 0.35);

    --danger: #dc2626;
    --success: #16a34a;

    /* Inter místo Open Sans: neutrální grotesk bez vlastního charakteru,
       který se nepere s žádnou klubovou identitou a má pořádné tabulkové
       číslice — ty jsou u cen a odpočtu znát nejvíc. */
    --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 9999px;

    --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* --------------------------------------------------------
       Zpětná kompatibilita: --gold* jsou původní názvy z doby,
       kdy byla šablona zlatá. Používá je ještě asi čtyřicet
       inline stylů v PHP souborech. Aliasy tu drží proto, aby
       nezáleželo na pořadí FTP nahrávání — dokud se nepřejmenují,
       ukazují na totéž co --accent*.
       -------------------------------------------------------- */
    --gold: var(--accent);
    --gold-light: var(--accent-light);
    --gold-dim: var(--accent-dim);
    --gold-glow: var(--accent-glow);
}

/* ---- Reset ---- */

*, *::before, *::after { box-sizing: border-box; }

/* Kořenové zvětšení písma – všechny rem hodnoty narostou proporčně
   (tělo ~16px, standardní čitelná velikost). */
html { font-size: 112.5%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    /* Přes token, ne natvrdo: barvu pozadí si klub může nastavit
       v administraci (clients.bg_color) a natvrdo zapsaná černá by
       jeho volbu i změnu výchozí palety tiše přebila. */
    background: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Ambient gold radial glow — Footzone signature */
/* ============================================
   Přechody: jak se na tmavé ploše píšou, aby nepásovaly
   --------------------------------------------
   Pásování (viditelné schody) vzniká, když se malý rozdíl jasu
   roztáhne přes velkou plochu — na jeden krok osmibitové barvy pak
   připadne široký pruh a hranice mezi kroky je vidět. Na tmavém
   pozadí je úrovní k dispozici nejmíň, takže se to projeví nejdřív.

   Tři pravidla, která to řeší:

   1. NIKDY nekončit klíčovým slovem `transparent`. To je
      rgba(0,0,0,0), takže přechod nemíří jen do ztracena — prochází
      šedou do černé a přidá si vlastní hranu. Doběh musí být TÁŽ
      barva s nulovou alfou; `color-mix(… , transparent)` to udělá
      a zachová odstín.

   2. VÍC MEZIZASTÁVEK podle křivky, ne dva krajní body. Prohlížeč
      mezi dvěma zastávkami interpoluje lineárně, takže se chyba
      zaokrouhlení nakupí na jednom místě. Zastávky níž sledují
      smoothstep: hustě tam, kde se barva mění rychle.

   3. INTERPOLACE V OKLAB. V sRGB nejsou kroky vnímané rovnoměrně,
      takže se schody kupí u tmavého konce. Oklab je perceptuální
      a rozloží je rovnoměrně.

   Starší prohlížeče bez color-mix dostanou plochou vrstvu — viz
   @supports na konci souboru.
   ============================================ */

/* JEDEN zdroj světla, a to v hlavičce aukce (.hero-section::before).
   Byla tu druhá ambientní vrstva přes celé okno, takže se dva nádechy
   klubové barvy překrývaly — každý s jiným středem a jiným dosahem.
   Na rozhraní, kde hlavička končila, vznikal viditelný šev a celá
   stránka působila zašpiněně. Dvě mlhy nad sebou nejsou dvakrát
   lepší mlha. */

body > * {
    position: relative;
    z-index: 1;
}

a {
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-light) !important;
    /* Podtržení, ne jen změna odstínu. Ve výchozí černobílé šabloně
       je --accent i --accent-light bílá, takže barevný hover by nebylo
       poznat vůbec. Tohle funguje při jakékoli klubové barvě, i když
       si klub nastaví odstín blízký textu. */
    text-decoration: underline !important;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    /* Grotesk ve velkém stupni potřebuje stáhnout mezery, jinak nadpis
       působí roztahaně. Čím větší stupeň, tím víc — proto i u hero
       nadpisu zvlášť. */
    letter-spacing: -0.02em;
}

.height-min { min-height: calc(100vh - 180px); }

/* ---- Navbar ---- */

.navbar {
    background: transparent !important;
    /* Bez linky. Lištu odděluje odpočet hned pod ní, který svou
       vlastní linku má — dvě vodorovné čáry těsně nad sebou působí
       jako nedopatření. */
    border-bottom: 0;
    box-shadow: none;
    padding: 0.85rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    /* Odstín stránky, ne čistá černá — jinak se lišta při odscrollování
       kreslí jako tmavší pruh přes světlejší podklad. */
    background: rgba(10, 10, 10, 0.72) !important;
}

.navbar a { color: var(--text-primary) !important; }
.navbar-brand { font-weight: 700; }

/* Logo bylo 26 px vysoké, ztlumené na 90 % a prosvícené filtrem —
   výsledkem byla drobná vybledlá značka ztracená v prázdné liště.
   Klubový znak je to první, co má návštěvník poznat. */
.navbar-brand img {
    height: 34px;
    width: auto;
    opacity: 1;
    filter: none;
}

.navbar-icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pozor na `.navbar-icons > a`: po zavedení nabídky pod profilem tu
   žádná ikona jako přímý odkaz nezbyla, a jediné, co takové pravidlo
   trefilo, bylo tlačítko „Přihlásit se" — to se pak zmáčklo na
   čtverec 38 px a text z něj přetekl. Odhlášený stav má v liště
   jeden prvek, a ten je textový. */

/* ---- Nabídka pod profilem ---- */

.usermenu { position: relative; }

.usermenu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.6rem 0.28rem 0.28rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.usermenu-trigger:hover,
.usermenu.open .usermenu-trigger {
    background: var(--bg-card);
    border-color: var(--border-strong);
}

/* Iniciála v barvě klubu — drobné místo, kde se značka připomene. */
.usermenu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.usermenu-caret {
    color: var(--text-muted);
    transition: transform var(--transition);
}

.usermenu.open .usermenu-caret { transform: rotate(180deg); }

.usermenu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 230px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 0.35rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    /* Skrytá nabídka nesmí zůstat v pořadí tabulátoru — jinak by se
       do ní dalo dostat klávesnicí, aniž by byla vidět. */
    display: none;
    z-index: 1100;
}

.usermenu.open .usermenu-panel { display: block; }

.usermenu-head {
    padding: 0.55rem 0.7rem 0.65rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.usermenu-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.usermenu-mail {
    font-size: 0.74rem;
    color: var(--text-muted);
    /* Dlouhá adresa by nabídku roztáhla přes půl lišty. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.usermenu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary) !important;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.usermenu-item:hover,
.usermenu-item:focus-visible {
    background: var(--bg-elevated);
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.usermenu-item svg { flex: 0 0 auto; }

/* Odhlášení je tišší než zbytek nabídky — je to konec práce
   se stránkou, ne akce, ke které se někdo má nabízet. */
.usermenu-item-quiet { color: var(--text-muted) !important; }

/* Tlačítko „Přihlásit se". Rozměr si určuje text, ne pevná šířka —
   proto inline-flex a nezalomitelný obsah: „Přihlásit se" se dřív
   lámalo doprostřed slova. */
.navbar-icons .btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    white-space: nowrap;
    color: var(--on-accent) !important;
    background: var(--accent) !important;
    border: none !important;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-body);
    padding: 0.5rem 1.15rem;
    letter-spacing: 0;
    text-transform: none;
    transition: background var(--transition);
}

.navbar-icons .btn-outline-light:hover {
    background: var(--accent-light) !important;
    color: var(--on-accent) !important;
    text-decoration: none !important;
}

/* ---- Countdown Bar ---- */

/* Odpočet je ŠTÍTEK, ne pruh přes celou šířku.
   Nejdřív to byl pás vylitý barvou akcentu, pak tichý proužek — pořád
   to ale byla lišta mezi navigací a obsahem, tedy místo, kam weby
   dávají oznámení o cookies. Odpočet přitom patří k aukci: stojí
   v její hlavičce jako jeden údaj mezi ostatními. */
.countdown-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: color-mix(in oklab, var(--accent) 8%, var(--bg-card)) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-pill) !important;
    margin: 1.5rem 0 0;
    padding: 0.45rem 1.05rem;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--font-body);
    position: relative;
    z-index: 1;
}

.countdown-bar b {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* ---- Hero Section ---- */

/* Hlavička nese drobečky i nadpis, takže nádech klubové barvy
   pokrývá celý horní blok a nikde nevzniká šev. */
.hero-section {
    background: var(--bg-deep);
    /* Bez spodní linky a bez overflow: hidden. Linka dělala z hlavičky
       uťatý pruh a ořez bránil tomu, aby nádech mohl doznít až do
       stránky — přechod pod nadpisem proto končil hranou. */
    border-bottom: 0;
    text-align: center;
    position: relative;
    /* Dřív měl vnitřní blok navíc `py-5` z Bootstrapu, takže se
       odsazení sčítala a nadpis odtlačil položky hluboko pod přehyb. */
    padding: 1.4rem 0 clamp(2.75rem, 6vw, 4.25rem);
    z-index: 0;
}

/* Záře za názvem aukce. Právě tady bylo pásování vidět nejvíc —
   velká plocha, nepatrný rozdíl jasu a jen dvě zastávky. Křivka níž
   je smoothstep: hustá nahoře, kde se barva mění rychle, řídká dole,
   kde už jen dobíhá. */
.hero-section::before {
    content: '';
    position: absolute;
    /* Přesahuje pod hlavičku, takže nádech doznívá až v mřížce položek
       a nikde není vidět, kde jedna sekce končí a druhá začíná. */
    inset: 0 0 -220px 0;
    pointer-events: none;
    z-index: -1;
    /* Široká a mělká elipsa ukotvená nahoře. Užší a vyšší tvar
       vypadal jako světelná skvrna za nadpisem; takhle to čte jako
       nasvícení celého horního bloku. Špička je 7 %, ne 10 — sytá
       klubová barva (třeba oranžová) je při vyšší hodnotě dominantnější
       než samotný nadpis. */
    background: radial-gradient(150% 95% at 50% 0%,
        color-mix(in oklab, var(--accent) 7%, transparent) 0%,
        color-mix(in oklab, var(--accent) 6.3%, transparent) 20%,
        color-mix(in oklab, var(--accent) 4.5%, transparent) 40%,
        color-mix(in oklab, var(--accent) 2.5%, transparent) 60%,
        color-mix(in oklab, var(--accent) 0.7%, transparent) 80%,
        color-mix(in oklab, var(--accent) 0%, transparent) 100%);
}

.hero-content {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Sekce s položkami navazuje rovnou na hlavičku, takže horní odsazení
   jen zdvojovalo mezeru, kterou už hlavička má. */
.hero-section + section { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

.hero-content h2 {
    font-family: var(--font-display);
    /* Menší strop: 3.5rem vytlačilo dvouslovný název aukce na dva
       řádky a zbytek stránky odsunulo pod přehyb. */
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-wrap: balance;
}

/* Název aukce byl v markupu v <em>. Kurzíva přes celý nadpis
   nevypadá jako záměr, ale jako chyba sazby. */
.hero-content h2 em { font-style: normal; }

.hero-content h2 strong {
    font-weight: 800;
    color: var(--accent);
}

.hero-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    font-weight: 400;
    max-width: 48ch;
    margin-inline: auto;
}

.hero-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

.hero-buttons .btn {
    border-radius: var(--radius-pill);
    padding: 0.7rem 1.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    transition: all var(--transition);
    border: 1px solid;
}

/* Bez záře. Svítící tlačítko působí jako reklamní banner; čistý
   plný tvar na tmavém pozadí je vidět dost sám o sobě. */
.hero-buttons .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
    box-shadow: none;
}

.hero-buttons .btn-primary:hover {
    background: var(--accent-light) !important;
    border-color: var(--accent-light) !important;
    box-shadow: 0 6px 20px var(--accent-glow);
    transform: translateY(-1px);
}

.hero-buttons .btn-secondary {
    background: transparent !important;
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
}

.hero-buttons .btn-secondary:hover {
    background: var(--bg-card) !important;
    border-color: var(--accent-dim) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}

/* ---- Search Bar ---- */

/* ---- Lišta nad mřížkou ---- */

/* Hledání stálo samo uprostřed jako ostrůvek, na který nic
   nenavazovalo. Teď drží řádek s počtem položek: vlevo kontext,
   vpravo nástroj, a obojí zarovnané se sloupci mřížky pod sebou. */
.listing-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.listing-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Mřížka během živého hledání. Zůstává čitelná, jen ztlumená —
   prázdné místo nebo poskakující spinner by při psaní rušily víc
   než ta změna, na kterou se čeká. */
.grid-container.is-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
}

.listing-count strong {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.listing-query { color: var(--text-secondary); }

.listing-clear {
    margin-left: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-strong);
}

.listing-clear:hover {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

/* Jedno pole, ne dvě slepená. Dřív mělo vstupní pole i tlačítko
   vlastní rámeček a každé půlku zaoblení — švem uprostřed to působilo
   rozlomeně. Teď rámeček nese celá skupina, tlačítko je tichá ikona
   uvnitř a zvýrazní se až pod kurzorem. */
.search-bar { margin: 0; }

.search-bar .input-group {
    width: 280px;
    max-width: 100%;
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition);
}

/* Rámeček reaguje na fokus uvnitř — vstupní pole samo ho nemá,
   takže by jinak nebylo poznat, že je aktivní. */
.search-bar .input-group:focus-within {
    border-color: var(--accent-dim);
    background: var(--bg-elevated);
}

.search-bar .form-control {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.62rem 0.3rem 0.62rem 1.1rem;
    height: auto;
    font-size: 0.86rem;
    font-family: var(--font-body);
    color: var(--text-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-bar .form-control::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.search-bar .btn-primary {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.62rem 1.1rem;
    height: auto;
    display: flex;
    align-items: center;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    transition: color var(--transition);
}

.search-bar .btn-primary:hover,
.search-bar .btn-primary:focus-visible {
    background: transparent !important;
    color: var(--accent) !important;
}

/* ---- Section / Wrapper ---- */

.wrapper {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Bootstrapí .container má jiné odsazení než .wrapper (15 px vs 24 px),
   takže logo v liště i nadpis v hlavičce stály o devět pixelů jinde
   než mřížka položek pod nimi. Na oko drobnost, ve výsledku ale celý
   horní blok působil odsazený náhodně. */
.navbar > .container,
.hero-section > .container {
    max-width: 1140px;
    padding-inline: 1.5rem;
}

section { padding-block: 3rem; }

.section-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

/* ---- Item Grid ---- */

/* Karta je VODOROVNÁ: fotka vlevo, údaje vpravo.
   Svislá dlaždice tlačila název, cenu i čas pod sebe do úzkého
   sloupce, takže na ceně — tedy tom jediném, kvůli čemu se na výpis
   kouká — nebylo místo. Na šířku se vejde cena velkým písmem, počet
   příhozů, průběh dražby i tlačítko, a řádek zůstane čitelný.

   Dva sloupce místo čtyř: karta potřebuje šířku, ne počet. */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 1.1rem;
    background: transparent;
    border: none;
}

.item {
    display: grid;
    grid-template-columns: minmax(150px, 38%) 1fr;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: none;
    transition: transform var(--transition), background var(--transition),
                border-color var(--transition);
}

.item:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

/* ---- Obrazová část ---- */

.item-media {
    position: relative;
    display: block;
    background: var(--bg-media);
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.item-media img {
    width: 100%;
    height: 100%;
    /* `contain`, ne `cover`: dres oříznutý na čtverec přijde o rukávy
       a čísla, a právě podle nich se položka pozná. */
    object-fit: contain;
    padding: 0.9rem;
    transition: transform var(--transition-slow);
}

.item:hover .item-media img { transform: scale(1.03); }

.item-flag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: color-mix(in oklab, var(--bg-deep) 75%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 0.22rem 0.6rem;
}

/* ---- Údaje ---- */

.item-body {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.2rem;
    min-width: 0;
}

.item-title { display: block; text-decoration: none !important; }

.item h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
    /* Dva řádky a dost. Dlouhý název jinak roztáhne jednu kartu
       a rozhodí výšku celé řady. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-title:hover h3 { color: var(--accent); }

.item-code {
    margin: 0.25rem 0 0;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Cena vlevo, počet příhozů vpravo. `margin-top: auto` tlačí celý
   spodní blok dolů, takže tlačítka jsou ve všech kartách řady
   zarovnaná i při různě dlouhých názvech. */
.item-bid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.9rem;
}

.item-bid-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.item .price-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    white-space: nowrap;
}

.item .price-value {
    font-family: var(--font-body);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    letter-spacing: -0.025em;
    line-height: 1.15;
    /* Tabulkové číslice: ceny pod sebou v mřížce se jinak rozjíždějí
       podle toho, kolik mají jedniček. */
    font-variant-numeric: tabular-nums;
}

.item-bids {
    flex: 0 0 auto;
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    padding-bottom: 0.15rem;
}

/* ---- Čas ---- */

.item-time {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.item-clock { flex: 0 0 auto; color: var(--text-muted); }

.item-left {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Poslední hodina: tehdy se rozhoduje, tak ať je to vidět. */
.item-left.urgent { color: var(--accent); }

.item-ends {
    margin-left: auto;
    font-size: 0.73rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Tlačítko ---- */

.item-cta {
    display: block;
    margin-top: 1rem;
    padding: 0.62rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--accent) !important;
    background: transparent;
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-lg);
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.item-cta:hover,
.item-cta:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent) !important;
    text-decoration: none !important;
}

/* ---- Ukončené položky ---- */

.item.item-ended { opacity: 0.6; }
.item.item-ended:hover { opacity: 0.85; }
.item.item-ended .item-media img { filter: grayscale(55%); }
.item.item-ended .item-cta {
    color: var(--text-secondary) !important;
    border-color: var(--border-strong);
}
.item.item-ended .item-cta:hover {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
}

/* Text jen pro čtečky — tlačítko „Přihodit" se v seznamu opakuje
   a bez názvu položky by bylo v soupisu odkazů k nerozeznání. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Na úzkém displeji se karta postaví: fotka nahoru, údaje pod ni.
   Vedle sebe by na 420 px zbylo na údaje kolem 150 px. */
@media (max-width: 560px) {
    .item { grid-template-columns: 1fr; }
    .item-media {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        aspect-ratio: 4 / 3;
    }
    .item-ends { margin-left: 0; width: 100%; }
}

/* ---- Pagination ---- */

.pagination {
    padding-top: 2.5rem;
    gap: 0.35rem;
}

.page-item .page-link {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary) !important;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius) !important;
    padding: 0.45rem 0.9rem;
    transition: all var(--transition);
}

.page-item .page-link:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary) !important;
}

.page-item.active .page-link {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    border-color: var(--accent) !important;
}

.page-item.disabled .page-link {
    opacity: 0.3;
    pointer-events: none;
}

/* ---- Detail Page ---- */

/* Drobečky sedí v hlavičce aukce jako tichá utilitní řádka.
   Nejsou to odkazy, které má někdo hledat — jen orientace, kde je. */
.hero-crumbs {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.breadcrumb {
    background: transparent !important;
    padding: 0;
    margin: 0;
    font-size: 0.78rem;
    align-items: center;
}

.breadcrumb-item a {
    /* Ne v barvě klubu: odkaz na nadřazenou stránku nemá soupeřit
       s cenami a tlačítky, které tu barvu nesou taky. */
    color: var(--text-muted) !important;
    font-weight: 400;
    letter-spacing: 0;
    transition: color var(--transition);
}

.breadcrumb-item a:hover {
    color: var(--text-primary) !important;
}

.breadcrumb-item.active { color: var(--text-secondary) !important; }

/* Oddělovač z Bootstrapu 4 je „/" v barvě textu — ztlumit, ať
   nepřebíjí samotné položky. */
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted) !important;
    opacity: 0.55;
    padding-inline: 0.55rem;
}

.breadcrumb-item a:hover {
    color: var(--accent) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted) !important;
    content: "/" !important;
}

/* Carousel */

.detail-carousel {
    overflow: hidden;
    /* Plocha galerie je JEDNA. Rámeček měl svoji barvu a obrázek uvnitř
       ještě vlastní svislý přechod, takže vznikla krabice v krabici —
       u položky bez fotky to bylo vidět jako světlejší obdélník
       plovoucí uprostřed tmavšího. */
    background: var(--bg-media);
    border: 1px solid var(--border);
    border-radius: 16px;
    position: relative;
}

/* Hlavní fotka. Je to <button>, protože otevírá lightbox — musí jít
   spustit i klávesnicí, což obrázek s onclickem neumí. */
.gal-main {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
    cursor: zoom-in;
}

.gal-main.is-empty { cursor: default; }

.gal-main img {
    width: 100%;
    /* Čtverec, ne 4/5. Na výšku z galerie vyrostla věž vyšší než panel
       s příhozem vedle ní a sloupce se rozešly o dobrých sto pixelů.
       Čtverec navíc snese jak dres na výšku, tak šálu na šířku. */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: transparent;
    padding: 1.75rem;
}

.gal-hint {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: color-mix(in oklab, var(--bg-deep) 75%, transparent);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 0.22rem 0.65rem;
    opacity: 0;
    transition: opacity var(--transition);
}

.gal-main:hover .gal-hint,
.gal-main:focus-visible .gal-hint { opacity: 1; }

/* ---- Náhledy dalších fotek ---- */

/* Dokud tu nebyly, poznal dražitel druhou fotku jen podle teček pod
   carouselem — tedy vůbec: tečka neprozradí, co je na ní. */
.gal-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.gal-thumb {
    width: 68px;
    height: 68px;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-media);
    cursor: pointer;
    transition: border-color var(--transition), opacity var(--transition);
    opacity: 0.65;
}

.gal-thumb:hover { opacity: 1; }

.gal-thumb.is-active {
    border-color: var(--accent);
    opacity: 1;
}

.gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- Lightbox ---- */

.gal-lb {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 5vw, 4rem);
    background: color-mix(in oklab, var(--bg-deep) 94%, transparent);
    backdrop-filter: blur(6px);
}

.gal-lb.open { display: flex; }

.gal-lb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gal-lb-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.gal-lb-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.gal-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.gal-lb-nav:hover { background: var(--bg-hover); color: var(--text-primary); }

.gal-lb-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.gal-lb-next { right: clamp(0.5rem, 2vw, 1.5rem); }

.gal-lb-count {
    position: absolute;
    bottom: 1.1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.22rem 0.8rem;
}

@media (max-width: 560px) {
    /* Šipky přes fotku by na úzkém displeji zakryly půlku obrázku. */
    .gal-lb-nav { top: auto; bottom: 1rem; transform: none; }
    .gal-lb-prev { left: 1rem; }
    .gal-lb-next { right: 1rem; }
    .gal-lb-count { bottom: 1.85rem; }
}

/* Pravidla Bootstrapiho carouselu (sipky, tecky) odstranena spolu
   s nim — detail ma vlastni galerii s nahledy. */


/* Detail Info */

/* ---- Detail položky ---- */

/* `height-min` drží patičku dole i u krátké položky, takže spodní
   odsazení nemusí být velké — sčítalo se s ním a pod obsahem zůstávala
   prázdná plocha na půl obrazovky. */
.detail-page { padding: 2rem 0 2.5rem; }

.detail-page .wrapper { max-width: 1000px; }

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted) !important;
    margin-bottom: 1.75rem;
    transition: color var(--transition);
}

.detail-back:hover {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

/* Fotka vlevo, příhoz vpravo. Bootstrapí col-md-6 zalomilo panel
   s příhozem pod fotku už na tabletu, takže to jediné, proč se na
   detail chodí, spadlo pod přehyb. */
/* Pevnější poměr a celek vycentrovaný.
   Dřív bral levý sloupec `1fr`, takže si vzal všechno, co zbylo —
   na široké obrazovce z galerie narostl čtverec vyšší než celý panel
   s příhozem a stránka působila přepadlá doleva. */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(320px, 400px);
    justify-content: center;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 1040px) {
    .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 2rem; }
}

@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Panel s příhozem zůstane na očích i při dlouhém popisu. */
@media (min-width: 901px) {
    .detail-side { position: sticky; top: 5rem; }
}

.detail-gallery { min-width: 0; }

.detail-head { margin-bottom: 1.25rem; }

.detail-lot {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.7rem;
    margin-bottom: 0.7rem;
}

.detail-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0 0 0.6rem;
}

.detail-desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

/* ---- Panel s příhozem ---- */

.bid-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    box-shadow: none;
    overflow: hidden;
}

/* Vlasová linka v barvě klubu na horní hraně — jediné místo panelu,
   kde se barva objeví, dokud se nesáhne na tlačítko. */
.bid-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-0), var(--accent), var(--accent-0));
}

.bid-card h4, .bid-card h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.bid-card .price-label {
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    margin: 0 0 0.15rem;
}

.bid-card .current-price {
    font-family: var(--font-body);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* Konec dražby a živý odpočet v jednom řádku. */
.bid-deadline {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0.9rem 0 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.bid-deadline svg { flex: 0 0 auto; color: var(--text-muted); }

.bid-countdown {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.bid-ends {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Pole pro příhoz ---- */

.bid-field { margin-bottom: 0.75rem; }

.bid-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.bid-input {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition);
}

.bid-input:focus-within { border-color: var(--accent); }

.bid-input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0.8rem 0.5rem 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Šipky u číselného pole jsou v dražbě k ničemu — krok po jedné
   koruně nikdo nepoužije a jen ukrajují šířku. */
.bid-input input::-webkit-outer-spin-button,
.bid-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bid-input input[type=number] { -moz-appearance: textfield; }

.bid-currency {
    padding-right: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.bid-min {
    margin: 0.4rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Rychlé navýšení. Dřív byla tlačítka nalepená na vstupní pole
   zprava, takže na užším displeji zmáčkla pole na pár znaků. */
.bid-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.bid-quick button {
    padding: 0.5rem 0.25rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.bid-quick button:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ---- Souhlas a odeslání ---- */

.bid-agree {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
    cursor: pointer;
}

.bid-agree input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.bid-agree a {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-strong);
}

.bid-agree a:hover {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

/* Potvrzení „přehazuji sám sebe". Ukazuje se jen tomu, kdo je právě
   nejvyšší, a na rozdíl od souhlasu se závazností není rutina — proto
   orámované, aby se nepřehlédlo mezi ostatními řádky formuláře. */
.bid-agree.bid-self {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--accent-0, rgba(200, 164, 78, 0.35));
    border-radius: 10px;
    background: rgba(200, 164, 78, 0.06);
    color: var(--text-secondary);
}

.bid-agree.bid-self strong { color: var(--text-primary); }

.bid-submit {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-accent) !important;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.bid-submit:hover,
.bid-submit:focus-visible {
    background: var(--accent-light);
    border-color: var(--accent-light);
    text-decoration: none !important;
}

.bid-note {
    margin: 0.75rem 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

/* ============================================================
   Skeleton u fotek
   ------------------------------------------------------------
   Fotky se od zavedení obrazek.php stahují zvlášť, takže mezi
   vykreslením stránky a jejich příchodem je prodleva. Dřív byly
   bajty přímo v HTML: stránka se neukázala vůbec, dokud se
   nestáhlo všechno. Teď se ukáže hned — a na místě fotek drží
   pulzující plocha, aby layout nepodskočil, až obrázek dorazí.

   Třídu sundává jeden posluchač v patičce.
   ============================================================ */
.ph-skel {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-media, #101010);
}
.ph-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    /* Krajní zastávky jsou PRŮHLEDNÁ BÍLÁ, ne holé `transparent`.
       Holé `transparent` je rgba(0,0,0,0), takže by se přechod táhl
       přes průhlednou čerň a bílý odlesk by cestou zešedl — tatáž
       příčina jako schody v gradientech hlavičky. */
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.045) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: ph-shimmer 1.3s ease-in-out infinite;
    pointer-events: none;
}
/* Obrázek se objeví až s odebráním třídy — jinak by se překresloval
   přes běžící animaci a blikal. */
.ph-skel img { opacity: 0; }
.detail-gallery img,
.item-media img { transition: opacity 0.25s ease; }

@keyframes ph-shimmer {
    100% { transform: translateX(100%); }
}

/* Pulzování je dekorace, ne informace — kdo si vypnul animace,
   ať vidí jen klidnou plochu. */
@media (prefers-reduced-motion: reduce) {
    .ph-skel::after { animation: none; }
}

/* Stav zvonečku pod formulářem příhozu. Ukazuje se jen když je
   hlídání zapnuté, takže to není druhý ovladač k témuž — jen
   cesta ven, která nevyžaduje znovu přihazovat. */
.bid-watch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.bid-watch button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}
.bid-watch button:hover { color: var(--accent-light, var(--accent)); }



/* ---- Alerts ---- */

.alert {
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 400;
    border: 1px solid;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
}

.alert-success {
    background: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.2);
    color: var(--success);
}

.alert-danger {
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.2);
    color: var(--danger);
}

.alert-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.alert-secondary a {
    color: var(--accent) !important;
    font-weight: 600;
    text-decoration: underline !important;
}

/* ---- Modal ---- */

.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
}

.modal-title {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    font-size: 0.8rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.modal-body h4 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.modal-body ul {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.modal-body li {
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
}

.modal-footer {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.5rem;
}

.modal-80w { max-width: 580px; }

.btn-close, .modal .btn-secondary {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
}

/* ---- Footer ---- */

footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--border);
    color: var(--text-muted) !important;
    padding: 2.5rem 0 !important;
    font-size: 0.75rem;
}

footer .container { margin: 0 auto; }
footer p { margin: 0.125rem 0; }

footer b, footer strong {
    color: var(--text-secondary);
    font-weight: 600;
}

footer a {
    color: var(--text-muted) !important;
    transition: color var(--transition);
}

footer a:hover { color: var(--accent) !important; }

/* ---- Buttons General ---- */

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    transition: all var(--transition);
    border-radius: var(--radius-lg);
}

.btn:hover { text-decoration: none !important; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

/* ---- Forms ---- */

.form-group { margin: 0.5rem 0; }

label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.03em;
}

.form-check-input { margin-top: 0.25rem; }

/* Bootstrap dark overrides */
.form-control {
    background-color: var(--bg-card) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-lg) !important;
}

.form-control:focus {
    border-color: var(--accent) !important;
    background-color: var(--bg-elevated) !important;
    box-shadow: inset 0 0 12px var(--accent-glow) !important;
    color: var(--text-primary) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

/* Number input spinner */
input[type="number"]::-webkit-inner-spin-button {
    opacity: 0.3;
}

/* ---- Auth / Login ---- */

.form-container { display: none !important; }
.form-container.active { display: block !important; }

.toggle-link {
    cursor: pointer;
    text-decoration: underline;
    color: var(--accent);
}

.toggle-link:hover { text-decoration: none; }

.blue-link {
    color: var(--accent) !important;
    text-decoration: underline !important;
}

/* ---- Slider ---- */

.slider-img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}

/* ---- Admin ---- */

.btn.full {
    width: auto;
    min-width: 200px;
}

/* ---- Tables ---- */

table { font-size: 0.8rem; }

/* ---- Fade-in Animation ---- */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.item {
    animation: fadeUp 0.5s ease both;
}

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.05s; }
.item:nth-child(3) { animation-delay: 0.1s; }
.item:nth-child(4) { animation-delay: 0.15s; }
.item:nth-child(5) { animation-delay: 0.2s; }
.item:nth-child(6) { animation-delay: 0.25s; }
.item:nth-child(7) { animation-delay: 0.3s; }
.item:nth-child(8) { animation-delay: 0.35s; }
.item:nth-child(9) { animation-delay: 0.4s; }
.item:nth-child(10) { animation-delay: 0.45s; }
.item:nth-child(11) { animation-delay: 0.5s; }
.item:nth-child(12) { animation-delay: 0.55s; }

/* ---- Responsive ---- */

@media (max-width: 768px) {
    /* Karta je vodorovná a potřebuje šířku — dva sloupce by z ní
       udělaly nečitelný proužek. Přepínání na skládanou podobu
       obstarává dotaz na 560 px u samotné karty. */
    .grid-container { grid-template-columns: 1fr; }

    .item h3 { font-size: 0.95rem; }

    .hero-content h2 { font-size: 1.75rem; }

    .detail-title { font-size: 1.4rem; }

    .bid-card {
        padding: 1.25rem;
    }

    .bid-card .current-price { font-size: 1.5rem; }

    .btn.full {
        width: 100%;
        margin: 0.5rem 0;
    }

    .modal-80w { max-width: 95%; }

    section { padding-block: 2rem; }
}

@media (max-width: 480px) {
    .item-body { padding: 0.95rem 1rem 1rem; }
    .item h3 { font-size: 0.9rem; }
    .item .price-value { font-size: 1.3rem; }

    .navbar-brand img { height: 26px; }
}

@media only screen and (max-width: 1200px) {
    table {
        display: block;
        overflow: auto;
    }
}

/* ============================================
   Záloha pro prohlížeče bez color-mix()
   --------------------------------------------
   color-mix umí Chrome 111+, Safari 16.2+ a Firefox 113+. Starší
   prohlížeč by celou deklaraci zahodil jako neplatnou a přechod by
   zmizel — proto tu je jednodušší varianta ze dvou zastávek.
   Pásovat na starém prohlížeči může, ale to je pořád lepší než
   hlavička bez nádechu a fotka useknutá ostrou hranou.
   ============================================ */
@supports not (background: color-mix(in oklab, red 50%, transparent)) {
    .hero-section::before {
        background: radial-gradient(150% 95% at 50% 0%,
            var(--accent-ambient) 0%, var(--accent-0) 100%);
    }
    .item-image-wrap::after {
        background: linear-gradient(to top, var(--bg-media), var(--bg-media-0));
    }
    .item-media img { background: var(--bg-media); }
}