/* Odbrojavanje do objave. Stoji preko stranice i mutni sve ispod sebe.
 *
 * ZASTO JE `zakljucano` U SAMOM HTML-u, a JS ga SKIDA (a ne obrnuto): da klasu
 * postavlja JS, posjetilac bi u prvom trenutku vidio cistu stranicu pa bi mu se
 * zamutila pred ocima. Ovako je zamucenje tu od prvog piksela, a JS ga skida
 * prije nego se ista nacrta, jer stoji u <head> bez `defer`.
 *
 * `<noscript>` u stranici skida zamucenje kad JS ne radi: bolje ziva stranica
 * nego trajno zamucena. Ovo nije zastita nego najava, sadrzaj je i tako u HTML-u.
 */

html.zakljucano { overflow: hidden; }

/* Sve u <body> osim samog odbrojavanja. Selektor je preko `body > *` da radi i
 * na pocetnoj (marka + main + footer) i na stranici proizvoda (jedan .omot),
 * bez znanja o tome kako je koja gradjena. */
html.zakljucano body > *:not(.odbroj) {
    filter: blur(9px);
    /* Bez ovoga se kroz zamucenje moze kliknuti dugme Kupi i selektovati tekst. */
    pointer-events: none;
    user-select: none;
}

.odbroj {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 24px;
    text-align: center;
    /* Bijelo preko zamucenog: sadrzaj ispod ostaje kao tekstura, ne kao slika
       koja se cita. Boje su nase, ne iz promjenljivih stranice: pocetna i
       stranica proizvoda imaju razlicite vrijednosti za istu ulogu. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    color: #1B1A17;
    font: 400 17px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.odbroj-marka {
    font-family: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    letter-spacing: -0.04em;
    color: #1B1A17;
}

.odbroj-nad {
    margin: 0;
    max-width: 22ch;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.odbroj-sat {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

/* Boje plocica i cifara POSTAVLJA `odbrojavanje.js` svake sekunde: soft plava
   koja se prema kraju prelije u soft crvenu. Ovdje su samo REZERVNE vrijednosti
   — ako skripta ne postavi promjenljive, odbrojavanje izgleda kao prije i radi
   dalje, jer boja je ukras a brojevi su posao. */
.odbroj-polje {
    min-width: 92px;
    padding: 14px 10px 12px;
    background: var(--odb-tlo, #FAFAF8);
    border: 2px solid var(--odb-ivica, #EDEDE7);
    border-radius: 20px;
    transition: background-color .8s linear, border-color .8s linear;
}

.odbroj-broj {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Cifre iste sirine: bez ovoga polje poskakuje na svakoj sekundi. */
    font-variant-numeric: tabular-nums;
    color: var(--odb-broj, #1B1A17);
    transition: color .8s linear;
}

.odbroj-ime {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8A857C;
}

.odbroj-kad { margin: 0; font-size: 15px; color: #8A857C; }

/* ---------- prijava za popust ----------

   Dugme i kod uzimaju boju odbrojavanja (`--odb-broj`), pa se sve mijenja
   zajedno kako se kraj priblizava. Rezervna boja je nasa crna, da forma radi i
   ako skripta ne postavi promjenljive. */
.odbroj-prijava {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 30rem;
}

.odbroj-poziv {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1B1A17;
}

/* „30%" — soft crvena sa laganim sjajem, u duhu iOS-a: dug i mek puls, bez
   skakanja i bez trepćenja.

   ZASTO JE VECI: boja #F45B50 ima 3.25:1 kontrasta na bijelom. To je dovoljno
   za VELIKI tekst (WCAG granica je 3:1 iznad 18.66px bold), a za obican tekst
   bi trebalo 4.5:1 i ova boja bi PALA. Umjesto da se boja potamni i prestane
   biti soft, broj je povecan na 20px bold, pa granica koja vazi jeste 3:1.
   Izmjereno, ne procijenjeno. Ista logika kao kod brend roze 15.08. */
.odbroj-popust {
    font-size: 20px;
    font-weight: 700;
    color: #F45B50;
    text-shadow: 0 0 10px rgba(244, 91, 80, .40), 0 0 22px rgba(244, 91, 80, .18);
    animation: popust-sjaj 2.8s ease-in-out infinite;
}

@keyframes popust-sjaj {
    0%, 100% { text-shadow: 0 0  8px rgba(244, 91, 80, .32), 0 0 18px rgba(244, 91, 80, .12); }
    50%      { text-shadow: 0 0 15px rgba(244, 91, 80, .58), 0 0 30px rgba(244, 91, 80, .28); }
}

.odbroj-forma { display: flex; gap: 8px; width: 100%; }

.odbroj-forma input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;   /* ispod 16px iPhone zumira stranicu pri fokusu */
    color: #1B1A17;
    background: #FFFFFF;
    border: 2px solid #EDEDE7;
    border-radius: 12px;
}
.odbroj-forma input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--odb-broj, #1B1A17);
}

/* Zamka za robote. Ne `display: none`: dio robota preskace takva polja. */
.odbroj-zamka {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.odbroj-dugme {
    flex: 0 0 auto;
    padding: 12px 20px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: var(--odb-broj, #1B1A17);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .8s linear, opacity .15s;
}
.odbroj-dugme:hover { opacity: .88; }
.odbroj-dugme:disabled { opacity: .55; cursor: default; }

.odbroj-stanje { margin: 0; font-size: 14px; min-height: 1px; }
.odbroj-stanje.lose { color: #C0392B; }

.odbroj-sitno {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8A857C;
}
.odbroj-sitno a { color: inherit; }

/* Kod poslije prijave. Dugme je, ne tekst, jer se klikom kopira. */
.odbroj-kod {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.04em;
    padding: 12px 22px;
    color: var(--odb-broj, #1B1A17);
    background: var(--odb-tlo, #FAFAF8);
    border: 2px dashed var(--odb-ivica, #EDEDE7);
    border-radius: 14px;
    cursor: pointer;
    transition: color .8s linear, background-color .8s linear, border-color .8s linear;
}

@media (max-width: 620px) {
    .odbroj { gap: 16px; }
    .odbroj-forma { flex-direction: column; }
    .odbroj-dugme { width: 100%; }
    .odbroj-poziv { font-size: 15px; }
    .odbroj-kod { font-size: 23px; }
    /* Ne ispod 19px: granica za „veliki tekst" je 18.66px bold. */
    .odbroj-popust { font-size: 19px; }
    .odbroj-nad { font-size: 25px; }
    .odbroj-sat { gap: 7px; }
    .odbroj-polje { min-width: 0; flex: 1 1 0; padding: 11px 4px 9px; border-radius: 15px; }
    .odbroj-broj { font-size: 27px; }
    .odbroj-ime { font-size: 9px; letter-spacing: 0.06em; }
}

/* Ko je iskljucio pokret ne dobija prelijevanje: boja skoci na svoju vrijednost
   bez prelaza. Sama boja ostaje, jer ona nosi informaciju („blizi se kraj"). */
@media (prefers-reduced-motion: reduce) {
    .odbroj-polje, .odbroj-broj, .odbroj-dugme, .odbroj-kod { transition: none; }
    .odbroj-popust { animation: none; }
}