/* Stile Non Solo Capelli sopra Easy!Appointments */
:root { --nsc-red: #DE231C; --nsc-black: #0d0d0d; --nsc-grey: #f4f4f4; --nsc-radius: 18px; }
body, .btn, .form-control, .form-select, input, select, textarea, label, .badge { font-family: 'Montserrat', sans-serif !important; }
body { background: var(--nsc-grey) !important; background-image: none !important; color: #222; }

/* cornice */
#book-appointment-wizard { border-radius: var(--nsc-radius); box-shadow: 0 20px 60px rgba(0,0,0,.12) !important; }
#book-appointment-wizard .wizard-frame { padding: 2rem 2.5rem !important; }

/* barra nera con logo */
#book-appointment-wizard #header { background: var(--nsc-black) !important; border: 0 !important; padding: 1.25rem 2rem !important; gap: 1rem; }
#book-appointment-wizard #company-logo { max-height: 46px !important; margin: 0 !important; }
#book-appointment-wizard #company-name { display: flex !important; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 1rem !important; margin: 0 !important; }
#book-appointment-wizard #company-name > span:first-of-type { display: none; } /* il nome è già nel logo */
#book-appointment-wizard #company-name .display-booking-selection { color: #bdbdbd !important; font-size: .8rem; letter-spacing: .03em; }

/* passi */
#book-appointment-wizard #steps { margin: 0 !important; display: flex !important; flex-wrap: nowrap; flex-shrink: 0; }
#book-appointment-wizard .book-step { float: none !important; display: inline-block !important; text-align: center; }
#book-appointment-wizard #service-description:empty { display: none !important; }
#book-appointment-wizard #steps .book-step { width: 34px !important; height: 34px !important; line-height: 34px; padding: 0 !important;
    margin: 0 4px !important; border-radius: 50% !important; background: #2a2a2a !important; transition: background .2s; }
#book-appointment-wizard #steps .book-step strong { color: #9a9a9a !important; font-weight: 600; font-size: .85rem !important; }
#book-appointment-wizard #steps .book-step.active-step { background: var(--nsc-red) !important; }
#book-appointment-wizard #steps .book-step.active-step strong { color: #fff !important; }

/* titoli */
#book-appointment-wizard .frame-title { font-family: 'Great Vibes', cursive !important; color: var(--nsc-red) !important;
    font-size: 2.6rem; font-weight: 400 !important; margin: .5rem 0 1.75rem !important; }

/* campi */
#book-appointment-wizard .form-control, #book-appointment-wizard .form-select {
    border-radius: 12px; border: 1px solid #e2e2e2; padding: .8rem 1rem; font-size: 16px; background-color: #fafafa; }
#book-appointment-wizard .form-control:focus, #book-appointment-wizard .form-select:focus {
    border-color: var(--nsc-black); box-shadow: 0 0 0 3px rgba(0,0,0,.08); background-color: #fff; }
#book-appointment-wizard label { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #555; }
#book-appointment-wizard #service-description { border: 0 !important; background: var(--nsc-grey); border-radius: 12px; padding: 1rem !important; }

/* pulsanti */
#book-appointment-wizard .btn { border-radius: 999px !important; padding: .7rem 1.6rem; font-weight: 600; letter-spacing: .02em; }
#book-appointment-wizard .button-next, #book-appointment-wizard #book-appointment-submit {
    background: var(--nsc-red) !important; border-color: var(--nsc-red) !important; color: #fff !important; }
#book-appointment-wizard .button-next:hover, #book-appointment-wizard #book-appointment-submit:hover { background: #b81b15 !important; }
#book-appointment-wizard .button-back { background: transparent !important; color: #333 !important; border: 1px solid #ccc !important; }

/* calendario e orari */
#book-appointment-wizard .flatpickr-calendar { box-shadow: none !important; border: 1px solid #eee; border-radius: 14px; }
#book-appointment-wizard .flatpickr-day.selected { background: var(--nsc-red) !important; border-color: var(--nsc-red) !important; }
/* orari: scuri, in grassetto, pulsanti comodi da toccare; quello scelto nel rosso del salone */
#book-appointment-wizard #available-hours .available-hour {
    border-radius: 12px !important; border: 1.5px solid #d4d4d4 !important; background: #fff;
    color: #161616 !important; font-weight: 600; font-size: 16px; letter-spacing: .02em;
    font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s, background .15s, transform .1s; }
