/* =============================================================
   Prenotazioni – Stili popup
   File: assets/css/prenotazioni.css
   @package vanguard360-child
   ============================================================= */

/* ---- Variabili (adatta ai colori del tema) ---- */
:root {
    --vg360-primary:        #2c5f4a;   /* verde scuro – modifica con il colore principale */
    --vg360-primary-hover:  #1e4234;
    --vg360-accent:         #e8a838;   /* colore call-to-action */
    --vg360-accent-hover:   #cf9020;
    --vg360-overlay-bg:     rgba(0, 0, 0, .55);
    --vg360-modal-bg:       #ffffff;
    --vg360-radius:         0px;
    --vg360-shadow:         0 8px 40px rgba(0, 0, 0, .18);
    --vg360-font:           inherit;
    --vg360-error-bg:       #fef2f2;
    --vg360-error-color:    #b91c1c;
    --vg360-success-bg:     #f0fdf4;
    --vg360-success-color:  #15803d;
}

/* ---- Pulsante principale ---- */
.vg360-btn-prenota {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    background:       transparent;
    color:            #141414;
    border:           none;
    border-radius:    0px;
    padding:          16px 54px;
    font-size:        18px;
    font-weight:      300;
    letter-spacing:   .02em;
    cursor:           pointer;
    transition:       background .2s, transform .1s;
    font-family:      var(--vg360-font);
    border:           1px solid #141414;
    margin-top:       50px;
}
.vg360-btn-prenota:hover  { background: var(--color2);color:#fff; }
.vg360-btn-prenota:active { transform: scale(.98); }

/* ---- Overlay ---- */
.vg360-overlay {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--vg360-overlay-bg);
    padding:         16px;
    backdrop-filter: blur(2px);
    animation:       vg360FadeIn .2s ease;
}
.vg360-overlay[hidden] { display: none; }

@keyframes vg360FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Modal ---- */
.vg360-modal {
    position:         relative;
    background:       var(--vg360-modal-bg);
    border-radius:    var(--vg360-radius);
    box-shadow:       var(--vg360-shadow);
    width:            100%;
    max-width:        580px;
    max-height:       90vh;
    overflow-y:       auto;
    padding:          36px 32px 28px;
    animation:        vg360SlideUp .22s ease;
    font-family:      var(--vg360-font);
}

@keyframes vg360SlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ---- Chiudi ---- */
.vg360-modal-close {
    position:   absolute;
    top:        14px;
    right:      16px;
    background: transparent;
    border:     none;
    font-size:  1.6rem;
    line-height: 1;
    color:      #888;
    cursor:     pointer;
    padding:    4px 8px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.vg360-modal-close:hover { color: #222; background: #f0f0f0; }

/* ---- Titolo ---- */
.vg360-modal-title {
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--vg360-primary);
    margin:      0 0 6px;
    padding-right: 30px;
}
.vg360-modal-intro {
    font-size:  .875rem;
    color:      #555;
    margin:     0 0 24px;
}

/* ---- Form grid ---- */
.vg360-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px 20px;
}

@media (max-width: 480px) {
    .vg360-form-grid { grid-template-columns: 1fr; }
    .vg360-modal     { padding: 28px 20px 24px; }
}

/* ---- Campo ---- */
.vg360-field {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}
.vg360-field--full {
    grid-column: 1 / -1;
}

.vg360-field label {
    font-size:   .82rem;
    font-weight: 600;
    color:       #333;
    letter-spacing: .01em;
}
.vg360-field label span { color: var(--vg360-accent); }

.vg360-field input {
    border:        1px solid #d1d5db;
    border-radius: 6px;
    padding:       9px 12px;
    font-size:     .95rem;
    font-family:   var(--vg360-font);
    color:         #111;
    background:    #fafafa;
    transition:    border-color .15s, box-shadow .15s;
    width:         100%;
    box-sizing:    border-box;
}
.vg360-field input:focus {
    outline:      none;
    border-color: var(--vg360-primary);
    box-shadow:   0 0 0 3px rgba(44, 95, 74, .15);
    background:   #fff;
}
.vg360-field input.vg360-invalid {
    border-color: var(--vg360-error-color);
    box-shadow:   0 0 0 3px rgba(185, 28, 28, .12);
}

/* ---- Messaggi ---- */
.vg360-msg {
    border-radius: 6px;
    padding:       12px 16px;
    font-size:     .9rem;
    margin-top:    18px;
    font-weight:   500;
}
.vg360-msg[hidden] { display: none; }
.vg360-msg.vg360-error   { background: var(--vg360-error-bg);   color: var(--vg360-error-color); }
.vg360-msg.vg360-success  { background: var(--vg360-success-bg); color: var(--vg360-success-color); }

/* ---- Footer form ---- */
.vg360-form-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    margin-top:      22px;
    flex-wrap:       wrap;
}
.vg360-privacy-note {
    font-size: .78rem;
    color:     #888;
    margin:    0;
    flex:      1 1 50px;
}

/* ---- Pulsante submit ---- */
.vg360-btn-submit {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    var(--vg360-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--vg360-radius);
    padding:       12px 26px;
    font-size:     .95rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .2s;
    font-family:   var(--vg360-font);
    white-space:   nowrap;
}
.vg360-btn-submit:hover    { background: var(--vg360-primary-hover); }
.vg360-btn-submit:disabled { opacity: .65; cursor: not-allowed; }

/* ---- Spinner ---- */
.vg360-btn-spinner {
    display:       inline-block;
    width:         16px;
    height:        16px;
    border:        2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     vg360Spin .7s linear infinite;
}
.vg360-btn-spinner[hidden] { display: none; }

@keyframes vg360Spin {
    to { transform: rotate(360deg); }
}

/* ---- Flatpickr overrides ---- */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background:    #fef2f2 !important;
    color:         #e57373 !important;
    text-decoration: line-through;
    cursor:        not-allowed !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background:    var(--vg360-primary) !important;
    border-color:  var(--vg360-primary) !important;
}
.flatpickr-day.inRange {
    background:    rgba(44, 95, 74, .12) !important;
    border-color:  transparent !important;
    box-shadow:    none !important;
}