@import url("/guest/bss-tokens.css");
@import url('/variables.css');
@import url('/fonts.css');

/* Faqja e kases (/kasa) e BSS — "PERFUNDO POROSINE" (CL-020).
   E gjithe pamja e erret rri e mbyllur brenda body.faqja_e_kases, shkalla e katert
   pas faqja_kryesore, faqja_e_produktit dhe paneli_admin. NUK linkohet
   "Design system/tokens/base.css" e as "styles.css": base.css:3 vendos
   body{background} pa shkalle dhe do te nxinte cdo faqe, perfshire panelin admin.

   Kater gjera qe NUK preken, me qellim:
   1. Asnje transform, filter, backdrop-filter, perspective, contain ose will-change
      mbi <html> ose <body>. SDK-ja e Iute shton div.iute-checkout-container si
      femijen e FUNDIT te <body> me position:fixed; cdo njera prej ketyre vetive e
      ben body bllokun permbajtes dhe mbulesa matet sipas dokumentit, nuk sipas
      dritares (matur: 1024x955.5 ne vend te 1024x768).
   2. Asnje overflow, overflow-x, overflow-y ose height:100vh mbi nje selektor
      body.faqja_e_kases: ai do te mundte .body-modal-active{overflow-y:hidden} te
      iutepay.css, qe e vendos SDK-ja mbi <body> sa kohe modali eshte i hapur.
   3. Asnje display:grid/flex i ri mbi body.faqja_e_kases dhe asnje selektor
      "body > *" ose "body > :last-child" — mbulesa e Iute do te futej si qeli.
   4. Asnje klase a id e quajtur iute-as-low-as ose iute-from: SDK-ja i mbledh
      elementet me ato emra klase dhe i mbishkruan innerHTML-in.

   iutepay.css (CDN) nuk ka ASNJE selektor qe perputhet me nje element te kesaj
   faqeje — matur, te 13 kthyen 0. I vetmi qe vepron ndonjehere eshte
   .body-modal-active mbi <body>. Prandaj asnje emer ketu nuk kopjon te tyret dhe
   asnje rregull ketu nuk konkurron me ta.

   global.css stilon elemente te zhveshur (div, img, button, input, form, fieldset,
   legend, select) me specifikim (0,0,1) dhe (0,1,1) per input[type=...]. NUK
   vendoset nje reset i gjere — nje i tille mbiti vete komponentet e sistemit te
   dizajnit dhe e shembi skenen ne 0 gjeresi (CL-007). Ne vend te tij, cdo kontroll i
   ri deklaron shprehimisht width, display, 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:185 (button:hover) ka
   specifikim (0,1,1) dhe e mund nje klase te vetme (0,1,0) kur ajo nuk e shkruan
   vetine. Klasat .full/.half/.onethird NUK perdoren: gjeresia e tyre mbahet me
   !important dhe nuk mund te ri-rrjetezohet pa nje !important tjeter.

   Asnje !important, asnje text-overflow. Cmimi dhe totali nuk pritet kurre: ato
   mbeshtillen dhe kutia rritet vete. */

/* ===== Shkalla e faqes dhe tokenat ===== */
/* Tokenat vendosen mbi body, NUK mbi :root: /variables.css ri-futet ne kaskade PAS
   kesaj faqeje, keshtu qe nje ri-drejtim i :root-it mbishkruhet pa zhurme
   (kurthi i CL-013). */

body.faqja_e_kases {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-body);
    color-scheme: dark;

    /* kontrollet — pa --control-* nje rregull "height: var(--control-md)" jep 0px.
       --control-sm eshte 40px ketu, jo 36px si ne PDP: ketu ai mason hapat e sasise
       dhe butonin e heqjes, qe duhet te kalojne 40x40 ne CDO gjeresi. */
    --control-sm: 40px;
    --control-md: 46px;
    --control-lg: 58px;

    /* tokena qe bss-tokens.css nuk i ka (ai file nuk editohet) */
    --press-scale: .96;
    --dur-instant: 90ms;
    --ease-snap: cubic-bezier(.2, 0, 0, 1);
    --radius-xs: 6px;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 1px 2px rgba(0, 0, 0, .6);
    --ls-mono: .02em;

    /* Shkurtesat e fontit shkruhen si LITERALE. Te sistemit te dizajnit ndertohen nga
       atome --fw dhe --fs qe produksioni nuk i ka, dhe nje perberes i pavlefshem heq
       TE GJITHE deklaraten pa zhurme. */
    --type-body: 400 16px/1.55 Montserrat, system-ui, sans-serif;
    --type-small: 500 14px/1.45 Montserrat, system-ui, sans-serif;
    --type-h1: 800 clamp(26px, 2.6vw, 38px)/1.14 Montserrat, system-ui, sans-serif;
    --type-h2: 700 clamp(18px, 1.4vw, 21px)/1.25 Montserrat, system-ui, sans-serif;

    --gjeresia-rripit: min(100% - 48px, var(--container-max));
    --gjeresia-permbledhjes: 420px;
    --hapesira-kolonash: 28px;
    --mbushja-pultit: 28px;
    --mas-fotos: 72px;

    /* shtresa e vetme e kesaj faqeje; 100 rezervohet per nje header te ardhshem dhe
       nuk kerkohet ketu. */
    --shtrese-sinjal: 9998;

    /* Kohezgjatja shtese deklarohet si token, qe blloku prefers-reduced-motion
       t'a ri-vendose pa !important. */
    --dur-sinjal: 420ms;
}