#book-appointment-wizard #available-hours .available-hour:hover { border-color: var(--nsc-red) !important; color: var(--nsc-red) !important; }
#book-appointment-wizard #available-hours .available-hour:active { transform: scale(.97); }
#book-appointment-wizard #available-hours .selected-hour, #book-appointment-wizard #available-hours .selected-hour:hover {
    background: var(--nsc-red) !important; border-color: var(--nsc-red) !important; color: #fff !important;
    box-shadow: 0 4px 14px rgba(222,35,28,.3); }
/* titoletti Mattina / Pomeriggio / Sera (inseriti dallo script in company_color_style.php) */
#book-appointment-wizard #available-hours .nsc-slot-group {
    grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; margin: .7rem 0 .1rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; }
#book-appointment-wizard #available-hours .nsc-slot-group:first-child { margin-top: 0; }
#book-appointment-wizard #available-hours .nsc-slot-group::after { content: ""; flex: 1; height: 1px; background: #ececec; }

/* orari in griglia, senza fuso orario (il salone è solo a Roma) */
#book-appointment-wizard div:has(> #select-timezone) { display: none !important; }
#book-appointment-wizard #available-hours { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px; max-height: none !important; height: auto !important; overflow: visible !important; padding: 2px; }
#book-appointment-wizard #available-hours .available-hour { width: auto !important; margin: 0 !important; padding: .75rem 0 !important; }
#book-appointment-wizard .command-buttons .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
#book-appointment-wizard .command-buttons .btn br { display: none; }

/* piè di pagina */
#frame-footer { background: #fff; color: #999; border-color: #f0f0f0 !important; }
#frame-footer a { color: #777; }
#frame-footer .backend-link { background: var(--nsc-black) !important; border-color: var(--nsc-black) !important; border-radius: 999px; }

/* cellulare */
@media (max-width: 767.98px) {
    #main.container { padding: 0 !important; max-width: 100%; }
    #book-appointment-wizard { border-radius: 0; box-shadow: none !important; min-height: 100vh; }
    #book-appointment-wizard #header { flex-direction: row !important; justify-content: space-between; padding: .9rem 1rem !important;
        position: sticky; top: 0; z-index: 10; }
    #book-appointment-wizard #company-name .display-booking-selection { display: none !important; }
    #book-appointment-wizard #company-logo { max-height: 32px !important; }
    #book-appointment-wizard #steps .book-step { width: 28px !important; height: 28px !important; line-height: 28px; margin: 0 2px !important; }
    #book-appointment-wizard .wizard-frame { padding: 1.25rem 1rem 6rem !important; }
    #book-appointment-wizard .frame-title { font-size: 2.1rem; margin-top: .25rem !important; }
    #book-appointment-wizard .command-buttons { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: .75rem 1rem;
        box-shadow: 0 -6px 20px rgba(0,0,0,.08); display: flex !important; gap: .5rem; z-index: 20; margin: 0 !important; }
    #book-appointment-wizard .command-buttons .btn { flex: 1; margin: 0 !important; min-width: 0 !important; }
    #book-appointment-wizard #available-hours { grid-template-columns: repeat(4, 1fr); }
}

