/*
 * Kamrla Seznamka - doplnkove styly nad sablonou TuruLav.
 *
 * Sablona (assets/template/css/style.css) pokryva navigaci, paticku, uvodni stranku,
 * prihlaseni/registraci, seznam clenu a kontakt. Tyto komponenty (karty profilu,
 * filtr prochazeni, detail profilu, nastaveni uctu, chat zprav) sablona nema v hotove
 * podobe pro nasi konkretni interaktivni funkcionalitu (JS v assets/js/app.js pracuje
 * s temito tridami/id), takze jsou domalovane rucne v barevnem jazyce sablony
 * (ruzova #df314d, tmava fialova #210053) na bilych kartach, ktere fungujici stejne
 * dobre na svetlem i tmavem platne stranky (viz THEME v config.php).
 */

:root {
  --kb-accent: #df314d;
  --kb-primary: #210053;
  --kb-text: #2b1150;
  --kb-text-muted: #7a7189;
  --kb-border: #ecdfe6;
  --kb-card: #ffffff;
  --kb-radius: 10px;
  --kb-shadow: 0 4px 18px rgba(33, 0, 83, .08);
  --kb-shadow-hover: 0 12px 30px rgba(33, 0, 83, .16);
}

/* Hlavicka - sablona ji navrhuje jako skoro pruhlednou, dokud uzivatel nesjede stránkou
   dolu (pak dostane .header-fixed a plne pozadi z JS). Na strankach bez vyrazne fotky
   hned pod ni (coz je vetsina nasich stranek) tak splyva s pozadim. Davame ji viditelne
   pozadi uz od zacatku, v obou motivech. */
.theme-light .header-section { background: rgba(255, 255, 255, .96) !important; box-shadow: 0 2px 16px rgba(33, 0, 83, .08); }
.theme-dark .header-section { background: rgba(33, 0, 83, .96) !important; box-shadow: 0 2px 16px rgba(0, 0, 0, .25); }

/* Sablona pocita se dvoudilnou hlavickou (.header-top + .header-bottom) - kdyz JS po
   scrollu prida .header-fixed, na sirsich obrazovkach (>=992px) posune CELOU hlavicku o
   -48px (>=1200px dokonce -55px) nahoru, aby "schovala" uz zbytecny .header-top pruh a
   zustal videt jen .header-bottom. My ale zadny .header-top vubec nemame - nas header.php
   ma jen .header-bottom - takze tenhle posun misto schovavani neexistujiciho pruhu jen
   usekl horni cast naseho JEDINEHO pruhu pod horni hranu okna (vypadalo to "zmackle a jen
   z poloviny videt"). Zrusen posun uplne, at .header-fixed zustane presne na top:0. */
.header-section.header-fixed { top: 0 !important; }

/* .header-bottom (kde sedi logo/menu) nema vlastni pozadi vubec, KROME stavu .header-fixed,
   kde ho sablona natvrdo barvi na pulpruhlednou ruzovou + blur (rgba(255,243,243,.8)) - to
   pri scrollovani "prosvitalo" pres bile pozadi .header-section vyse a vytvnet nesourody
   odstin za logem (logo ma sve VLASTNI bile pozadi vypalene primo v obrazku, viz komentar u
   .header-wrapper .logo nize, takze potrebuje pod sebou opravdu ciste bile, ne pruhledne). */
