/* ============================================================
   Pako.al — Design Tokens 2026
   ------------------------------------------------------------
   Ngarkohet PAS Bootstrap dhe PARA style.css.

   Strategjia: Bootstrap 5.3 i ekspozon vetë variablat `--bs-*`,
   pra faqja ri-stilizohet duke i rilidhur atyre token-at tanë —
   pa ndryshuar asnjë klasë në 3153 vendet ku përdoren.

   Ngjyrat shkruhen dy herë: hex si fallback, pastaj oklch.
   Shfletuesat pa oklch mbajnë hex-in; të tjerët marrin ngjyrat
   perceptivisht të njëtrajtshme.
   ============================================================ */

/* ── Tipografia ─────────────────────────────────────────────
   Stack-u i sistemit punon menjëherë. Për pamjen e plotë 2026,
   hidh Plus Jakarta Sans (variable, Latin Extended — mbulon ë/ç)
   në assets/fonts/ dhe hiq komentin më poshtë.

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-display: swap;
    font-style: normal;
}
*/

:root {
    /* ── Paleta: blu e brandit, e thelluar dhe e pasuruar ── */
    --pk-brand-50:  #eff5fd;  --pk-brand-50:  oklch(0.972 0.014 250);
    --pk-brand-100: #dbe9fb;  --pk-brand-100: oklch(0.930 0.032 250);
    --pk-brand-200: #bcd6f7;  --pk-brand-200: oklch(0.872 0.058 250);
    --pk-brand-300: #8fbaf1;  --pk-brand-300: oklch(0.790 0.090 252);
    --pk-brand-400: #5c95e6;  --pk-brand-400: oklch(0.685 0.128 253);
    /* brand-500 e ulur nga L .582 → .556: bardhë-mbi-blu kalon 4.5:1 (WCAG AA) */
    --pk-brand-500: #2565c6;  --pk-brand-500: oklch(0.556 0.155 254);
    --pk-brand-600: #1d59bd;  --pk-brand-600: oklch(0.502 0.157 255);
    --pk-brand-700: #1a489a;  --pk-brand-700: oklch(0.432 0.135 256);
    --pk-brand-800: #1a3c7c;  --pk-brand-800: oklch(0.365 0.106 257);
    --pk-brand-900: #1a3364;  --pk-brand-900: oklch(0.305 0.080 258);
    --pk-brand-950: #111f3f;  --pk-brand-950: oklch(0.212 0.052 259);

    /* ── Aksent: ambra e ngrohtë — çmime, CTA, theks ── */
    --pk-accent-100: #fdeed3;  --pk-accent-100: oklch(0.950 0.045 82);
    --pk-accent-300: #f8c96e;  --pk-accent-300: oklch(0.850 0.120 78);
    --pk-accent-400: #f0ab35;  --pk-accent-400: oklch(0.790 0.150 72);
    --pk-accent-500: #e08c12;  --pk-accent-500: oklch(0.712 0.158 66);
    --pk-accent-600: #b96c08;  --pk-accent-600: oklch(0.608 0.145 60);

    /* ── Neutralet: gri me nuancë të ftohtë, jo gri e vdekur ── */
    --pk-n-0:   #ffffff;  --pk-n-0:   oklch(1 0 0);
    --pk-n-50:  #fafbfc;  --pk-n-50:  oklch(0.985 0.002 250);
    --pk-n-100: #f4f6f8;  --pk-n-100: oklch(0.968 0.004 250);
    --pk-n-200: #e7eaee;  --pk-n-200: oklch(0.928 0.007 250);
    --pk-n-300: #d4d9e0;  --pk-n-300: oklch(0.872 0.009 252);
    --pk-n-400: #9ba4b0;  --pk-n-400: oklch(0.715 0.012 252);
    --pk-n-500: #6f7986;  --pk-n-500: oklch(0.565 0.014 253);
    --pk-n-600: #566070;  --pk-n-600: oklch(0.462 0.014 254);
    --pk-n-700: #414a58;  --pk-n-700: oklch(0.382 0.013 255);
    --pk-n-800: #2a3140;  --pk-n-800: oklch(0.276 0.011 256);
    --pk-n-900: #1c2230;  --pk-n-900: oklch(0.207 0.010 257);
    --pk-n-950: #10141f;  --pk-n-950: oklch(0.145 0.009 258);

    /* ── Semantike ── */
    --pk-success: #0d7343;  --pk-success: oklch(0.522 0.125 155);
    --pk-warning: #c47a06;  --pk-warning: oklch(0.652 0.145 68);
    --pk-danger:  #d63639;  --pk-danger:  oklch(0.585 0.198 22);
    --pk-info:    #1173a8;  --pk-info:    oklch(0.562 0.108 232);

    /* ── Roli semantik (kalon në dark mode) ── */
    --pk-bg:          var(--pk-n-100);
    --pk-bg-elevated: var(--pk-n-0);
    --pk-bg-sunken:   var(--pk-n-200);
    --pk-surface:     var(--pk-n-0);
    --pk-text:        var(--pk-n-900);
    /* n-600, jo n-500: mbi sfondin e çelët n-500 jep vetëm 4.14:1 */
    --pk-text-muted:  var(--pk-n-600);
    --pk-text-subtle: var(--pk-n-500);
    --pk-border:      var(--pk-n-200);
    --pk-border-strong: var(--pk-n-300);
    /* Kufiri i fushave duhet ≥3:1 kundrejt sfondit, që fusha të identifikohet.
       Kufiri dekorativ (kartë/sfond) me të drejtë mbetet i qetë — WCAG 1.4.11
       nuk zbatohet për ndarës dekorativë. */
    --pk-border-input: var(--pk-n-500);
    --pk-primary:     var(--pk-brand-500);
    --pk-primary-hover: var(--pk-brand-600);
    --pk-price:       var(--pk-brand-700);

    /* ── Tipografia ── */
    --pk-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui,
                    'Segoe UI Variable Text', 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;
    --pk-font-num:  ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    --pk-text-xs:   0.75rem;
    --pk-text-sm:   0.8125rem;
    --pk-text-base: 0.9375rem;              /* 15px — dendësi e duhur për tregun */
    --pk-text-md:   1rem;
    --pk-text-lg:   1.125rem;
    --pk-text-xl:   clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
    --pk-text-2xl:  clamp(1.5rem,  1.24rem + 1.2vw,  2rem);
    --pk-text-3xl:  clamp(1.875rem, 1.45rem + 2.0vw, 2.75rem);
    --pk-text-4xl:  clamp(2.25rem,  1.55rem + 3.2vw, 3.5rem);

    --pk-leading-tight: 1.15;
    --pk-leading-snug:  1.35;
    --pk-leading-normal: 1.55;

    /* Tracking negativ në tituj — e bën tipografinë të dukët e vendosur */
    --pk-track-tight:  -0.02em;
    --pk-track-tighter: -0.035em;

    /* ── Hapësira (shkallë 4px) ── */
    --pk-1: 0.25rem;  --pk-2: 0.5rem;   --pk-3: 0.75rem;  --pk-4: 1rem;
    --pk-5: 1.25rem;  --pk-6: 1.5rem;   --pk-8: 2rem;     --pk-10: 2.5rem;
    --pk-12: 3rem;    --pk-16: 4rem;    --pk-20: 5rem;

    /* ── Rrumbullakime — më të gjera se 2020 ── */
    --pk-r-sm: 8px;   --pk-r-md: 12px;  --pk-r-lg: 16px;
    --pk-r-xl: 20px;  --pk-r-2xl: 28px; --pk-r-full: 999px;

    /* ── Hijet: të shtresuara dhe me nuancë, jo të zeza ── */
    --pk-shadow-color: 220 45% 14%;
    --pk-shadow-xs: 0 1px 2px hsl(var(--pk-shadow-color) / 0.05);
    --pk-shadow-sm: 0 1px 2px hsl(var(--pk-shadow-color) / 0.06),
                    0 2px 6px hsl(var(--pk-shadow-color) / 0.04);
    --pk-shadow-md: 0 2px 4px hsl(var(--pk-shadow-color) / 0.05),
                    0 6px 16px hsl(var(--pk-shadow-color) / 0.07);
    --pk-shadow-lg: 0 4px 8px hsl(var(--pk-shadow-color) / 0.05),
                    0 12px 28px hsl(var(--pk-shadow-color) / 0.10);
    --pk-shadow-xl: 0 8px 16px hsl(var(--pk-shadow-color) / 0.06),
                    0 24px 48px hsl(var(--pk-shadow-color) / 0.14);
    --pk-ring: 0 0 0 3px hsl(220 80% 55% / 0.35);

    /* ── Lëvizja ── */
    --pk-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --pk-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
    --pk-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --pk-fast:   120ms;
    --pk-normal: 200ms;
    --pk-slow:   320ms;
}