body.faqja_e_kases ::selection { background: var(--bss-cyan); color: #000 }

/* ===== Disiplina e [hidden] =====
   Nje rregull i vetem, i hershem (0,2,1). Cdo element qe JS e ndez ose shuan e
   deklaron display-in e tij te dukshem permes :not([hidden]) (0,3,0), keshtu qe
   gjendja e fshehur nuk mund te mbishkruhet pa dashje. Klasa .hidden e global.css:223
   NUK perdoret: ajo eshte display:none !important dhe e pathyeshme. */

body.faqja_e_kases [hidden] { display: none }

body.faqja_e_kases .ikona { flex: 0 0 auto; pointer-events: none }

/* ===== Shiriti i brendit ===== */
/* Nje nav vendor i faqes, NUK komponenti i perbashket: /kasa sherbehet si HTML statik
   dhe sendFileHtml nuk ekzekuton EJS. Asnje filter, transform, backdrop-filter,
   will-change ose contain mbi te — rregulli i CL-008 mbahet edhe pa sirtar ne kete
   faqe, se ai do te vlente sapo njeri te shtohej. Qelqi, nese ndonjehere duhet,
   shkon mbi ::before. */

body.faqja_e_kases .kreu_i_kases {
    display: block;
    width: 100%;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-hairline);
}

body.faqja_e_kases .kreu_i_kases__brenda {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: var(--gjeresia-rripit);
    min-height: 64px;
    margin-inline: auto;
    padding: 8px 0;
}

body.faqja_e_kases .kreu_i_kases__logo {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 2px 0;
    border-radius: var(--radius-sm);
}

body.faqja_e_kases .kreu_i_kases__logo:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* global.css:28-32 i jep cdo <img> width:100% dhe max-width:100% (0,0,1); logoja
   duhet te mbetet ne masen e vet. */
body.faqja_e_kases .kreu_i_kases__logo img {
    display: block;
    width: auto;
    max-width: none;
    height: 34px;
}

body.faqja_e_kases .kreu_i_kases__kthim {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .04);
    color: var(--text-strong);
    font: 600 14px/1 var(--font-body);
    text-align: center;
    white-space: nowrap;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_kases .kreu_i_kases__kthim:hover {
    display: inline-flex;
    width: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-pill);
    background: rgba(79, 198, 242, .12);
    color: var(--text-strong);
    text-align: center;
    transform: translateX(2px);
}

body.faqja_e_kases .kreu_i_kases__kthim:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* ===== Faqja ===== */
/* main NUK merr overflow:hidden: ai do te vriste permbledhjen sticky dhe do te
   priste unazat e fokusit (--focus-ring eshte box-shadow, jo outline). */

body.faqja_e_kases main.kasa {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 36px 0 96px;
}

/* E vetmja atmosfere e faqes: nje lavazh i bute, pa auroren, pa grid-mask dhe pa
   rreze. Nje formular me nente fusha te detyrueshme nuk ka nevoje per drite qe
   leviz pas tij (precedenti i .vitrina__shkelqim ne PDP). */
body.faqja_e_kases main.kasa::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 0;
    display: block;
    height: 420px;
    background: var(--grad-brand-soft);
    opacity: .5;
    pointer-events: none;
}

body.faqja_e_kases .kasa__brenda {
    position: relative;
    z-index: 1;
    width: var(--gjeresia-rripit);
    margin-inline: auto;
}

body.faqja_e_kases .kasa__titull {
    width: auto;
    min-width: 0;
    margin: 0 0 22px;
    font: var(--type-h1);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
    text-wrap: balance;
}

/* Verejtja pa-JS: e dukshme ne baze, fshihet vetem kur <html> mban .me_js. */
body.faqja_e_kases .kasa__pa_js {
    width: auto;
    min-width: 0;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(242, 184, 79, .35);
    border-radius: var(--radius-md);
    background: rgba(242, 184, 79, .1);
    font: var(--type-body);
    color: var(--text-strong);
}

html.me_js body.faqja_e_kases .kasa__pa_js { display: none }

/* Paneli i deshtimit te modulit: .me_js vendoset gjithmone kur JS-i punon, keshtu qe verejtja
   pa-JS nuk e mbulon rastin "JS ndezur, moduli i vdekur". Vete paneli nuk mban atributin
   hidden — dukshmeria e zoteron CSS-i, ndaj nuk ndriçon kurre ne rrugen e shendetshme. */
body.faqja_e_kases .kasa__deshtim {
    display: none;
    width: auto;
    min-width: 0;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(200, 60, 59, .45);
    border-radius: var(--radius-md);
    background: rgba(200, 60, 59, .12);
    font: var(--type-body);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

html.moduli_deshtoi body.faqja_e_kases .kasa__deshtim { display: block }

/* ===== Rrjeti: formulari majtas, permbledhja djathtas ===== */
/* Cdo bllok me poshte qe nderron grid-template-columns ri-shpall EDHE
   grid-template-areas dhe grid-area-n e TE DY femijeve ne te njejtin bllok,
   se ndryshe shfaqen kolona te nenkuptuara (rregulli i CL-010). */

body.faqja_e_kases .kasa__rrjet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--gjeresia-permbledhjes);
    grid-template-areas: "blerues permbledhje";
    align-items: start;
    gap: var(--hapesira-kolonash);
    width: 100%;
    margin: 0;
    padding: 0;
}

body.faqja_e_kases .kasa__kolone { width: auto; min-width: 0 }

body.faqja_e_kases .kasa__kolone--blerues { grid-area: blerues }

body.faqja_e_kases .kasa__kolone--permbledhje {
    grid-area: permbledhje;
    position: sticky;
    top: 24px;
}

/* ===== Pultet (kartat) ===== */
/* Pa backdrop-filter: formular i gjate ne telefon te mesem, dhe PDP-ja e heq qelqin
   vete ne <=1024 ("qelqi me kosto te larte"). Karta e sheshte --surface-card +
   --border-hairline eshte receta e .info_card, e cila i sherben kesaj faqeje me
   mire. overflow mbetet visible: --focus-ring eshte box-shadow. */