/* ===== sfondo con la foto del salone (login e gestionale) ===== */
/* Solo sulla pagina di login: nel gestionale il calendario deve restare pulito e leggibile */
/* Anche sulla pagina di prenotazione dei clienti (il riquadro bianco resta sopra, leggibile) */
body:has(#login-form), body:has(#book-appointment-wizard) { background-color: #1a1a1a !important; }
body:has(#book-appointment-wizard) #main, body:has(#book-appointment-wizard) .container-fluid { background: transparent !important; }
body:has(#login-form)::before, body:has(#book-appointment-wizard)::before {
    content: ""; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
    background: url(/assets/brand/sfondo.jpg) center / cover no-repeat;
    filter: blur(7px) brightness(.6);
}

/* ===== niente crediti/licenza in fondo alle pagine di uso quotidiano
   (licenza e crediti restano visibili nella pagina "Info" del gestionale) ===== */
#frame-footer .footer-powered-by,      /* pagina di prenotazione */
#message-frame > .mt-2,                /* pagina di conferma */
.nsc-powered,                          /* login */
#footer { display: none !important; }  /* gestionale */
#frame-footer .footer-options { width: 100% !important; text-align: center !important; }

/* ===== login ===== */
.min-vh-mobile.card { border: 0 !important; border-radius: var(--nsc-radius) !important; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.12) !important; }
.nsc-login-brand { background: var(--nsc-black); margin: -3rem -3rem 2rem; padding: 1.75rem 2rem; text-align: center; }
.nsc-login-brand img { height: 52px; max-width: 100%; }
.min-vh-mobile.card h4 { font-family: 'Great Vibes', cursive !important; color: var(--nsc-red) !important; font-size: 2.4rem; font-weight: 400 !important; }
#login-form .form-control { border-radius: 0 12px 12px 0; padding: .75rem 1rem; font-size: 16px; }
#login-form .input-group-text { border-radius: 12px 0 0 12px; }
#login-form .btn-primary, #login-form #login { background: var(--nsc-red) !important; border-color: var(--nsc-red) !important; border-radius: 999px; padding: .75rem; font-weight: 600; }
.nsc-powered { background: #fff !important; color: #aaa; font-size: .85rem; border-top-color: #f0f0f0 !important; }
.nsc-powered a { color: #999; }
@media (max-width: 575.98px) {
    .min-vh-mobile.card { border-radius: 0 !important; box-shadow: none !important; }
    .min-vh-mobile.card .card-body { padding: 2rem 1.25rem !important; }
    .nsc-login-brand { margin: -2rem -1.25rem 1.5rem; }
}

/* ===== gestionale ===== */
nav#header.navbar { background: var(--nsc-black) !important; border: 0 !important; }
nav#header .navbar-brand { padding: .55rem 1rem !important; }
.nsc-backend-logo { height: 34px; width: auto; }
nav#header .nav-item .nav-link { color: #cfcfcf !important; font-weight: 500 !important; border-bottom: 3px solid transparent; }
nav#header .nav-item.active { background: transparent !important; }
nav#header .nav-item.active .nav-link, nav#header .nav-item .nav-link:hover { color: #fff !important; border-bottom-color: var(--nsc-red); background: transparent !important; }
.backend-page .btn { border-radius: 10px; }
.backend-page .btn-primary { background: var(--nsc-red); border-color: var(--nsc-red); }
#calendar-page .fc-event, #calendar .fc-event { border-radius: 8px !important; border: 0 !important; padding: 2px 4px; }
#calendar .fc-day-today, #calendar .fc-col-header-cell.fc-day-today { background: rgba(222,35,28,.05) !important; }
#calendar .nsc-operator { font-weight: 800; }
#footer { background: #fff !important; color: #aaa; }
@media (max-width: 767.98px) {
    nav#header .navbar-collapse { background: var(--nsc-black); }
    nav#header .nav-item { text-align: left !important; }
}

/* pagina di conferma */
#message-frame { border-radius: var(--nsc-radius) !important; box-shadow: 0 20px 60px rgba(0,0,0,.12) !important; overflow: hidden; padding: 0 !important; }
.nsc-confirm { padding: 0 0 2rem; }
.nsc-confirm-logo { display: block; width: 100%; height: 86px; background: var(--nsc-black); padding: 1.25rem 2rem; object-fit: contain; }
.nsc-check { width: 72px; height: 72px; border-radius: 50%; background: rgba(222,35,28,.1); color: var(--nsc-red); display: flex;
    align-items: center; justify-content: center; font-size: 1.9rem; margin: 2rem auto 1rem; }
.nsc-title { font-family: 'Great Vibes', cursive; color: var(--nsc-red); font-size: 2.6rem; font-weight: 400; margin-bottom: 1.5rem; }
.nsc-summary { margin: 0 auto 1.5rem; max-width: 380px; background: var(--nsc-grey); border-radius: 14px; padding: .5rem 1.25rem; text-align: left; }
.nsc-summary div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #e6e6e6; }
.nsc-summary div:last-child { border-bottom: 0; }
.nsc-summary span { color: #888; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.nsc-summary strong { text-align: right; font-weight: 600; }
.nsc-note { color: #555; padding: 0 1.5rem; }
.nsc-note a { color: var(--nsc-red); font-weight: 600; text-decoration: none; }
.nsc-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; padding: .5rem 1.5rem 0; }
.nsc-actions .btn { border-radius: 999px; padding: .7rem 1.6rem; font-weight: 600; }
.nsc-actions .btn-primary { background: var(--nsc-red); border-color: var(--nsc-red); }
@media (max-width: 767.98px) {
    #main.container { padding: 0 !important; max-width: 100%; }
    #message-frame { border-radius: 0 !important; box-shadow: none !important; min-height: 100vh; }
    .nsc-actions .btn { width: 100%; }
}

/* Foto mandata dal cliente (anteprima nell'agenda e nella scheda appuntamento) */
.nsc-foto-box{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.nsc-foto{display:block;width:150px;height:150px;object-fit:cover;border-radius:10px;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.nsc-foto:hover{opacity:.9}

/* ===== Prenotazione da telefono: riquadro un po' più stretto, con la foto del salone ai lati ===== */
@media (max-width: 767.98px) {
    body:has(#book-appointment-wizard) #main > .row,
    body:has(#book-appointment-wizard) .wrapper.row { margin-left: 0 !important; margin-right: 0 !important; }
    #book-appointment-wizard {
        flex: 0 0 calc(100% - 28px) !important; width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important; min-width: 0 !important;
        margin: 12px auto 24px !important;
        border-radius: 22px !important; overflow: hidden;
        box-shadow: 0 24px 50px -18px rgba(0,0,0,.7) !important;
    }
    #book-appointment-wizard .wizard-frame { padding-left: 22px !important; padding-right: 22px !important; }
    #book-appointment-wizard #header { padding-left: 18px !important; padding-right: 18px !important; gap: 10px; }
    #book-appointment-wizard #header img { max-height: 30px !important; max-width: 118px !important; width: auto !important; height: auto !important; }
    #book-appointment-wizard #steps .book-step { width: 30px !important; height: 30px !important; margin: 0 2px !important; }
    #book-appointment-wizard #company-name { flex: 0 0 auto !important; width: auto !important; }
    #book-appointment-wizard #steps { margin-left: auto !important; flex: 0 0 auto; width: auto !important; }
    #book-appointment-wizard .wizard-frame .form-control,
    #book-appointment-wizard .wizard-frame .form-select { font-size: 15.5px; }
}

/* ===== Agenda: legenda dei colori per operatore ===== */
.nsc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 10px; font-size: 13.5px; font-weight: 600; color: #444; }
.nsc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nsc-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
#calendar .fc-event, #calendar .fc-event .fc-event-main { color: #fff !important; }

/* ===== Scheda operatore: tasti ruolo (Parrucchiere / Estetista) ===== */
.nsc-role-btn.active { background: var(--nsc-red, #d9363e) !important; border-color: var(--nsc-red, #d9363e) !important; color: #fff !important; }

.nsc-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.nsc-roles > span { font-weight: 600; font-size: 14px; }
.nsc-roles .btn { border-radius: 999px !important; padding: 4px 14px; font-weight: 600; }
.nsc-roles small { color: #888; font-size: 12.5px; }

/* ===== Scheda appuntamento: suggerimento cliente dal telefono ===== */
.nsc-phone-hint { margin-top: 8px; font-size: 13.5px; border-radius: 10px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.nsc-phone-hint[hidden] { display: none; }
.nsc-phone-hint.found { background: #fff6e8; border: 1px solid #f5dcb0; font-weight: 600; }
.nsc-phone-hint.new { background: #eef9f3; border: 1px solid #c9ecd8; color: #2a6b47; }
.nsc-phone-hint.ok { background: #e8f8f5; border: 1px solid #c6ebe6; color: #0a7f85; font-weight: 600; }
.nsc-phone-hint .btn { border-radius: 999px !important; padding: 2px 12px; }

/* ===== Agenda: riquadro appuntamento (card) — operatore e servizio in evidenza, effetto vetro ===== */
#calendar .fc-timegrid-event { border-radius: 10px !important; border: 1px solid rgba(255,255,255,.4) !important;
    -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); overflow: hidden; }
#calendar .fc-timegrid-event .fc-event-main { padding: 0 !important; height: 100%; }
.nsc-card { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 2px;
    padding: 4px 7px 5px; color: #fff; line-height: 1.15; overflow: hidden; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
.nsc-card-head { display: flex; flex-direction: column; min-width: 0; }
.nsc-card-op { font-weight: 800; letter-spacing: .01em; text-transform: uppercase; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsc-card-svc { font-weight: 600; font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nsc-card-foot { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-size: 11px; opacity: .9; min-width: 0; }
.nsc-card-time { font-weight: 700; white-space: nowrap; }
.nsc-card-cli { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.nsc-card-cli::before { content: "👤 "; opacity: .85; }
/* poco spazio: una riga sola "OPERATORE · servizio" */
.nsc-card.nsc-s { flex-direction: row; align-items: center; padding: 1px 6px; }
.nsc-card.nsc-s .nsc-card-head { flex-direction: row; gap: 5px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.nsc-card.nsc-s .nsc-card-op { font-size: 11.5px; }
.nsc-card.nsc-s .nsc-card-svc { font-size: 11px; display: block; white-space: nowrap; text-overflow: ellipsis; }
.nsc-card.nsc-s .nsc-card-svc::before { content: "· "; }
.nsc-card.nsc-s .nsc-card-foot { display: none; }
/* medio: operatore + servizio su 1 riga, sotto orario */
.nsc-card.nsc-m { justify-content: center; }
.nsc-card.nsc-m .nsc-card-svc { -webkit-line-clamp: 1; }
.nsc-card.nsc-m .nsc-card-foot { display: none; }
/* grande e molto grande: scritte più grandi */
.nsc-card.nsc-l .nsc-card-op { font-size: 14.5px; }
.nsc-card.nsc-l .nsc-card-svc { font-size: 13.5px; }
.nsc-card.nsc-l .nsc-card-foot { font-size: 12px; }
.nsc-card.nsc-xl { padding: 8px 10px; }
.nsc-card.nsc-xl .nsc-card-op { font-size: 17px; }
.nsc-card.nsc-xl .nsc-card-svc { font-size: 15px; -webkit-line-clamp: 3; margin-top: 2px; }
.nsc-card.nsc-xl .nsc-card-foot { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ===== Versione ristorante ===== */
.pv-ristorante .pv-hide-provider { display: none !important; }   /* i tavoli li sceglie il sistema */
.pv-ristorante .nsc-card-op { text-transform: none; }            /* "4 persone" */