/* ============================================================
   Uslužionica — pre-launch funnel

   Raspored i boje žive u inline stilovima prenetim iz dizajna;
   to je namerno, jer je jedini način da izgled ostane 1:1.
   Ovde je ono što u atribut ne staje: hover/active/focus stanja,
   media upiti i keyframe animacije.

   Izvor: web-site-design/Uslužionica - Pre-launch sajt.dc.html
   ============================================================ */

/* ── Media upiti ───────────────────────────────────────────────
   Dizajn ih je ubrizgavao iz JavaScript-a (applyNavlinkMedia).
   Ovde su pravi CSS, pa raspored radi i ako skripta ne krene.
   `!important` je zadržan jer nadjačava inline stilove sa elemenata.
   ───────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
    .us-navlink { display: inline-block !important; }
    .us-hero-grid { grid-template-columns: 1.05fr .95fr !important; gap: 48px !important; }
    .us-stage { min-height: clamp(500px, 66vh, 760px) !important; }
}

@media (max-width: 559px) {
    .us-nav-cta { display: none !important; }
}

@media (max-width: 420px) {
    .us-funnel h1 { font-size: 34px !important; }
}

/* ── Animacije ────────────────────────────────────────────────── */

@keyframes usFloat {
    0%, 100% { transform: translateY(-10px) rotate(-2deg); }
    50%      { transform: translateY(10px) rotate(2deg); }
}

@keyframes usSpinToken {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes usPulse {
    0%, 100% { opacity: .35; transform: scale(1); }
    50%      { opacity: .7;  transform: scale(1.06); }
}

/* ── Stanja ───────────────────────────────────────────────────── */

.us-s1:focus { left:12px;top:12px; }
.us-s2:hover { color:var(--p-fg); }
.us-s3:hover { color:var(--p-fg); }
.us-s4:hover { color:var(--p-fg); }
.us-s5:hover { color:var(--p-fg); }
.us-s6:hover { color:var(--p-fg);border-color:var(--p-accent); }
.us-s7:hover { background:#2458DB; }
.us-s7:active { transform:scale(.98); }
.us-s8:hover { background:#2458DB; }
.us-s8:active { transform:scale(.98); }
.us-s9:hover { border-color:var(--p-accent2);background:var(--p-tint);color:var(--p-fg); }
.us-s10:hover { background:var(--p-tint); }
.us-s11:hover { color:var(--p-accent); }
.us-s12:hover { background:#2458DB; }
.us-s13:hover { background:#2458DB; }
.us-s14:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s15:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s16:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s17:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s18:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s19:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s20:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s21:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s22:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s23:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s24:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s25:hover { border-color:var(--p-accent);background:var(--p-tint);transform:translateY(-3px); }
.us-s26:hover { background:#2458DB; }
.us-s26:active { transform:scale(.98); }
.us-s27:hover { background:#2458DB; }
.us-s27:active { transform:scale(.98); }
.us-s28:hover { color:var(--p-fg); }
.us-s29:hover { color:var(--p-fg); }
.us-s30:hover { color:var(--p-fg); }
.us-s31:hover { color:var(--p-fg); }
.us-s32:hover { color:var(--p-fg); }
.us-s33:hover { color:var(--p-fg); }
.us-s34:hover { color:var(--p-fg); }
.us-s35:hover { color:var(--p-fg); }
.us-s36:hover { color:var(--p-fg);border-color:var(--p-accent); }
.us-s37:hover { color:var(--p-fg);border-color:var(--p-accent); }
.us-s38:hover { color:var(--p-fg);border-color:var(--p-accent); }
.us-s39:hover { color:var(--p-fg); }
.us-s40:hover { color:var(--p-fg); }
.us-s41:hover { color:var(--p-fg); }
.us-s42:hover { color:var(--p-fg); }
.us-s43:hover { background:#2458DB; }
.us-s43:active { transform:scale(.98); }

/* Poruka o gresci iz Blazor validacije. Ista kao ona koju ispisuje funnel.js,
   da posetilac sa iskljucenim JavaScript-om vidi isti izgled. Puna sirina,
   jer su forme flex kontejneri pa bi inace stala pored dugmeta. */
.validation-message {
    flex: 1 1 100%;
    min-height: 22px;
    margin-top: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--us-error);
}