body.faqja_e_kases .pult {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    width: auto;
    min-width: 0;
    padding: var(--mbushja-pultit);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-1);
    overflow: visible;
    transition: border-color var(--dur-base) var(--ease-out);
}

/* PA kufi lartesie dhe PA rrotullim te brendshem. Me "max-height: calc(100vh - 48px);
   overflow-y: auto" karta behej rrotulluese dhe #vendos_porosine binte brenda tepricës
   se vete kartes: i matur ne 1366x768 me dy rreshta, butoni rrinte ne 851px me
   innerHeight 768 dhe rrotullimi i faqes ne fund nuk e zbuloi — kolona sticky ishte
   e gozhduar. "overscroll-behavior: contain" mbi te e ndalonte edhe rrotullimin e
   faqes kudo brenda kolones. Karta rritet lirshem; sticky vazhdon te mbaje butonin
   ne ekran per shporta te shkurtra dhe e leshon vetveten kur karta kalon ekranin. */
body.faqja_e_kases .pult--permbledhje {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
}

/* Cdo femije i drejtperdrejte i pultit shkruan "flex: 0 0 auto". Me kufirin
   max-height mbi permbledhjen, flex-shrink-u i nenkuptuar (1) i tkurr femijet deri ne
   lartesine e permbajtjes minimale — matur: #vendos_porosine dilte 18px i larte ne
   vend te 58px ne 1920/1500/1366/1200, se min-height:auto per nje rresht teksti eshte
   18px. Nuk perdoret ".pult > *": asnje selektor me * jashte bllokut
   prefers-reduced-motion. */

body.faqja_e_kases .pult__titull {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    font: var(--type-h2);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
}

/* ===== Fushat e bleresit ===== */

body.faqja_e_kases .fushat {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 14px;
    width: 100%;
}

body.faqja_e_kases .fusha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: auto;
    min-width: 0;
}

body.faqja_e_kases .fusha--emri { grid-column: span 3 }
body.faqja_e_kases .fusha--mbiemri { grid-column: span 3 }
body.faqja_e_kases .fusha--datelindja { grid-column: span 2 }
body.faqja_e_kases .fusha--email { grid-column: span 2 }
body.faqja_e_kases .fusha--telefoni { grid-column: span 2 }
body.faqja_e_kases .fusha--adresa { grid-column: span 6 }
body.faqja_e_kases .fusha--shteti { grid-column: span 2 }
body.faqja_e_kases .fusha--qyteti { grid-column: span 2 }
body.faqja_e_kases .fusha--kodi { grid-column: span 2 }

body.faqja_e_kases .fusha__etiketa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    font: 600 12px/1.2 var(--font-body);
    letter-spacing: .04em;
    color: var(--text-muted);
}

body.faqja_e_kases .datelindja { position: relative; width: 100%; min-width: 0 }

body.faqja_e_kases .datelindja__fusha { width: 100%; cursor: pointer }
body.faqja_e_kases .datelindja__fusha input { cursor: pointer }
body.faqja_e_kases .datelindja__ikona { flex: 0 0 auto; color: var(--text-muted) }

body.faqja_e_kases .datelindja__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: max-content;
    min-width: 100%;
    /* JO 100vw: ai perfshin shiritin e rrokullisjes dhe ne 440px paneli dilte 15px jashte
       (i njejti kurth si CL-010). Nen 520px paneli merr gjeresine e vete fushes. */
    max-width: 460px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(20, 27, 37, .98), rgba(8, 12, 18, .99));
    box-shadow: var(--shadow-float);
}

body.faqja_e_kases .datelindja__panel[hidden] { display: none }

body.faqja_e_kases .datelindja__kolonat {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr) minmax(0, 1.05fr);
    gap: 8px;
}

body.faqja_e_kases .datelindja__pjesa { min-width: 0 }

body.faqja_e_kases .datelindja__panel .bss-input { padding-left: 0; padding-right: 0 }

body.faqja_e_kases .datelindja__panel .zgjedhesi > button.zgjedhesi__triger {
    padding-left: 12px;
    padding-right: 32px;
}

body.faqja_e_kases .datelindja__panel .zgjedhesi > button.zgjedhesi__triger > .zgjedhesi__shigjete { right: 12px }

body.faqja_e_kases .datelindja__pastro {
    width: 100%;
    height: var(--control-md);
    margin-top: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-body);
    font: 600 13px/1 var(--font-body);
    cursor: pointer;
}

body.faqja_e_kases .datelindja__pastro:hover { background: rgba(255, 255, 255, .06) }

/* Ne ekrane te ngushta paneli nuk ka vend per tri kolona te prekshme: muaji zbret poshte. */
@media (max-width: 520px) {
    body.faqja_e_kases .datelindja__panel { left: 0; right: auto; width: 100%; min-width: 0; max-width: 100% }
}

@media (max-width: 420px) {
    body.faqja_e_kases .datelindja__kolonat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
    body.faqja_e_kases .datelindja__pjesa:nth-child(2) { grid-column: 1 / -1; order: -1 }
}

body.faqja_e_kases .fusha:has(:required) .fusha__etiketa::after {
    content: " *";
    color: var(--cherry-300);
    font-weight: 700;
}

