/* FT Prenotazioni — Frontend (shortcode [ft_prenotazione]) */

.ft-pren {
    --ft-pren-primary: #00a3ad;
    --ft-pren-pink: #f9d7d4;
    --ft-pren-green: #00a3ad5c;
    --ft-pren-white: #ffffff;
    --ft-pren-black: #000000;
    --ft-pren-border: #e3e8e8;
    --ft-pren-muted: #6b7676;
    --ft-pren-bg-soft: #fbfbfb;

    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    color: var(--ft-pren-black);
    line-height: 1.5;
}
.ft-pren *,
.ft-pren *::before,
.ft-pren *::after {
    box-sizing: border-box;
}
.ft-pren button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}
.ft-pren svg {
    flex-shrink: 0;
    display: block;
}

div#container-div {
    padding-left: 0px !important;
}

/* =========================================
   Back link
   ========================================= */
.ft-pren-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    color: var(--ft-pren-black);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
}
.ft-pren-back:hover {
    color: var(--ft-pren-primary);
}
/* Nascosto di default: su desktop calendario e slot sono sempre entrambi
   visibili fianco a fianco, non serve un modo per "tornare" al calendario.
   Compare solo sotto la soglia mobile (vedi RESPONSIVE), quando gli slot
   sono visibili. */
.ft-pren-back-to-calendar {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    background: none;
    border: none;
    padding: 0;
    color: var(--ft-pren-black);
    font-weight: 600;
    font-size: 0.9em!important;
}
.ft-pren-back-to-calendar:hover {
    color: var(--ft-pren-primary);
}

/* =========================================
   Bottone generico
   ========================================= */
.ft-pren-btn {
    display: inline-block;
    background: var(--ft-pren-primary);
    color: var(--ft-pren-white);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease;
}
.ft-pren-btn:hover {
    background: #00828a;
    color: var(--ft-pren-white);
}

/* =========================================
   Not found
   ========================================= */
.ft-pren-notfound {
    text-align: center;
    padding: 60px 20px;
}
.ft-pren-notfound p {
    margin-bottom: 20px;
    color: var(--ft-pren-muted);
}

/* =========================================================
   MODALITÀ DETTAGLIO (Calendly-style)
   ========================================================= */
.ft-pren-detail {
    display: grid;
    grid-template-columns: minmax(260px, 30%) 1fr;
    gap: 0;
    border: 1px solid var(--ft-pren-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ft-pren-white);
}

.ft-pren-info {
    padding: 32px;
    border-right: 1px solid var(--ft-pren-border);
    background: var(--ft-pren-bg-soft);
    min-height: 0;
    overflow-y: auto;
}
.ft-pren-info-tag {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ft-pren-primary);
    margin-bottom: 8px;
}
.ft-pren-info-title {
    margin: 0 0 16px;
    font-size: 1.5em;
    color: var(--ft-pren-black);
}
.ft-pren-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 0px;
    color: var(--ft-pren-black);
}
.ft-pren-info-row svg {
    color: var(--ft-pren-primary);
}
.ft-pren-spec-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ft-pren-info-descrizione {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--ft-pren-border);
    color: var(--ft-pren-black);
    font-size: 0.95em;
}
.ft-pren-info-descrizione p:first-child { margin-top: 0; }
.ft-pren-info-descrizione p:last-child { margin-bottom: 0; }

.ft-pren-varianti-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 4px;
}
.ft-pren-variante-tab {
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--ft-pren-black);
    transition: all 0.15s ease;
}
.ft-pren-variante-tab:hover {
    border-color: var(--ft-pren-primary);
    background: var(--ft-pren-green);
}
.ft-pren-variante-tab.is-active {
    background: var(--ft-pren-primary);
    border-color: var(--ft-pren-primary);
    color: var(--ft-pren-white);
}

.ft-pren-booking {
    padding: 30px;
    display: flex;
    align-items: stretch;
    min-height: 0;
    column-gap: 30px;
}
.ft-pren-booking h3 {
    margin: 0 0 20px;
    font-size: 1.15em;
    color: var(--ft-pren-black);
}