.theme-light .header-section.header-fixed .header-bottom { background: rgba(255, 255, 255, .96) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.theme-dark .header-section.header-fixed .header-bottom { background: rgba(33, 0, 83, .96) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Mobilni hamburger ikonka (.header-bar, tri "spans") - sablona ji kresli natvrdo bilou
   (#fff), pocitajici s puvodne pruhlednou/tmavou hlavickou. Na svetlem motivu ted mame
   hlavicku plne bilou (viz vyse) - bile pruhy na bilem pozadi byly neviditelne, i kdyz
   tlacitko samo fungovalo (rozbalilo menu po kliknuti naslepo). */
.theme-light .header-bar span { background-color: var(--kb-primary); }

/* Bootstrap .container ma jen 12px gutter po stranach (0.75rem) - na sirokych obrazovkach
   nenapadne, na mobilu (kde .container zabira celou sirku obrazovky) to pusobi, ze stranka
   nema po stranach skoro zadny okraj. Nase vlastni layouty (.browse-layout, .account-layout,
   .profile-detail, .chat-layout...) maji navic padding jen nahoru/dolu (viz jejich definice
   nize), zavisi tedy cele na .container gutteru - zvetseno jen na mobilu, at zbytecne
   nemeni uz fungujici odsazeni na desktopu. */
@media (max-width: 575px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

/* "Nedavno aktivni profily" na index.php (.member-item.style-1, sablonova trida) - sablona
   fotku natvrdo posouva o 10px doprava/dolu (transform: translate(10px,10px)) a teprve na
   hover ji "zasune" na spravne misto (translate(0,0)) - zamysleny dekorativni efekt, ale u nas
   diky tomu fotka bez hoveru vypadala, jako by presahovala pres okraj karty. Vypnuto úplně -
   fotka ma byt vzdy cela a na spravnem miste, ne jen po najeti mysi. */
.member-item.style-1 .lab-inner .lab-thumb img { transform: none !important; }

/* Zvyrazneni aktivni polozky v hornim menu - sablona sama tohle pro hlavni menu nema
   (jen pro rozbalovaci podnabidku), aktivni stranku PHP oznaci tridou .active v header.php. */
.menu > li > a.active {
  color: #fff !important;
  background: var(--kb-accent);
  border-radius: 999px;
}
@media (max-width: 991px) {
  .menu > li > a.active { border-radius: 0; }
}

/* Prihlasit/Registrace (a Zpravy-ikonka/jmeno uzivatele) - sablona je dela jako jednu
   "srostlou" pilulku (leva polovina zaoblena jen vlevo, prava jen vpravo). Kdyz vedle
   sebe nejsou oba dva (napr. po prenosu Zprav do ucet.php zustane u prihlaseneho jen
   jmeno uzivatele + samostatna ikonka), vypadalo to useknute na jedne strane. Misto
   toho ted obe tlacitka maji vzdy vsechny rohy zaoblene a mezi sebou mezeru. */
.header-wrapper .menu-area .login,
.header-wrapper .menu-area .signup {
  border-radius: 999px !important;
}
.header-wrapper .menu-area .login { margin-right: 10px; }

/* Sablona ma Registraci (.signup) navrzenou natvrdo jako plnou cervenou "CTA" pilulku a
   Prihlasit (.login) jen jako barevny text - bez ohledu na to, na ktere strance zrovna
   jsme. Vypadalo to, jako by Registrace byla porad "aktivni". Sjednoceno: obe ve
   vychozim stavu vypadaji stejne (jen barevny text, bez vyplne) a barevnou vyplni ziska
   jen ta, na jejiz strance uzivatel prave je (.current-page) - stejny princip jako u
   zvyrazneni aktivni polozky v hornim menu (.menu > li > a.active vyse). */
.header-wrapper .menu-area .login,
.header-wrapper .menu-area .signup {
  background: transparent !important;
  color: var(--kb-accent) !important;
}
.header-wrapper .menu-area .current-page {
  background: var(--kb-accent) !important;
  color: #fff !important;
}

/* Ikonka Zprav v hlavicce (odkazuje na zalozku Zpravy v ucet.php) + odznak s poctem
   neprectenych zprav. */
.nav-icon-btn {
  position: relative; display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--kb-accent) !important;
  margin: 0 10px; font-size: 18px; flex-shrink: 0;
}
@media (min-width: 768px) { .nav-icon-btn { display: inline-flex; } }
.nav-icon-btn:hover { background: var(--kb-accent); color: #fff !important; }
.nav-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--kb-primary); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid #fff;
}
/* Maly kulaty nahled profilove fotky - vedle jmena v horni liste i nad e-mailem na
   account.php. Nahrazuje generickou ikonu icofont-user, kdyz uzivatel uz ma nahranou
   fotku (viz includes/header.php, account.php). Na account.php dvojnasobne vetsi nez v
   horni liste - tam ma zustat opravdu drobna. */
.mini-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 4px; }
.photo-uploader .mini-avatar { display: block; width: 44px; height: 44px; margin: 0 auto 10px; }
.account-status-lines p { margin: 0 0 4px; font-size: 13px; color: var(--kb-text-muted); }
.account-status-lines p:last-child { margin-bottom: 0; }

/* Nadpisova sekce stranky (napr. "Prochazet profily") - sablona ji dela jako velky
   fotoheroe banner (280px padding nahore), ale ve svetlem motivu je pod ni jen plocha
   barva (bg-pink), takze puvodnich 200-280px padding-top pusobilo zbytecne vysoke a
   prazdne. POZOR: .header-section je ale "position: absolute" (plava pruhledne nad
   obsahem, viz sablona) - i v pripade male svetle sekce tak musi byt padding-top vzdy
   aspon tak velky jako skutecna vyska hlavicky (~84px na mobilu, ~92px na desktopu),
   jinak hlavicka prekryje/usekne horni cast nadpisu. Puvodni zmensene hodnoty (55/65px)
   tohle nedodrzovaly - nadpis byl useknuty asi z poloviny.
   padding-top zustava - je to zaroven minimalni mezera pod plavajici hlavickou (viz vyse).
   padding-bottom zmenseny tak, aby viditelna mezera POD drobeckovou navigaci (mezi ni a
   koncem ruzove plochy) vysla stejne velka, jako je viditelna mezera NAD nadpisem (mezi
   koncem hlavicky a nadpisem) - obsah je tak vizualne vycentrovany ve viditelnem pruhu pod
   hlavickou a cela sekce je celkove nizsi. */
.theme-light .page-header-section.style-1 { padding-top: 100px; padding-bottom: 0; }
@media (min-width: 992px) {
  .theme-light .page-header-section.style-1 { padding-top: 115px; padding-bottom: 7px; }
}

/* Preloader (zobrazi se pri kazdem nacitani stranky, nez dobehne window "load") -
   sablona ho dela jako plnou ruzovou/cervenou plochu pres celou obrazovku s bilym
   toceim se koleckem. Plochu davame pryc, kolecko necháváme, jen mu date barvu, at
   je videt i na pruhlednem pozadi.
   DULEZITE: samotny element pres celou obrazovku (z-index 9999) i po zpruhledneni
   pozadi porad existuje a zachytava kliky, dokud ho jQuery fadeOut(1000) po 1 sekunde
   nenastavi na display:none - proto byla chvilku po nacteni stranky "prodleva" pred
   tim, nez slo kliknout na cokoliv v hlavicce. pointer-events:none to resi - klik
   propadne primo na to, co je pod nim, uz behem fade-out animace. */
.preloader { background: transparent !important; pointer-events: none; }
.preloader .preloader-inner .preloader-icon span { background: var(--kb-accent) !important; }

/* Nove logo (siroke, s vlastnim svetlym pozadim) - sablona pocita s malym ctvercovym
   logem a omezuje ho jen sirkou; misto toho ho drzime na pevne vysce s pomerem stran. */
.header-wrapper .logo { width: auto !important; }
.header-wrapper .logo a img { height: 46px; width: auto; max-width: none; }
@media (max-width: 575px) {
  .header-wrapper .logo a img { height: 34px; }
}

/* Flash zpravy */
.flash-wrap { padding-top: 24px; }
.flash { padding: 14px 18px; border-radius: var(--kb-radius); margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.flash-success { background: #e4f8f1; color: #1f8a5f; border-color: rgba(31, 138, 95, .25); }
.flash-error { background: #fbe7ea; color: #c93a52; border-color: rgba(201, 58, 82, .25); }
.flash-info { background: #eef3fb; color: #2d5a9b; border-color: rgba(45, 90, 155, .25); }

/* Karta profilu (browse.php, index.php doporucene profily) */
.profile-card {
  background: var(--kb-card);
  border-radius: var(--kb-radius);
  overflow: hidden;
  box-shadow: var(--kb-shadow);
  border: 1px solid var(--kb-border);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.profile-card:hover { transform: translateY(-5px); box-shadow: var(--kb-shadow-hover); }
/* aspect-ratio misto pevne height - karty jsou ted uzsi (viz .grid-profiles), pevna vyska
   260px by pri mensi sirce vypadala nepomerne vysoka/uzka. Takhle fotka drzi rozumny pomer
   stran bez ohledu na to, kolik sloupcu se do radku vejde. */
.profile-card .thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #f5e8ee; }
/* object-fit: contain (ne cover) - cely obrazek ma byt v nahledu videt cely, ne oriznuty
   podle pomeru stran karty; prazdny prostor kolem (kdyz fotka nema presne 4:5) vyplni
   pozadi .thumb (#f5e8ee) - stejne jako u chybejici fotky. */
.profile-card .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s ease; }
.profile-card:hover .thumb img { transform: scale(1.04); }
/* Bez scope na .profile-card - .online-dot se pouziva i v hlavicce detailu profilu
   (profile.php), ktera si pozici/pozadi/barvu prebiji vlastnim inline stylem (viz tam), ale
   display:flex + align-items:center potrebuje taky, aby tecka byla svisle zarovnana na stred
   textu Online/Offline misto na jeho spodek (baseline). */
.online-dot {
  position: absolute; top: 12px; right: 12px;
  background: rgba(33, 0, 83, .65); backdrop-filter: blur(4px); color: #fff;
  font-size: 11px; padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; font-weight: 500;
}
.online-dot i { color: #22c55e; font-size: 8px; }
.online-dot.offline i { color: #ded0d2; }
/* Vetsi varianta vedle veku v nadpisu detailu profilu (profile.php) - h1 ma velky font, tecka
   i text vedle "Jmeno, vek" musi byt vyraznejsi nez drobny odznak na karte. */
.online-dot-lg { font-size: 15px; gap: 7px; vertical-align: middle; margin-top: -9px; }
.online-dot-lg i { font-size: 11px; }
.profile-card .like-btn {
  position: absolute; bottom: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .95); color: var(--kb-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15); transition: transform .15s ease, background .15s ease, color .15s ease;
}
.profile-card .like-btn:hover { transform: scale(1.08); }
.profile-card .like-btn.liked { background: var(--kb-accent); color: #fff; }
.profile-card .like-btn:active { transform: scale(.9); }
.profile-card .info { padding: 16px 18px; }
.profile-card .info h4 { font-size: 17px; margin-bottom: 4px; }
.profile-card .info h4 a { color: var(--kb-text); }
.profile-card .info small { color: var(--kb-text-muted); font-size: 13px; }
.profile-card .excerpt { font-size: 13px; color: var(--kb-text-muted); margin-top: 8px; margin-bottom: 0; }
/* Kompaktni varianta .profile-tags pro "Typ vztahu" na karte (browse.php/account.php seznamy)
   - karta ma malo mista, takze mensi padding/font a max 3 stitky (viz profile_card.php). */
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.card-tags .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #f5e8ee; color: var(--kb-primary); font-size: 11px; }

/* Odznaky placenych funkci na karte profilu (browse.php/index.php/account.php) - "Zvyrazneno"
   (highlight_24h/7d), "Profil tydne" (profile_of_week, admin/settings.php) a "Nova fotka"
   (highlight_new_photo). Ribbons vlevo nahore (aby nekolidovaly s .online-dot vpravo nahore
   ani s .like-btn vpravo dole), znacka nove fotky vlevo dole. */
.card-ribbons { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.card-ribbon {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; color: #fff; text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.card-ribbon.ribbon-week { background: linear-gradient(135deg, #f4c95d, #df314d); }
.card-ribbon.ribbon-highlight { background: var(--kb-primary); }
.card-badge-new {
  position: absolute; bottom: 12px; left: 12px; background: #1f8a5f; color: #fff;
  font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; text-transform: uppercase;
}

/* Layout prochazeni (browse.php) - .filters je position:sticky, aby "jela s uzivatelem" pri
   scrollovani seznamem profilu misto aby zmizela nahore hned na zacatku. Stejne sticky chovani
   ma i leve menu na account.php (.photo-uploader, viz nize) - obe maji byt konzistentni.
   POZOR: markup ma <div class="container browse-layout"> - OBE tridy na stejnem elementu (na
   rozdil od account.php, kde je .account-layout vnorene UVNITR samostatneho .container).
   Proto jen padding-top/bottom, NE zkraceny zapis "padding: 40px 0 60px" - ten by nastavil i
   padding-left/right na 0 a prepsal tak .container gutter (viz jeho @media (max-width:575px)
   pravidlo vyse) - presne tohle zpusobilo, ze zvetseni okraju na mobilu na teto strance
   nemelo zadny efekt. */
.browse-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding-top: 40px; padding-bottom: 60px; align-items: start; }
/* "Top profily z vaseho kraje" (feature top_profiles_nearby) - odlisit od hlavniho vypisu
   pod nim jemnym ohraicenim/podkladem, at je jasne, ze jde o samostatny doporucujici blok. */
.top-nearby-section { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--kb-border); }
.top-nearby-section h3 { font-size: 17px; color: var(--kb-text); margin-bottom: 16px; }
.filters { background: var(--kb-card); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); border: 1px solid var(--kb-border); padding: 22px; position: sticky; top: 20px; }
.filters h3 { font-size: 17px; margin-bottom: 18px; color: var(--kb-text); }
.filters .form-group { margin-bottom: 16px; }
.filters label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--kb-text-muted); }
.filters select, .filters input[type="number"] { width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--kb-border); }

/* Select2 (viz browse.php - filtr Pohlaví/Hledá/Kraj) prekreslen tak, aby vypadal jako
   ostatni "pilulkove" formularove prvky sablony, ne jako vychozi Select2 vzhled. */
.filters .select2-container { width: 100% !important; }
.filters .select2-container--default .select2-selection--single {
  height: auto; padding: 8px 30px 8px 10px; border-radius: 12px; border: 1px solid var(--kb-border); background: #fff;
}
.filters .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; line-height: 1.4; color: var(--kb-text); font-size: 14px;
}
.filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; }
.filters .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--kb-accent); }
/* Select2 v registracnich formularich (register.php, google_complete.php - nepovinne mesto) -
   kopiruje vypocteny vzhled sousednich <select> sablony (vyska 42px, radius 12px, ruzove pozadi
   a okraj, stin, 16px, text vlevo), jinak by pole vypadalo jako cizi prvek. */
