/* ===================================================================
   Frigo Menadžment — forma
   Osnova je preslikana sa predloška (components.css → polja, .check,
   .field-error, .btn; pages.css → .success-box).

   Sve je pisano pod `.frigo-form`, pa plugin ne dira nijedno drugo polje
   na sajtu. Boje su `var(--token, #fallback)`: uz FRIGO temu prate
   dizajn sistem, bez teme drže isti izgled.

   Kontrole stila u panelu pišu preko promenljivih `--ff-*`. Zato ovde
   nema tvrdih vrednosti tamo gde urednik sme da menja — svaka je
   `var(--ff-nesto, podrazumevano)`.
   =================================================================== */

.frigo-form, .frigo-form *,
.frigo-form *::before,
.frigo-form *::after { box-sizing: border-box; }

/* ---------- Mreža ----------
   Šest kolona: polje pune širine zauzima svih šest, polovina tri,
   trećina dve. Tako se 1/2 i 1/3 slažu u istom redu bez posebnog
   slučaja. */
.frigo-form-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--ff-gap, 20px);
    align-items: start;
}
.frigo-form-field { grid-column: span 6; }

@media (min-width: 600px) {
    .frigo-form-field.w-50 { grid-column: span 3; }
    .frigo-form-field.w-33 { grid-column: span 2; }
}

.frigo-form-actions { grid-column: span 6; }

.frigo-form .field {
    display: grid;
    gap: 7px;
    align-content: start;
}