/* Calendario (condiviso fra dettaglio e ricerca) */
.ft-pren-calendar {
    max-width: 100%;
}
.ft-pren-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ft-pren-cal-title {
    font-weight: 700;
    text-transform: capitalize;
    color: var(--ft-pren-black);
}
.ft-pren-cal-nav {
    background: none;
    border: 1px solid var(--ft-pren-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ft-pren-black);
}
.ft-pren-cal-nav:hover {
    border-color: var(--ft-pren-primary);
    color: var(--ft-pren-primary);
}
.ft-pren-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.78em;
    color: var(--ft-pren-muted);
    margin-bottom: 6px;
}
.ft-pren-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.ft-pren-cal-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 0.85em;
    color: var(--ft-pren-black);
    width: 50px;
    height: 50px;
    padding: 0px;
    margin: 0 auto;
}
.ft-pren-cal-cell.is-empty {
    visibility: hidden;
}
.ft-pren-cal-cell.is-disabled {
    color: #c3cbcb;
    cursor: default;
}
.ft-pren-cal-cell.is-available {
    color: var(--ft-pren-primary);
    font-weight: 600;
    background: var(--ft-pren-green);
    background: color-mix(in srgb, var(--ft-pren-green) 35%, transparent);
    border-radius: 50%;
}
.ft-pren-cal-cell.is-available:hover {
    background: var(--ft-pren-green);
}
.ft-pren-cal-cell.is-selected {
    background: var(--ft-pren-primary) !important;
    color: var(--ft-pren-white) !important;
    border-radius: 50%;
}
.ft-pren-cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ft-pren-primary);
}
.ft-pren-cal-cell.is-selected .ft-pren-cal-dot {
    background: var(--ft-pren-white);
}
.ft-pren-data_ora {
    width: 60%;
}

/* Slot orari: l'altezza di .ft-pren-detail viene fissata via JS su quella del
   calendario a fianco (vedi syncBookingHeight in frontend.js). Solo
   .ft-pren-slots-scroll scorre quando gli slot non ci stanno tutti; il
   suggerimento "Scorri..." resta sotto, fuori dall'area scrollabile, così non
   si sovrappone mai al testo degli slot. */
.ft-pren-data_ora_slotdisponibili {
    width: 40%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.ft-pren-slots-scroll {
    min-height: 0;
    overflow-y: auto;
}
.ft-pren-slots-hint {
    flex-shrink: 0;
    margin: 10px 0 0;
    padding-top: 10px;
    color: var(--ft-pren-muted);
    font-size: 0.82em;
    text-align: center;
    padding-bottom: 0px;
}
.ft-pren-slots-title {
    margin: 0 0 23px;
    font-size: 1em;
    color: var(--ft-pren-black);
}
.ft-pren-slots-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ft-pren-slot-row {
    display: flex;
    gap: 10px;
}
.ft-pren-slot-btn {
    flex: 1 1 0%;
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-primary);
    color: var(--ft-pren-primary);
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.ft-pren-slot-btn:hover {
    background: var(--ft-pren-green);
}
.ft-pren-slot-btn.is-selected {
    background: var(--ft-pren-primary);
    color: var(--ft-pren-white);
}
.ft-pren-slots-empty {
    color: var(--ft-pren-muted);
    font-size: 0.9em;
}

/* Conferma: appare accanto allo slot selezionato (stessa riga, 50%/50%) */
.ft-pren-slot-row .ft-pren-confirm-btn {
    flex: 1 1 0%;
    margin: 0;
    background-color: var(--ft-pren-muted);
}

/* =========================================================
   AUTENTICAZIONE (box "Accedi per confermare", dopo aver scelto uno slot)
   ========================================================= */
.ft-pren-auth-step h4 {
    margin: 0 0 12px;
    font-size: 25px;
    color: var(--ft-pren-black);
    text-align: center;
    margin-bottom: 30px;
}
.ft-pren-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    background: none;
    border: none;
    padding: 0;
    color: var(--ft-pren-black);
    font-weight: 600;
    font-size: 0.9em!important;
}
.ft-pren-auth-back:hover {
    color: var(--ft-pren-primary);
}
/* Sottotitolo e link registrazione del primo step */
.ft-pren-auth-step h4 + .ft-pren-auth-intro { margin-top: -18px; }
.ft-pren-auth-intro {
    margin: 0 0 24px;
    text-align: center;
    color: var(--ft-pren-muted);
}
.ft-pren-auth-signup {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--ft-pren-muted);
}
.ft-pren .ft-pren-auth-signup-link {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    color: var(--ft-pren-primary);
    text-decoration: underline;
    cursor: pointer;
}
.ft-pren .ft-pren-auth-signup-link:hover { color: #00828a; }

.ft-pren-auth-hint {
    margin: 0 0 16px;
    font-size: 0.88em;
    color: var(--ft-pren-muted);
}
/* Testo subito sotto il titolo (es. "Inserisci i tuoi dati..."): vicino al
   titolo e centrato */
.ft-pren-auth-step h4 ~ .ft-pren-auth-hint {
    margin-top: -18px;
    margin-bottom: 24px;
    text-align: center;
}
.ft-pren-auth-email-row {
    display: flex;
    align-items: flex-end;
}
.ft-pren-auth-email-row .ft-pren-auth-label {
    flex: 3 1 0%;
    min-width: 0;
    margin-bottom: 0;
}
.ft-pren-auth-alt-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.ft-pren-auth-alt-sep {
    width: 1px;
    align-self: stretch;
    background: var(--ft-pren-border);
    display: none!important;
}
.ft-pren-auth-alt-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ft-pren-black);
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    width: 50%;
}
.ft-pren-auth-alt-link:hover {
    color: var(--ft-pren-black);
}