.login-section .account-form .select2-container { width: 100% !important; text-align: left; }
.login-section .account-form .select2-container--default .select2-selection--single {
  height: 42px; padding: 0 34px 0 16px;
  background: rgb(253, 247, 250); border: 1px solid rgba(223, 49, 77, .3); border-radius: 12px;
  box-shadow: 0 2px 2px rgba(223, 49, 77, .1);
}
.login-section .account-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0; font-size: 16px; line-height: 40px; color: rgb(43, 17, 80);
}
.login-section .account-form .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgb(43, 17, 80); }
.login-section .account-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 12px; }
.login-section .account-form .select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 6px; }
.login-section .account-form .select2-container--default.select2-container--disabled .select2-selection--single { opacity: .6; cursor: not-allowed; }
.login-section .account-form .reg-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--kb-text-muted); }
.select2-dropdown { border-radius: 10px; border-color: var(--kb-border); overflow: hidden; font-size: 14px; }
.select2-search--dropdown { padding: 8px; }
.select2-search--dropdown .select2-search__field { border-radius: 8px; border: 1px solid var(--kb-border); padding: 6px 10px; outline: none; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--kb-accent); }
.select2-container--default .select2-results__option[aria-selected=true] { background: #f5eef1; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.checkbox-row input { width: auto; }
/* minmax 230px drzelo na browse.php (postranni filtr + container) jen 3 karty vedle sebe -
   155px je spocitano tak, aby se 4 vesly i v nejuzsim mistě, kde se profily zobrazuji
   (.profile-window na account.php, ktera ma jeste uzsi dostupnou sirku kvuli levemu menu +
   vlastnimu paddingu). Na sirsich obrazovkach auto-fill pridava dalsi sloupce sam, tady
   jde jen o zaruceny MINIMALNI pocet 4 na beznou desktopovou sirku. */
.grid-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 22px; }
.load-more-wrap { text-align: center; margin-top: 32px; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--kb-text-muted); }
.empty-state i { color: #e3cdd1; font-size: 40px; }

/* Ohranicene "okenko" pro vypisy profilu v ramci pododkazu na account.php (Doporucene/
   Oblibene/Zajem o me/Navstevy/Stouchnuti/Blokovani) - NENI globalni uprava .grid-profiles/
   .blocked-list samotnych (ty se pouzivaji i mimo account.php, napr. browse.php, tam maji
   zustat neomezene s vlastnim "Nacist dalsi" tlacitkem).
   Puvodne mela vsude pevnou max-height + scroll (aby se karta netahala do nekonecna) - v
   sekcich Prochazet a Zajem o mne uz to uzivatel nechtel (radeji at je cela karta vyssi, bez
   vnitrniho scrollu). Zustava jen na Blokovanych (.is-scrollable, viz account.php), kde delsi
   seznam realisticky nastane castej. */
.profile-window { padding: 16px; border: 1px solid var(--kb-border); border-radius: var(--kb-radius); background: #fdfbfc; }
.profile-window.is-scrollable { max-height: 420px; overflow-y: auto; }
.profile-window .grid-profiles { gap: 16px; }
.profile-window .blocked-list { gap: 10px; }
.profile-window .empty-state { padding: 30px 20px; }
/* Kompaktnejsi varianta .empty-state pro mensi/uzsi plochy (upsell boxy vlozene doprostred
   existujiciho obsahu - filtry na browse.php, Fotky/Oblibene/Clenstvi na account.php) - vychozi
   .empty-state ma padding 70px, navrzeny pro cele prazdne zalozky, ne vlozeny box. */
.empty-state.compact { padding: 20px 14px; text-align: left; }
.empty-state.compact i { font-size: 24px; }
.membership-upsell .lab-btn { margin-top: 14px; }
.membership-interest-section { margin-bottom: 32px; }
.membership-interest-section h5 { margin-bottom: 4px; }

/* Detail profilu (profile.php) - stejny duvod jako u .browse-layout vyse (jen padding-top/
   bottom, ne zkraceny zapis): markup je <div class="container profile-detail">, obe tridy na
   jednom elementu. */
.profile-detail { display: grid; grid-template-columns: 380px 1fr; gap: 40px; padding-top: 40px; padding-bottom: 60px; }
.gallery-main { border-radius: var(--kb-radius); overflow: hidden; box-shadow: var(--kb-shadow-hover); height: 420px; background: #f5e8ee; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease; }
.gallery-thumbs img:hover { transform: translateY(-2px); }
.gallery-thumbs img.active { border-color: var(--kb-accent); }
/* Zamcena dlazdice soukrome fotky (feature private_photos) - misto <img> (viz profile.php),
   at ji initGallery() (cte jen .gallery-thumbs img) neposune do hlavniho nahledu/lightboxu. */
.gallery-thumb-locked {
  width: 64px; height: 64px; border-radius: 8px; background: var(--kb-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--kb-text-muted); font-size: 10px; text-align: center; padding: 4px;
}
.gallery-thumb-locked i { font-size: 16px; }
.photo-access-btn { background: none; border: none; padding: 0; color: var(--kb-accent); font-size: 10px; cursor: pointer; text-decoration: underline; }
.gallery-main-guest { height: 200px; max-width: 220px; }
.gallery-main-guest img { cursor: default; }
.gallery-guest-note { margin-top: 12px; font-size: 13px; color: var(--kb-text-muted); max-width: 220px; }

/* Lightbox pro prohlizeni fotek profilu ve vetsim nahledu (profile.php) - vlastni
   jednoducha implementace, zadna dalsi knihovna. */
.lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(10, 0, 20, .92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, .25); }
.lightbox-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 18px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev.hidden, .lightbox-next.hidden { display: none; }
.lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px;
  background: rgba(255, 255, 255, .12); padding: 4px 12px; border-radius: 999px;
}
body.lightbox-open { overflow: hidden; }
@media (max-width: 575px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 10px; right: 10px; }
}
.detail-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.detail-head h1 { font-size: 32px; color: var(--kb-text); margin: 0; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
/* Stouchnuti/Oblibene/Nahlasit/Zablokovat - viz necomitovat/CHANGELOG.md */
.poke-btn.poked, .poke-btn[disabled] { opacity: .55; cursor: default; }
.bookmark-btn.active { background: var(--kb-accent); color: #fff !important; border-color: var(--kb-accent); }
.bookmark-btn.active i { color: #fff; }
.detail-actions-secondary { display: flex; gap: 18px; margin: 12px 0 20px; }
.icon-text-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--kb-text-muted); font-size: 13px; padding: 4px 0; transition: color .15s ease;
}
.icon-text-btn:hover { color: var(--kb-accent); }
.blocked-list { display: flex; flex-direction: column; gap: 10px; }
.blocked-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--kb-radius); border: 1px solid var(--kb-border); }
.blocked-item img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.blocked-item .meta { flex: 1; min-width: 0; }
.blocked-item .meta h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--kb-text); }
.blocked-item form { margin: 0; }
.detail-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.fact { background: var(--kb-card); border-radius: 8px; padding: 14px 16px; box-shadow: var(--kb-shadow); border: 1px solid var(--kb-border); }
.fact span { display: block; color: var(--kb-text-muted); font-size: 12px; margin-bottom: 2px; }
.fact strong { font-size: 15px; color: var(--kb-text); }
.like-btn-detail { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: none; background: var(--kb-accent); color: #fff; font-weight: 600; cursor: pointer; }
.like-btn-detail.liked { background: #1f8a5f; }
.bio-text { color: var(--kb-text); line-height: 1.7; }

/* Ucet (account.php) - leve menu (.photo-uploader) a prava karta maji KAZDY svou vlastni
   prirozenou vysku (align-items:start prebiji vychozi grid stretch), nezavisle na obsahu
   toho druheho. Driv se zkousela vzajemne vyrovnavat vyska obou sloupcu (align-items:stretch
   + height:100% retezec dolu k aktivni zalozce) - v praxi se ale ukazalo, ze i s ohranicenymi
   scrollovatelnymi okenky uvnitr karty (.profile-window, .chat-layout) je soucet ruznych
   casti obsahu (formular + okenko atd.) casto porad vyssi nez menu, takze se menu porad
   zbytecne natahovalo. Kratsi zalozky tak proste maji kartu kratsi nez menu (zadny problem),
   delsi obsah karty prirozene prolezi pod spodni hranu menu - viz .profile-window/.chat-layout
   pro to, jak se resi prilis DLOUHY obsah v ramci samotne karty. */
.account-layout { display: grid; grid-template-columns: 320px 1fr; gap: 32px; padding: 40px 0 60px; align-items: start; }
/* position: sticky - menu "jede" s uzivatelem pri scrollovani karty vpravo, stejne jako
   .filters na browse.php (viz vyse). */
.photo-uploader { background: var(--kb-card); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); border: 1px solid var(--kb-border); padding: 28px; text-align: center; position: sticky; top: 20px; }
.account-nav {
  display: flex; flex-direction: column; /* Bootstrap .nav je jinak display:flex bez sloupcoveho smeru - polozky by se lamaly do radku. */
  list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--kb-border); text-align: left;
}
.account-nav .nav-item + .nav-item { margin-top: 2px; }
.account-nav .nav-item:first-child { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--kb-border); }
.account-nav .nav-link {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--kb-text-muted);
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.account-nav .nav-link .tab-badge { margin-left: auto; }
.account-nav .nav-link:hover { background: rgba(223, 49, 77, .08); color: var(--kb-primary); text-decoration: none; }
.account-nav .nav-link.active { background: var(--kb-accent); color: #fff; }
.account-nav .nav-link.active .tab-badge { background: #fff; color: var(--kb-accent); }
.card { background: var(--kb-card); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); border: 1px solid var(--kb-border); padding: 30px; margin-bottom: 24px; }
.card h3 { margin-bottom: 20px; font-size: 19px; color: var(--kb-text); }
.card .form-group { margin-bottom: 18px; }
.card label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--kb-text-muted); }
.card input[type=text], .card input[type=email], .card input[type=password], .card input[type=date], .card select, .card textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kb-border); font-family: inherit;
}