/* ============================================================
   DARK MODE
   Lidhet me `data-bs-theme="dark"` që komponentët e Bootstrap
   të ndjekin bashkë me tokenat tanë. Nuk është invertim —
   sipërfaqet ngrihen me dritë, jo me hije.
   ============================================================ */
:root[data-bs-theme="dark"] {
    --pk-bg:          var(--pk-n-950);
    --pk-bg-elevated: var(--pk-n-900);
    --pk-bg-sunken:   #0a0d16;
    --pk-surface:     var(--pk-n-900);
    --pk-text:        var(--pk-n-100);
    --pk-text-muted:  var(--pk-n-400);
    --pk-text-subtle: var(--pk-n-500);
    --pk-border:      #29313f;
    --pk-border-strong: #3a4353;
    --pk-border-input: #5a6577;
    --pk-primary:     var(--pk-brand-400);
    --pk-primary-hover: var(--pk-brand-300);
    --pk-price:       var(--pk-accent-300);

    /* Në sfond të errët hijet nuk lexohen — thellësia vjen nga kufijtë */
    --pk-shadow-color: 220 60% 2%;
    --pk-shadow-sm: 0 1px 2px hsl(var(--pk-shadow-color) / 0.4);
    --pk-shadow-md: 0 2px 8px hsl(var(--pk-shadow-color) / 0.45);
    --pk-shadow-lg: 0 8px 24px hsl(var(--pk-shadow-color) / 0.5);
    --pk-shadow-xl: 0 16px 48px hsl(var(--pk-shadow-color) / 0.6);
}

