/* ============================================================================
   BLUE DESTINATION — CALENDARIO DISPONIBILITÀ
   ----------------------------------------------------------------------------
   Usato in due posti con lo stesso aspetto:
     - scheda barca (boat-detail.php): sola lettura, mostra i giorni occupati
     - modulo preventivo/prenotazione (index.php): si sceglie il periodo

   Usa le stesse variabili colore delle pagine (--primary, --accent, --gold...).
   Se mancano, i valori di ripiego mantengono l'aspetto corretto.
   ============================================================================ */

.bd-cal {
    --cal-primary: var(--primary, #0a4d68);
    --cal-accent:  var(--accent, #05bfdb);
    --cal-busy:    #e05b4d;
    --cal-line:    #e6eef2;
    --cal-muted:   #9aa7b0;
    background: #fff;
    border: 1px solid var(--cal-line);
    border-radius: 16px;
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: 0 10px 30px rgba(10, 77, 104, .07);
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
}

/* ---- Intestazione: mese corrente e frecce ---- */
.bd-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .9rem;
}
.bd-cal-month {
    font-weight: 800; color: var(--cal-primary); font-size: 1.02rem;
    text-transform: capitalize; letter-spacing: .01em; text-align: center; flex: 1;
}
.bd-cal-nav {
    width: 34px; height: 34px; flex: 0 0 34px;
    border: 1px solid var(--cal-line); background: #fff; border-radius: 10px;
    color: var(--cal-primary); font-size: 1.05rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, border-color .18s, transform .18s;
    font-family: inherit; padding: 0;
}
.bd-cal-nav:hover:not(:disabled) { background: var(--cal-accent); border-color: var(--cal-accent); color: #fff; }
.bd-cal-nav:active:not(:disabled) { transform: scale(.94); }
.bd-cal-nav:disabled { opacity: .3; cursor: default; }

/* ---- Griglia ---- */
.bd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bd-cal-dow {
    text-align: center; font-size: .7rem; font-weight: 800; color: var(--cal-muted);
    text-transform: uppercase; letter-spacing: .04em; padding: .2rem 0 .45rem;
}

/* ---- Singolo giorno ----
   Niente aspect-ratio: insieme a min-height farebbe dettare la larghezza
   dall'altezza, e su schermi stretti le sette colonne uscivano dal riquadro.
   La cella riempie la colonna e ha solo un'altezza minima comoda da toccare. */
.bd-cal-day {
    position: relative; width: 100%; min-width: 0; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: .9rem; font-weight: 600;
    background: #f4f8fa; color: #24333c; border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit; padding: 0; cursor: default;
}
.bd-cal-day.is-empty { background: none; border: none; }

/* Giorni passati e fuori stagione: presenti ma spenti. */
.bd-cal-day.is-past { background: none; color: #cdd6dc; }

/* Oggi: cerchietto di riferimento. */
.bd-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--cal-accent); }

/* Occupato: barrato e in rosso, non selezionabile. */
.bd-cal-day.is-busy {
    background: #fdeceb; color: var(--cal-busy); text-decoration: line-through;
    text-decoration-thickness: 1.5px; cursor: not-allowed;
}

/* Libero e cliccabile (solo nel modulo di prenotazione). */
.bd-cal.is-pickable .bd-cal-day.is-free { cursor: pointer; }
.bd-cal.is-pickable .bd-cal-day.is-free:hover { background: #dff4f9; border-color: var(--cal-accent); }

/* Periodo scelto. */
.bd-cal-day.is-sel { background: var(--cal-accent); color: #fff; }
.bd-cal-day.is-range { background: #dff4f9; color: var(--cal-primary); }

/* Rete di sicurezza: un giorno occupato resta rosso e barrato anche se per
   qualche motivo finisse dentro una selezione. Meglio nessuna evidenziazione
   che un giorno occupato dipinto come disponibile. */
.bd-cal-day.is-busy.is-sel,
.bd-cal-day.is-busy.is-range {
    background: #fdeceb; color: var(--cal-busy); text-decoration: line-through;
}
.bd-cal-day.is-edge-start { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.bd-cal-day.is-edge-end   { border-top-left-radius: 4px;  border-bottom-left-radius: 4px; }

/* ---- Legenda ---- */
.bd-cal-legend {
    display: flex; flex-wrap: wrap; gap: .35rem .95rem;
    margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--cal-line);
    font-size: .78rem; color: #5c6b75;
}
.bd-cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bd-cal-dot { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 11px; }
.bd-cal-dot.free { background: #f4f8fa; border: 1px solid var(--cal-line); }
.bd-cal-dot.busy { background: #fdeceb; border: 1px solid #f6c9c4; }
.bd-cal-dot.sel  { background: var(--cal-accent); }

/* ---- Riga di stato sotto il calendario ---- */
.bd-cal-info {
    margin-top: .7rem; font-size: .84rem; line-height: 1.45;
    color: #5c6b75; min-height: 1.2em;
}
.bd-cal-info strong { color: var(--cal-primary); }
.bd-cal-info.is-warn { color: var(--cal-busy); font-weight: 600; }

/* ---- Nessuna barca ancora scelta ---- */
.bd-cal-empty {
    text-align: center; color: var(--cal-muted); font-size: .9rem;
    padding: 2.2rem 1rem; line-height: 1.5;
}

/* ---- Telefono: celle più alte, comode da toccare ---- */
@media (max-width: 520px) {
    .bd-cal { padding: .9rem .8rem .85rem; border-radius: 14px; }
    .bd-cal-grid { gap: 3px; }
    .bd-cal-day { height: 42px; font-size: .88rem; border-radius: 9px; }
    .bd-cal-dow { font-size: .64rem; }
    .bd-cal-legend { font-size: .74rem; gap: .3rem .7rem; }
}

/* Su sfondo scuro (il modulo prenotazione della home sta su un'onda blu):
   il calendario resta bianco, ma la legenda deve restare leggibile. */
.bd-cal-wrap.on-dark .bd-cal-legend { color: #5c6b75; }

/* Chi preferisce meno animazioni non le subisce. */
@media (prefers-reduced-motion: reduce) {
    .bd-cal-nav, .bd-cal-day { transition: none; }
}