@charset "UTF-8";

/* ===================================================================================
   ZGJEDHESI — zgjedhesi i markes i BSS. NJE stilflete per TE DY shkallet.

   Linkohet NJE here nga layout.html (paneli) dhe nga kasa.html (mysafiri), PAS
   global.css / adminGlobal.css dhe PAS admin-theme.css. Kurre per-faqe.

   Pse nuk ka shkalle "body.paneli_admin" apo "body.faqja_e_kases" ne asnje rregull:
   paneli i hapur portalohet si femije i FUNDIT i <body> dhe custom properties
   TRASHEGOHEN, keshtu qe paneli merr vete tokenat e bllokut "body.paneli_admin"
   (admin-theme.css:140) ose "body.faqja_e_kases" (kasa.css:50) pa i permendur.
   Ketu deklarohen vetem tokena --zgj-* me rezerve literale, qe komponenti te
   piktohet sakte edhe ne nje faqe qe ngarkon vetem bss-tokens.css, edhe ne nje
   faqe pa asnje token.

   SPECIFIKIMI — kjo pike eshte e matur, jo e supozuar:
   - global.css:82 i jep "select, input[...]" (0,1,1) dhe global.css:174 i jep
     "button" (0,0,1) me "button:hover" (0,1,1). Prandaj triger-i shkruhet
     "button.zgjedhesi__triger" (0,1,1) ne baze dhe (0,1,2) ne cdo gjendje —
     (0,1,2) e kalon "button:hover" PAVARESISHT nga radha e burimit, dhe radha
     ne panel nuk eshte e garantuar: admin.js:20-26 shton stilfleten per-faqe
     PAS kesaj.
   - shto-edito-porosi.css:95 ka ".attribute_values_container div{width:fit-content}"
     (0,1,1). Matur: nje <div class="zgjedhesi__panel"> i futur atje u shfaq
     8.55px i gjere. Paneli NUK futet brenda rreshtit per kete arsye — dhe per
     arsyen me te madhe me poshte.
   - MATUR: nje panel position:absolute brenda ".arrow" brenda <main> del 177px
     poshte fundit te <main> dhe ato 177px PRITEN — adminGlobal.css:30 e ben
     <main> overflow-y:scroll. elementFromPoint 20px nen fundin e <main> kthen
     BODY, kurse 6px mbi fundin kthen panelin. I njejti panel position:fixed
     kthen panelin ne te dyja pikat. Prandaj paneli eshte position:fixed dhe
     portalohet te <body>: "asgje nuk pritet kurre" nuk zgjidhet me CSS brenda
     nje kontejneri me scroll.
   - admin-theme.css:161 e ndalon transform/filter/backdrop-filter/perspective/
     contain/will-change mbi <body> dhe <main>, pikerisht sepse ri-prinderojne
     elementet position:fixed. Matur ne harness: te dyja i kane "none", keshtu qe
     position:fixed zgjidhet ndaj dritares. Kjo stilflete nuk i prek.

   IUTE (R2) — iutepay.css ngarkohet ne /kasa DHE ne layout.html:9. U shkarkua dhe
   u lexuan te 12 rregullat e tij: .iute-as-low-as, .iute-from (bllok bosh),
   .iute-promo-pointer, .iute-promo-logo, .iute-white-logo, .iute-primary-logo,
   .iute-black-logo, .iute-promo-symbol-logo, .iute-symbol-logo-primary,
   .iute-symbol-logo-black, .body-modal-active, .iute-promo-text a,
   .wc_payment_method.payment_method_iutepay label img. ASNJE prej tyre nuk zgjedh
   select, option, ul, li, button, [role] a as nje tip elementi — te gjithe jane
   klase me prefiks "iute-", plus .body-modal-active dhe nje selektor WooCommerce.
   Prandaj: zero perplasje. Tri zotime qe e mbajne ashtu:
   1. asnje emer klase ketu nuk nis me "iute-", dhe asnje nuk quhet
      iute-as-low-as / iute-from (SDK-ja i mbishkruan innerHTML-in e tyre);
   2. kjo stilflete NUK shkruan overflow mbi <body> dhe JS-i i komponentit nuk
      guxon te shkruaje document.body.style.overflow e as te shtoje/heqe klasa ne
      <body>: .body-modal-active{overflow-y:hidden} e vendos SDK-ja mbi <body> sa
      kohe modali i Iute eshte hapur, dhe nje bllokim scroll-i i zgjedhesit do te
      e shkyçte ate kur mbyllet. Lista, pra, NUK bllokon scroll-in — ri-pozicionohet;
   3. mbulesa e Iute ka z-index:2147483647 (inline, i lexuar ne iutepay.js), pra
      --zgj-shtrese 9990 rri gjithmone NEN ate — me qellim.

   Pa !important. Pa reset te gjere. Pa text-overflow dhe pa -webkit-line-clamp:
   nje etikete e gjate mbeshtillet, dhe lista rritet ose rreshqet.
   =================================================================================== */


