/* =============================================================================
   OSM Store Locator — Stili Frontend v3.0
   Novità rispetto a v2.x:
    - Grid filtri 2 colonne (era 4: rimossi Città e CAP)
    - Riga campo testo libero sotto le select
    - Bottone Reset accanto a Cerca
    - Contatore risultati
    - Icona cluster personalizzata (accent color)
    - Overlay modale per il form GF (popup mode)
   ============================================================================= */

/* ── Wrapper principale + CSS Custom Properties ──────────────────────────── */
.osl-store-locator {
    --osl-accent:       #1a6b3a;
    --osl-accent-hover: color-mix(in srgb, var(--osl-accent) 85%, black);
    --osl-accent-light: color-mix(in srgb, var(--osl-accent) 12%, white);
    --osl-radius:       12px;
    --osl-shadow:       0 4px 28px rgba(0, 0, 0, .13);

    font-family:   inherit;
    width:         100%;
    max-width:     900px;
    margin:        0 auto;
    border-radius: var(--osl-radius);
    overflow:      hidden;
    box-shadow:    var(--osl-shadow);
    background:    #fff;
}

/* ── Pannello Filtri ─────────────────────────────────────────────────────── */
.osl-filters-panel {
    background: var(--osl-accent);
    padding:    22px 24px 18px;
    color:      #fff;
}

.osl-filters-title {
    font-size:      13px;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align:     center;
    margin:         0 0 16px;
    color:          #fff;
    line-height:    1.4;
}

/* ── Grid 2 colonne per le select (Regione + Provincia) ─────────────────── */
.osl-filters-selects {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px;
    margin-bottom:         10px;
}

@media (max-width: 480px) {
    .osl-filters-selects { grid-template-columns: 1fr; }
}