/* Zalozky v nastaveni uctu (account.php) - Profil / Vlastnosti / Koniky / Heslo / ...
   Navigace zalozek (.account-nav, viz vyse) sedi v levem sloupci pod tlacitkem "Zobrazit
   verejny profil", obsah zalozek v prave karte. Pouziva Bootstrap 5 JS (uz nacteno v
   patice) pro prepinani - staci spravne data-bs-target/id, DOM umisteni navigace vuci
   obsahu neni pro Bootstrap tab plugin dulezite. */
/* min-height (pevny px, ne procento - procento by tu znovu hrozilo stejnym "blowout"
   problemem jako pri drivejsim pokusu o presne vyrovnani vysky) drzi kartu vizualne
   sladenou s levym menu na kratkych zalozkach (Heslo, Profil...), ktere by jinak vedle
   ~500px vysokeho menu vypadaly nepomerne male. Zaroven NEBRANI delsimu obsahu (zaplnene
   Zajem o me, Prochazet...) prirozene pokracovat dal dolu - jen minimum, ne presne
   vyrovnani jako drive. */
.settings-card { padding: 0; margin-bottom: 0; min-height: 490px; }
.settings-tab-content { padding: 30px; }
.settings-tab-content .tab-title { font-size: 19px; color: var(--kb-text); margin-bottom: 6px; }
.settings-tab-content .tab-desc { font-size: 14px; color: var(--kb-text-muted); margin-bottom: 22px; max-width: 46em; }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 999px; background: var(--kb-accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle;
}
.badge-vip { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #f4c95d, #df314d); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }

/* Pododkazy v ramci jedne skupiny leveho menu (Muj profil / Zajem o me / Prochazet / Ucet) -
   vodorovna rada zalozek nahore v obsahu skupiny, viz account.php. Stejny vizualni jazyk jako
   puvodni .account-nav (plna barevna vypln aktivni polozky, 8px zaobleni), jen vodorovne
   misto svisle. */
.sub-tabs { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 26px; padding: 0 0 16px; border-bottom: 1px solid var(--kb-border); }
.sub-tabs .nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: none; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--kb-text-muted);
  transition: background .15s ease, color .15s ease;
  text-decoration: none; /* .nav-link tu byva i <a> (viz slozky oblibenych, account.php) - bez tohle by mel podtrzeni jako bezny odkaz */
}
.sub-tabs .nav-link:hover { background: rgba(223, 49, 77, .08); color: var(--kb-primary); }
.sub-tabs .nav-link.active { background: var(--kb-accent); color: #fff; }
.sub-tabs .nav-link.active .tab-badge { background: #fff; color: var(--kb-accent); }

/* Vyber vlastnosti/koniku (account.php) - checkboxy jako klikaci "pilulky" */
.tag-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-choice { position: relative; margin: 0; }
.tag-choice input { position: absolute; opacity: 0; }
.tag-choice span {
  display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--kb-border);
  background: #fff; color: var(--kb-text-muted); font-size: 13px; cursor: pointer; transition: all .15s ease; user-select: none;
}
.tag-choice:hover span { border-color: var(--kb-accent); color: var(--kb-text); }
.tag-choice input:checked + span { background: var(--kb-accent); border-color: var(--kb-accent); color: #fff; }
.tag-choice input:focus-visible + span { outline: 2px solid var(--kb-accent); outline-offset: 2px; }

/* Vypis vlastnosti/koniku na profile.php */
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.profile-tags .tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #f5e8ee; color: var(--kb-primary); font-size: 13px; }

/* Zpravy / chat - zalozka "Zpravy" v account.php. Ma vlastni pevnou vysku (600px), nezavislou
   na tom, kolik ma leve menu polozek. Dlouha konverzace (desitky zprav) zustava uvnitr sveho
   scrollovatelniho panelu diky kombinaci pevne vysky + overflow:hidden na tomto kontejneru a
   overflow-y:auto + min-height:0 na .chat-messages nize - stranky po 20 zprav, viz initMessages(). */
.chat-layout { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: minmax(0, 1fr); height: 600px; background: var(--kb-card); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow-hover); border: 1px solid var(--kb-border); overflow: hidden; margin: 0; }
/* Zalozka Zpravy nema mit odsazeni od karty (na rozdil od ostatnich zalozek) - chat ma
   vyplnit celou dostupnou plochu, ne byt zarovnany do stredu s mezerami kolem. */
#tab-messages { margin: -30px; }
.conversation-list { border-right: 1px solid var(--kb-border); overflow-y: auto; min-height: 0; }
.conversation-item { display: flex; gap: 12px; padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--kb-border); transition: background .15s ease; }
.conversation-item:hover, .conversation-item.active { background: #fbeff0; }
.conversation-item img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.conversation-item .meta { flex: 1; min-width: 0; }
.conversation-item .meta h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--kb-text); }
.conversation-item .meta p { margin: 2px 0 0; font-size: 12px; color: var(--kb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Prioritni zprava (feature priority_message) - konverzace, kde protistrana ma aktivni
   clenstvi, se radi nahoru (viz MessageModel::conversationPartners()) a ma jemne zvyraznene
   pozadi + hvezdicku vedle jmena, at je videt proc je nahore. */
.conversation-item.priority { background: #fff8ec; }
.conversation-item.priority:hover, .conversation-item.priority.active { background: #fbeff0; }
.conversation-item .meta h5 i { color: #f4c95d; font-size: 12px; }
.unread-badge { background: var(--kb-accent); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 8px; height: fit-content; font-weight: 600; }
.chat-panel { display: flex; flex-direction: column; background: #fffaf9; min-height: 0; }
.chat-header { padding: 16px 20px; border-bottom: 1px solid var(--kb-border); display: flex; align-items: center; gap: 12px; background: #fff; }
.chat-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-header h5 { margin: 0; color: var(--kb-text); }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bubble { max-width: 60%; padding: 10px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.bubble.mine { align-self: flex-end; background: var(--kb-accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble.theirs { align-self: flex-start; background: #f5ecec; color: var(--kb-text); border-bottom-left-radius: 4px; }
.bubble .time { display: block; font-size: 10px; margin-top: 4px; opacity: .7; }
/* Panel nad polem na psani zprav - tucne/kurziva (hvezdickova syntaxe) + vyber emoji. */
.chat-toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 16px; border-top: 1px solid var(--kb-border); background: #fff; position: relative; }
.chat-fmt-btn {
  width: 32px; height: 32px; border: none; background: transparent; color: var(--kb-text-muted);
  border-radius: 8px; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
}
.chat-fmt-btn:hover { background: var(--kb-border); color: var(--kb-text); }
.emoji-picker-wrap { position: relative; }
.emoji-picker {
  position: absolute; bottom: 40px; left: 0; z-index: 20; width: 260px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  background: #fff; border: 1px solid var(--kb-border); border-radius: 12px; box-shadow: var(--kb-shadow-hover); padding: 8px;
}
.emoji-item { border: none; background: transparent; font-size: 20px; line-height: 1; padding: 6px; border-radius: 8px; cursor: pointer; }
.emoji-item:hover { background: var(--kb-border); }
.chat-compose { display: flex; gap: 10px; padding: 12px 16px 16px; background: #fff; }
.chat-compose input { flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--kb-border); }
.chat-compose button { background: var(--kb-accent); color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; cursor: pointer; }
.chat-compose button:hover { background: var(--kb-primary); }
.chat-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--kb-text-muted); flex-direction: column; gap: 10px; text-align: center; padding: 20px; }
.chat-empty i { color: #e3cdd1; font-size: 32px; }

/* Select pole uvnitr prihlasovaci/registracni karty - sablona ma vlastni styl jen pro
   input, ne pro select. Drzeny vzdy jako svetly chip s tmavym textem, aby byl citelny
   nezavisle na THEME (karta .account-wrapper zustava tmava v obou motivech). */
.account-form select {
  width: 100%;
  border: 1px solid rgba(223, 49, 77, .3);
  border-radius: 12px;
  background: #fdf7fa;
  color: var(--kb-text);
  box-shadow: 0 2px 2px 0 rgba(223, 49, 77, .1);
  padding: .6rem 1rem;
  margin-bottom: 0;
}

/* Vyhledavaci formular v hero sekci (index.php) - sablona ma pro tahle pole napevno
   "border-radius: none" (ctverecove rohy), zatimco uplne vsude jinde na webu (prihlaseni,
   registrace, filtr profilu, nastaveni uctu...) jsou inputy/selecty zaoblene. Sjednoceno. */
.banner-form input,
.banner-form select {
  border-radius: 8px !important;
}

/* Ramecek kolem cele hero vyhledavani (silny ruzovy okraj) byl ctvercovy - zaobleno,
   at ladi se zaoblenymi inputy/selecty uvnitr. */
.banner-section .section-wrapper .banner-content .intro-form {
  border-radius: 20px;
}

/* Nahrada vyhledavaciho formulare v hero sekci behem pre-launch rezimu (index.php,
   viz is_prelaunch_mode()) - hledani partnera je vypnute (stejne jako browse.php,
   require_no_prelaunch()), misto formulare je tu vysvetlujici text + CTA na registraci/
   profil. .intro-form-inner uz ma od sablony vlastni padding/pozadi, tenhle blok jen
   dolaudi mezery uvnitr nej. */
.prelaunch-banner-notice p {
  margin-bottom: 18px;
}
.prelaunch-banner-notice .lab-btn {
  margin-top: 4px;
}
/* Jen font-size, ne barva - sablona vynucuje text v hero formulari na tmave fialovou pres
   ".intro-form *" (universal selektor, ale s vyssi specificitou nez jedna nase trida), takze
   by barva stejne prohrala - viz necomitovat/CHANGELOG.md pro jine drivejsi pripady tohohle vzoru. */
.prelaunch-banner-footnote {
  margin: 14px 0 0;
  font-size: 13px;
}

/* Ramecky statistik ("Cisla, ktera mluvi sama za sebe" na uvodni strane) - bily box byl
   ctvercovy. overflow:hidden zaroven pekne oriznte roznou stuzku v rohu (:before) podle
   noveho zaobleneho rohu, misto aby jim trcela pres nej. */
.about-item .lab-inner {
  border-radius: var(--kb-radius);
  overflow: hidden;
  box-shadow: var(--kb-shadow);
}

/* Zbyle ctvercove "krabicky" nalezene pri celkove kontrole zaobleni (viz CHANGELOG) -
   tlacitko v hero vyhledavani, karty blogu (+ overflow:hidden kvuli obrazku uvnitr) a box
   kontaktniho formulare. */
.banner-form button {
  border-radius: 999px;
}
/* POZOR: spravny selektor je `.blog-section .post-item-inner` - trida .blog-wrapper,
   kterou jsme puvodne pouzili (spolu s .main-blog), v HTML na blog.php ani blog_post.php
   vubec neexistuje, takze cele tohle pravidlo (zaobleni, stin, stuzka) na zivem webu
   nikdy nic nedelalo. .post-item-inner je spolecny pro seznam clanku (blog.php) i detail
   jednoho clanku (blog_post.php), proto zaobleni/stin/stuzka plati na obou strankach. */
.blog-section .post-item-inner {
  border-radius: 20px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--kb-shadow);
  border: 1px solid var(--kb-border);
  position: relative;
}
/* Roznova stuzka v rohu - stejny prvek jako u statistickych karet ("Cisla, ktera mluvi
   sama za sebe" na uvodni strane, .about-item .lab-inner:before), aby si karty na webu
   byly vizualne pribuzne. Zmensena z puvodnich 36px na 24px, aby prilis nepohltila
   zaobleny roh karty pod sebou. */
.blog-section .post-item-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 24px 0 0;
  border-color: var(--kb-accent) transparent transparent transparent;
  z-index: 1;
}
.contact-form-wrapper {
  border-radius: var(--kb-radius);
}

/* Nadpis clanku na blogu byl bily (#ffffff) - dedictvi z tmave varianty sablony, kde mela
   karta clanku tmave pozadi/fotku pod textem. Nase karta je bila, takze nadpis byl v podstate
   neviditelny, dokud na nej clovek nenajel mysi (hover uz ho prebarvi na cervenou). Zaroven
   sjednoceno s celkovym vzhledem karet, ktere jsme upravovali jinde (jemny zvedaci hover
   efekt jako u .profile-card, datum jako maly ruzovy stitek misto proste cerveneho textu). */
.blog-section .post-item-inner .post-content h4 > a {
  color: var(--kb-primary);
}
.blog-section .post-item-inner .post-content .meta {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(223, 49, 77, .08);
  margin-bottom: 10px;
}
/* Zvedaci hover jen pro seznam clanku (.main-blog na blog.php) - na detailu jednoho
   clanku (blog_post.php, ktery .main-blog nema) by hover efekt na cele strance textu
   nedaval smysl. */
.main-blog .post-item-inner:hover {
  transform: translateY(-5px);
  box-shadow: var(--kb-shadow-hover);
}

/* Sekundarni varianta tlacitka sablony (.lab-btn ma vychozi tmave fialove pozadi).
   Puvodne jen bily podklad s tenkym 1px okrajem - na svetlem pozadi skoro nevyrazne,
   pusobilo to jako by tlacitko "naskocilo" az pri najeti mysi. */
.lab-btn.outline {
  background: var(--kb-card);
  border: 2px solid var(--kb-primary);
  color: var(--kb-primary);
  box-shadow: var(--kb-shadow);
  line-height: 46px;
}
.lab-btn.outline i,
.lab-btn.outline span { color: var(--kb-primary); }
.lab-btn.outline:hover { background: var(--kb-primary); color: #fff; box-shadow: var(--kb-shadow-hover); }
.lab-btn.outline:hover i,
.lab-btn.outline:hover span { color: #fff; }
/* <button> uvnitr .account-form .form-group (napr. "Zaplatit prevodem" v order.php): sablona tam
   silnejsim selektorem vnucuje ruzovou vypln a rusi okraj - obrysovou variantu vratit stejne silne. */
.account-form .form-group button.lab-btn.outline {
  background: var(--kb-card);
  border: 2px solid var(--kb-primary);
  box-shadow: var(--kb-shadow);
}
.account-form .form-group button.lab-btn.outline:hover { background: var(--kb-primary); box-shadow: var(--kb-shadow-hover); }

/* Tlacitko "Pokracovat pres Google" (login.php/register.php) - "G" logo vedle textu, zarovnane na stred vysky tlacitka. */
.google-icon { vertical-align: middle; margin-right: 6px; margin-top: -2px; }

/* Odstup textu "Nemate/Uz mate profil?" (login.php/register.php) od tlacitka Google nad nim - bez tohohle na nej byl namackany. */
.account-bottom { margin-top: 20px; }

/* Historie objednávek členství (account.php, záložka Členství) - appka jinde na verejnych
   strankach zadnou datovou tabulku nema (jen sablonove karty/seznamy), potrebuje tedy vlastni
   minimalni styl misto nestylovaneho vychoziho <table>. */
.order-history-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.order-history-table th, .order-history-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--kb-border); }
.order-history-table th { color: var(--kb-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }

/* Potvrzovaci modal (napr. storno objednavky na account.php, zalozka Clenstvi) - sablona
   ma nacteny Bootstrap 5 JS (pro zalozky, viz account.php), ale zadny vlastni vzhled pro
   .modal - bez tohohle by byl cistě vychozi bootstrapovy (bile hranate okno, modre tlacitko),
   nesedici s zaoblenym ruzovo-fialovym vzhledem zbytku webu. */
.kb-modal .modal-content {
  border-radius: var(--kb-radius);
  border: 1px solid var(--kb-border);
  box-shadow: var(--kb-shadow-hover);
}
.kb-modal .modal-header, .kb-modal .modal-footer {
  border-color: var(--kb-border);
}
.kb-modal .modal-header {
  padding: 20px 24px;
}
.kb-modal .modal-title {
  color: var(--kb-primary);
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kb-modal .modal-title i {
  color: var(--kb-accent);
}
.kb-modal .modal-body {
  padding: 20px 24px;
  color: var(--kb-text);
}
.kb-modal .modal-footer {
  padding: 16px 24px;
  gap: 10px;
}
.kb-modal .modal-footer .lab-btn {
  margin: 0;
}
/* Bootstrap kresli .btn-close jako SVG "x" natvrdo tmave (pocita s bilou hlavickou) - to uz
   tady sedi (hlavicka modalu je bila v obou motivech), staci jen doladit hover. */
.kb-modal .btn-close:hover {
  opacity: 1;
}
/* kbAlert(message, {type}) - uspech zelena ikona, chyba zustava v akcentu webu */
.kb-modal--success .modal-title i { color: #1f8a5f; font-size: 22px; }
.kb-modal--error .modal-title i { color: var(--kb-accent); font-size: 22px; }
.kb-modal-list { margin: 0; padding-left: 20px; }
.kb-modal-list li { list-style: disc; padding: 2px 0; }

/* Captcha (captcha_field() - kontaktni formular): obrazek, "jiny kod", pole pro opsani */
.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; margin: 30px 0 0; }
.captcha-row .captcha-img { border-radius: 10px; border: 1px solid var(--kb-border); background: #fdf7fa; flex: 0 0 auto; }
.captcha-row .captcha-refresh { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--kb-border); background: #fff; color: var(--kb-primary); font-size: 18px; flex: 0 0 auto; cursor: pointer; }
.captcha-row .captcha-refresh:hover { color: var(--kb-accent); border-color: var(--kb-accent); }
/* sablona dava inputum formulare margin-bottom 30px selektorem .contact-form-wrapper .contact-form form.comment-form
   input[type="text"] - tady musi byt silnejsi, jinak je pole kodu posunute nahoru proti obrazku */
.contact-form-wrapper .contact-form form.comment-form .captcha-row input[name="captcha"] { flex: 1 1 160px; width: auto; margin-bottom: 0; text-transform: uppercase; letter-spacing: 2px; }
.contact-form-wrapper .contact-form form.comment-form .captcha-row input[name="captcha"]::placeholder { text-transform: none; letter-spacing: normal; }
/* Registrace (.login-section .account-form): sablona dava inputum width 100 % - pole kodu vedle obrazku */
.login-section .account-form .form-group .captcha-row { margin: 0; }
/* sablona dava vsem <button> ve formulari sirku 100 %, ruzovou vypln a margin 30px - tlacitko "jiny kod" vratit */
.login-section .account-form .form-group .captcha-row .captcha-refresh { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--kb-border); border-radius: 50%; box-shadow: none; color: var(--kb-primary); }
.login-section .account-form .form-group .captcha-row .captcha-refresh:hover { color: var(--kb-accent); border-color: var(--kb-accent); }
.login-section .account-form .form-group .captcha-row input[name="captcha"] { flex: 1 1 140px; width: auto; min-width: 0; text-transform: uppercase; letter-spacing: 2px; }
.login-section .account-form .form-group .captcha-row input[name="captcha"]::placeholder { text-transform: none; letter-spacing: normal; }

/* Utility */
.hidden { display: none !important; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: currentColor; animation: kb-spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes kb-spin { to { transform: rotate(360deg); } }

@media (max-width: 991px) {
  .browse-layout, .profile-detail, .account-layout, .chat-layout { grid-template-columns: 1fr; }
  /* .chat-layout ma na desktopu vzdy pevnou vysku (600px) - na mobilu, kde uz je pod sebou
     v jednom sloupci misto vedle sebe, se necha na prirozenou vysku podle obsahu. */
  .chat-layout { height: auto; min-height: 0; }
  .conversation-list { max-height: 260px; }
  /* Min-height karty (viz .settings-card) je jen kvuli vizualnimu souladu s menu VEDLE ni -
     na mobilu uz je menu NAD kartou (jeden sloupec), takze by min-height jen zbytecne
     vytvarel prazdny prostor u kratkych zalozek. */
  .settings-card { min-height: 0; }
  /* .filters/.photo-uploader jsou sticky jen kdyz jsou VEDLE druheho sloupce (desktop) - na
     mobilu je menu NAD obsahem v jednom sloupci, kde by sticky jen zbytecne "lepilo" horni
     box na obrazovku pri scrollovani dlouhym obsahem pod nim. */
  .filters, .photo-uploader { position: static; }
}

/* Vseobecne podminky (terms.php) - text z administrace (render_legal_text()): sablona u .post-content
   rusi odrazky seznamu, tady je vracime. */
/* Totez pro clanky blogu (blog_post.php, .blog-body) + mezititulky: sablonove h3 je v clanku moc velke
   a bez odstupu od seznamu nad nim. */
.legal-text ul, .blog-body ul { padding-left: 22px; margin: 0 0 16px; }
.legal-text ul li, .blog-body ul li { list-style: disc; padding: 2px 0; }
.blog-body h3 { font-size: 22px; margin: 28px 0 10px; }
.blog-body > :first-child { margin-top: 0; }

/* Zaskrtavaci souhlasy (registrace, google_complete, objednavka clenstvi - order.php). Sablona dava
   inputum v .account-form .form-group width:100% - checkbox musi zustat maly, text vlevo vedle nej. */
.account-form .form-group .reg-consent { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 14px; line-height: 1.45; cursor: pointer; margin: 0; }
.account-form .form-group .reg-consent input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--kb-accent); cursor: pointer; box-shadow: none; }
.account-form .form-group .reg-consent a { text-decoration: underline; }

/* Pripravena uvodni fotka (HERO_PRESETS) - vyrez paru bez pozadi jako puvodni fotka ze sablony, se stejnou
   modrou zari kolem postav (barva odectena z puvodniho hero.png). */
/* Cele postavy (HERO_PRESETS 3. hodnota 'top'): sloupec zarovnat nahoru, aby horni okraj paru licoval s levym
   blokem (radek banneru ma align-items-end - puvodni fotka i postavy oriznute zespodu zustavaji dole). */
@media (min-width: 992px) {
  .banner-section .row > .hero-col-top { align-self: flex-start; }
}
.banner-section .banner-thumb img.hero-cutout {
  width: 100%; max-width: 528px; height: auto;
  filter: drop-shadow(0 0 3px rgba(0, 128, 176, .9)) drop-shadow(0 0 12px rgba(0, 128, 176, .55));
}

/* Vlastni nahrana uvodni fotka (index.php, .hero-photo) - obdelnikova fotka orizla na format
   puvodniho vystrizeneho paru ze sablony (528 x 600), zaoblene rohy a jemny stin. */
.banner-section .banner-thumb img.hero-photo {
  width: 100%; max-width: 528px; aspect-ratio: 528 / 600; object-fit: cover;
  border-radius: 24px; box-shadow: 0 20px 50px rgba(33, 0, 83, .18);
}
/* Clenstvi v pre-launchi (pricing-plan.php) - nabidka 1 rok zdarma pro zakladajici cleny; vzhledem jako
   blok "Budte mezi prvnimi" na uvodni strance (bila karta s ramem v barve znacky). */
.founder-offer {
  display: flex; gap: 22px; align-items: flex-start; max-width: 780px; margin: 0 auto 34px;
  background: var(--kb-card); border: 2px solid var(--kb-accent); border-radius: 18px;
  box-shadow: var(--kb-shadow); padding: 26px 30px; text-align: left;
}
.founder-offer-icon {
  flex: 0 0 64px; height: 64px; border-radius: 50%; background: #fff3f3;
  display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1;
}
.founder-offer-body h3 { color: var(--kb-primary); font-size: 22px; margin: 4px 0 10px; }
.founder-offer-body p { color: var(--kb-text); margin: 0 0 16px; }
.founder-offer-body .founder-offer-done { color: #1f8a5f; font-weight: 600; margin: 0; }
.founder-offer-body .lab-btn { margin-top: 2px; }
.price-item .price-top h2 .founder-price-old {
  font-size: .5em; font-weight: 400; opacity: .75; text-decoration: line-through; margin-right: 6px; vertical-align: middle;
}
.price-item .price-top .founder-badge {
  display: inline-block; background: #fff; color: var(--kb-accent); font-weight: 700; font-size: 13px;
  border-radius: 999px; padding: 4px 12px;
}
.price-item .purchase-btn.founder-btn-done { cursor: default; opacity: .85; }
@media (max-width: 575px) {
  .founder-offer { flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; }
}