/*
 * STIPINO - FLUENT FORMS MASTER CSS
 * Version: v41
 * Updated: 08.09.2026. Europe/Zagreb
 * Forms: 3 + 5
 *
 * v38:
 * - mobile kartica dobiva potpuno simetričan osnovni left/right padding
 * - svi section naslovi (ikona + naslov) poravnati su s lijevim rubom submit gumba
 * - sav sadržaj sekcija uvlači se dodatno 30px ispod naslovnog raila
 * - submit više nema dodatni lijevi indent; koristi punu širinu unutar osnovnog card paddinga
 * - submit je malo spušten, a privacy + donji razmak uravnoteženi
 * - zadržan v37 FAMILY 4+4 raspored i sva postojeća funkcionalna logika
 */
.ff-message-success:has(.stipino-confirmation-card), #fluentform_3_success:has(.stipino-confirmation-card), [class*="fluentform"] .ff-message-success:has(.stipino-confirmation-card) {
    margin:0 !important; padding:0 !important; color:inherit !important; background:transparent !important; border:0 !important;
    border-radius:0 !important; box-shadow:none !important;
}
.stipino-confirmation-card {
    opacity:0; transform:translateY(10px) scale(.995); animation:stipino-confirmation-in 360ms cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes stipino-confirmation-in {
    to {
        opacity:1; transform:translateY(0) scale(1);
    }
}
@keyframes stipino-error-in {
    to {
        opacity:1; transform:translateY(0);
    }
}
@keyframes stipino-error-out {
    to {
        opacity:0; transform:translateY(-3px);
    }
}
@keyframes stipino-invalid-bump {
    0%, 100% {
        transform:translateX(0);
    }
    30% {
        transform:translateX(-3px);
    }
    65% {
        transform:translateX(3px);
    }
}
@keyframes stipino-error-in-v29 {
    from {
        opacity:0; transform:translateY(-2px);
    }
    to {
        opacity:1; transform:translateY(0);
    }
}
@keyframes stipino-error-out-v29 {
    from {
        opacity:1; transform:translateY(0);
    }
    to {
        opacity:0; transform:translateY(-2px);
    }
}

/* =========================================================
   v34 - MOBILE CARD AIR + DIVIDER CLEANUP
   ========================================================= */

/* Kada je forma uska, kartica dobiva stvarni unutarnji padding. */
@container stipino-event-form (max-width: 460px) {

    /*
     * Desktop divider koristi specifičniji selector
     * .ff-t-cell + .ff-t-cell pa ga moramo pregaziti istom
     * specifičnošću kada Noćenje postane stackano.
     */
}

/* Na vrlo uskom telefonu čuvamo zrak, ali ne gušimo sadržaj. */

/* =========================================================
   v35 - MOBILE ALIGNMENT RAILS
   =========================================================
   Dva jasna lijeva poravnanja unutar bijele kartice:
   - heading rail = 30px od lijevog ruba kartice
   - content rail = 50px od lijevog ruba kartice

   Kartica na narrow koristi 20px vlastitog horizontalnog paddinga,
   pa su unutarnji offseti 10px i 30px.
   ========================================================= */

@container stipino-event-form (max-width: 460px) {

    /* 1) SECTION RAIL - 30px od ruba kartice */

    /* 2) CONTENT RAIL - 50px od ruba kartice */

    /* STANDARD guest repeater - isti content rail, ali delete ostaje desno */

    /* Noćenje blok počinje na content railu */

    /* Submit + privacy također na content rail */

    /* FAMILY child repeater također prati content rail */
}

/* 320px i manje: kartica ima 16px vlastitog paddinga,
   ali railovi OSTAJU apsolutno 30px / 50px od ruba kartice. */

/* =========================================================
   v36 - REAL MOBILE RAILS
   =========================================================
   VAŽNO:
   #fluentform_3 je sam query container pa se njegov vlastiti
   padding NE može pouzdano mijenjati unutar @container.
   Zato padding kartice rješavamo viewport media queryjem,
   a potomke i dalje preko container queryja.
   ========================================================= */

/* Sam bijeli card: stvarni mobile padding. */

/*
 * FORM CONTENT <= 460px
 * Card side padding je 20px na normalnom mobileu:
 * - heading treba biti 30px od ruba carda => +10px
 * - content treba biti 50px od ruba carda => +30px
 */
@container stipino-event-form (max-width: 460px) {

    /* SECTION RAIL = 30px od lijevog ruba kartice */

    /* CONTENT RAIL = 50px od lijevog ruba kartice */
}

/*
 * VERY NARROW <= 320px content:
 * card side padding preko media queryja je 16px.
 * Da apsolutne osi ostanu 30 / 50px:
 * - heading +14px
 * - content +34px
 */

/* =========================================================
   v37 - FAMILY MOBILE POLISH
   ========================================================= */

@container stipino-event-form (max-width: 460px) {

    /* Broj odraslih / broj ručkova: uvijek balansiranih 4 + 4. */

    /*
     * Repeat-plus je apsolutno ispod zadnjeg child reda.
     * Dajemo naslovu ručka dovoljno mjesta da akcija "Dodaj..."
     * ima svoj zrak i ne djeluje zalijepljeno za sljedeću sekciju.
     */
}

/* Na vrlo uskim uređajima ostaje 4 + 4, samo malo manji gap. */

/* =========================================================
   v38 - MOBILE BASE RAIL + CONTENT INDENT
   =========================================================
   Princip:
   - BASE rail = unutarnji rub bijele kartice
   - SECTION naslovi + submit = BASE rail
   - sadržaj sekcija = BASE rail + 30px
   ========================================================= */

@container stipino-event-form (max-width: 460px) {

    /* SECTION rail = osnovni lijevi rub kartice */

    /* CONTENT rail = +30px od section raila */

    /* STANDARD repeater ostaje unutar content raila */

    /* FAMILY child repeater prati isti content rail */

    /* Noćenje je sadržaj sekcije -> +30px */

    /*
     * Submit je BASE element:
     * bez dodatnog lijevog uvlačenja i potpuno simetričan.
     */

    /* Privacy tekst ostaje uredno ispod, ali ne gura card rub. */
}

@container stipino-event-form (max-width: 320px) {

    /* I na najmanjoj širini zadržavamo istu logiku railova. */
}

html {
  scroll-behavior: smooth;
}

#recap {
  scroll-margin-top: 110px;
}


/* =========================================================
   STIPINO - EVENT NOTIFY FORM
   Version: v41
   Fluent Forms ID: 5
   ========================================================= */

@keyframes stipino-notify-error-in {
    from { opacity:0; transform:translateY(-2px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes stipino-notify-error-out {
    from { opacity:1; transform:translateY(0); }
    to { opacity:0; transform:translateY(-2px); }
}

/* Već prijavljen = info, ne error */