.ft-pren-auth-divider {
    position: relative;
    text-align: center;
    margin: 25px 0;
    font-size: 0.8em;
    color: var(--ft-pren-muted);
}
.ft-pren-auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--ft-pren-border);
}
.ft-pren-auth-divider span {
    position: relative;
    background: var(--ft-pren-white);
    padding: 0 12px;
}
.ft-pren-auth-row {
    display: flex;
    gap: 12px;
}
.ft-pren-auth-row .ft-pren-auth-label {
    flex: 1 1 0%;
    min-width: 0;
}
.ft-pren-auth-label {
    display: block;
    margin-bottom: 14px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--ft-pren-black);
}
.ft-pren-auth-label input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    font-size: 0.95em;
    font-weight: 400;
    border: 1px solid var(--ft-pren-border);
    border-radius: 8px;
    background: var(--ft-pren-white);
}
.ft-pren-auth-label input:focus {
    outline: none;
    border-color: var(--ft-pren-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-pren-primary) 20%, transparent);
}
.ft-pren-auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--ft-pren-black);
}
.ft-pren-auth-checkbox input {
    margin-top: 3px;
    flex-shrink: 0;
}
/* Bottoni dei form di accesso/registrazione: larghi quanto il testo e
   centrati (tranne "Continua" accanto all'email, vedi sotto) */
.ft-pren-auth-box .ft-pren-btn {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 4px auto 0;
    padding-left: 40px;
    padding-right: 40px;
}
.ft-pren-auth-email-row .ft-pren-btn {
    flex: 2 1 0%;
    width: auto;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 0 8px 8px 0;
}
.ft-pren input#ft-pren-auth-email,
.ft-pren input#ft-pren-regstart-email {
    height: 48px;
    border-radius: 8px 0 0 8px !important;
}
.ft-pren-auth-link {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: none;
    border: none;
    padding: 0;
    color: var(--ft-pren-primary);
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
}
.ft-pren-btn:disabled,
.ft-pren-auth-link:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Logout in fondo a "Informazioni personali": solo da mobile, perché da
   desktop il logout sta già nella tendina del menu (menu.css). */
.ft-pren-profilo-logout-mobile {
    display: none;
}
.ft-pren-auth-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: #fdecea;
    border: 1px solid #f3c6c1;
    border-radius: 6px;
    color: #b3261e;
    font-size: 0.85em;
}
.ft-pren-payment-choice {
    display: flex;
    gap: 12px;
}
#ft-pren-stripe-checkout {
    min-height: 300px;
}
.ft-pren-payment-option {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-border);
    border-radius: 10px;
    padding: 16px 18px;
    text-align: left;
    transition: all 0.15s ease;
}
.ft-pren-payment-option:hover {
    border-color: var(--ft-pren-primary);
    background: var(--ft-pren-green);
}
.ft-pren-payment-option.is-selected {
    border-color: var(--ft-pren-primary);
    background: var(--ft-pren-green);
}
.ft-pren-payment-option-title {
    font-weight: 700;
    color: var(--ft-pren-black);
}
.ft-pren-payment-option-desc {
    font-size: 0.85em;
    color: var(--ft-pren-muted);
}
.ft-pren-confirmed {
    margin: 24px auto;
    padding: 36px 28px;
    border-radius: 16px;
    text-align: center;
}
.ft-pren-confirmed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--ft-pren-primary);
    color: var(--ft-pren-white);
}
.ft-pren-confirmed .ft-pren-confirmed-title {
    margin: 0 0 14px;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--ft-pren-black);
}
.ft-pren-confirmed-detail {
    display: inline-block;
    margin: 0 0 22px;
    padding: 8px 16px;
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-border);
    border-radius: 999px;
    font-size:16px;
    font-weight: 600;
    color: var(--ft-pren-primary);
}
.ft-pren-confirmed-note {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ft-pren-muted);
    padding-bottom: 0px;
}
.ft-pren-confirmed-account-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--ft-pren-primary);
    font-weight: 700;
    font-size: 0.9em;
}
.ft-pren-confirmed-account-link:hover {
    color: var(--ft-pren-black);
}