body.faqja_e_kases .fusha__gabim {
    width: auto;
    min-width: 0;
    margin: 0;
    font: var(--type-small);
    color: var(--cherry-300);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .fusha__gabim:not([hidden]) { display: block }

/* ===== Fushat e tekstit dhe te zgjedhjes ===== */
/* global.css:82-93 i jep input[type=text|email|tel|date|number|search], select dhe
   textarea width:100%, border-radius:10px, box-shadow te ndritshem, padding 10px 20px
   dhe color:var(--e-zeza) — tekst I ZI mbi karte te erret — me specifikim (0,1,1).
   Nje klase e vetme (0,1,0) HUMBET kundrejt tij; selektoret me poshte jane (0,2,1)
   dhe e pastrojne pa !important. */

body.faqja_e_kases .bss-input,
body.faqja_e_kases .bss-zgjedhje {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: var(--control-md);
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .04);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

body.faqja_e_kases .bss-input:hover,
body.faqja_e_kases .bss-zgjedhje:hover { border-color: var(--border-strong) }

body.faqja_e_kases .bss-input:focus-within,
body.faqja_e_kases .bss-zgjedhje:focus-within {
    border-color: var(--bss-cyan);
    background: rgba(79, 198, 242, .06);
    box-shadow: 0 0 0 4px rgba(79, 198, 242, .14), 0 0 30px rgba(79, 198, 242, .15);
}

/* color-scheme:dark eshte mbajtes: pa te glifi i zgjedhesit te lindjes
   (input[type=date]) vizatohet i zi mbi te zeze. */
body.faqja_e_kases .bss-input input,
body.faqja_e_kases .bss-zgjedhje select {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-strong);
    font: 500 15px/1 var(--font-body);
    color-scheme: dark;
}

body.faqja_e_kases .bss-input input::placeholder { color: var(--text-muted) }

body.faqja_e_kases .bss-input input:focus-visible,
body.faqja_e_kases .bss-zgjedhje select:focus-visible { outline: 0; border: 0; box-shadow: none }

body.faqja_e_kases .fusha .bss-input:has(input[aria-invalid="true"]),
body.faqja_e_kases .fusha .bss-zgjedhje:has(select[aria-invalid="true"]) {
    border: 1px solid rgba(200, 60, 59, .55);
    background: rgba(200, 60, 59, .08);
}

/* ---- Zgjedhja: komponenti i vetem pa precedent ne produkt.css ----
   .arrow e global.css:142-159 NUK perdoret: shigjeta e tij rri e fiksuar ne top:12px
   per nje kontroll 43.5px te bardhe dhe ngjyrohet me --blu-e-erret nga
   /variables.css, qe nuk ka kuptim mbi kete karte. */

body.faqja_e_kases .bss-zgjedhje select {
    padding: 0 34px 0 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

body.faqja_e_kases .bss-zgjedhje select option { background: var(--ink-200); color: var(--text-strong) }

body.faqja_e_kases .bss-zgjedhje::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: translateY(-75%) rotate(-45deg);
    pointer-events: none;
}

body.faqja_e_kases .bss-zgjedhje:has(select:disabled) { cursor: not-allowed; opacity: .45 }

body.faqja_e_kases .bss-zgjedhje select:disabled { cursor: not-allowed; color: var(--text-muted) }

/* ===== Artikujt e porosise ===== */
/* grid-template-columns shkruhet njehere e vetme dhe masa e fotos vjen nga
   --mas-fotos, keshtu qe asnje bllok responsive nuk e nderron rrjetin e rreshtit
   dhe asnje kolone e nenkuptuar nuk mund te shfaqet. */

body.faqja_e_kases .artikujt {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.faqja_e_kases .artikujt:not([hidden]) { display: block }

body.faqja_e_kases .artikull {
    display: grid;
    grid-template-columns: var(--mas-fotos) minmax(0, 1fr) var(--control-sm);
    grid-template-areas: "foto trup hiq" "foto fund fund";
    align-items: start;
    gap: 12px 14px;
    width: auto;
    min-width: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-hairline);
    list-style: none;
}

body.faqja_e_kases .artikull:first-child { padding-top: 0 }

body.faqja_e_kases .artikull:last-child { padding-bottom: 0; border-bottom: 0 }

body.faqja_e_kases .artikull__foto {
    grid-area: foto;
    width: var(--mas-fotos);
    max-width: none;
    height: var(--mas-fotos);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    object-fit: contain;
}

body.faqja_e_kases .artikull__foto:not([hidden]) { display: block }

body.faqja_e_kases .artikull__trup {
    grid-area: trup;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    min-width: 0;
}