/* ============================================================
   URA DREJT BOOTSTRAP 5.3
   Rilidh `--bs-*` me tokenat — kjo ri-stilizon grid, alerts,
   badges, cards, dropdowns, modals pa ndryshuar markup.
   ============================================================ */
:root {
    --bs-font-sans-serif: var(--pk-font-sans);
    --bs-body-font-family: var(--pk-font-sans);
    --bs-body-font-size: var(--pk-text-base);
    --bs-body-line-height: var(--pk-leading-normal);

    --bs-body-bg: var(--pk-bg);
    --bs-body-color: var(--pk-text);
    --bs-emphasis-color: var(--pk-n-950);
    --bs-secondary-color: var(--pk-text-muted);
    --bs-secondary-bg: var(--pk-bg-sunken);
    --bs-tertiary-bg: var(--pk-n-100);

    --bs-border-color: var(--pk-border);
    --bs-border-radius:    var(--pk-r-md);
    --bs-border-radius-sm: var(--pk-r-sm);
    --bs-border-radius-lg: var(--pk-r-lg);
    --bs-border-radius-xl: var(--pk-r-xl);
    --bs-border-radius-pill: var(--pk-r-full);

    --bs-primary: var(--pk-primary);
    --bs-primary-rgb: 37, 101, 198;
    --bs-link-color: var(--pk-primary);
    --bs-link-hover-color: var(--pk-primary-hover);
    --bs-link-color-rgb: 37, 101, 198;

    --bs-success: var(--pk-success);
    --bs-warning: var(--pk-warning);
    --bs-danger:  var(--pk-danger);
    --bs-info:    var(--pk-info);

    --bs-box-shadow-sm: var(--pk-shadow-sm);
    --bs-box-shadow:    var(--pk-shadow-md);
    --bs-box-shadow-lg: var(--pk-shadow-lg);
}

:root[data-bs-theme="dark"] {
    --bs-emphasis-color: var(--pk-n-0);
    --bs-tertiary-bg: var(--pk-n-800);
    --bs-primary-rgb: 92, 149, 230;
    --bs-link-color-rgb: 92, 149, 230;
}

