/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f7;
}

/* Navigation */
.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

/* Cards */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    background: white;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.card-header {
    border-radius: 16px 16px 0 0 !important;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
}
.card-body {
    padding: 1.5rem;
}

/* ========================================
   BUTTON SYSTEM - Keisk čia visas spalvas!
   ======================================== */

.btn {
    border-radius: 10px;
    padding: 0.65rem 1.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

/* PRIMARY - PILKA (buvo violetinė) */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-grad-from) 0%, var(--accent-grad-to) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(75, 85, 99, 0.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-grad-to) 0%, var(--accent-grad-to-hover) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(75, 85, 99, 0.4);
    color: white !important;
}

/* DARK */
.btn-dark {
    background: linear-gradient(135deg, var(--accent-grad-to-hover) 0%, #111827 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.4);
}
.btn-dark:hover {
    background: linear-gradient(135deg, var(--accent-grad-to) 0%, var(--accent-grad-to-hover) 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 41, 55, 0.5);
    color: white !important;
}

/* CTA - Oranžinė */
.btn-cta {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}
.btn-cta:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
    color: white !important;
}

/* SUCCESS - Žalia */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    color: white !important;
}

/* DANGER - Raudona */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
    color: white !important;
}

/* LIGHT */
.btn-light {
    background: white !important;
    color: var(--accent-grad-to) !important;
    border: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.btn-light:hover {
    background: #f9fafb !important;
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* OUTLINE VARIANTS */
.btn-outline-primary {
    border: 2px solid var(--accent-grad-from) !important;
    color: var(--accent-grad-from) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--accent-grad-from) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* BUTTON SIZES */
.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
}
.btn-lg {
    padding: 0.85rem 2.25rem;
    font-size: 1.1rem;
}

/* ========================================
   TAILWIND OVERRIDE
   Spalvos NErašomos čia — imamos iš kintamųjų, kurie apibrėžti
   base.html :root bloke (--accent, --accent-grad-*). Norint pakeisti
   akcentą, keičiamos tik tos eilutės, ne šis failas.
   ======================================== */

/* bg-primary → akcento spalva (VIENAS tonas, ne gradientas).
   Gradientas buvo iš senos temos ir dėl jo pagrindinis paieškos mygtukas
   nesutapdavo su akcentu — patikra „vienas akcentas ekrane" jo nematydavo.
   Žr. docs/dizaino-sistema.md, 6 skyrius. */
.bg-primary,
[class*="bg-primary"] {
    background: var(--accent) !important;
}
.hover\:bg-primary-dark:hover,
.hover\:bg-primary:hover {
    background: var(--accent-hover) !important;
}

/* Emerald/Teal gradientai → Pilka */
.from-emerald-500,
.bg-gradient-to-r.from-emerald-500,
[class*="from-emerald"] {
    --tw-gradient-from: var(--accent-grad-to-hover) !important;
    background: linear-gradient(to right, var(--accent-grad-from), var(--accent-grad-to)) !important;
}
.to-teal-600,
[class*="to-teal"] {
    --tw-gradient-to: var(--accent-grad-to) !important;
}
.hover\:from-emerald-600:hover {
    background: linear-gradient(to right, var(--accent-grad-to), var(--accent-grad-to-hover)) !important;
}
.hover\:to-teal-700:hover {
    --tw-gradient-to: var(--accent-grad-to-hover) !important;
}

/* Violet/Purple → Pilka */
.from-violet-500,
.from-purple-500,
.from-purple-600,
[class*="from-violet"],
[class*="from-purple"] {
    --tw-gradient-from: var(--accent-grad-from) !important;
    background: linear-gradient(135deg, var(--accent-grad-from), var(--accent-grad-to)) !important;
}
.to-purple-600,
.to-purple-700,
.to-purple-800,
.to-violet-600,
[class*="to-purple"],
[class*="to-violet"] {
    --tw-gradient-to: var(--accent-grad-to) !important;
}

/* Shadow override */
.shadow-emerald-500\/30,
.shadow-violet-500\/30,
.shadow-purple-500\/30,
[class*="shadow-emerald"],
[class*="shadow-violet"],
[class*="shadow-purple"] {
    --tw-shadow-color: rgba(75, 85, 99, 0.3) !important;
    box-shadow: 0 10px 15px -3px rgba(75, 85, 99, 0.3) !important;
}

/* text-primary → akcento spalva (VIENAS tonas, ne gradiento taskas).
   Cia buvo --accent-grad-from (#9ca3af) — sviesiausias gradiento taskas,
   skirtas fonams. Tekstui jis sutampa su --text-disabled, todel kaina ir
   ikonos atrodydavo isjungtos. Gradientams si klase nenaudojama niekur
   (bg-clip-text projekte nera), tad perkelti jos nereikia — uztenka
   teisingo kintamojo. Gradiento kintamuju reiksmes nekeistos.
   Zr. docs/dizaino-sistema.md, 6 skyrius. */
.text-primary {
    color: var(--accent) !important;
}
.hover\:text-primary-dark:hover,
.hover\:text-primary:hover {
    color: var(--accent-hover) !important;
}

/* ======================================== */

/* Form Controls */
.form-control,
.form-select {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-grad-from);
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.15);
}