/* =========================================================
   AREA CLIENTE (shortcode [ft_prenotazione_area] e [ft_prenotazione_profilo]):
   un'unica pagina con sidebar a sinistra (profilo/prenotazioni) e contenuto
   a destra, switch fra le due sezioni via JS (show/hide, niente reload).
   ========================================================= */
.ft-pren-account {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
}
.ft-pren-account-title {
    margin: 0 0 20px;
    font-size: 25px;
    color: var(--ft-pren-black);
}
.ft-pren-account-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ft-pren-account-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    border-radius: 0px;
    padding: 12px 14px;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    color: var(--ft-pren-black);
    transition: background 0.15s ease;
}
.ft-pren-account-nav-item svg {
    color: var(--ft-pren-muted);
}
.ft-pren-account-nav-item:hover {
    background: #015c61;
    color: #fff;
}
.ft-pren-account-nav-item:hover svg {
    color: #fff;
}
.ft-pren-account-nav-item.is-active {
    background:transparent;
    color: var(--ft-pren-primary);
    cursor: default;
}
.ft-pren-account-nav-item.is-active svg {
    color: var(--ft-pren-primary);
}
.ft-pren-account-content {
    min-width: 0;
    border-left: 1px solid var(--ft-pren-border);
    padding-left: 40px;
}
.ft-pren-account-panel-title {
    margin: 0 0 20px;
    font-size: 25px;
    color: var(--ft-pren-black);
}
.ft-pren-account-panel-title-secondary {
    margin-top: 24px;
    padding-top: 24px;
    font-size: 20px;
    border-top: 1px solid var(--ft-pren-border);
}
.ft-pren-account-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-bottom: 24px;
    background: var(--ft-pren-bg-soft);
    border: 1px solid var(--ft-pren-border);
    border-radius: 14px;
}
.ft-pren-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ft-pren-green);
    color: var(--ft-pren-primary);
}
.ft-pren-account-card-name {
    display: block;
    font-size: 1.1em;
    color: var(--ft-pren-black);
}
.ft-pren-account-card-email {
    display: block;
    color: var(--ft-pren-muted);
    font-size: 0.9em;
}
@media (max-width: 700px) {
    .ft-pren-area-list {
        grid-template-columns: 1fr!important;
    }
    .ft-pren-account {
        grid-template-columns: 1fr;
    }
    .ft-pren-account-content {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--ft-pren-border);
        padding-top: 24px;
    }
    .ft-pren-account-nav {
        flex-direction: row;
        overflow-x: auto;
    }
    div#ft-pren-app {margin-top: 3rem;}
}
.ft-pren-area-notice {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9em;
}
.ft-pren-area-notice-success {
    background: var(--ft-pren-green);
    color: var(--ft-pren-primary);
}
.ft-pren-area-notice-error {
    background: #fdecea;
    color: #b3261e;
}
.ft-pren-profilo-form {
    margin-bottom: 20px;
}
.ft-pren-area-empty {
    color: var(--ft-pren-muted);
}
.ft-pren-area-list {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}
/* Le card delle prenotazioni impilano una riga superiore (info + stato) e,
   sotto una linea divisoria, il blocco "aggiungi al calendario": diverso
   dal layout orizzontale di .ft-pren-card usato altrove (card di ricerca),
   quindi si sovrascrive qui invece di toccare la classe condivisa. */