/* ── Select wrapper ──────────────────────────────────────────────────────── */
.osl-select-wrap {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.osl-select-wrap > label {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          rgba(255, 255, 255, .8);
    padding-left:   2px;
}

.osl-select-wrap > select {
    appearance:         none;
    -webkit-appearance: none;
    background: #fff
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
                no-repeat right 10px center;
    border:        none;
    border-radius: 8px;
    padding:       9px 30px 9px 11px;
    font-size:     13px;
    color:         #333;
    cursor:        pointer;
    width:         100%;
    transition:    box-shadow .15s;
    line-height:   1.4;
}

.osl-select-wrap > select:focus {
    outline:    none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.osl-select-wrap > select:disabled {
    opacity:          .5;
    cursor:           not-allowed;
    background-color: #f0f0f0;
}

/* ── Campo testo libero ──────────────────────────────────────────────────── */
.osl-search-text-wrap {
    margin-bottom: 10px;
    display:       flex;
    flex-direction:column;
    gap:           5px;
}

.osl-search-text-wrap > label {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          rgba(255, 255, 255, .8);
    padding-left:   2px;
}

.osl-search-text {
    appearance:    none;
    border:        none;
    border-radius: 8px;
    padding:       9px 12px;
    font-size:     13px;
    color:         #333;
    width:         100%;
    box-sizing:    border-box;
    transition:    box-shadow .15s;
    line-height:   1.4;
    background:    #fff;
}

.osl-search-text:focus {
    outline:    none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.osl-search-text::placeholder {
    color: #aaa;
}

/* ── Riga bottoni Cerca + Reset ──────────────────────────────────────────── */
.osl-filter-actions {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* ── Bottone "Cerca" ─────────────────────────────────────────────────────── */
.osl-search-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    flex:          1;
    min-width:     120px;
    padding:       11px 20px;
    background:    #fff;
    color:         var(--osl-accent);
    font-size:     14px;
    font-weight:   700;
    letter-spacing:.03em;
    text-align:    center;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    transition:    background .18s, color .18s, transform .1s;
    line-height:   1;
    justify-content: center;
}

.osl-search-btn:hover {
    background: var(--osl-accent-light);
    color:      var(--osl-accent-hover);
}

.osl-search-btn:active { transform: scale(.98); }

/* ── Bottone "Reset" ─────────────────────────────────────────────────────── */
.osl-reset-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    padding:       11px 18px;
    background:    transparent;
    color:         rgba(255, 255, 255, .85);
    font-size:     13px;
    font-weight:   600;
    border:        1.5px solid rgba(255, 255, 255, .5);
    border-radius: 8px;
    cursor:        pointer;
    transition:    background .15s, border-color .15s, color .15s, transform .1s;
    line-height:   1;
    white-space:   nowrap;
}

.osl-reset-btn:hover {
    background:   rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .8);
    color:        #fff;
}

.osl-reset-btn:active { transform: scale(.98); }

/* ── Contatore risultati ─────────────────────────────────────────────────── */
.osl-results-count {
    font-size:   12px;
    font-weight: 600;
    color:       rgba(255, 255, 255, .75);
    text-align:  right;
    padding-top: 2px;
    min-height:  18px; /* evita layout shift quando vuoto */
    letter-spacing: .02em;
}

/* ── Wrapper mappa ───────────────────────────────────────────────────────── */
.osl-map-wrap {
    position: relative;
    width:    100%;
}

.osl-map-canvas {
    width:   100%;
    height:  460px;
    display: block;
}

@media (max-width: 640px) {
    .osl-map-canvas { height: 340px; }
}

/* ── Overlay caricamento ─────────────────────────────────────────────────── */
.osl-map-loading {
    position:        absolute;
    inset:           0;
    background:      rgba(255, 255, 255, .8);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         500;
    font-size:       14px;
    font-weight:     600;
    color:           var(--osl-accent);
    backdrop-filter: blur(3px);
    gap:             10px;
}

.osl-map-loading::before {
    content:          '';
    width:            20px;
    height:           20px;
    border:           3px solid var(--osl-accent-light);
    border-top-color: var(--osl-accent);
    border-radius:    50%;
    animation:        osl-spin .7s linear infinite;
}

@keyframes osl-spin { to { transform: rotate(360deg); } }

/* ── Messaggio nessun risultato ──────────────────────────────────────────── */
.osl-no-results {
    position:        absolute;
    inset:           0;
    background:      rgba(255, 255, 255, .88);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         400;
    font-size:       14px;
    font-weight:     600;
    color:           #666;
    backdrop-filter: blur(2px);
    pointer-events:  none;
    text-align:      center;
    padding:         20px;
}

/* ── Popup Leaflet ───────────────────────────────────────────────────────── */
.osl-popup .leaflet-popup-content-wrapper {
    border-radius: 10px;
    padding:       0;
    overflow:      hidden;
    box-shadow:    0 6px 24px rgba(0, 0, 0, .18);
    border:        none;
}

.osl-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.osl-popup .leaflet-popup-tip-container { margin-top: -1px; }

.osl-popup-inner {
    display:        flex;
    flex-direction: column;
    padding:        14px 16px;
    gap:            10px;
    min-width:      220px;
    max-width:      260px;
}

.osl-popup-header {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}

.osl-popup-icon {
    flex-shrink:    0;
    width:          34px;
    height:         34px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
}

.osl-popup-content {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    padding-top:    2px;
}

.osl-popup-name    { font-size: 14px; font-weight: 700; color: #111; line-height: 1.3; display: block; }
.osl-popup-address { font-size: 11px; color: #666; line-height: 1.4; display: block; }

.osl-popup-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    width:           100%;
    padding:         9px 16px;
    border:          none;
    border-radius:   6px;
    color:           #fff;
    font-size:       13px;
    font-weight:     700;
    letter-spacing:  .03em;
    cursor:          pointer;
    transition:      filter .15s, transform .1s;
    line-height:     1;
}

.osl-popup-cta:hover  { filter: brightness(1.12); }
.osl-popup-cta:active { transform: scale(.97); }

/* ── Icona pin SVG ───────────────────────────────────────────────────────── */
.leaflet-marker-icon svg { display: block; overflow: visible; }

/* ── Cluster icon personalizzata ─────────────────────────────────────────── */
/* L'HTML è generato da JS con .osl-cluster-icon e background inline */
.osl-cluster-icon {
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    font-weight:     700;
    color:           #fff;
    border:          2.5px solid rgba(255, 255, 255, .6);
    box-shadow:      0 2px 8px rgba(0, 0, 0, .22);
    cursor:          pointer;
    /* Animazione pulse alla creazione del cluster */
    animation:       osl-cluster-pop .2s ease-out;
}

@keyframes osl-cluster-pop {
    from { transform: scale(.7); opacity: .5; }
    to   { transform: scale(1);  opacity: 1;  }
}

/* ── Sezione form nascosta in modalità popup ──────────────────────────────
 *
 * Quando form_mode = 'popup', il PHP aggiunge .osl-form-section--popup
 * all'elemento indicato dal formSelector. Questo lo nasconde nella pagina
 * finché l'utente clicca la CTA: il JS rimuove la classe quando sposta
 * la sezione nel modal, e la riaggunge alla chiusura.
 *
 * Usiamo visibility:hidden + position:absolute anziché display:none per
 * non interrompere il layout della pagina (evita layout shift) e per
 * consentire a GF di inizializzare i propri script anche se la sezione
 * non è visibile (alcuni plugin GF leggono le dimensioni del form).
 * ──────────────────────────────────────────────────────────────────────── */
.osl-form-section--popup {
    position:   absolute !important;
    width:      1px      !important;
    height:     1px      !important;
    padding:    0        !important;
    margin:     -1px     !important;
    overflow:   hidden   !important;
    clip:       rect(0, 0, 0, 0) !important;
    white-space:nowrap   !important;
    border:     0        !important;
    /* Non usiamo display:none per preservare l'init degli script GF */
}

/* ── Header modal: titolo location + bottone chiusura ─────────────────── */
.osl-form-modal-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
    margin-bottom:   20px;
    padding-bottom:  16px;
    border-bottom:   1px solid #ececec;
}

.osl-form-modal-title {
    margin:         0;
    font-size:      15px;
    font-weight:    700;
    color:          #1a1a1a;
    line-height:    1.35;
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.osl-form-modal-subtitle {
    font-size:   12px;
    font-weight: 400;
    color:       #888;
    line-height: 1.4;
}

/* ── Animazione chiusura overlay ──────────────────────────────────────── */
/* Aggiunta da JS prima della rimozione dal DOM (durata 200ms) */
.osl-form-overlay--closing {
    animation: osl-overlay-out .2s ease-in forwards !important;
}

.osl-form-overlay--closing .osl-form-modal {
    animation: osl-modal-out .2s ease-in forwards !important;
}

@keyframes osl-overlay-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes osl-modal-out {
    from { transform: translateY(0)    scale(1);   opacity: 1; }
    to   { transform: translateY(12px) scale(.97); opacity: 0; }
}

/* ── Adatta il padding del modal quando l'header è presente ──────────── */
/* Il padding-top ridotto compensa l'altezza dell'header stesso */
.osl-form-modal:has(.osl-form-modal-header) {
    padding-top: 24px;
}


/* Overlay semitrasparente */
.osl-form-overlay {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0, 0, 0, .55);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
    backdrop-filter: blur(4px);
    animation:       osl-overlay-in .2s ease-out;
}

@keyframes osl-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Finestra modale */
.osl-form-modal {
    position:      relative;
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 20px 60px rgba(0, 0, 0, .3);
    max-width:     700px;
    width:         100%;
    max-height:    90vh;
    overflow-y:    auto;
    padding:       32px 28px 28px;
    box-sizing:    border-box;
    animation:     osl-modal-in .25s cubic-bezier(.34, 1.26, .64, 1);
}

@keyframes osl-modal-in {
    from { transform: translateY(20px) scale(.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* Bottone di chiusura × */
.osl-form-modal-close {
    position:       absolute;
    top:            12px;
    right:          14px;
    width:          32px;
    height:         32px;
    background:     #f3f3f3;
    border:         none;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    cursor:         pointer;
    color:          #555;
    transition:     background .15s, color .15s, transform .1s;
    z-index:        1;
    padding:        0;
    flex-shrink:    0;
}

.osl-form-modal-close:hover  { background: #e0e0e0; color: #111; }
.osl-form-modal-close:active { transform: scale(.93); }

/* Scrollbar sottile nel modal (WebKit) */
.osl-form-modal::-webkit-scrollbar { width: 6px; }
.osl-form-modal::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* =============================================================================
   OSM Store Locator — Elenco Store Paginato (v3.1)
   ============================================================================= */

/* ── Wrapper elenco ──────────────────────────────────────────────────────── */
.osl-store-list-wrap {
    border-top:  1px solid #eee;
    padding:     20px 20px 24px;
    background:  #fff;
}

/* ── Header: titolo + contatore ──────────────────────────────────────────── */
.osl-list-header {
    display:         flex;
    align-items:     baseline;
    gap:             10px;
    margin-bottom:   14px;
    flex-wrap:       wrap;
}

.osl-list-header-title {
    font-size:      14px;
    font-weight:    700;
    color:          #1a1a1a;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.osl-list-header-count {
    font-size:   12px;
    color:       #888;
    font-weight: 400;
}

/* ── Griglia store ───────────────────────────────────────────────────────── */
.osl-store-list {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
}

@media (max-width: 600px) {
    .osl-store-list { grid-template-columns: 1fr; }
}

/* ── Singolo item ────────────────────────────────────────────────────────── */
.osl-list-item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         10px 12px;
    border:          1px solid #e8e8e8;
    border-radius:   8px;
    cursor:          pointer;
    background:      #fafafa;
    transition:      background .15s, border-color .15s, box-shadow .15s,
                     opacity .2s, transform .2s;
    /* Animazione ingresso gestita via JS con classe --visible */
    opacity:         0;
    transform:       translateY(6px);
}

.osl-list-item--visible {
    opacity:   1;
    transform: translateY(0);
}

.osl-list-item:hover {
    background:    var(--osl-accent-light, #e8f5ee);
    border-color:  var(--osl-accent, #1a6b3a);
    box-shadow:    0 2px 8px rgba(0,0,0,.07);
}

/* ── Skeleton placeholder (mostrato dal PHP durante il caricamento) ──────── */
.osl-list-item--skeleton {
    pointer-events: none;
    opacity:        1 !important;
    transform:      none !important;
}

.osl-skeleton-block,
.osl-skeleton-line {
    display:       block;
    background:    linear-gradient(90deg, #ececec 25%, #f8f8f8 50%, #ececec 75%);
    background-size: 200% 100%;
    animation:     osl-shimmer 1.4s infinite;
    border-radius: 4px;
}

.osl-skeleton-block {
    width:  34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.osl-skeleton-line--name    { width: 60%; height: 13px; margin-bottom: 6px; }
.osl-skeleton-line--address { width: 85%; height: 11px; }

@keyframes osl-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Icona pin colorata ──────────────────────────────────────────────────── */
.osl-list-icon {
    flex-shrink:    0;
    width:          34px;
    height:         34px;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    /* background iniettato inline via JS con accent color */
}

/* ── Contenuto testuale ──────────────────────────────────────────────────── */
.osl-list-content {
    flex:           1;
    min-width:      0; /* Permette truncation con text-overflow */
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.osl-list-name {
    font-size:     13px;
    font-weight:   700;
    color:         #111;
    line-height:   1.3;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}

.osl-list-address {
    font-size:     11px;
    color:         #777;
    line-height:   1.4;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}

/* ── Bottone CTA lista ───────────────────────────────────────────────────── */
.osl-list-cta {
    flex-shrink:    0;
    padding:        5px 11px;
    border:         none;
    border-radius:  6px;
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .03em;
    cursor:         pointer;
    transition:     filter .15s, transform .1s;
    white-space:    nowrap;
    line-height:    1.4;
    /* background iniettato inline via JS */
}

.osl-list-cta:hover  { filter: brightness(1.15); }
.osl-list-cta:active { transform: scale(.95); }

/* ── Messaggio lista vuota ───────────────────────────────────────────────── */
.osl-list-empty {
    grid-column:   1 / -1;
    text-align:    center;
    color:         #888;
    font-size:     13px;
    padding:       20px 0;
    font-style:    italic;
}

/* ── Paginazione ─────────────────────────────────────────────────────────── */
.osl-list-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px;
    margin-top:      20px;
}

.osl-page-btn {
    min-width:     36px;
    height:        36px;
    padding:       0 10px;
    border:        1.5px solid #ddd;
    border-radius: 6px;
    background:    #fff;
    color:         #333;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .15s, border-color .15s, color .15s;
    line-height:   1;
    white-space:   nowrap;
}

.osl-page-btn:hover:not(:disabled):not(.osl-page-btn--active) {
    border-color: var(--osl-accent, #1a6b3a);
    color:        var(--osl-accent, #1a6b3a);
    background:   var(--osl-accent-light, #e8f5ee);
}

.osl-page-btn--active {
    background:   var(--osl-accent, #1a6b3a);
    border-color: var(--osl-accent, #1a6b3a);
    color:        #fff;
    cursor:       default;
}

.osl-page-btn:disabled:not(.osl-page-btn--active) {
    opacity: .35;
    cursor:  not-allowed;
}

.osl-page-dots {
    font-size:  14px;
    color:      #aaa;
    padding:    0 2px;
    user-select:none;
    line-height:36px;
}


/*
 * AGGIUNTE v4.0.0 al file store-locator.css esistente
 * Da appendere al CSS attuale del plugin.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * SEZIONE: Lista store — stato pending (nascosta fino alla prima ricerca)
 * ─────────────────────────────────────────────────────────────────────────────
 */

/**
 * .osl-list--pending
 * La lista store viene resa invisibile al caricamento iniziale.
 * La classe viene rimossa da JS (store-locator.js) al primo click su "Cerca",
 * con un'animazione fade-in + slide-up per un'esperienza fluida.
 */
.osl-store-list-wrap.osl-list--pending {
    display: none !important;
}

/**
 * Quando la lista diventa visibile (classe rimossa da JS):
 * animazione di apparizione per non "saltare" visivamente.
 */
.osl-store-list-wrap:not(.osl-list--pending) {
    animation: osl-fade-in-up 0.35s ease both;
}

@keyframes osl-fade-in-up {
    from {
        opacity:   0;
        transform: translateY( 12px );
    }
    to {
        opacity:   1;
        transform: translateY( 0 );
    }
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * SEZIONE: Google Maps — override stile InfoWindow
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Google Maps inietta il proprio CSS per le InfoWindow. Questi override
 * applicano lo stile del plugin (popup) all'InfoWindow di Google.
 */

/* Rimuove il padding interno aggiunto da Google */
.gm-style-iw-d {
    overflow: hidden !important;
    padding:  0 !important;
}
.gm-style-iw-c {
    padding: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
    max-width: 290px !important;
}
/* Nasconde l'X di chiusura nativo di Google (sostituito dal nostro .osl-popup-cta) */
.gm-ui-hover-effect {
    display: none !important;
}
/* Applica il padding al popup interno del plugin */
.gm-style-iw-d .osl-popup-inner {
    padding: 14px 16px 16px;
}

/* =============================================================================
   OSM STORE LOCATOR — Popup Modale (da aggiungere in fondo a store-locator.css)
   ============================================================================= */

/* ── Sezione nascosta prima dell'apertura ──────────────────────────────────── */
.osl-form-section--popup {
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Backdrop fullscreen ───────────────────────────────────────────────────── */
.osl-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: osl-overlay-fadein 0.2s ease forwards;
    overscroll-behavior: contain;
}

@keyframes osl-overlay-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.osl-form-overlay--closing {
    animation: osl-overlay-fadeout 0.2s ease forwards;
    pointer-events: none;
}

@keyframes osl-overlay-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Contenitore modale ────────────────────────────────────────────────────── */
.osl-form-modal {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    animation: osl-modal-slidein 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    margin: 0 !important;
    padding: 0 !important;
}

@keyframes osl-modal-slidein {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header modale ─────────────────────────────────────────────────────────── */
.osl-form-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--osl-accent, #1a6b3a);
    color: #fff;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

.osl-form-modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osl-form-modal-subtitle {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
}

.osl-form-modal-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
    padding: 0;
    line-height: 1;
}

.osl-form-modal-close:hover,
.osl-form-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.35);
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* ── Reset posizionamento sezione Elementor nel modal ──────────────────────── */
.osl-form-modal > .elementor-section,
.osl-form-modal > [data-elementor-type],
.osl-form-modal > section {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    visibility: visible !important;
}

/* ── Scroll body bloccato ──────────────────────────────────────────────────── */
body.osl-modal-open {
    overflow: hidden;
}

/* ── Mobile: sheet dal basso ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    .osl-form-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .osl-form-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        animation: osl-modal-slidein-mobile 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }
    .osl-form-modal-header {
        border-radius: 16px 16px 0 0;
    }
    @keyframes osl-modal-slidein-mobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}