/* ===================================================================================
   1. TOKENAT E KOMPONENTIT
   Secili me rezerve literale. Lista e mungesave eshte e matur, jo e hamendesuar:
   --surface-field, --surface-row, --surface-row-hover, --text-inverse,
   --danger-bright, --warning, --fs-sm, --fs-xs, --fs-micro ekzistojne nen
   body.paneli_admin dhe MUNGOJNE nen body.faqja_e_kases; --control-sm/md/lg dhe
   --type-body ekzistojne nen body.faqja_e_kases dhe MUNGOJNE nen body.paneli_admin
   (matur: getPropertyValue('--control-md') kthen '' ne panel). Asnjeri prej tyre
   nuk perdoret pa rezerve.
   =================================================================================== */

.zgjedhesi,
.zgjedhesi__panel {
    --zgj-sfond: var(--surface-field, rgba(255, 255, 255, .04));
    --zgj-sfond-mbi: rgba(255, 255, 255, .07);
    --zgj-vija: var(--border-subtle, rgba(255, 255, 255, .14));
    --zgj-vija-mbi: var(--border-strong, rgba(255, 255, 255, .28));
    --zgj-theks: var(--bss-cyan, #4FC6F2);
    --zgj-tekst: var(--text-strong, #FFFFFF);
    --zgj-tekst-zbehte: var(--text-muted, rgba(255, 255, 255, .52));

    /* .32 e --text-faint matet 2.88:1 mbi #0E141C — nen 3:1. Opsionet e caktivizuara
       duhet te mbeten te lexueshme (nuk fshihet kurre nje zgjedhje), prandaj .46,
       qe matet 4.66:1. */
    --zgj-tekst-fikur: rgba(255, 255, 255, .46);

    /* Paneli NUK eshte qelq i plote. --surface-glass-strong mbi te zeze matet
       1.05:1 kundrejt faqes — praktikisht i padukshem si sipërfaqe lundruese — dhe
       lista hapet edhe mbi rrjeta fotografish (#all_images_container) ku tekst mbi
       qelq nuk lexohet. Prandaj .97 opak + blur: duket si qelqi i sistemit, por
       teksti nuk ulet kurre mbi nje foto. */
    --zgj-panel-sfond: rgba(14, 20, 28, .97);

    /* Vija e panelit NUK eshte --border-subtle: matur 1.50:1 mbi #0E141C, dhe
       --border-strong matet 2.50:1 — te dyja deshtojne SC 1.4.11 (3:1) per kufirin
       qe identifikon komponentin. .40 matet 3.82:1. I njejti gabim u matur dhe u
       riparua ne CL-021 (1.43:1 -> 4.08:1). */
    --zgj-panel-vija: rgba(255, 255, 255, .40);
    --zgj-panel-hije: var(--shadow-float, 0 40px 120px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08));
    --zgj-panel-rreze: var(--radius-md, 15px);
    --zgj-panel-blur: var(--blur-md, blur(18px) saturate(160%));

    /* Gjendjet e rreshtit. Matur: sfondi i hover-it .06 e bardhe jep vetem 1.16:1
       kundrejt panelit dhe i zgjedhuri .12 cyan jep 1.24:1 — ASNJERI nuk mund te
       jete i vetmi sinjal. Prandaj hover/fokus marrin edhe nje hekur 3px cyan
       (9.42:1) dhe i zgjedhuri edhe shenjen me tekst cyan (7.61:1). */
    --zgj-rresht-mbi: rgba(255, 255, 255, .06);
    --zgj-rresht-zgjedhur: rgba(79, 198, 242, .12);
    --zgj-rresht-fokus: rgba(79, 198, 242, .18);

    --zgj-gabim: var(--cherry-400, #C83C3B);
    --zgj-rreze: var(--radius-sm, 10px);
    --zgj-font: var(--font-body, Montserrat, system-ui, sans-serif);

    /* 44px eshte minimumi i prekjes. Me padding 9px 14px matet 46px — 12 rreshta
       brenda 560px, qe eshte pikerisht pse filtri ndizet nga 12 opsione pergjate. */
    --zgj-rresht-lartesi: 44px;
    --zgj-lista-maks: 560px;
    --zgj-hapesire: 6px;
    --zgj-shtrese: 9990;

    /* Kohezgjatjet jane TOKENA, qe blloku prefers-reduced-motion t'i ri-vendose pa
       !important dhe pa luftuar specifikimin — modeli i kasa.css:1234 dhe
       produkt.css:2463. Shkruhen kohezgjatje, JO "animation: none": zgj-hap e ka vetem
       stopin "from" dhe PA fill-mode, keshtu qe nje animacion i ngrire e le panelin
       ne stilin e tij baze, opacity 1 — shih seksionin 5. */
    --zgj-dur-shpejt: var(--dur-fast, 160ms);
    --zgj-dur-baze: var(--dur-base, 260ms);
    --zgj-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}


/* ===================================================================================
   2. SELECT-I NATIV — mbetet, i tejdukshem, mbi kutine e triger-it

   PSE NUK display:none. Matur ne Chrome 152, te gjashte teknikat e dergojne fushen
   ne FormData ("prov"="a") — pra display:none NUK e ndal dergimin. Ndryshimi i vetem
   qe ka vlere eshte FOKUSUESHMERIA:
       display:none      -> focusable FALSE, willValidate true, valueMissing true
       visibility:hidden -> focusable FALSE, willValidate true, valueMissing true
       opacity:0 (kjo)   -> focusable TRUE,  willValidate true, valueMissing true
   Validimi nativ e BLLOKON dergimin ne te tria rastet (submit nuk u leshua kur
   fusha ishte e pavlefshme). Me display:none, pra, forma behet e padergueshme ne
   HESHTJE: shfletuesi nuk ka ku t'a ankorroje flluskën e as ku te shpjeje fokusin,
   dhe Chrome shkruan vetem "An invalid form control ... is not focusable" ne konsole.
   Kjo prek 11 select-e me "required" (shto-edito-porosi 5, atribute 3, kasa 2,
   shto-edito-perdorues 1).
   Me inset:0 brenda mbeshtjellesit position:relative, select-i mbulon SAKTESISHT
   kutine e triger-it, keshtu qe flluska e validimit ankorrohet ku duhet.
   pointer-events:none e kalon klikun te triger-i; appearance:none e heq glifin
   nativ ne rast se tejdukshmeria nuk aplikohet dot.
   :disabled / :required / :invalid jane pseudo-klasa gjendjeje mbi elementin — asnje
   prej ketyre vetive nuk i prek (matur: willValidate dhe valueMissing te vertete ne
   te gjashte rastet).
   =================================================================================== */

.zgjedhesi > select.zgjedhesi__nativ {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Shigjeta e vjeter e ::after fshihet VETEM kur komponenti ka marre persiper, dhe
   vetem mbi ate mbeshtjelles. .arrow mbetet ne DOM i paprekur — ai nuk eshte dekor:
   edito-produkt.js:564 dhe shtoProdukt.js:367 e heqin rreshtin me
   ".variation .arrow:has([data-belongs-to-attribute=...])". Specifikimi (0,2,1)
   e kalon ".arrow::after" (0,1,1) dhe ".attribute_values_container div.arrow::after"
   nuk prek content. */
.zgjedhesi.arrow:has(> select.zgjedhesi__nativ)::after,
.zgjedhesi.bss-zgjedhje:has(> select.zgjedhesi__nativ)::after { content: none; }


/* ===================================================================================
   3. TRIGER-I — kontrolli i mbyllur
   Shkruhen SHPREHIMISHT width, display, min-height, padding, border (shkurtesa e
   PLOTE), border-radius, background, color, font, text-align dhe cursor, ne baze DHE
   ne :hover, :focus-visible, :disabled — sepse global.css:174-193 dhe
   adminGlobal.css:226-238 i pikturojne te gjitha keto mbi "button" te zhveshur, dhe
   "button:hover" i kthen ne blu te tejdukshem. Mesimi i CL-022 (kasa.css:31-41).
   min-height, NUK height: nje etikete 59 karakteresh kerkon 476px ne nje rresht dhe
   ne nje mbeshtjelles 200px duhet 4 rreshta. Triger-i rritet; nuk pritet. Pikerisht
   ajo zgjedhje u mori ne CL-019 per shiritin e blerjes.
   =================================================================================== */

.zgjedhesi > button.zgjedhesi__triger {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 41.5px;
    margin: 0;
    padding: 9px 20px;
    border: 1px solid var(--zgj-vija);
    border-radius: var(--zgj-rreze);
    background: var(--zgj-sfond);
    box-shadow: none;
    color: var(--zgj-tekst);
    font: 400 16px/1.35 var(--zgj-font);
    letter-spacing: normal;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--zgj-dur-baze) var(--zgj-ease), background-color var(--zgj-dur-baze) var(--zgj-ease), box-shadow var(--zgj-dur-baze) var(--zgj-ease);
}

.zgjedhesi > button.zgjedhesi__triger:hover {
    border: 1px solid var(--zgj-vija-mbi);
    background: var(--zgj-sfond-mbi);
    color: var(--zgj-tekst);
}

/* :focus-visible, jo :focus — klikimi me mi nuk duhet te ndeze unazen. Unaza e
   sistemit (--focus-ring) e ka hapin e brendshem te zi, keshtu qe funksionon mbi
   karte DHE mbi faqe. */
.zgjedhesi > button.zgjedhesi__triger:focus-visible {
    outline: none;
    border: 1px solid var(--zgj-theks);
    box-shadow: var(--focus-ring, 0 0 0 2px #000000, 0 0 0 4px #4FC6F2);
}

.zgjedhesi > button.zgjedhesi__triger[aria-expanded='true'] {
    border: 1px solid var(--zgj-theks);
    background: rgba(79, 198, 242, .06);
    box-shadow: 0 0 0 4px rgba(79, 198, 242, .14);
}

.zgjedhesi > button.zgjedhesi__triger:disabled {
    border: 1px solid var(--border-hairline, rgba(255, 255, 255, .08));
    background: rgba(255, 255, 255, .02);
    color: var(--zgj-tekst-fikur);
    cursor: not-allowed;
}

/* Gabimi ndiqet nga aria-invalid, NUK nga :invalid. Nje select "required" me vlere
   boshe eshte :invalid qe ne ngarkim, keshtu qe :invalid do te pikturonte te kuqe
   cdo fushe te detyrueshme para se klienti te shkruaj gje. Ky eshte kontrati qe
   kasa.css:462 ka vendosur ([aria-invalid='true'], i shkruar nga kasa.js). */
.zgjedhesi:has(> select[aria-invalid='true']) > button.zgjedhesi__triger {
    border: 1px solid rgba(200, 60, 59, .55);
    background: rgba(200, 60, 59, .08);
}

/* Etiketa. min-width:0 e detyrueshme: pa te flex item-i mban gjeresine e permbajtjes
   dhe shtyn shigjeten jashte kutise — gabimi i matur ne CL-018 per rreshtin e
   shportes. overflow-wrap:anywhere sepse emrat e qyteteve nuk kane hapesire te
   perdorshme ne cdo rast ("Lucha Social (Lucha Social)" ne 146px). */
.zgjedhesi__etiketa {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
    color: inherit;
}

/* Opsioni-vendmbajtes (value='') lexohet si vend i lire, jo si zgjedhje. */
.zgjedhesi__triger[data-bosh='true'] .zgjedhesi__etiketa { color: var(--zgj-tekst-zbehte); }

.zgjedhesi__shigjete {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    color: var(--zgj-tekst-zbehte);
    transition: transform var(--zgj-dur-baze) var(--zgj-ease), color var(--zgj-dur-baze) var(--zgj-ease);
}

/* Shigjeta JASHTE RRJEDHES, pikerisht ku e pikturonte .arrow::after e vjeter
   (right:20px mbi mbeshtjellesin), qe etiketa te marre te njejten hapesire teksti si
   select-i nativ. Matur: select-i nativ ka 40px kornize (padding 0 20px) dhe nuk
   mbeshtjell kurre; triger-i me shigjeten NE rrjedhe kishte 58px (padding 16+20,
   column-gap 10, SVG 12) — 18px me pak per etiketen — dhe me white-space:normal
   mbeshtjellte atje ku select-i prisnin: lartesia 41.00 -> 63.19px ne 1366, dhe
   +713px ne 767px mbi #attributes_list. Me kete rregull lartesia kthehet 41.59px,
   hapi i tekstit mbetet 21px sa cdo input i adminit (adminGlobal.css:124-134), dhe
   shigjeta kthehet ne 21px nga buza — ne 440px dilte -5px, JASHTE kutise.
   margin-top:-6px e nuk translateY(-50%): rreshti tjeter zoteron "transform" per
   rrotullimin 180° ne hapje, dhe nje translateY ketu do te kapitej atje.
   :not() le --pilule dhe --kase ne shtrimin e tyre ne rrjedhe, qe matet ne paritet. */
.zgjedhesi:not(.zgjedhesi--pilule):not(.zgjedhesi--kase) > button.zgjedhesi__triger > .zgjedhesi__shigjete {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -6px;
}

/* Shigjeta eshte jashte rrjedhes, ndaj mbushja duhet ta rezervoje vendin e saj vete. */
.zgjedhesi:not(.zgjedhesi--pilule):not(.zgjedhesi--kase) > button.zgjedhesi__triger {
    padding-right: 42px;
}

.zgjedhesi > button.zgjedhesi__triger:hover .zgjedhesi__shigjete { color: var(--zgj-tekst); }
.zgjedhesi > button.zgjedhesi__triger[aria-expanded='true'] .zgjedhesi__shigjete { color: var(--zgj-theks); transform: rotate(180deg); }


/* ===================================================================================
   4. TRI VARIANTE, TE MATURA NGA ATO QE EKZISTOJNE
   Nuk shpiket asnje gjeometri e re: secili variant kopjon kutine qe select-i i tij
   ka tani, qe asnje formular te mos levize nen kemben e pronarit.
     fushe   — 41.5px, rreze 10px, 16px: matur mbi #shteti dhe #statusi_i_stokut
     pilule  — 29px, rreze 999px, cyan, 600 14px, padding 5px 40px 5px 10px:
               matur mbi .product_attribute_select (admin-theme.css:1462,
               shto-edito-porosi.css:97) dhe .product_variation_attribute_value
     kase    — 46px e mbeshtjellesit, rreze 15px, 500 15px: matur mbi .bss-zgjedhje
               te /kasa; atje KUTIA E PIKTURON MBESHTJELLESI, pra triger-i rri i
               tejdukshem dhe nuk e dyfishon vijen
   =================================================================================== */

.zgjedhesi.zgjedhesi--pilule > button.zgjedhesi__triger {
    min-height: 29px;
    padding: 4px 13px 4px 10px;
    border: 1px solid rgba(79, 198, 242, .4);
    border-radius: var(--radius-pill, 999px);
    background: rgba(79, 198, 242, .14);
    color: var(--zgj-theks);
    font: 600 14px/1.2 var(--zgj-font);
}

.zgjedhesi.zgjedhesi--pilule > button.zgjedhesi__triger:hover {
    border: 1px solid var(--zgj-theks);
    background: rgba(79, 198, 242, .22);
    color: var(--zgj-theks);
}

.zgjedhesi.zgjedhesi--pilule .zgjedhesi__shigjete { width: 10px; height: 10px; color: var(--zgj-theks); }

.zgjedhesi.zgjedhesi--kase > button.zgjedhesi__triger {
    min-height: 44px;
    padding: 0 0 0 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--zgj-tekst);
    font: 500 15px/1.35 var(--zgj-font);
}

/* Ne /kasa mbeshtjellesi .bss-zgjedhje e ndez vete :hover dhe :focus-within
   (kasa.css:428-436), keshtu qe triger-i nuk shton asnje vije te dyte. */
.zgjedhesi.zgjedhesi--kase > button.zgjedhesi__triger:hover,
.zgjedhesi.zgjedhesi--kase > button.zgjedhesi__triger[aria-expanded='true'] {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.zgjedhesi.zgjedhesi--kase > button.zgjedhesi__triger:focus-visible {
    border: 1px solid transparent;
    box-shadow: none;
    outline: 2px solid var(--zgj-theks);
    outline-offset: 2px;
}


/* ===================================================================================
   5. PANELI — fixed, portaluar te <body>
   Gjeresine, top-in dhe left-in i shkruan JS-i mbi style-in inline, sepse ato varen
   nga kutia e triger-it dhe duhen rillogaritur ne scroll dhe ne resize. CSS-i
   percakton vetem pamjen, kufijte dhe sjelljen e rreshqitjes.
   inset:auto shkruhet shprehimisht: pa te, nje "inset:0" i trasheguar nga ndonje
   rregull e ardhshme do te shtrinte panelin ne te gjithe dritaren.
   =================================================================================== */

/* Paneli ndizet si popover="manual" ne hapje, qe te hyje ne shtresen e sipërme dhe te
   mos mbulohet me nga #sinjalet (z-9998) — rreshtat atje matnin inerte DHE te fshehur.
   Stilet e agjentit per [popover] jane "inset:auto; margin:auto; width:fit-content;
   height:fit-content; overflow:visible", pra ri-fiksohen te gjitha ketu: autori fiton
   mbi agjentin, por mbetja e tyre e nenshkruar do te zhvendoste panelin. */
.zgjedhesi__panel[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.zgjedhesi__panel {
    position: fixed;
    inset: auto;
    z-index: var(--zgj-shtrese);
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: calc(100vw - 16px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--zgj-panel-vija);
    border-radius: var(--zgj-panel-rreze);
    background: var(--zgj-panel-sfond);
    backdrop-filter: var(--zgj-panel-blur);
    -webkit-backdrop-filter: var(--zgj-panel-blur);
    box-shadow: var(--zgj-panel-hije);
    color: var(--zgj-tekst);
    font: 500 15px/1.35 var(--zgj-font);
    color-scheme: dark;
    animation: zgj-hap var(--zgj-dur-shpejt) var(--zgj-ease);
}

/* PA animation-fill-mode. Kjo eshte NDRYSHE nga kasa.css:1234 dhe produkt.css:2463,
   dhe arsyeja eshte e matur: me "both" dhe me --zgj-dur-shpejt te ri-vendosur ne
   .01ms nga prefers-reduced-motion, Chrome e mban panelin ne gjendjen "from" —
   matur opacity:0 dhe translateY(-6px) edhe pas dy kuadrove dhe 60ms. Paneli, pra,
   ishte PLOTESISHT I PADUKSHEM per cdo perdorues me levizje te reduktuar. Pa fill-mode,
   nje animacion i ngrire e lë elementin ne stilin e tij baze (opacity 1, transform none),
   dhe fade-i humbet vetem atje ku ashtu duhet. Ato dy faqe shpetuan sepse animacionet e
   tyre ishin dekor mbi elemente qe piktohen edhe nga rregulla te tjera; ky animacion
   mban TE GJITHE komponentin.
   Kur lista rrokullisi lart (nuk kishte vend poshte), hyrja vjen nga poshte. */
.zgjedhesi__panel[data-ane='lart'] { animation-name: zgj-hap-lart; }

@keyframes zgj-hap { from { opacity: 0; transform: translateY(-6px) } }
@keyframes zgj-hap-lart { from { opacity: 0; transform: translateY(6px) } }


/* ===================================================================================
   6. FILTRI TYPE-AHEAD — i detyrueshem nga 12 opsione pergjate
   Pse 12 dhe pse i detyrueshem, i matur: #shteti ka 250 opsione; #qyteti ka 0 deri
   19 786 (mediana 71, p90 1 136, 65 shtete kalojne 200, Shqiperia 91);
   #zgjidh_klientin ka 191; kategorite 33; atributet 12; vlerat e atributeve 2-50
   (Ngjyra 50, Kapaciteti 36). Nje rresht matet 46px, pra 12 rreshta mbushin kufirin
   560px — mbi 12, opsioni i pare del nga pamja dhe pa filter kontrolli behet me i
   keq se select-i nativ, te cilit shfletuesi i fal te pakten shkrimin-per-te-kercyer.
   =================================================================================== */

.zgjedhesi__kerkim {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-hairline, rgba(255, 255, 255, .08));
    background: rgba(255, 255, 255, .03);
}

.zgjedhesi__panel .zgjedhesi__kerkim > input.zgjedhesi__fusha {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: var(--zgj-rresht-lartesi);
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--zgj-vija);
    border-radius: var(--radius-xs, 6px);
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
    color: var(--zgj-tekst);
    font: 400 15px/1.35 var(--zgj-font);
    letter-spacing: normal;
    text-align: left;
}

.zgjedhesi__panel .zgjedhesi__kerkim > input.zgjedhesi__fusha::placeholder { color: var(--zgj-tekst-zbehte); }

.zgjedhesi__panel .zgjedhesi__kerkim > input.zgjedhesi__fusha:focus-visible {
    outline: none;
    border: 1px solid var(--zgj-theks);
    box-shadow: 0 0 0 3px rgba(79, 198, 242, .18);
}


/* ===================================================================================
   7. LISTA DHE RRESHTAT
   overscroll-behavior:contain e mban rrotullen brenda listes pa i vene dore
   <body> — rikujtim: ne /kasa SDK-ja e Iute e zoteron .body-modal-active mbi <body>
   dhe nje bllokim scroll-i i jashtem i komponentit do t'a shkyçte ate.
   NUK vendoset max-height ne shkurtesa te tjera: kufiri 560px mund te shkurtohet nga
   JS-i mbi style-in inline kur dritarja eshte e ulet (740x360), dhe nje max-height
   ne CSS me specifikim me te larte do t'a mbyste.
   =================================================================================== */

.zgjedhesi__lista {
    flex: 1 1 auto;
    width: 100%;
    max-height: var(--zgj-lista-maks);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--bss-blue, #2B7CB4) transparent;
}

.zgjedhesi__lista::-webkit-scrollbar { width: 10px; height: 10px; }
.zgjedhesi__lista::-webkit-scrollbar-track { background: transparent; }
.zgjedhesi__lista::-webkit-scrollbar-thumb { background: var(--grad-brand, linear-gradient(135deg, #4FC6F2 0%, #2B7CB4 100%)); border-radius: var(--radius-pill, 999px); }
.zgjedhesi__lista::-webkit-scrollbar-thumb:hover { background: var(--bss-cyan, #4FC6F2); }

/* 44px min-height dhe padding 9px 14px matet 46px ne Montserrat 15px/1.35. Nje
   etikete 59 karakteresh matur ne 4 rreshta / 104.38px ne mbeshtjellesin 200px dhe
   ne 3 rreshta / 82.78px ne 285px, me ZERO tejkalim horizontal. Me nowrap e njejta
   etikete jep scrollWidth 476 kundrejt clientWidth 146 — PRITET. Prandaj
   white-space:normal dhe asnje text-overflow. */
.zgjedhesi__opsion {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--zgj-rresht-lartesi);
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs, 6px);
    background: transparent;
    color: var(--text-body, rgba(255, 255, 255, .78));
    text-align: left;
    cursor: pointer;
    transition: background-color var(--zgj-dur-shpejt) var(--zgj-ease), color var(--zgj-dur-shpejt) var(--zgj-ease);
}

.zgjedhesi__opsion_tekst {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Hekuri 3px. Matur: sfondi .06 i bardhe jep 1.16:1 dhe .12 cyan jep 1.24:1
   kundrejt panelit — nen 3:1, pra sfondi nuk mund te jete sinjali i vetem. Hekuri
   cyan matet 9.42:1 mbi panel dhe ben punen e tij edhe ne forced-colors. */
.zgjedhesi__opsion::before {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 3px;
    border-radius: var(--radius-pill, 999px);
    background: transparent;
}

.zgjedhesi__opsion:hover {
    background: var(--zgj-rresht-mbi);
    color: var(--zgj-tekst);
}

.zgjedhesi__opsion:hover::before { background: var(--zgj-theks); }

/* Fokusi i tastieres. aria-activedescendant e mban fokusin e vertete ne fushen e
   filtrit, keshtu qe ":focus-visible" nuk vlen ketu — gjendja shkruhet si klase. */
.zgjedhesi__opsion--fokus {
    background: var(--zgj-rresht-fokus);
    border: 1px solid var(--zgj-theks);
    color: var(--zgj-tekst);
}

.zgjedhesi__opsion--fokus::before { background: var(--zgj-theks); }

/* I zgjedhuri mban TRI sinjale te pavarura: tekst cyan (7.61:1 mbi rreshtin e
   zgjedhur), shenja, dhe pesha 600. Vetem njeri do te ishte ngjyre e vetme. */
.zgjedhesi__opsion--zgjedhur {
    background: var(--zgj-rresht-zgjedhur);
    color: var(--zgj-theks);
    font-weight: 600;
}

.zgjedhesi__opsion--zgjedhur::before { background: var(--zgj-theks); }

.zgjedhesi__shenje {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    visibility: hidden;
    color: var(--zgj-theks);
}

.zgjedhesi__opsion--zgjedhur .zgjedhesi__shenje { visibility: visible; }

/* Opsioni i caktivizuar rri i lexueshem (4.66:1) dhe i dukshem: nuk fshihet kurre
   nje zgjedhje nga lista, vetem nderpritet. */
.zgjedhesi__opsion--fikur {
    color: var(--zgj-tekst-fikur);
    cursor: not-allowed;
}

.zgjedhesi__opsion--fikur:hover { background: transparent; }
.zgjedhesi__opsion--fikur:hover::before { background: transparent; }

/* optgroup. Asnje faqe nuk ka <optgroup> tani; rregulli eshte dy rreshta dhe e heq
   nevojen per nje tjeter kalim nese shtohet nje. */
.zgjedhesi__grup {
    padding: 10px 14px 6px;
    color: var(--zgj-tekst-zbehte);
    font: 600 11px/1 var(--zgj-font);
    letter-spacing: var(--ls-eyebrow, .18em);
    text-transform: uppercase;
}

/* Mesazhet. TE DY jane literale ne markup/JS te komponentit, jo tokena — etiketat e
   opsioneve vijne nga baza ose nga markup-i dhe nuk tokenizohen (shih README). */
.zgjedhesi__bosh,
.zgjedhesi__numri {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    color: var(--zgj-tekst-zbehte);
    font: 500 14px/1.45 var(--zgj-font);
    text-align: left;
}

.zgjedhesi__bosh { min-height: var(--zgj-rresht-lartesi); }

.zgjedhesi__numri {
    flex: 0 0 auto;
    border-top: 1px solid var(--border-hairline, rgba(255, 255, 255, .08));
    background: rgba(255, 255, 255, .03);
    font-size: 12px;
}


/* ===================================================================================
   8. PREKJA DHE GJERESITE E VOGLA
   Rregull: nen 768px cdo rresht dhe fusha e filtrit kalojne 44px — por VETEM paneli
   e nderron vlera, se ai jeton ne dritare. Triger-i nuk e nderron 29px-in e pilules
   ketu: layout.html NUK ka <meta name="viewport">, keshtu qe paneli admin rendet
   gjithmone ne >= 980px CSS dhe nje @media (max-width:767px) nuk do te ndizej kurre
   atje — ndryshimi i pilules do te prekte vetem ndonje faqe mysafiri te ardhshme.
   Prandaj ketu fiksohet vetem ajo qe ka efekt: PANELI, i cili eshte i vetmi vend ku
   gishti ndalon ne te vertete.
   =================================================================================== */

@media (max-width: 767px) {
    .zgjedhesi__panel { --zgj-rresht-lartesi: 48px; max-width: calc(100vw - 16px); }
    .zgjedhesi__opsion { padding: 11px 14px; }
    .zgjedhesi__kerkim { padding: 10px; }
}

/* Telefon i shtrire (740x360): kufiri 560px nuk ka kuptim ne 360px lartesi. JS-i
   shkruan max-height mbi style-in inline sipas vendit te vertete; kjo rregull e ul
   tokenin edhe ne rastin kur JS-i nuk arrin, qe lista te mos dale nga dritarja. */
@media (max-height: 480px) {
    .zgjedhesi__panel { --zgj-lista-maks: calc(100vh - 96px); }
}


/* ===================================================================================
   9. FORCED COLORS
   Hekuri, shenja dhe vija mbeten; ngjyrat e sfondit zhduken ne kete modalitet,
   keshtu qe pa kete bllok rreshti i zgjedhur do te humbte cdo shenje.
   =================================================================================== */

@media (forced-colors: active) {
    .zgjedhesi__panel { border: 1px solid CanvasText; background: Canvas; }
    .zgjedhesi__opsion--fokus { border: 1px solid Highlight; }
    .zgjedhesi__opsion--zgjedhur { border: 1px solid CanvasText; }
    .zgjedhesi__shigjete,
    .zgjedhesi__shenje { forced-color-adjust: none; }
}


/* ===================================================================================
   10. LEVIZJA E REDUKTUAR
   Vetem kohezgjatje. Tokenat jane vlera te trasheguara, nuk deklarata konkurruese,
   keshtu qe ri-vendosja e tyre fiton pa !important dhe pa luftuar specifikimin —
   modeli i kasa.css:1234 dhe logInRegister.css:776. Shkruhen kohezgjatje, JO
   "animation: none": keyframes-at e komponentit kane vetem stopin "from" dhe PA
   fill-mode, pra edhe te ngrire e lene panelin te dukshem (matur: opacity 1,
   transform none). Kohezgjatja mbahet sepse e ndjek modelin e shtepise dhe nuk
   shpenzon specifikim.
   =================================================================================== */

@media (prefers-reduced-motion: reduce) {
    .zgjedhesi,
    .zgjedhesi__panel {
        --zgj-dur-shpejt: .01ms;
        --zgj-dur-baze: .01ms;
    }

    .zgjedhesi__panel,
    .zgjedhesi__panel *,
    .zgjedhesi__panel *::before,
    .zgjedhesi__panel *::after,
    .zgjedhesi *,
    .zgjedhesi *::before,
    .zgjedhesi *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
    }
}