.ft-pren-area-card {
    flex-direction: column;
    align-items: stretch;
}
.ft-pren-area-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ft-pren-card-meta-datetime {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ft-pren-card-meta-datetime span {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ft-pren-card-meta-datetime svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--ft-pren-primary);
}
.ft-pren-area-card-divider {
    margin:0px;
    border: none;
    border-top: 1px solid var(--ft-pren-border);
}
.ft-pren-card-addcal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    font-size: 0.85em;
}
.ft-pren-card-addcal-label {
    color: var(--ft-pren-muted);
    font-size: 13px;
}
.ft-pren-card-addcal a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color:#000;
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}
.ft-pren-card-addcal a:hover {
    color: var(--ft-pren-primary);
}
.ft-pren-card-addcal a svg {display: none;}
.ft-pren-card-addcal svg {
    width: 14px;
    height: 14px;
}
.ft-pren-stato {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
}
.ft-pren-stato-in_attesa { color: #8a6d00; }
.ft-pren-stato-confermata,
.ft-pren-stato-pagata { color: #00a3ad; }
.ft-pren-stato-annullata { color: #b3261e; }
.ft-pren-stato-completata { color: var(--ft-pren-muted); }
/* Appuntamenti passati: tutto in scala di grigio, stato in grigio */
.ft-pren-area-card.is-passato { filter: grayscale(1); }
.ft-pren-area-card.is-passato .ft-pren-stato { color: var(--ft-pren-muted); }
/* Honeypot anti-bot: nascosto ai visitatori reali, visibile/compilabile solo
   dai bot che ignorano il CSS. */
.ft-pren-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* =========================================================
   MODALITÀ RICERCA (stessa impostazione a due colonne del dettaglio, senza
   pannello slot: colonna ricerca a sinistra, calendario a destra)
   ========================================================= */
.ft-pren-search-layout {
    display: grid;
    grid-template-columns: minmax(260px, 30%) 1fr;
    gap: 0;
    border: 1px solid var(--ft-pren-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ft-pren-white);
    margin-bottom: 28px;
}

.ft-pren-search-side {
    padding: 32px;
    border-right: 1px solid var(--ft-pren-border);
    background: var(--ft-pren-bg-soft);
}

.ft-pren-search-box {
    position: relative;
    margin-bottom: 16px;
}
.ft-pren-search-box svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ft-pren-muted);
}
.ft-pren-search-box input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    font-size: 1em;
    border: 1px solid var(--ft-pren-border);
    border-radius: 10px;
    background: var(--ft-pren-white);
}
.ft-pren-search-box input:focus {
    outline: none;
    border-color: var(--ft-pren-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ft-pren-primary) 20%, transparent);
}

.ft-pren-search-suggestions {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.ft-pren-suggestion-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ft-pren-border);
    text-align: left;
    border-radius: 0px;
}
input#ft-pren-search-input {
    padding-left: 43px;
}
.ft-pren-suggestion-item:last-child {
    border-bottom: none;
}
.ft-pren-suggestion-item:hover {
    background: var(--ft-pren-bg-soft);
}
.ft-pren-suggestion-tag {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ft-pren-primary);
}
.ft-pren-suggestion-title {
    font-size: 0.95em;
    color: var(--ft-pren-black);
}
.ft-pren-suggestions-empty {
    margin: 0;
    padding: 14px 16px;
    color: var(--ft-pren-muted);
    font-size: 0.9em;
}

.ft-pren-search-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ft-pren-category-btn {
    width: 100%;
    text-align: left;
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--ft-pren-black);
    transition: all 0.15s ease;
}
.ft-pren-category-btn:hover {
    border-color: var(--ft-pren-primary);
    background: var(--ft-pren-green);
}
.ft-pren-category-btn.is-active {
    background: var(--ft-pren-primary);
    border-color: var(--ft-pren-primary);
    color: var(--ft-pren-white);
}

.ft-pren-search-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    background: none;
    border: none;
    padding: 0;
    color: var(--ft-pren-muted);
    font-size: 0.85em;
    font-weight: 600;
}
.ft-pren-search-reset:hover {
    color: var(--ft-pren-primary);
}

.ft-pren-search-cal-section {
    padding: 30px;
}
.ft-pren-search-cal-title {
    margin: 0 0 20px;
    font-size: 1.15em;
    color: var(--ft-pren-black);
}
.ft-pren-cal-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 0;
    font-size: 0.8em;
    color: var(--ft-pren-muted);
    padding-bottom: 0px;
}
.ft-pren-cal-legend .ft-pren-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ft-pren-primary);
    display: inline-block;
}
.ft-pren-cal-empty {
    margin: 30px 0 0;
    padding: 10px 12px;
    background: var(--ft-pren-bg-soft);
    border-radius: 6px;
    font-size: 0.85em;
    color: var(--ft-pren-muted);
}

