/* ═══════════════════════════════════════════════════════════
   Portali i Pagesave — Elsa-Tech
   Paletë e njëjtë me platformën (portokalli #e67e22), por layout
   i thjeshtë e i përqendruar: klientët e hapin nga telefoni.
   ═══════════════════════════════════════════════════════════ */
:root {
  --acc:      #e67e22;
  --acc-err:  #cf6d17;
  --acc-glow: rgba(230,126,34,.14);
  --bg:       #f1f5f9;
  --tekst:    #1e293b;
  --heshtur:  #64748b;
  --vije:     #e2e8f0;
  --ok:       #15803d;
  --gab:      #dc2626;
}

* { box-sizing: border-box; }

/* [hidden] duhet të fitojë gjithmonë.
   Pa këtë, çdo rregull që cakton `display` shprehimisht (p.sh. inline-flex te
   një element i fshehur) e anulon atributin dhe elementi shfaqet gjithsesi. */
[hidden] { display: none !important; }

html { font-size: 16px; }

body.pg-body {
  margin: 0;
  min-height: 100vh;
  padding: 28px 14px 44px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Vijë e hollë portokalli në krye — e njëjta shenjë si te platforma, aq sa
     faqja të njihet pa e ngarkuar me ngjyrë. */
  background: var(--bg) linear-gradient(var(--acc), var(--acc)) no-repeat top center / 100% 3px;
  color: var(--tekst);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ── Kartë qendrore ── */
.pg-kuti {
  max-width: 440px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--vije);
  border-radius: 16px;
  padding: 26px 24px 26px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
}

@media (max-width: 420px) {
  body.pg-body { padding: 18px 10px 32px; }
  .pg-kuti     { padding: 20px 16px; border-radius: 14px; }
}

/* ── Logoja ──
   Raporti është ~4:1, ndaj lartësia e kontrollon madhësinë dhe gjerësia vjen
   vetë. Në ekrane të ngushta zvogëlohet me max-width, që të mos dalë jashtë
   kartës. Logoja e mban vetë emrin dhe nënshkrimin "Internet Service
   Provider", prandaj s'ka nevojë ta përsërisim me tekst. */
.pg-logo-img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 84%;
  margin: 0 auto 4px;
}
.pg-nentitull {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--heshtur);
  margin-top: 6px;
  margin-bottom: 24px;
}

/* Shenja e zonës së stafit — dallon qartë nga portali i klientit, që askush
   të mos ngatërrojë faqen ku ndodhet. */
.pg-shenj-adm {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Varianti i vogël — te koka e faqeve të brendshme, majtas */
.pg-logo-vogel {
  display: block;
  height: 26px;
  width: auto;
  max-width: 190px;
}

@media (max-width: 380px) {
  .pg-logo-img   { height: 38px; }
  .pg-logo-vogel { height: 22px; max-width: 150px; }
}

.pg-h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--heshtur);
  margin: 22px 0 10px;
}

/* ── Fusha ── */
.pg-fusha { margin-bottom: 16px; }
.pg-eti {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 5px;
}
.pg-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--vije);
  border-radius: 10px;
  font-size: 16px;          /* 16px = pa zoom automatik në iOS */
  font-family: inherit;
  color: var(--tekst);
  background: #fcfcfd;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pg-input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
  background: #fff;
}
/* ── Fusha e kodit: një kuti për secilën shifër ──
   Kutitë tkurren vetë (flex) që gjashtë prej tyre të hyjnë edhe në ekrane
   të ngushta, pa i lejuar të bëhen aq të vogla sa të mos preken me gisht. */