/* ---------- Natpisi ---------- */
.frigo-form .field > label {
    font-family: var(--ff-label-ff, inherit);
    font-size: var(--ff-label-fs, 13px);
    font-weight: var(--ff-label-fw, 600);
    letter-spacing: -0.005em;
    color: var(--ff-label-c, inherit);
}
.frigo-form .req { color: var(--ff-req-c, var(--red, #B01F26)); }

/* ---------- Polja ---------- */
.frigo-form .input,
.frigo-form .select,
.frigo-form .textarea {
    width: 100%;
    padding: var(--ff-pad-y, 12px) var(--ff-pad-x, 14px);
    font-family: var(--ff-input-ff, inherit);
    font-size: var(--ff-input-fs, 15.5px);
    color: var(--ff-input-c, inherit);
    background-color: var(--ff-input-bg, #fff);
    border: var(--ff-border-w, 1px) solid var(--ff-border-c, var(--line-l-2, rgba(20, 24, 27, 0.22)));
    border-radius: var(--ff-radius, var(--r-int, 2px));
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.frigo-form .textarea {
    min-height: 118px;
    line-height: 1.6;
    resize: vertical;
}

.frigo-form .input:hover,
.frigo-form .select:hover,
.frigo-form .textarea:hover { border-color: var(--ff-border-h, var(--steel-400, #939BA1)); }

.frigo-form .input:focus,
.frigo-form .select:focus,
.frigo-form .textarea:focus {
    outline: none;
    border-color: var(--ff-border-f, var(--red, #B01F26));
    box-shadow: 0 0 0 3px var(--ff-ring, var(--red-gl, rgba(210, 50, 58, 0.3)));
}

/* Strelica padajuće liste je pozadinska slika, pa mora longhand: skraćeni
   zapis bi pregazio `no-repeat` i strelica bi se popločala po polju. */
.frigo-form .select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E777E' stroke-width='1.8'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 17px;
}
.frigo-form .select option { background-color: #fff; color: var(--tx-dark, #14181B); }

/* ---------- Kvačica i jedan izbor ---------- */
.frigo-form label.check {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ff-check-c, inherit);
    cursor: pointer;
}
.frigo-form label.check input {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    flex: 0 0 auto;
    accent-color: var(--ff-accent, var(--red, #B01F26));
    cursor: pointer;
}
.frigo-form label.check a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--red, #B01F26);
    padding-bottom: 1px;
}

.frigo-form .frigo-form-radios { display: grid; gap: 9px; }

/* ---------- Greške ---------- */
.frigo-form .field-error {
    display: none;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ff-error-c, var(--red, #B01F26));
}
.frigo-form .field.has-error .input,
.frigo-form .field.has-error .select,
.frigo-form .field.has-error .textarea {
    border-color: var(--ff-error-c, var(--red, #B01F26));
    background-color: var(--ff-error-bg, var(--red-bg, rgba(176, 31, 38, 0.05)));
}
.frigo-form .field.has-error .field-error { display: block; }

.frigo-form-msg {
    grid-column: span 6;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
}
.frigo-form-msg.is-error { color: var(--ff-error-c, var(--red, #B01F26)); }
.frigo-form-msg[hidden] { display: none; }

/* ---------- Slobodan tekst između polja ---------- */
.frigo-form-html {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ff-html-c, inherit);
}
.frigo-form-html p { margin: 0 0 8px; }
.frigo-form-html p:last-child { margin-bottom: 0; }

/* ---------- Dugme ---------- */
.frigo-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: var(--ff-btn-w, auto);
    padding: var(--ff-btn-pad-y, 14px) var(--ff-btn-pad-x, 26px);
    font-family: var(--ff-btn-ff, inherit);
    font-size: var(--ff-btn-fs, 14.5px);
    font-weight: var(--ff-btn-fw, 600);
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ff-btn-c, #fff);
    background: var(--ff-btn-bg, var(--red, #B01F26));
    border: 1px solid transparent;
    border-radius: var(--ff-btn-radius, var(--r-int, 2px));
    text-align: center;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s;
}
.frigo-form .btn--red { box-shadow: var(--red-sh, 0 1px 2px rgba(138, 19, 25, 0.28), 0 6px 18px rgba(138, 19, 25, 0.22)); }
.frigo-form .btn:hover:not([disabled]) {
    color: var(--ff-btn-hc, #fff);
    background: var(--ff-btn-hbg, var(--red-lt, #D2323A));
}
.frigo-form .btn:active:not([disabled]) { transform: translateY(1px); }
.frigo-form .btn[disabled] { opacity: 0.6; cursor: wait; }

.frigo-form :focus-visible {
    outline: 2px solid var(--ff-border-f, var(--red-lt, #D2323A));
    outline-offset: 3px;
}

/* Zamka za robote — sklonjena iz vidnog polja, ali ne `display:none`:
   deo robota preskače skrivena polja, a ovo popunjava. */
.frigo-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Potvrda ---------- */
.frigo-form .success-box {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: clamp(22px, 2.4vw, 34px);
    border: 1px solid var(--ok, #3F8F52);
    border-top: 2px solid var(--ok, #3F8F52);
    border-radius: var(--r-int, 2px);
    background: rgba(63, 143, 82, 0.06);
}
.frigo-form .success-box[hidden] { display: none; }
.frigo-form .success-box:focus { outline: none; }
.frigo-form .success-box .eyebrow {
    display: inline-block;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #3F8F52;
}
.frigo-form .success-box .h-sm {
    margin: 0;
    font-family: var(--font-display, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 700;
    letter-spacing: -0.014em;
}
.frigo-form .success-box .small { margin: 0; font-size: 14px; line-height: 1.58; }

/* =========================================================
   PODLOGA
   Gotove vrednosti za svetlu i tamnu sekciju. Kontrole u panelu pišu
   iste promenljive, pa ih gaze kada urednik nešto izabere.
   ========================================================= */

/* --- Svetla --- */
.frigo-form--light {
    --ff-label-c: var(--tx-dark, #14181B);
    --ff-input-c: var(--tx-dark, #14181B);
    --ff-input-bg: #fff;
    --ff-check-c: var(--tx-mute-d, #586168);
    --ff-html-c: var(--tx-mute-d, #586168);
}
.frigo-form--light .success-box .h-sm { color: var(--tx-dark, #14181B); }
.frigo-form--light .success-box .small { color: var(--tx-mute-d, #586168); }

/* --- Tamna ---
   Polje je providno, ne belo: belo polje na tamnoj sekciji izgleda kao
   rupa u kompoziciji. */
.frigo-form--dark {
    --ff-label-c: var(--tx-light, #F2F5F6);
    --ff-input-c: var(--tx-light, #F2F5F6);
    --ff-input-bg: rgba(255, 255, 255, 0.07);
    --ff-border-c: var(--line-d-2, rgba(242, 245, 246, 0.26));
    --ff-border-h: var(--steel-500, #6E777E);
    --ff-check-c: var(--tx-mute-l, #98A1A7);
    --ff-html-c: var(--tx-mute-l, #98A1A7);
    --ff-req-c: var(--red-tx, #E45C62);
    --ff-error-c: var(--red-tx, #E45C62);
    --ff-error-bg: var(--red-bg-d, rgba(210, 50, 58, 0.12));
}
.frigo-form--dark .success-box { background: rgba(16, 19, 21, 0.72); }
.frigo-form--dark .success-box .eyebrow { color: #63BE7B; }
.frigo-form--dark .success-box .h-sm { color: var(--tx-light, #F2F5F6); }
.frigo-form--dark .success-box .small { color: var(--tx-mute-l, #98A1A7); }

/*
 * Padajuća lista na tamnoj podlozi. Sam popup sa opcijama crta
 * operativni sistem i NE nasleđuje providnu podlogu polja — crta se na
 * beloj — ali jeste nasleđivao svetlu boju teksta. Rezultat: bela slova
 * na beloj podlozi. Rešeno u dva sloja jer nijedan sam ne pokriva sve:
 *   1. `color-scheme` — jedino što radi u Safariju
 *   2. boje na <option> — za Chrome, Edge i Firefox
 */
.frigo-form--dark .select {
    color-scheme: dark;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A1A7' stroke-width='1.8'><path d='M6 9l6 6 6-6'/></svg>");
}
.frigo-form--dark .select option {
    background-color: var(--steel-850, #1E2226);
    color: var(--tx-light, #F2F5F6);
}
.frigo-form--dark .select option[value=""] { color: var(--steel-400, #939BA1); }

/* ---------- Poruka uredniku ---------- */
.frigo-form-notice {
    padding: 20px 24px;
    border: 1px dashed #c3244a;
    background: #fff5f7;
    color: #3b2b2f;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- Osnovni font ----------
   Sve u elementu što nije naslov (`--font-display`) ni sitan natpis
   (`--font-mono`) ide odavde. Bez ovoga ti delovi nemaju nijedan
   `font-family`, pa nasleđuju font teme i ne menjaju se kad urednik
   izabere font u panelu ili na elementu.

   `inherit` kao rezerva: dok font nije izabran, ponaša se tačno kao
   da pravila nema. */
.frigo-form { font-family: var(--font-body, inherit); }