.ft-pren-results {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ft-pren-border);
}
.ft-pren-results-title {
    margin: 0 0 16px;
    font-size: 1.1em;
    color: var(--ft-pren-black);
}
.ft-pren-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ft-pren-results-loading,
.ft-pren-results-empty {
    grid-column: 1 / -1;
    color: var(--ft-pren-muted);
    padding: 20px 0;
}
.ft-pren-card {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid var(--ft-pren-border);
    border-radius: 14px;
    background: var(--ft-pren-bg-soft);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ft-pren-card-tag {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ft-pren-primary);
    margin-bottom: 4px;
}
.ft-pren-card-main h4 {
    margin: 0 0 4px;
    font-size: 1.05em;
    color: var(--ft-pren-black);
}
.ft-pren-card-meta {
    margin: 0;
    font-size: 0.88em;
    color: var(--ft-pren-muted);
    padding-bottom: 0px;
}
.ft-pren-card-side {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    flex-direction: column;
}
.ft-pren-card-price {
    font-weight: 700;
    color: var(--ft-pren-black);
    white-space: nowrap;
}
.ft-pren-card-arrow {
    color: var(--ft-pren-primary);
    font-size: 1.2em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
    .ft-pren-detail {
        grid-template-columns: 1fr;
    }
    .ft-pren-info {
        border-right: none;
        border-bottom: 1px solid var(--ft-pren-border);
    }
    .ft-pren-search-layout {
        grid-template-columns: 1fr;
    }
    .ft-pren-search-side {
        border-right: none;
        border-bottom: 1px solid var(--ft-pren-border);
    }
    .ft-pren-results-grid {
        grid-template-columns: 1fr;
    }
    .ft-pren-calendar {
        max-width: none;
    }
    .ft-pren-info,
    .ft-pren-slots-scroll {
        overflow: visible;
    }
    .ft-pren-slots-hint {
        display: none !important;
    }
}
@media (max-width: 480px) {
    .ft-pren-profilo-logout-mobile {
        display: block;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--ft-pren-border);
    }
    .ft-pren-profilo-logout-mobile .ft-pren-auth-link {
        color: #b3261e;
    }
    .ft-pren-booking h3, .ft-pren-slots-title {font-size: 24px;}
    .ft-pren-cal-cell.is-available span {
        font-size: 15px;
    }
    .ft-pren-cal-dot {
        height: 4px;width: 4px;
    }
    .ft-pren-cal-grid {gap: 5px;}
    .ft-pren-cal-cell {
        width: 42px;height: 41px;
    }
    .ft-pren-data_ora,
    .ft-pren-data_ora_slotdisponibili {
        width: 100%;
    }
    .ft-pren-booking {
        display: block;
        padding: 15px!important;
    }
    /* A questa soglia calendario e slot si impilano: mostriamo solo uno alla
       volta (vedi is-showing-slots in frontend.js) invece di far scorrere
       l'utente lungo entrambi per intero. */
    .ft-pren-data_ora_slotdisponibili {
        display: none;
    }
    .ft-pren-booking.is-showing-slots .ft-pren-data_ora {
        display: none;
    }
    .ft-pren-booking.is-showing-slots .ft-pren-data_ora_slotdisponibili {
        display: flex;
    }
    .ft-pren-booking.is-showing-slots .ft-pren-back-to-calendar {
        display: inline-flex;
    }
    .ft-pren-info,
    .ft-pren-booking,
    .ft-pren-search-side,
    .ft-pren-search-cal-section {
        padding: 22px;
    }
    .ft-pren-card-side {
        width: 20%;
        justify-content: space-between;
    }
    .ft-pren-area-card-top {width: 100%;}
}
img.ft-pren-spec-avatar {
    border-radius: 50%;
}

/* Box di autenticazione: quando è aperto (dopo "Conferma"), sostituisce
   calendario e slot occupando tutta la larghezza di .ft-pren-booking, a
   qualunque dimensione di schermo. Messo in fondo al file apposta, così
   vince sempre sulle regole per il breakpoint mobile qui sopra. */
.ft-pren-auth-box {
    display: none;
}
.ft-pren-booking.is-showing-auth > .ft-pren-data_ora,
.ft-pren-booking.is-showing-auth > .ft-pren-data_ora_slotdisponibili {
    display: none !important;
}
.ft-pren-booking.is-showing-auth > .ft-pren-auth-box {
    display: block;
    width: 100%;
}

/* Contenitore del bottone Google renderizzato da Google stesso (vedi
   updateGoogleTrigger in frontend.js): larghezza al 50% per stare in riga
   con "Continua come ospite", centrato perché renderButton non riempie mai
   tutta la larghezza disponibile. */
.cnt_btn_google {
    width: 50%;
}
/* Centratura nella metà. Contenitori a tutta larghezza: Google misura lo
   spazio disponibile quando disegna il bottone, e se lo si stringe
   (inline-block / fit-content) l'iframe viene creato troppo stretto e il
   bottone risulta tagliato a destra. Si centra quindi solo l'iframe, dentro
   lo spazio pieno. Il contenuto dell'iframe resta di Google. */