/* ============================================================
   KOMPONENTËT QË NUK NDJEKIN VARIABLAT
   Butonat e Bootstrap kompilojnë ngjyra statike në `--bs-btn-*`,
   pra `--bs-primary` nuk i prek. Duhen mbivendosur me dorë.
   ============================================================ */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--pk-r-md);
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: 0.5rem;
    transition: background-color var(--pk-fast) var(--pk-ease),
                border-color var(--pk-fast) var(--pk-ease),
                color var(--pk-fast) var(--pk-ease),
                transform var(--pk-fast) var(--pk-ease),
                box-shadow var(--pk-fast) var(--pk-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--pk-brand-500);
    --bs-btn-border-color: var(--pk-brand-500);
    --bs-btn-hover-bg: var(--pk-brand-600);
    --bs-btn-hover-border-color: var(--pk-brand-600);
    --bs-btn-active-bg: var(--pk-brand-700);
    --bs-btn-active-border-color: var(--pk-brand-700);
    --bs-btn-disabled-bg: var(--pk-brand-300);
    --bs-btn-disabled-border-color: var(--pk-brand-300);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* `btn-danger` MBETET E KUQE.
   Përdoret për butonat "Fshij" në admin (banners, categories, listings,
   slider, users) dhe për fshirjen e pakthyeshme në purge-adult.php.
   Ta shndërronim në aksent të ngrohtë do t'i bënte veprimet shkatërruese
   të dukeshin të padëmshme. Kontrasti bardhë-mbi-të-kuqe: 4.80:1 (WCAG AA). */
.btn-danger {
    --bs-btn-bg: var(--pk-danger);
    --bs-btn-border-color: var(--pk-danger);
    --bs-btn-hover-bg: #b82b2e;
    --bs-btn-hover-border-color: #b82b2e;
    --bs-btn-active-bg: #a02528;
    --bs-btn-active-border-color: #a02528;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Aksent i ngrohtë për CTA-t pozitive — klasë e re, opt-in.
   Tekst i errët mbi ambra: 9.27:1, shumë mbi pragun AA.
   Shtoje me dorë ku duhet (p.sh. "Listo Njoftim Falas"), pa prekur btn-danger. */
.btn-accent {
    --bs-btn-bg: var(--pk-accent-400);
    --bs-btn-border-color: var(--pk-accent-400);
    --bs-btn-hover-bg: var(--pk-accent-300);
    --bs-btn-hover-border-color: var(--pk-accent-300);
    --bs-btn-active-bg: var(--pk-accent-500);
    --bs-btn-active-border-color: var(--pk-accent-500);
    --bs-btn-color: var(--pk-n-950);
    --bs-btn-hover-color: var(--pk-n-950);
    --bs-btn-active-color: var(--pk-n-950);
}

.btn-outline-primary {
    --bs-btn-color: var(--pk-primary);
    --bs-btn-border-color: var(--pk-border-strong);
    --bs-btn-hover-bg: var(--pk-primary);
    --bs-btn-hover-border-color: var(--pk-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pk-primary-hover);
    --bs-btn-active-border-color: var(--pk-primary-hover);
}

.btn-success { --bs-btn-bg: var(--pk-success); --bs-btn-border-color: var(--pk-success); }
.btn-warning { --bs-btn-bg: var(--pk-accent-400); --bs-btn-border-color: var(--pk-accent-400); --bs-btn-color: var(--pk-n-950); }

/* ── Formularët ── */
.form-control, .form-select {
    border-radius: var(--pk-r-md);
    border-color: var(--pk-border-input);
    background-color: var(--pk-surface);
    color: var(--pk-text);
    font-size: var(--pk-text-base);
    padding: 0.55rem 0.85rem;
    transition: border-color var(--pk-fast) var(--pk-ease),
                box-shadow var(--pk-fast) var(--pk-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--pk-primary);
    box-shadow: var(--pk-ring);
}
.form-control::placeholder { color: var(--pk-text-subtle); }

/* ── Kartat ── */
.card {
    --bs-card-bg: var(--pk-surface);
    --bs-card-border-color: var(--pk-border);
    --bs-card-border-radius: var(--pk-r-lg);
    --bs-card-inner-border-radius: var(--pk-r-md);
}

/* ── Badge ── */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--pk-r-sm);
    padding: 0.35em 0.6em;
}