body.faqja_e_kases .artikull__emri {
    width: auto;
    min-width: 0;
    margin: 0;
    font: 600 15px/1.3 var(--font-body);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .artikull__vlerat {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.faqja_e_kases .artikull__fund {
    grid-area: fund;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    width: auto;
    min-width: 0;
}

body.faqja_e_kases .artikull__sasia {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

/* Cmimi i rreshtit: totali i rreshtit, nje here. Pa gjeresi fikse, pa nowrap, pa
   text-overflow — nje varg i formes "50 900 Leke - 58 900 Leke" (221px i matur)
   mbeshtillet dhe kutia rritet vete. */
body.faqja_e_kases .artikull__cmimi {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    font: 700 16px/1.25 var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-mono);
    color: var(--text-strong);
    text-align: right;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* ---- Chip-i fakt: atributet e zgjedhura, vetem per lexim ----
   Nuk jane interaktive: cursor default, pa ngritje ne hover, pa fokus — prandaj
   kufiri 40x40 i zonave te shtypjes nuk i perket. */

body.faqja_e_kases .vlere {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    width: auto;
    min-width: 0;
    padding: 7px 11px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    color: var(--text-strong);
    text-align: left;
    list-style: none;
}

body.faqja_e_kases .vlere--fakt { cursor: default }

body.faqja_e_kases .vlere__etiketa {
    display: block;
    width: auto;
    min-width: 0;
    font: 600 10px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    /* 2.90:1 me --text-faint mbi chip-in: nen kufirin AA. */
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .vlere__emri {
    display: block;
    width: auto;
    min-width: 0;
    font: 700 13px/1.2 var(--font-body);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

/* ===== Totali ===== */
/* I vetmi nyje ne faqe qe mban totalin e porosise. */

body.faqja_e_kases .totali {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 14px;
    width: auto;
    min-width: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

body.faqja_e_kases .totali:not([hidden]) { display: flex }

body.faqja_e_kases .totali__etiketa {
    width: auto;
    min-width: 0;
    font: var(--type-small);
    color: var(--text-muted);
}

body.faqja_e_kases .totali__vlera {
    width: auto;
    min-width: 0;
    font: 700 clamp(22px, 2vw, 28px)/1.15 var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-mono);
    color: var(--text-strong);
    text-align: right;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* ===== Fushat e fshehura ===== */
/* Vetem bartese e input[type=hidden]; display:none mbi kontejnerin NUK e heq asnje
   fushe nga FormData (vetem "disabled" e ben ate), dhe kursen nje hapesire boshe ne
   kolonen flex. */

body.faqja_e_kases #hidden_product_fields { display: none }

/* ===== Menyra e pageses ===== */
/* global.css:48-59 i jep fieldset-it border 2px solid var(--blu-e-erret), padding
   10px dhe nje rresht flex; i gjithe ai pastrohet ketu (0,2,0 mbi 0,0,1).
   Kontrolli i Iute (#menyr_pagese_me_iute) nuk ndryshohet: mbetet radio e vertete,
   e ndezur, e fokusueshme dhe MOTER e etiketes se vet. appearance:none mbi te eshte
   i lejuar shprehimisht; display:none, visibility:hidden, pointer-events:none ose
   left:-9999px NUK jane. */

body.faqja_e_kases .pagesa {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
}

body.faqja_e_kases .pagesa:not([hidden]) { display: block }

body.faqja_e_kases .pagesa__legjenda {
    display: block;
    float: none;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font: 600 12px/1.2 var(--font-body);
    letter-spacing: .04em;
    color: var(--text-muted);
}

body.faqja_e_kases .pagesa__opsionet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

body.faqja_e_kases .pagesa__opsion {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .03);
    overflow: visible;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

body.faqja_e_kases .pagesa__opsion:hover {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .06);
}

body.faqja_e_kases .pagesa__opsion:has(input:checked),
body.faqja_e_kases .pagesa__opsion:has(input:checked):hover {
    border: 1px solid var(--bss-cyan);
    background: rgba(79, 198, 242, .08);
    box-shadow: 0 0 0 3px rgba(79, 198, 242, .14), 0 0 24px rgba(79, 198, 242, .18);
}

/* Unaza e fokusit shkruhet PAS gjendjes se zgjedhur, qe karta e zgjedhur DHE e
   fokusuar te vazhdoje te tregoje fokusin (te dy rregullat kane te njejtin
   specifikim, keshtu qe radhitja vendos). */
body.faqja_e_kases .pagesa__opsion:has(input:focus-visible),
body.faqja_e_kases .pagesa__opsion:has(input:checked):has(input:focus-visible) { box-shadow: var(--focus-ring) }

body.faqja_e_kases .pagesa__opsion input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

body.faqja_e_kases .pagesa__opsion input:checked { border: 2px solid var(--bss-cyan) }

body.faqja_e_kases .pagesa__opsion input::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 4px;
    border-radius: 50%;
    background: var(--bss-cyan);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-snap);
}

body.faqja_e_kases .pagesa__opsion input:checked::after { opacity: 1 }

body.faqja_e_kases .pagesa__opsion input:focus-visible { outline: 0; box-shadow: none }

/* Etiketa e mbush rreshtin: kutia e SAJ eshte zona e vertete e shtypjes. */
body.faqja_e_kases .pagesa__opsion label {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 15px 0;
    font: 500 15px/1.3 var(--font-body);
    color: var(--text-strong);
    cursor: pointer;
    overflow-wrap: anywhere;
}

/* ===== Mesazhet e permbledhjes ===== */

body.faqja_e_kases .permbledhje__mesazh {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid rgba(200, 60, 59, .5);
    border-radius: var(--radius-md);
    background: rgba(200, 60, 59, .1);
    font: var(--type-small);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .permbledhje__mesazh:not([hidden]) { display: block; animation: kasa-shfaqu var(--dur-base) var(--ease-out) }

body.faqja_e_kases .permbledhje__sukses {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid rgba(63, 217, 154, .45);
    border-radius: var(--radius-md);
    background: rgba(63, 217, 154, .1);
    font: 600 14px/1.45 var(--font-body);
    color: var(--signal-green);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .permbledhje__sukses:not([hidden]) { display: block; animation: kasa-shfaqu var(--dur-base) var(--ease-out) }

/* ===== Shporta boshe ===== */

body.faqja_e_kases .bosh {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    padding: 26px 10px 10px;
    text-align: center;
}

body.faqja_e_kases .bosh:not([hidden]) { display: flex }

body.faqja_e_kases .bosh__ikona {
    width: 44px;
    height: 44px;
    color: var(--text-faint);
}

body.faqja_e_kases .bosh__tekst {
    width: auto;
    min-width: 0;
    margin: 0;
    font: 700 17px/1.3 var(--font-body);
    color: var(--text-strong);
}

body.faqja_e_kases .bosh__nen {
    width: auto;
    min-width: 0;
    margin: 0 0 6px;
    font: var(--type-body);
    color: var(--text-muted);
}

/* ===== Butonat ===== */
/* global.css:168-183 i pikturon TE GJITHE butonat blu me width:100% dhe
   border:2px solid var(--blu-e-erret), dhe button:hover (0,1,1) e mund nje klase te
   vetme (0,1,0). Prandaj cdo buton ri-shkruan shkurtesen e PLOTE ne baze, :hover,
   :focus-visible, :active dhe :disabled. Nese :hover shkruan vetem border-color,
   border-i 2px rrjedh brenda dhe kontrolli kercen 1px. */

body.faqja_e_kases .bss-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: var(--control-md);
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-strong);
    font: 600 16px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    isolation: isolate;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_kases .bss-btn--primary {
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
    box-shadow: var(--glow-blue);
}

body.faqja_e_kases .bss-btn--primary:hover {
    display: inline-flex;
    width: auto;
    height: var(--control-md);
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: #001018;
    text-align: center;
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan);
}

body.faqja_e_kases .bss-btn--sekondar {
    width: auto;
    height: var(--control-md);
    padding: 0 28px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .05);
    color: var(--text-strong);
}

body.faqja_e_kases .bss-btn--sekondar:hover {
    display: inline-flex;
    width: auto;
    height: var(--control-md);
    padding: 0 28px;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-pill);
    background: rgba(79, 198, 242, .12);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

/* Blloku shkruhet PAS varianteve, qe gjeresia dhe lartesia e tij te mbizoterojne ne
   te gjitha gjendjet (specifikim i njejte, radhitja vendos). */
body.faqja_e_kases .bss-btn--bllok,
body.faqja_e_kases .bss-btn--bllok:hover,
body.faqja_e_kases .bss-btn--bllok:focus-visible,
body.faqja_e_kases .bss-btn--bllok:disabled,
body.faqja_e_kases .bss-btn--bllok:disabled:hover {
    display: inline-flex;
    flex: 0 0 auto;
    width: 100%;
    height: var(--control-lg);
    padding: 0 24px;
}

body.faqja_e_kases .bss-btn:active { transform: scale(var(--press-scale)) }

body.faqja_e_kases .bss-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* Gjendja e fikur shkruhet shprehimisht ose butoni i vdekur vazhdon te dukete i
   klikueshem (ai niset i fikur ne HTML dhe ndizet nga JS). */
body.faqja_e_kases .bss-btn:disabled,
body.faqja_e_kases .bss-btn--primary:disabled,
body.faqja_e_kases .bss-btn--primary:disabled:hover {
    display: inline-flex;
    padding: 0 28px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .05);
    color: var(--text-faint);
    text-align: center;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Gjate dergimit butoni NUK ckyçet me '.disabled': Chrome e heq fokusin nga nje kontroll te
   ckyçur dhe klienti me tastiere humb vendin per gjithe kohen e kerkeses. Shenjen e mban
   aria-disabled, ndaj gjendja duhet pikturuar vete — pa gjeresi/lartesi ketu, qe blloku
   .bss-btn--bllok te vazhdoje te zoteroje geometrine. :hover ri-shkruhet ose
   .bss-btn--primary:hover (specifikim i njejte, me poshte ne radhe) e kthen ngritjen. */
body.faqja_e_kases .bss-btn[aria-disabled="true"],
body.faqja_e_kases .bss-btn[aria-disabled="true"]:hover,
body.faqja_e_kases .bss-btn[aria-disabled="true"]:active {
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, .05);
    color: var(--text-faint);
    cursor: progress;
    transform: none;
    box-shadow: none;
}

/* Gjendja e dergimit: nyja niset bosh dhe e dukshme, qe role="status" te jete ne pemen e
   aksesueshmerise nga ngarkimi; ':empty' e mban jashte faqes derisa te kete tekst. */
body.faqja_e_kases .permbledhje__statusi {
    display: block;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid rgba(79, 198, 242, .4);
    border-radius: var(--radius-md);
    background: rgba(79, 198, 242, .08);
    font: var(--type-small);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .permbledhje__statusi:empty { display: none }

/* Cmim jo-numerik ne rekordin e shportes: thuhet shprehimisht, nuk lihet bosh. */
body.faqja_e_kases .artikull__cmimi--pavlefshem {
    font: 600 14px/1.3 var(--font-body);
    color: var(--cherry-300);
}

/* ---- Hapat e sasise: rrathe, modeli i .dritarja__btn ne PDP ---- */

body.faqja_e_kases .hap {
    display: grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--text-strong);
    font: 700 17px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_kases .hap:hover {
    display: grid;
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    background: rgba(79, 198, 242, .18);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

body.faqja_e_kases .hap:active { transform: scale(var(--press-scale)) }

body.faqja_e_kases .hap:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* Kutia e sasise nuk rri brenda nje .bss-input, keshtu qe rregulli (0,1,1) i
   global.css per input[type=number] mundet drejtpersedrejti nga (0,2,0). */
body.faqja_e_kases .sasia_input {
    display: block;
    width: 58px;
    height: var(--control-sm);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
    color: var(--text-strong);
    font: 700 15px/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ls-mono);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    color-scheme: dark;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

body.faqja_e_kases .sasia_input::-webkit-outer-spin-button,
body.faqja_e_kases .sasia_input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0 }

body.faqja_e_kases .sasia_input:hover {
    width: 58px;
    height: var(--control-sm);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

body.faqja_e_kases .sasia_input:focus-visible {
    outline: 0;
    width: 58px;
    height: var(--control-sm);
    padding: 0;
    border: 1px solid var(--bss-cyan);
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}

/* ---- Butoni i heqjes ---- */

body.faqja_e_kases .artikull__hiq {
    grid-area: hiq;
    display: grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font: 600 14px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-instant) var(--ease-snap), background-color var(--dur-instant) var(--ease-snap), color var(--dur-instant) var(--ease-snap);
}

body.faqja_e_kases .artikull__hiq:hover {
    display: grid;
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
    border: 1px solid rgba(200, 60, 59, .45);
    border-radius: 50%;
    background: rgba(200, 60, 59, .12);
    color: var(--cherry-300);
    text-align: center;
    cursor: pointer;
}

body.faqja_e_kases .artikull__hiq:active { transform: scale(var(--press-scale)) }

body.faqja_e_kases .artikull__hiq:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

body.faqja_e_kases .artikull__hiq .ikona { width: 18px; height: 18px }

/* ===== SINJALET (toast) =====
   Poshte-MAJTAS, si ne PDP. Pa backdrop-filter (vendim i kesaj faqeje); sfondi i
   ngopur plus --shadow-float e mbajne te lexueshem mbi cdo permbajtje. Kjo faqe nuk
   ka #whatsapp_btn, keshtu qe bottom:16px nuk ngrihet ne asnje gjeresi. */

body.faqja_e_kases .sinjalet {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: var(--shtrese-sinjal);
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: auto;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

body.faqja_e_kases .sinjali {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-glass-strong);
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    animation: kasa-sinjal-hyr var(--dur-sinjal) var(--ease-spring) both;
}

body.faqja_e_kases .sinjali--gabim {
    border: 1px solid rgba(200, 60, 59, .5);
    background: linear-gradient(180deg, rgba(94, 19, 19, .92), rgba(8, 12, 18, .94));
}

body.faqja_e_kases .sinjali__tekst {
    width: auto;
    min-width: 0;
    margin: 0;
    font: var(--type-small);
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

body.faqja_e_kases .sinjali--gabim .sinjali__tekst { color: #fff }

/* ===== Levizja ===== */
/* Emrat e keyframe-ve jane globale per DOKUMENT, prandaj te dyja mbajne prefiksin
   kasa-: bss-aurora, bss-float, bss-rise, bss-marquee, bss-sheen (bss-tokens.css),
   bss-sheen-hl, bss-flyin, bss-ringspin (index.css), pdp-* (produkt.css),
   bss-admin-* dhe preloader-spin jane te zena. */

@keyframes kasa-sinjal-hyr { from { opacity: 0; transform: translateX(-110%) scale(.92) } to { opacity: 1; transform: none } }
@keyframes kasa-shfaqu { from { opacity: 0 } }

/* ===== prefers-reduced-motion =====
   Mekanizmi kryesor: cdo kohezgjatje ne kete file shkruhet me var(--dur-*), keshtu qe
   ri-vendosja e tokenave ne .01ms i shuan TE GJITHA tranzicionet dhe animacionet pa
   asnje !important dhe pa luftuar specifikimin (nje bllok "body.faqja_e_kases *" ka
   specifikim (0,1,1) dhe do te humbte kundrejt rregullave (0,2,1) me lart).
   Shkruhen kohezgjatje, JO "animation: none": kasa-sinjal-hyr perdor
   animation-fill-mode:both dhe "none" do t'i lente sinjalet ne opacity:0. */

@media (prefers-reduced-motion: reduce) {
    body.faqja_e_kases {
        --dur-instant: .01ms;
        --dur-fast: .01ms;
        --dur-base: .01ms;
        --dur-slow: .01ms;
        --dur-sinjal: .01ms;
    }

    body.faqja_e_kases *,
    body.faqja_e_kases *::before,
    body.faqja_e_kases *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
        scroll-behavior: auto;
    }

    body.faqja_e_kases .kreu_i_kases__kthim:hover,
    body.faqja_e_kases .bss-btn--primary:hover,
    body.faqja_e_kases .bss-btn:active,
    body.faqja_e_kases .hap:active,
    body.faqja_e_kases .artikull__hiq:active { transform: none }
}

/* ===== RESPONSIVE =====
   Pikat e kontrollit: 1920 (baza, pa pyetje) / 1500 / 1366 / 1200 / 1024 / 880 / 767 /
   600 / 440 (mbulon edhe 390) / 320. Cdo bllok qe nderron grid-template-columns
   ri-shpall EDHE grid-template-areas dhe grid-area-n ose grid-column-in e CDO
   femije, se ndryshe shfaqen kolona te nenkuptuara (rregulli i CL-010). */

/* ---- 1500px e poshte ---- */
@media (max-width: 1500px) {
    body.faqja_e_kases { --gjeresia-permbledhjes: 400px }

    body.faqja_e_kases .kasa__rrjet {
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-areas: "blerues permbledhje";
    }

    body.faqja_e_kases .kasa__kolone--blerues { grid-area: blerues }
    body.faqja_e_kases .kasa__kolone--permbledhje { grid-area: permbledhje }
}

/* ---- 1366px e poshte ---- */
@media (max-width: 1366px) {
    body.faqja_e_kases { --gjeresia-permbledhjes: 380px; --hapesira-kolonash: 24px }

    body.faqja_e_kases .kasa__rrjet {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas: "blerues permbledhje";
    }

    body.faqja_e_kases .kasa__kolone--blerues { grid-area: blerues }
    body.faqja_e_kases .kasa__kolone--permbledhje { grid-area: permbledhje }
}

/* ---- 1200px e poshte ---- */
@media (max-width: 1200px) {
    body.faqja_e_kases { --gjeresia-permbledhjes: 360px; --hapesira-kolonash: 20px; --mbushja-pultit: 24px }

    body.faqja_e_kases .kasa__rrjet {
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-areas: "blerues permbledhje";
    }

    body.faqja_e_kases .kasa__kolone--blerues { grid-area: blerues }
    body.faqja_e_kases .kasa__kolone--permbledhje { grid-area: permbledhje }
}

/* ---- 1024px e poshte: nje kolone, permbledhja nuk rri me sticky ----
   Rrotullimi i brendshem i permbledhjes hiqet bashke me sticky-n: pa te, karta nuk
   mund te kalonte dritaren dhe nje "overflow-y: auto" i mbetur do te krijonte nje
   rrokullises te panevojshem brenda faqes. */
@media (max-width: 1024px) {
    body.faqja_e_kases { --gjeresia-rripit: min(100% - 40px, var(--container-max)) }

    body.faqja_e_kases .kasa__rrjet {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "blerues" "permbledhje";
        gap: 20px;
    }

    body.faqja_e_kases .kasa__kolone--blerues { grid-area: blerues }

    body.faqja_e_kases .kasa__kolone--permbledhje {
        grid-area: permbledhje;
        position: static;
        top: auto;
    }

    body.faqja_e_kases .pult--permbledhje {
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
    }
}

/* ---- 880px e poshte ---- */
@media (max-width: 880px) {
    body.faqja_e_kases {
        --mbushja-pultit: 22px 20px;
        --type-h1: 800 clamp(24px, 4.4vw, 30px)/1.16 Montserrat, system-ui, sans-serif;
    }

    body.faqja_e_kases main.kasa { padding: 28px 0 80px }
}

/* ---- 767px e poshte: blloku i shtypjes ----
   --control-sm kalon ne 44px dhe me te rriten vete .hap, .sasia_input dhe
   .artikull__hiq. Etiketa e kartes se pageses rritet me padding, se kutia e SAJ
   eshte zona e vertete e shtypjes. Cdo mase ri-shkruhet edhe ne binjakun :hover,
   se ndryshe rregulli i hover-it e kthen pa zhurme. */
@media (max-width: 767px) {
    body.faqja_e_kases {
        --control-sm: 44px;
        --gjeresia-rripit: min(100% - 32px, var(--container-max));
    }

    body.faqja_e_kases .fushat {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
    }

    body.faqja_e_kases .fusha--emri { grid-column: span 1 }
    body.faqja_e_kases .fusha--mbiemri { grid-column: span 1 }
    body.faqja_e_kases .fusha--datelindja { grid-column: span 2 }
    body.faqja_e_kases .fusha--email { grid-column: span 2 }
    body.faqja_e_kases .fusha--telefoni { grid-column: span 2 }
    body.faqja_e_kases .fusha--adresa { grid-column: span 2 }
    body.faqja_e_kases .fusha--shteti { grid-column: span 1 }
    body.faqja_e_kases .fusha--qyteti { grid-column: span 1 }
    body.faqja_e_kases .fusha--kodi { grid-column: span 2 }

    body.faqja_e_kases .pagesa__opsion,
    body.faqja_e_kases .pagesa__opsion:hover { min-height: 60px }

    body.faqja_e_kases .pagesa__opsion label { padding: 17px 0 }
}

/* ---- 600px e poshte ----
   global.css:229 vendos 20px padding anesor mbi <body>; ai zerohet brenda shkalles
   qe hapesira anesore te zoterohet VETEM nga --gjeresia-rripit dhe te mos dyfishohet.
   Gjysma e CL-007 per header-in nuk duhet: kjo faqe nuk ka header te perbashket. */
@media (max-width: 600px) {
    body.faqja_e_kases { padding-left: 0; padding-right: 0 }
}

/* ---- 440px e poshte (mbulon edhe 390px) ---- */
@media (max-width: 440px) {
    body.faqja_e_kases .fushat {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px 0;
    }

    body.faqja_e_kases .fusha--emri { grid-column: span 1 }
    body.faqja_e_kases .fusha--mbiemri { grid-column: span 1 }
    body.faqja_e_kases .fusha--datelindja { grid-column: span 1 }
    body.faqja_e_kases .fusha--email { grid-column: span 1 }
    body.faqja_e_kases .fusha--telefoni { grid-column: span 1 }
    body.faqja_e_kases .fusha--adresa { grid-column: span 1 }
    body.faqja_e_kases .fusha--shteti { grid-column: span 1 }
    body.faqja_e_kases .fusha--qyteti { grid-column: span 1 }
    body.faqja_e_kases .fusha--kodi { grid-column: span 1 }

    body.faqja_e_kases .artikull__fund {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body.faqja_e_kases .artikull__sasia { flex: 0 0 auto; justify-content: flex-start }

    body.faqja_e_kases .artikull__cmimi { flex: 0 0 auto; text-align: left }
}

/* ---- 320px e poshte ---- */
@media (max-width: 320px) {
    body.faqja_e_kases {
        --gjeresia-rripit: min(100% - 24px, var(--container-max));
        --mas-fotos: 56px;
        --mbushja-pultit: 18px 14px;
        --type-h1: 800 22px/1.2 Montserrat, system-ui, sans-serif;
    }

    body.faqja_e_kases .vlere { padding: 8px 10px }

    body.faqja_e_kases .kreu_i_kases__kthim { padding: 0 10px; font: 600 13px/1 var(--font-body) }
}

/* ===== Shiritat e rrokullisjes ===== */
/* Rrokulliset vete dokumenti, prandaj duhet edhe html:has(...) — vetem
   body::-webkit-scrollbar nuk e kap shiritin kryesor. Forma pasardhese
   ("body.faqja_e_kases " plus ::-webkit-scrollbar, me HAPESIRE) mbulon edhe
   rrokulliesin e brendshem te permbledhjes sticky. Te shkallezuar, keshtu qe cdo
   faqe tjeter mban shiritat e vet te lindur. */

html:has(body.faqja_e_kases) { scrollbar-width: thin; scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04) }

body.faqja_e_kases { scrollbar-width: thin; scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04) }

html:has(body.faqja_e_kases)::-webkit-scrollbar,
body.faqja_e_kases ::-webkit-scrollbar { width: 10px; height: 10px }

html:has(body.faqja_e_kases)::-webkit-scrollbar-track,
body.faqja_e_kases ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04) }

html:has(body.faqja_e_kases)::-webkit-scrollbar-thumb,
body.faqja_e_kases ::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html:has(body.faqja_e_kases)::-webkit-scrollbar-thumb:hover,
body.faqja_e_kases ::-webkit-scrollbar-thumb:hover {
    background: var(--bss-cyan);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html:has(body.faqja_e_kases)::-webkit-scrollbar-corner,
body.faqja_e_kases ::-webkit-scrollbar-corner { background: transparent }