.cnt_btn_google [id^="ft-pren-google-btn-slot"] {
    display: flex !important;
    justify-content: center;
    width: 100%;
}
.cnt_btn_google [id^="ft-pren-google-btn-slot"] > div {
    margin: 0 auto !important;
}
.cnt_btn_google [id^="ft-pren-google-btn-slot"] iframe {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Modalità di pagamento accanto al prezzo, es. "(pagamento in sede)" */
.ft-pren-prezzo-mod {
    font-size: 12px;
    color: var(--ft-pren-muted);
}

/* Servizi non prenotabili online: avviso in sovraimpressione sul calendario */
.ft-pren-calendar { position: relative; }
.ft-pren-cal-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: inherit;
}
.ft-pren-cal-overlay-box {
    max-width: 360px;
    padding: 20px 24px;
    background: var(--ft-pren-white);
    border: 1px solid var(--ft-pren-border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ft-pren-black);
}
.ft-pren-cal-overlay-box p { margin: 0 0 8px; padding: 0; }
.ft-pren-cal-overlay-box p:last-child { margin-bottom: 0; }
.ft-pren-cal-overlay-box a {
    color: var(--ft-pren-primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ft-pren-cal-overlay-box a:hover { text-decoration: underline; }
/* Pulsante (es. "Prenota" per le giornate con link esterno): testo bianco */
.ft-pren-cal-overlay-box a.ft-pren-btn,
.ft-pren-cal-overlay-box a.ft-pren-btn:hover {
    display: inline-block;
    width: auto;
    color: #fff;
    text-decoration: none;
    padding: 12px 32px;
    margin-top: 4px;
}

/* Consensi privacy: testo su più righe allineato accanto alla casella */
/* Casella centrata sulla prima riga del testo: riga da 24px (16px x 1.5),
   casella da 16px -> 4px sopra. Dimensioni fissate per non dipendere dal tema. */
.ft-pren-auth-checkbox { line-height: 1.5; }
.ft-pren-auth-checkbox > span { flex: 1 1 auto; min-width: 0; }
.ft-pren .ft-pren-auth-checkbox > input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 4px 0 0;
}
.ft-pren-auth-checkbox a { color: var(--ft-pren-primary); text-decoration: underline; }
/* Tutti i campi dei form di accesso/registrazione/profilo: angoli da 8px
   (!important perché alcuni temi forzano il proprio border-radius sugli input) */
.ft-pren .ft-pren-auth-label input:not(#ft-pren-auth-email):not(#ft-pren-regstart-email) {
    border-radius: 8px !important;
}

/* Titolo e testo sopra il calendario generale (solo modalità ricerca) */
.ft-pren-search-intro {
    margin: 40px auto 40px;
    text-align: center;
}
.ft-pren-search-intro h3 {
    margin: 0 0 16px;
    font-size: 35px;
    line-height: 42px;
    color: var(--ft-pren-black);
}
.ft-pren-search-intro p {
    margin: 0;
    padding: 0;
}
@media (max-width: 860px) {
    .ft-pren-search-intro br { display: none; }
}
@media (max-width: 480px) {
    .ft-pren-search-intro { margin-bottom: 28px; }
    .ft-pren-search-intro h3 { font-size: 28px; line-height: 34px; }
}


/* Riepilogo prima della conferma (step "success" del box di autenticazione) */
.ft-pren-recap-intro {
    margin: -18px 0 20px;
    padding: 0;
    text-align: center;
    color: var(--ft-pren-muted);
}
.ft-pren-recap-list {
    margin: 0 auto 24px;
    padding: 6px 20px;
    border: 1px solid var(--ft-pren-border);
    border-radius: 12px;
    background: var(--ft-pren-bg-soft);
}
.ft-pren-recap-list > div {
    /* Etichette in una colonna di larghezza fissa, valori allineati a sinistra subito dopo */
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--ft-pren-border);
}
.ft-pren-recap-list > div:last-child { border-bottom: 0; }
.ft-pren-recap-list dt {
    margin: 0;
    color: var(--ft-pren-muted);
    font-weight: 400;
}
.ft-pren-recap-list dd {
    margin: 0;
    font-weight: 600;
    text-align: left;
}
.ft-pren-recap-label {
    max-width: 100%;
    margin: 0 auto 10px;
    padding: 0;
    font-weight: 600;
}
#ft-pren-payment-choice {
    max-width: 560px;
}
.ft-pren-recap-actions {
    margin-top: 24px;
    text-align: center;
}
@media (max-width: 480px) {
    .ft-pren-recap-list > div { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
}

/* Sconto: prezzo pieno barrato in grigio, prezzo scontato in nero */
.ft-pren-prezzo-pieno {
    color: #8a9494;
    font-weight: 400;
    text-decoration: line-through;
}
.ft-pren-prezzo-scontato {
    color: #000;
}

/* Condizioni Generali (pagamento online) nel riepilogo */
.ft-pren-condizioni {
    max-width: 100%;
    margin: 20px auto 0;
}
.ft-pren-condizioni .ft-pren-auth-checkbox { font-size: 14px; margin-bottom: 12px; }
.ft-pren-condizioni a {font-size: 14px;}

/* Nota "* campi obbligatori" */
.ft-pren-consenso-bloccato { cursor: default; }
.ft-pren .ft-pren-consenso-bloccato > input[type="checkbox"] { cursor: not-allowed; opacity: .6; }
.ft-pren-obbligatori { margin: 0 0 16px; padding: 0; font-size: 12px; color: var(--ft-pren-muted); }
/* Asterisco dei campi obbligatori in rosso */
.ft-pren-req { color: #d63638; font-weight: 700; }

/* Popup priorità di prenotazione (torna indietro / inattività) */
.ft-pren-modal[hidden] { display: none !important; }
.ft-pren-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ft-pren-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.ft-pren-modal-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 28px 28px 22px;
    background: var(--ft-pren-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    text-align: center;
}
.ft-pren-modal-box h4 { margin: 0 0 10px; font-size: 22px; color: var(--ft-pren-black); }
.ft-pren-modal-text { margin: 0 0 22px; padding: 0; color: var(--ft-pren-muted); line-height: 1.5; }
.ft-pren-modal-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ft-pren-modal .ft-pren-modal-ok { min-width: 180px; padding-left: 40px; padding-right: 40px; }

/* Accesso / registrazione: avviso (es. "non risulti ancora registrato") e
   raccomandazione sul codice */
.ft-pren-auth-step h4 ~ .ft-pren-auth-notice {
    margin: -6px 0 6px;
    padding: 0;
    font-weight: 700;
    text-align: center;
}
.ft-pren-auth-notice + .ft-pren-auth-hint { margin-top: 0; }
.ft-pren-auth-otp-warn {
    margin: -8px 0 16px;
    padding: 0;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    color: var(--ft-pren-black);
}
/* Email nel titolo del passo codice: va a capo se lunga */
#ft-pren-auth-otp-email { word-break: break-word; }
/* Accesso: "oppure" più stretto e centrato; "Non hai ancora un account?" in fondo */
.ft-pren-auth-divider { max-width: 360px; margin-left: auto; margin-right: auto; }
.ft-pren-auth-signup-bottom { margin-top: 24px; }
/* Senza "Continua come ospite" il bottone Google è da solo: contenitore a
   tutta larghezza, bottone centrato (accesso e registrazione) */
.cnt_btn_google { width: 100%; }

/* Errori sui campi (prenotazione): bordo rosso + messaggio sotto */
.ft-pren .ft-pren-field-invalid,
.ft-pren .ft-pren-field-invalid:focus { border-color: #d63638 !important; box-shadow: 0 0 0 1px #d63638 !important; }
.ft-pren input[type="checkbox"].ft-pren-field-invalid { outline: 2px solid #d63638; outline-offset: 1px; box-shadow: none !important; }
.ft-pren .ft-pren-payment-choice.ft-pren-field-invalid { border-color: transparent !important; box-shadow: none !important; }
.ft-pren .ft-pren-payment-choice.ft-pren-field-invalid .ft-pren-payment-option { border-color: #d63638; box-shadow: 0 0 0 1px #d63638; }
.ft-pren-field-error { color: #d63638; font-size: 13px; line-height: 1.4; margin: 6px 2px 10px; text-align: left; }

/* Profilo: box disiscrizione in fondo */
.ft-pren-profilo-disiscrizione {
    margin-top: 32px;
    padding: 14px 18px;
    border: 1px solid var(--ft-pren-border);
    border-radius: 10px;
    background: var(--ft-pren-bg-soft);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ft-pren-muted);
}
.ft-pren-profilo-disiscrizione a { color: var(--ft-pren-primary); font-weight: 600; font-size: 14px; }

/* Caricamento di date (calendario) e orari */
.ft-pren-cal-loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: inherit;
    text-align: center;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--ft-pren-muted);
}
.ft-pren-slots-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 0;
    font-size: 0.92em;
    color: var(--ft-pren-muted);
}
.ft-pren-spinner {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 3px solid var(--ft-pren-border);
    border-top-color: var(--ft-pren-primary);
    border-radius: 50%;
    animation: ft-pren-spin 0.8s linear infinite;
}
@keyframes ft-pren-spin { to { transform: rotate(360deg); } }