/* ── Alerts: më të qeta, me shirit anësor ── */
.alert {
    border: 1px solid var(--pk-border);
    border-left-width: 3px;
    border-radius: var(--pk-r-md);
    background: var(--pk-surface);
    color: var(--pk-text);
    box-shadow: var(--pk-shadow-xs);
}
.alert-success { border-left-color: var(--pk-success); }
.alert-danger  { border-left-color: var(--pk-danger); }
.alert-warning { border-left-color: var(--pk-warning); }
.alert-info    { border-left-color: var(--pk-info); }

/* ── Dropdown / Modal ── */
.dropdown-menu {
    --bs-dropdown-bg: var(--pk-bg-elevated);
    --bs-dropdown-border-color: var(--pk-border);
    --bs-dropdown-border-radius: var(--pk-r-lg);
    --bs-dropdown-link-hover-bg: var(--pk-bg-sunken);
    box-shadow: var(--pk-shadow-lg);
}
.modal-content {
    background: var(--pk-bg-elevated);
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-r-xl);
    box-shadow: var(--pk-shadow-xl);
}

/* ============================================================
   BAZA
   ============================================================ */
body {
    font-family: var(--pk-font-sans);
    font-size: var(--pk-text-base);
    line-height: var(--pk-leading-normal);
    background: var(--pk-bg);
    color: var(--pk-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
}

/* Titujt NUK marrin `color` — trashëgojnë. Nëse detyrohej var(--pk-text),
   çdo titull mbi sfond të errët (hero, banner, modal i errët) do dilte
   i errët mbi të errët. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--pk-leading-tight);
    letter-spacing: var(--pk-track-tight);
}
h1 { font-size: var(--pk-text-3xl); letter-spacing: var(--pk-track-tighter); }
h2 { font-size: var(--pk-text-2xl); }
h3 { font-size: var(--pk-text-xl); }

a { text-decoration: none; }

/* Çmimet: numra tabularë — kolonat rreshtohen dhe nuk “kërcejnë” */
.card-price-mobile, .premium-card-price, .listing-price,
.price, [class*="-price"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: var(--pk-track-tight);
}

/* Fokusi i dukshëm vetëm për tastierë — kërkesë aksesueshmërie */
:focus-visible {
    outline: 2px solid var(--pk-primary);
    outline-offset: 2px;
    border-radius: var(--pk-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
    background: var(--pk-brand-200);
    color: var(--pk-brand-950);
}
:root[data-bs-theme="dark"] ::selection {
    background: var(--pk-brand-700);
    color: var(--pk-n-0);
}

/* Scrollbar diskret */
* { scrollbar-width: thin; scrollbar-color: var(--pk-n-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--pk-n-300);
    border-radius: var(--pk-r-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--pk-n-400); }
:root[data-bs-theme="dark"] * { scrollbar-color: var(--pk-n-700) transparent; }
:root[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--pk-n-700); }

/* Imazhet nuk dalin nga kontejneri */
img { max-width: 100%; height: auto; }

/* ── Butoni i temës ── */
.pk-theme-toggle { position: relative; }
.pk-theme-toggle .pk-icon-dark,
.pk-theme-toggle .pk-icon-light {
    transition: opacity var(--pk-fast) var(--pk-ease),
                transform var(--pk-normal) var(--pk-ease-spring);
}
/* Në temë të çelët shfaqet hëna (kalo në të errët); në të errët shfaqet dielli */
:root[data-bs-theme="light"] .pk-theme-toggle .pk-icon-light,
:root[data-bs-theme="dark"]  .pk-theme-toggle .pk-icon-dark {
    display: none;
}
.pk-theme-toggle:hover .pk-icon-dark  { transform: rotate(-18deg); }
.pk-theme-toggle:hover .pk-icon-light { transform: rotate(45deg); }

/* ── Respekto preferencën për më pak lëvizje ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}