.pg-kod-kutite {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.pg-kod-boks {
  flex: 1 1 0;
  min-width: 0;
  max-width: 56px;
  aspect-ratio: 1 / 1;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  font-family: inherit;
  color: var(--tekst);
  background: #fcfcfd;
  border: 1.5px solid var(--vije);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pg-kod-boks:focus {
  border-color: var(--acc);
  background: #fff;
  box-shadow: 0 0 0 3px var(--acc-glow);
}
/* Kutia e mbushur theksohet lehtë — tregon përparimin pa numërues.
   Klasa vendoset nga JS: selektorët si :not(:placeholder-shown) nuk vlejnë
   këtu, sepse kutitë s'kanë placeholder dhe do të përputheshin gjithmonë. */
.pg-kod-boks.plot {
  border-color: #cbd5e1;
  background: #fff;
}
/* Fshihen shigjetat e number-input në shfletues që i shfaqin */
.pg-kod-boks::-webkit-outer-spin-button,
.pg-kod-boks::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Fusha rezervë — shfaqet vetëm kur JavaScript s'ka punuar. Sapo skripti
   niset, ai e heq nga faqja dhe kutitë bëhen burimi i vërtetë. */
.pg-kod-rezerve {
  margin-top: 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 8px;
  padding-left: 8px;
}
.pg-kod-grup.pg-kod-gati .pg-kod-rezerve { display: none; }

/* ══════════════════════════════════════════════════════════
   PRITJA E SMS-it
   Ekrani i pritjes është pika ku klienti nuk ka çfarë të bëjë veç të presë.
   Prandaj lëviz diçka: valë te ikona, pika që pulsojnë, dhe unaza që
   zbrazet. Pa to faqja duket e ngrirë dhe pritja duket më e gjatë.
   ══════════════════════════════════════════════════════════ */
.pg-pret { text-align: center; margin: 4px 0 14px; }

.pg-pret-ikona {
  position: relative;
  width: 58px; height: 58px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--acc-glow);
  color: var(--acc);
}
.pg-pret-ikona svg { width: 26px; height: 26px; position: relative; z-index: 1; }

/* Vala që zgjerohet — sinjali "diçka po vjen". */
.pg-pret-valë {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--acc);
  opacity: 0;
  animation: pgValë 2.2s ease-out infinite;
}
@keyframes pgValë {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.pg-pret-titull { font-size: 16px; font-weight: 800; color: var(--tekst); }
.pg-pret-nen    { font-size: 13px; color: var(--heshtur); margin-top: 3px; }

.pg-pret-pika { display: inline-flex; gap: 3px; margin-left: 3px; vertical-align: middle; }
.pg-pret-pika i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--acc);
  animation: pgPika 1.4s ease-in-out infinite;
}
.pg-pret-pika i:nth-child(2) { animation-delay: .2s; }
.pg-pret-pika i:nth-child(3) { animation-delay: .4s; }
@keyframes pgPika {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Për ata që preferojnë lëvizje të reduktuar — animacionet ndalen. */
@media (prefers-reduced-motion: reduce) {
  .pg-pret-valë, .pg-pret-pika i { animation: none; }
  .pg-pret-valë { opacity: 0; }
  .pg-mirem-ikona .pg-dhemb, .pg-mirem-unaz, .pg-mirem-pika i { animation: none; }
  .pg-mirem-unaz { opacity: 0; }
}

/* ── Mirëmbajtja ──
   Nuk është gabim i klientit, ndaj as ngjyra as fjalori s'janë alarmues. */
.pg-mirem { text-align: center; padding: 6px 0 2px; }

.pg-mirem-ikona {
  position: relative;
  width: 78px; height: 78px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--acc-glow);
  color: var(--acc);
}
.pg-mirem-ikona svg { width: 36px; height: 36px; position: relative; z-index: 1; }
/* Ingranazhi rrotullohet ngadalë — thotë "po punohet", pa e bërë faqen të duket e prishur. */
.pg-mirem-ikona .pg-dhemb {
  transform-origin: 12px 12px;
  animation: pgRrotull 9s linear infinite;
}
@keyframes pgRrotull { to { transform: rotate(360deg); } }

.pg-mirem-unaz {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--acc);
  opacity: 0;
  animation: pgValë 2.6s ease-out infinite;
}

.pg-mirem-tit  { font-size: 19px; font-weight: 800; line-height: 1.3; }
.pg-mirem-txt  {
  font-size: 13.5px; color: var(--heshtur);
  line-height: 1.6; margin-top: 8px;
  max-width: 320px; margin-left: auto; margin-right: auto;
}
.pg-mirem-txt strong { color: var(--tekst); }