/* Focus ring → Pilka */
.focus\:ring-primary\/20:focus,
.focus\:ring-primary:focus {
    --tw-ring-color: rgba(75, 85, 99, 0.2) !important;
}
.focus\:border-primary:focus {
    border-color: var(--accent-grad-from) !important;
}

/* Shadows */
.shadow-sm {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Hover Effects */
.hover-shadow {
    transition: all 0.3s ease;
}
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Badges */
.badge {
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 8px;
}

/* Footer */
footer {
    background-color: #1a1a2e;
}
footer a {
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
    color: var(--accent-grad-to) !important;
}

/* Sticky Elements */
.sticky-top {
    position: sticky;
    top: 20px;
    z-index: 1020;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Custom Scrollbar → Pilka */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--accent-grad-from);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-grad-to);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   ŠALIES VĖLIAVĖLĖ prie vietos (templates/partials/_veliava.html).
   Vienas stilius visoms vietoms: kortelei, kontaktų blokui, žemėlapio
   burbului, išsaugotiems skelbimams ir šalies sąrašams.

   Rėmelis daromas VIDINIU kontūru, ne border'u: border pridėtų po 1px
   iš kiekvienos pusės ir 16×12 vėliava iš tikrųjų užimtų 18×14.
   Etalone (docs/demo/veliaveles-pagrindinis-demo.html, .fl) tam
   naudojamas `box-shadow ... inset`, bet ten vėliava yra <svg>; mūsų
   yra <img>, o pakeistinio elemento turinys piešiamas VIRŠ vidinio
   šešėlio, tad jo nesimatytų. `outline` su neigiamu offset'u piešia tą
   patį 1px rėmelį virš paveikslėlio ir matmenų nekeičia.

   display: inline-block, ne block: vėliava naudojama ir tekstinėse
   eilutėse (kontaktų blokas, žemėlapio burbulas), kur block ją nuvarytų
   į atskirą eilutę. Flex konteineriuose (kortelės vietos eilutė, šalies
   sąrašai) naršyklė ją ir taip paverčia bloku.
   ═══════════════════════════════════════════════════════════════════ */
.veliava {
    width: 16px;
    height: 12px;
    /* Vėliava eina PO pavadinimo, tad tarpas kairėje (docs/taisykles.md 5) */
    margin-left: 6px;
    vertical-align: -1px;
    border-radius: 2px;
    outline: 1px solid rgba(0, 0, 0, .10);
    outline-offset: -1px;
    object-fit: cover;
    flex: 0 0 auto;
    display: inline-block;
}

/* Didesnis variantas — šalies juostos ir šoninės juostos eilutėms
   (demo .fl-b / .fl be .fl-s) */
