/*
 * Seoul Skin — Stoku i ulët.  Vetëm NGJYRA.
 *
 * Teksti (numri i vërtetë i copëve) prodhohet nga PHP-ja, ndaj edhe nëse ky skedar
 * s'ngarkohet fare, klienti e lexon prapëseprapë sasinë e saktë. Ngjyra është shtresë
 * sipër, jo kusht.
 *
 * ── MARKUP-I REAL I seoulskincare.shop (WoodMart 8.4.1) ──────────────────────
 *   <p class="stock in-stock wd-style-bordered"><span>Ka stok</span></p>
 * dhe tema e ngjyros kështu (woo-mod-stock-status.min.css):
 *   p.stock.wd-style-bordered span         { border:1px solid #85B951 }
 *   p.stock.wd-style-bordered span:before  { background-color:#85B951 }   ← pika
 * Pra pill-i është <span>-i i brendshëm, jo <p>-ja. Prandaj rregullat më poshtë
 * shkojnë te `> span`, dhe jo te elementi i jashtëm.
 *
 * ⚠️ `!important` është me qëllim: selektorët e temës janë më specifikë se klasa jonë.
 *    Pa të, jeshilja e WoodMart-it do ta mbulonte verdhën/kuqen dhe ekrani do të
 *    gënjente për gjendjen e vërtetë të stokut.
 */

/* Ngjyrat rrinë në një vend të vetëm — çdo rregull më poshtë vetëm i përdor. */
.stock.ss-stock--low,
.ss-stock--low {
    --ss-c:   #b87503;   /* teksti    — verdhë e errët, e lexueshme mbi të bardhë */
    --ss-dot: #f0a30a;   /* pika/kufi — më e ndritshme, që ta kapë syri */
    --ss-bg:  #fff7e8;   /* mbushja e lehtë e pill-it */
}
.stock.ss-stock--crit,
.ss-stock--crit {
    --ss-c:   #d0342c;
    --ss-dot: #e5484d;
    --ss-bg:  #fdedeb;
}
/*
 * Niveli i tretë: stoku mbaroi, por produkti pranohet me paraporosi. Ngjyrë e QETË —
 * kaltër, jo kuqe: këtu klienti nuk duhet nxitur, duhet qetësuar. Kuqja do të thoshte
 * "nxito", ndërkohë që e vërteta është "e merr, veç pak më vonë".
 */
.stock.ss-stock--back,
.ss-stock--back {
    --ss-c:   #2f6fa8;
    --ss-dot: #4a90c9;
    --ss-bg:  #eef5fb;
}

/* ── 1) Stili "bordered" — ai që përdor dyqani sot. Pill-i është <span>-i. ───── */
p.stock.ss-stock.wd-style-bordered > span {
    border-color: var(--ss-dot) !important;
    background-color: var(--ss-bg) !important;
    color: var(--ss-c) !important;
}
p.stock.ss-stock.wd-style-bordered > span::before {
    background-color: var(--ss-dot) !important;   /* pika është ::before me background */
}

/* ── 2) Stili "with-bg" — pill me sfond; aty pika është glif fonti, jo rreth,
 *       ndaj i ndërrohet vetëm ngjyra (një `background` do t'i pikturonte kuti). ─ */
p.stock.ss-stock.wd-style-with-bg > span {
    background-color: var(--ss-bg) !important;
    color: var(--ss-c) !important;
}

/* ── 3) Stili "default" i WoodMart-it dhe <p class="stock"> i thjeshtë i Woo-s.
 *       Këtu s'ka pill: ngjyroset teksti, dhe ::before (glif) merr të njëjtën ngjyrë. */
p.stock.ss-stock,
.ss-stock--low,
.ss-stock--crit,
.ss-stock--back {
    color: var(--ss-c) !important;
    font-weight: 600 !important;
}
p.stock.ss-stock::before {
    color: var(--ss-dot) !important;
}

/*
 * Pika e nivelit kritik pulson ngadalë — lëvizja e kap syrin pa e bërë faqen të
 * bërtasë. Vetëm pika, kurrë teksti: tekst që pulson lexohet si reklamë, jo si fakt.
 */
@media (prefers-reduced-motion: no-preference) {
    p.stock.ss-stock--crit.wd-style-bordered > span::before,
    p.stock.ss-stock--crit::before {
        animation: ss-stock-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes ss-stock-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: .5;  transform: scale(.78); }
}