.pg-mirem-pika { display: flex; justify-content: center; gap: 5px; margin: 18px 0 20px; }
.pg-mirem-pika i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
  animation: pgPika 1.4s ease-in-out infinite;
}
.pg-mirem-pika i:nth-child(2) { animation-delay: .2s; }
.pg-mirem-pika i:nth-child(3) { animation-delay: .4s; }

/* Butonat këtu janë lidhje <a>, ndaj u duhet hequr nënvizimi. */
.pg-mirem .pg-btn { text-decoration: none; }
.pg-mirem-tel { margin-top: 10px; }
.pg-mirem-tel svg { width: 17px; height: 17px; }
.pg-mirem-nen { font-size: 12px; color: var(--heshtur); margin-top: 10px; font-weight: 600; }

/* ── Unaza e numërimit ── */
.pg-numerim { text-align: center; margin: 0 0 18px; }

.pg-unaza { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.pg-unaza svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.pg-unaza circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.pg-unaza-bg { stroke: #eef2f6; }
.pg-unaza-fw {
  stroke: var(--acc);
  transition: stroke-dashoffset 1s linear, stroke .3s;
}
/* Nën 30 sekonda ngjyra ndryshon — paralajmërim pa tekst shtesë. */
.pg-numerim-fund .pg-unaza-fw { stroke: var(--gab); }

.pg-unaza-tekst {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0;
}
.pg-numerim-vlera {
  font-size: 18px; font-weight: 800; color: var(--tekst);
  font-variant-numeric: tabular-nums;   /* shifrat s'kërcejnë kur ndryshojnë */
  line-height: 1.1;
}
.pg-numerim-lbl { font-size: 9.5px; color: var(--heshtur); text-transform: uppercase; letter-spacing: .5px; }

.pg-numerim-skaduar {
  font-size: 13.5px; color: var(--gab); line-height: 1.5;
}
.pg-numerim-skaduar div { font-weight: 500; color: var(--heshtur); font-size: 12.5px; }

.pg-risko-forma { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════
   HYRJA
   ══════════════════════════════════════════════════════════ */

/* Ikonë brenda fushës — shenjë e qetë se çfarë pritet aty.
   Qëllimisht JO prefiks "+383": klientët shkruajnë 044…, dhe të dyja bashkë
   do të dukeshin si numër i dyfishuar. */
.pg-inp-grup { position: relative; display: flex; align-items: center; }
.pg-inp-ikona {
  position: absolute; left: 13px;
  width: 18px; height: 18px;
  color: #94a3b8;
  pointer-events: none;
  transition: color .15s;
}
.pg-inp-grup:focus-within .pg-inp-ikona { color: var(--acc); }
.pg-input.pg-inp-me-ikone { padding-left: 42px; letter-spacing: .3px; }

.pg-ndihme { font-size: 11.5px; color: var(--heshtur); margin-top: 5px; line-height: 1.5; }

/* Butoni gjatë dërgimit */
.pg-btn-pret { display: inline-flex; align-items: center; gap: 8px; }
.pg-rrotull {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pgRrotull .7s linear infinite;
}
@keyframes pgRrotull { to { transform: rotate(360deg); } }

/* ── Tri hapat ──
   Tregojnë sa e shkurtër është rruga para se klienti ta nisë. */
.pg-hapat {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 20px;
}
.pg-hap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--heshtur);
  white-space: nowrap;
}
.pg-hap span {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #eef2f6; color: var(--heshtur);
  font-size: 10.5px; font-weight: 800;
}
/* Hapi aktual theksohet — klienti sheh ku ndodhet. */
.pg-hapat .pg-hap:first-child       { color: var(--tekst); }
.pg-hapat .pg-hap:first-child span  { background: var(--acc); color: #fff; }
.pg-hap-vije { flex: 1; max-width: 26px; height: 1px; background: var(--vije); }

@media (max-width: 360px) {
  .pg-hap span { width: 18px; height: 18px; font-size: 10px; }
  .pg-hap      { font-size: 10.5px; gap: 4px; }
  .pg-hap-vije { max-width: 14px; }
}

/* Fushat e çaktivizuara pas skadimit — dukja duhet ta thotë vetë. */
.pg-kod-boks:disabled { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
.pg-btn:disabled      { opacity: .55; cursor: default; }

@media (max-width: 360px) {
  .pg-kod-kutite { gap: 6px; }
  .pg-kod-boks   { font-size: 20px; border-radius: 10px; }
}

/* ── Butona ── */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 10px;
  background: var(--acc);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter .15s;
}
.pg-btn:hover:not(:disabled) { filter: brightness(1.07); }
.pg-btn:disabled { opacity: .6; cursor: default; }

.pg-btn-dyt {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid var(--vije);
}

.pg-lidhje {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--heshtur);
  text-decoration: none;
}
.pg-lidhje:hover { color: var(--acc); }

/* ── Njoftime ── */
.pg-alert {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.pg-alert-ok  { background: #f0fdf4; color: var(--ok);  border: 1px solid #bbf7d0; }
.pg-alert-gab { background: #fff5f5; color: var(--gab); border: 1px solid #fecaca; }
.pg-alert-inf { background: #eff6ff; color: #1d4ed8;    border: 1px solid #bfdbfe; }

.pg-ok  { color: var(--ok);  font-weight: 700; }
.pg-gab { color: var(--gab); font-weight: 700; }

/* ── Tekst ndihmës ── */
.pg-fus {
  font-size: 12px;
  color: var(--heshtur);
  line-height: 1.6;
  text-align: center;
}

/* ── Tabelë e thjeshtë ── */
.pg-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg-tab td { padding: 7px 4px; border-bottom: 1px solid #f1f5f9; }
.pg-tab tr:last-child td { border-bottom: none; }
.pg-tab td:last-child { text-align: right; }

code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Koka e panelit ── */
.pg-krye {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--vije);
}
/* Nën-titulli nën logon e vogël — vijë e hollë ndarëse, jo hapësirë boshe */
.pg-krye > div:first-child > div:last-child { margin-top: 3px; }
.pg-dil {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--vije);
  background: #f8fafc;
  color: var(--heshtur);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.pg-dil:hover { background: #f1f5f9; color: var(--tekst); }

/* ── Kartela e statusit ──
   Ngjyra bart kuptimin kryesor, por teksti e përsërit gjithmonë — që të mos
   varet leximi vetëm nga ngjyra (daltonizëm, ekran në diell). */
.pg-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--vije);
  background: #f8fafc;
}
.pg-status-krye {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.pg-status-info { min-width: 0; }
.pg-status-emri {
  font-size: 16px; font-weight: 800; line-height: 1.25;
  word-break: break-word;
}
.pg-status-nen { font-size: 12px; color: var(--heshtur); margin-top: 2px; }
.pg-status-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
}

/* Ditët si numër i madh — informacioni që klienti kërkon i pari duhet të
   lexohet pa u ndalur te teksti përreth. */
.pg-status-dite {
  flex-shrink: 0; text-align: center;
  min-width: 74px;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
}
.pg-dite-nr {
  display: block;
  font-size: 30px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pg-dite-lbl {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 600; color: var(--heshtur);
  line-height: 1.25;
}

/* Cila llogari është e hapur — shfaqet vetëm kur numri ka disa abonime */
.pg-status-llog {
  font-size: 11.5px; color: var(--heshtur);
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(15,23,42,.07);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pg-status-llog a { color: var(--acc); font-weight: 700; text-decoration: none; margin-left: auto; }
.pg-status-llog a:hover { text-decoration: underline; }

@media (max-width: 360px) {
  .pg-status-krye { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pg-status-dite { align-self: stretch; }
}

.pg-status-ok  { background: #f0fdf4; border-color: #bbf7d0; }
.pg-status-ok  .pg-status-badge { background: #dcfce7; color: var(--ok); }
.pg-status-pre { background: #fffbeb; border-color: #fde68a; }
.pg-status-pre .pg-status-badge { background: #fef3c7; color: #b45309; }
.pg-status-gab { background: #fff5f5; border-color: #fecaca; }
.pg-status-gab .pg-status-badge { background: #fee2e2; color: var(--gab); }
.pg-status-inf { background: #eff6ff; border-color: #bfdbfe; }
.pg-status-inf .pg-status-badge { background: #dbeafe; color: #1d4ed8; }

/* Numri i ditëve merr ngjyrën e gjendjes — ndryshe do të ishte një numër i
   madh neutral pranë një etikete me ngjyrë, dhe të dyja thonë të njëjtën gjë. */
.pg-status-ok  .pg-dite-nr { color: var(--ok); }
.pg-status-pre .pg-dite-nr { color: #b45309; }
.pg-status-gab .pg-dite-nr { color: var(--gab); }
.pg-status-inf .pg-dite-nr { color: #1d4ed8; }

/* ── Totali për pagesë ── */
.pg-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff4eb;
  border: 1.5px solid #fed7aa;
  margin-bottom: 12px;
}
.pg-total span   { font-size: 13px; font-weight: 700; color: #9a3412; }
.pg-total strong { font-size: 20px; font-weight: 900; color: var(--acc-err); }

/* ── Menyja e veprimeve ── */
.pg-menu {
  margin-top: 18px;
  border: 1px solid var(--vije);
  border-radius: 12px;
  overflow: hidden;
}
.pg-menu-it {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  color: var(--tekst);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #f1f5f9;
}
.pg-menu-it:last-child { border-bottom: none; }
.pg-menu-it:hover { background: #f8fafc; }
.pg-menu-it:hover .pg-menu-shigj { color: var(--acc); transform: translateX(2px); }
.pg-menu-tekst { flex: 1; min-width: 0; }
.pg-menu-shigj {
  color: #cbd5e1; font-size: 20px; line-height: 1;
  transition: transform .15s ease, color .15s ease;
}

/* Ikona në kuti të vet — jep pikë fikse ku shkon syri kur skanohet lista. */
.pg-menu-ikona {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(230,126,34,.10);
  color: var(--acc);
  box-sizing: border-box;
}
.pg-menu-ikona svg { width: 20px; height: 20px; display: block; }

/* Opsion i bllokuar — duket i pranishëm por i paarritshëm, dhe thotë PSE.
   Fshehja do ta linte klientin të pyeste ku shkoi. */
.pg-menu-bllok { background: #f8fafc; color: #94a3b8; cursor: default; }
.pg-menu-bllok .pg-menu-ikona { background: #eef2f7; color: #94a3b8; }
.pg-menu-kyc {
  font-size: 10.5px; font-weight: 700; color: #b45309;
  background: #fef3c7; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.pg-menu-badge {
  background: var(--acc); color: #fff;
  font-size: 11.5px; font-weight: 800;
  min-width: 22px; text-align: center;
  padding: 2px 8px; border-radius: 20px;
}

/* ── Tiketat ── */
.pg-tiketat { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pg-tiketa {
  border: 1px solid var(--vije);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.pg-tiketa-krye {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.pg-tiketa-id   { font-size: 11.5px; font-weight: 800; color: #94a3b8; }
.pg-tiketa-subj { font-size: 14px; font-weight: 700; }
.pg-tiketa-meta { font-size: 11.5px; color: var(--heshtur); margin-top: 4px; line-height: 1.5; }
.pg-tiketa-st {
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 20px;
}
.pg-st-ok  { background: #dcfce7; color: var(--ok); }
.pg-st-pre { background: #fef3c7; color: #b45309; }
.pg-st-inf { background: #dbeafe; color: #1d4ed8; }
.pg-st-gri { background: #f1f5f9; color: var(--heshtur); }

/* ── Pakot ── */
.pg-pakot { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.pg-pako {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  border: 1.5px solid var(--vije);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pg-pako:hover { border-color: #cbd5e1; background: #f8fafc; }
/* :has() lejon të theksohet e zgjedhura pa JavaScript. Aty ku s'mbështetet,
   thjesht nuk ka theksim — funksionaliteti mbetet i plotë. */
.pg-pako:has(input:checked) {
  border-color: var(--acc);
  background: #fff8f3;
  box-shadow: 0 0 0 3px var(--acc-glow);
}
.pg-pako:has(input:disabled) { opacity: .6; cursor: default; background: #f8fafc; }
.pg-pako input { width: 18px; height: 18px; accent-color: var(--acc); flex-shrink: 0; }
.pg-pako-emri  { flex: 1; font-size: 14px; font-weight: 700; }
.pg-pako-qmimi { font-size: 15px; font-weight: 800; color: var(--acc-err); white-space: nowrap; }
.pg-pako-qmimi small { font-size: 10.5px; font-weight: 600; color: var(--heshtur); }
.pg-pako-tag {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px;
  background: #f1f5f9; color: var(--heshtur);
}
.pg-pako-tag.pg-tag-zyra   { background: #fef3c7; color: #b45309; }
.pg-pako-tag.pg-tag-kursim { background: #dcfce7; color: var(--ok); }

/* Nën-teksti i një opsioni (çmimi për muaj, sqarime) */
.pg-pako-nen {
  font-size: 11.5px; font-weight: 500; color: var(--heshtur);
  margin-top: 2px;
}
/* Fusha e muajve manualë brenda opsionit */
.pg-input.pg-muaj {
  width: 84px; flex-shrink: 0;
  padding: 8px 10px; font-size: 14px; text-align: center;
}

.pg-alert-pre { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

/* ── Rinovimi (klientë të skaduar) ── */
.pg-rinovo {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff8f3;
  border: 1.5px solid #fed7aa;
}
.pg-rinovo-tit { font-size: 15px; font-weight: 800; color: #9a3412; }
.pg-rinovo-txt { font-size: 13px; color: #7c2d12; margin-top: 6px; line-height: 1.55; }

/* Varianti i qetë — abonimi është aktiv, ftesa nuk duhet të duket alarm. */
.pg-rinovo-qete { background: #f8fafc; border-color: var(--vije); }
.pg-rinovo-qete .pg-rinovo-tit { color: var(--tekst); }
.pg-rinovo-qete .pg-rinovo-txt { color: var(--heshtur); }

/* ═══════════════════════════════════════════════════════════
   ADMINISTRIMI — tabela dhe filtra
   Kartë më e gjerë: këtu shihen lista, jo formularë të thjeshtë.
   ═══════════════════════════════════════════════════════════ */
.pg-kuti.pg-gjere { max-width: 1000px; }

.pg-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pg-stat {
  padding: 12px 14px;
  border: 1px solid var(--vije);
  border-radius: 10px;
  background: #f8fafc;
}
.pg-stat-val { font-size: 22px; font-weight: 900; color: var(--tekst); line-height: 1.1; }
.pg-stat-lbl { font-size: 11px; color: var(--heshtur); margin-top: 3px; }
.pg-stat.pg-stat-kuj { background: #fff5f5; border-color: #fecaca; }
.pg-stat.pg-stat-kuj .pg-stat-val { color: var(--gab); }

.pg-filtra {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; align-items: center;
}
.pg-filtra .pg-input { width: auto; flex: 1 1 150px; font-size: 13px; padding: 9px 11px; }
.pg-filtra .pg-btn   { width: auto; padding: 9px 16px; font-size: 13px; }

.pg-tab-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--vije); border-radius: 10px; }
.pg-tab-wrap .pg-tab { font-size: 12.5px; }
.pg-tab-wrap .pg-tab thead th {
  background: #f8fafc; text-align: left; padding: 9px 12px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--heshtur);
  border-bottom: 2px solid var(--vije); white-space: nowrap;
}
.pg-tab-wrap .pg-tab td { padding: 9px 12px; vertical-align: top; text-align: left; }
.pg-tab-wrap .pg-tab tbody tr:hover td { background: #fafbff; }
.pg-nowrap { white-space: nowrap; }
.pg-nen    { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.pg-detaje { max-width: 320px; word-break: break-word; }

.pg-btn.pg-btn-vogel { width: auto; padding: 6px 12px; font-size: 12px; border-radius: 7px; }

.pg-faqe {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 14px;
  font-size: 12.5px; color: var(--heshtur);
}

/* Shirit përparimi — afërsia me tavanin ditor të kodeve */
.pg-top-bar {
  height: 8px;
  border-radius: 5px;
  background: #f1f5f9;
  overflow: hidden;
}
.pg-top-bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width .3s ease;
}

/* Cilësimet */
.pg-cil { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.pg-cil:last-of-type { border-bottom: none; }
.pg-cil-krye { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.pg-cil-krye input { width: 18px; height: 18px; accent-color: var(--acc); }
.pg-cil-ndihme { font-size: 11.5px; color: var(--heshtur); margin-top: 5px; line-height: 1.5; }