.veliava-didele { width: 20px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════════
   KORTELĖS VIETOS EILUTĖ (templates/listings/partials/_kort_vieta.html)

       📍 Kaunas, Lithuania [vėliava]

   Etalonas: docs/demo/veliaveles-pagrindinis-demo.html (.card .l) ir
   veliaveles-sidebar-demo.html (.cloc).

   ČIA, BENDRAME FAILE, ne šablono <style> bloke: eilutė renderinama ir
   pradžios kortelėse, ir rezultatuose, ir telefone. Stilius, gyvenantis
   viename šablone, kitų paviršių nepasiekia (docs/taisykles.md 5).

   flex-wrap: nowrap + tekstui daugtaškis + vėliavai flex: 0 0 auto —
   vėliava NIEKADA nenukrenta į antrą eilutę, net kai vieta ilga
   („Nordrhein-Westfalen, Germany"). Matmenys dubliuojami ir SVG
   žymėje — kad be šito CSS niekas neišsipūstų.
   ═══════════════════════════════════════════════════════════════════ */
.vieta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    margin-top: 6px;
    color: #6B7280;
    font-size: 12.5px;
    line-height: 1.3;
}
.vieta .pin { width: 11px; height: 11px; flex: 0 0 auto; }
.vieta .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
/* Tarpą tvarko flex gap — vėliavos savo margin čia nereikia. */
.vieta .veliava { margin-left: 0; vertical-align: 0; }

/* Telefono kortelės „Miestas" langelis (_card_params.html) — ta pati
   taisyklė: tekstas trumpinamas, vėliava lieka matoma. Be šito ji
   dingdavo po `overflow: hidden`, kai vieta ilga. */
.cp-item b.cp-vieta { display: flex; align-items: center; gap: 6px;
                      min-width: 0; }
.cp-vieta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                   white-space: nowrap; }
.cp-vieta .veliava { margin-left: 0; vertical-align: 0; }

/* Žalias variantas — kortelė rezultatų sąraše su šonine juosta */
.vieta-zalia { margin-top: 20px; color: #16A34A; font-weight: 600;
               font-size: 14px; }
.vieta-zalia .pin { width: 14px; height: 14px; }

/* Telefone vieta rodoma VIENĄ kartą — „Miestas" langelyje parametrų
   tinklelyje (docs/mobilus-etalonas.md, .param-location). Žalia eilutė
   yra darbalaukio pora prie .ap-spec-line, tad slepiam kartu su ja. */
@media (max-width: 1023px) {
    .vieta-eilute { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SKELBIMO NUOTRAUKŲ VALDYMAS TELEFONE

   Trynimo „×", „pagrindinė" ir pasukimo mygtukai skelbimo įkėlimo
   formose paslėpti per `opacity-0 group-hover:opacity-100`. Telefone
   `:hover` neįvyksta niekada, tad mygtukai lieka nematomi — žmogus mato
   tik nuotraukų numerius ir negali nei ištrinti, nei pakeisti
   pagrindinės. Paspausti juos techniškai galima (opacity nuo paspaudimo
   neapsaugo), bet nematomo mygtuko niekas nespaudžia.

   Įrenginiuose be pelės rodom juos iš karto.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .group .opacity-0.group-hover\:opacity-100 { opacity: 1; }
  /* Apatinė juostelė su „pagrindinė / pasukti" — tas pats */
  .group > .absolute.inset-x-0.bottom-0.opacity-0 { opacity: 1; }
}

/* Nuotraukų perstūmimo mygtukai (◀ ▶) — veikia ir pele, ir pirštu.
   HTML5 „drag and drop" telefone nekyla visai, tad be jų nuotraukų
   tvarkos pakeisti neįmanoma. */
.foto-perstumti {
  position: absolute; bottom: 2px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: #111; border: 0;
  border-radius: 999px; font-size: 13px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); z-index: 12; padding: 0;
}
.foto-perstumti:disabled { opacity: .3; cursor: default; }
.foto-perstumti-kaire { left: 2px; }
.foto-perstumti-desine { right: 2px; }

/* „PAGRINDINĖ" ir eilės numeris. Anksčiau ženklas buvo lipdomas iš
   Tailwind klasių JS'e — bet dalis formų (sunkvežimiai) turi savo CSS
   ir Tailwind ten neveikia. Dabar išvaizda čia, viena visiems. */
.foto-zyme {
  position: absolute; top: 4px; left: 4px; z-index: 11;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1.3;
  pointer-events: none;
}
.foto-zyme-pagrindine { background: #16a34a; }

/* Sunkvežimių forma pagrindinę žymi savo ::before — kad ženklas
   nesidubliuotų, jį paslepiam. */
.photo-item.is-main::before { display: none; }

/* Telefone „hover" nebūna, tad veiksmų mygtukai liktų nematomi.
   Sunkvežimių ir kitų savo CSS turinčių formų juostelės — visada
   matomos, kai pirštas yra vienintelis įrankis. */
@media (hover: none) {
  .photo-item .photo-actions { opacity: 1 !important; visibility: visible !important; }
  .photo-card .photo-actions,
  .photo-card .opacity-0 { opacity: 1 !important; }
}