/* 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 */
body:has(#login-form) { background-color: #1a1a1a !important; }
body:has(#login-form)::before {
    content: ""; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
    background: url(/assets/nsc/sfondo-salone.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%; }
}