/* =========================================================
 * Pagina Appuntamenti — restyle dark editorial (coerente con la home).
 * Palette: ink #1A1A1A, crema #FAF7F2, oro #E8B84D, accento #A8442D.
 * ========================================================= */
html, body { background: #1A1A1A !important; }
#appuntamenti{
	margin-top: 30px;
}

.appt { padding: clamp(48px, 8vw, 96px) 0 96px; background: #1A1A1A; color: #FAF7F2; }
.appt .wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 64px); }

.appt-head { margin-bottom: clamp(32px, 5vw, 56px); }
.appt-shop-name { font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; margin: 0 0 10px; color: #FAF7F2; }
.appt-shop-addr { font-family: "Inter", sans-serif; font-size: .95rem; letter-spacing: .02em; color: rgba(250,247,242,.55); margin: 0; }

.appt-title { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #E8B84D; margin: 0 0 24px; }

/* Pulsante flottante "La tua prenotazione" (mostrato dal JS se c'è una prenotazione attiva) */
.appt-mybooking { position: fixed; top: 16px; right: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #E8B84D; color: #1A1A1A; border-radius: 999px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.appt-mybooking:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.appt-mybooking:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }
.appt-mybooking[hidden] { display: none; }
.appt-mybooking i { font-size: 15px; }
@media (max-width: 560px) { .appt-mybooking { top: 12px; right: 12px; padding: 9px 14px; font-size: 12px; } }

/* Tab macro-categoria — slider orizzontale trascinabile (grab) */
.appt-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 18px 0; border-radius: 6px; margin-bottom: clamp(32px, 5vw, 48px); cursor: grab; scroll-snap-type: x proximity; scroll-padding-inline: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.appt-tabs::-webkit-scrollbar { display: none; }
/* Spazio ai bordi dello scroller via margini (il padding laterale verrebbe ignorato) */
.appt-tab:first-child { margin-left: 18px; }
.appt-tab:last-child { margin-right: 18px; }
.appt-tabs.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.appt-tabs.is-grabbing .appt-tab { pointer-events: none; }
.appt-tab { flex: 0 0 130px; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(250,247,242,.14); border-radius: 4px; cursor: pointer; scroll-snap-align: start; transition: border-color .2s ease, background .2s ease; }
.appt-tab:hover { border-color: rgba(250,247,242,.4); }
.appt-tab.is-active { border-color: #E8B84D; background: rgba(232,184,77,.08); }
.appt-tab-label { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #FAF7F2; }
.appt-tab-ico { width: 30px; height: 30px; color: rgba(250,247,242,.55); transition: color .2s ease; }
.appt-tab:hover .appt-tab-ico { color: rgba(250,247,242,.85); }
.appt-tab.is-active .appt-tab-ico { color: #E8B84D; }

/* Corpo */
.appt-body { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 5vw, 56px); }

/* Sidebar categorie */
.appt-cats { display: flex; flex-direction: column; }
.appt-cat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-align: left; padding: 16px 18px; background: transparent; border: 0; border-left: 2px solid transparent; border-bottom: 1px solid rgba(250,247,242,.1); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.appt-cat.is-hidden { display: none; }
.appt-cat-name { font-family: "Inter", sans-serif; font-weight: 400; font-size: 1.05rem; color: rgba(250,247,242,.72); transition: color .2s ease; }
.appt-cat-count { font-family: "Inter", sans-serif; font-size: 16px; color: rgba(250,247,242,.35); }
.appt-cat:hover { background: rgba(255,255,255,.03); }
.appt-cat:hover .appt-cat-name { color: #FAF7F2; }
.appt-cat.is-active { background: rgba(255,255,255,.05); border-left-color: #E8B84D; }
.appt-cat.is-active .appt-cat-name { color: #FAF7F2; }

/* Elenco servizi */
.appt-group { display: none; }
.appt-group.is-active { display: block; }

/* Header accordion: nascosto su desktop (la sidebar gestisce la selezione) */
.appt-group-head { display: none; }
.appt-chevron { width: 9px; height: 9px; margin-left: auto; align-self: center; border-right: 2px solid rgba(250,247,242,.55); border-bottom: 2px solid rgba(250,247,242,.55); transform: rotate(45deg); transition: transform .2s ease; }

.appt-service { position: relative; display: flex; justify-content: space-between; align-items: stretch; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(250,247,242,.12); }
.appt-service.is-featured { padding-top: 46px; }
/* Niente bordo TRA due bestseller consecutivi: un bestseller seguito (+) da un
   altro bestseller perde il border-bottom. L'ultimo bestseller della sequenza
   (seguito da un servizio normale o da fine lista) tiene il suo bordo. */
.appt-service.is-featured:has(+ .appt-service.is-featured) { border-bottom: 0; }
.appt-service-main { display: flex; flex-direction: column; min-width: 0; }
/* Badge "Più richiesto": ancorato in alto a sinistra della card */
.appt-service-badge { position: absolute; top: 0px; left: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(232,184,77,.14); border: 1px solid rgba(232,184,77,.5); color: #E8B84D; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* .appt-service-badge::before { content: "\2605"; font-size: 11px; line-height: 1; } */
.appt-service-name { font-family: "Inter", sans-serif; font-weight: 500; font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px; color: #FAF7F2; }
.appt-service-meta { display: flex; flex-direction: column; gap: 12px; margin: 0; font-family: "Inter", sans-serif; color: rgba(250,247,242,.5); font-size: .85rem; }
/* "Dettagli del servizio": link cliccabile, spinto in fondo alla card */
.appt-service-details { margin-top: auto; padding: 8px 0 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: "Inter", sans-serif; font-size: .85rem; color: rgba(250,247,242,.5); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.appt-service-details:hover { color: #E8B84D; }
/* Desktop: bottone sopra, prezzo sotto (column-reverse). Mobile: opposto. */
.appt-service-action { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 22px; white-space: nowrap; }
.appt-service-price { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1rem; color: #FAF7F2; }
.appt-select { display: inline-block; padding: 11px 24px; border: 1px solid rgba(250,247,242,.4); color: #FAF7F2; border-radius: 2px; text-decoration: none; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.appt-select:hover { background: #E8B84D; border-color: #E8B84D; color: #1A1A1A; }

/* Pulsante servizio selezionato */
.appt-select.is-selected { border-color: rgba(91,191,138,.6); background: rgba(91,191,138,.1); color: #5BBF8A; }
.appt-select.is-selected:hover { background: rgba(91,191,138,.18); border-color: rgba(91,191,138,.6); color: #5BBF8A; }
/* .appt-select.is-selected .appt-select-label::before { content: "\2713\00a0"; } */

/* Spunta su categoria (sidebar + accordion) — nascosta finché non c'è selezione */
.appt-cat .appt-cat-name { margin-right: auto; }
.appt-cat-check { display: none; width: 16px; height: 16px; border-radius: 50%; background: #5BBF8A; color: #1A1A1A; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.appt-cat-check::before { content: "\2713"; }
.appt-cat.has-selection .appt-cat-check,
.appt-group.has-selection .appt-cat-check { display: inline-block; }

/* Spunta sul tab macro — badge in alto a destra */
.appt-tab { position: relative; }
.appt-tab-check { display: none; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: #5BBF8A; color: #1A1A1A; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.appt-tab-check::before { content: "\2713"; }
.appt-tab.has-selection .appt-tab-check { display: block; }

/* Barra selezione fissa in basso */
.appt-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #141414; border-top: 1px solid rgba(250,247,242,.14); }
.appt-bar[hidden] { display: none; }
.appt-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.appt-bar-info { display: flex; flex-direction: column; line-height: 1.35; }
.appt-bar-count { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #E8B84D; }
.appt-bar-total { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.1rem; color: #FAF7F2; }
.appt-bar-priceline { display: flex; align-items: baseline; gap: 8px; }
.appt-bar-dur { font-family: "Inter", sans-serif; font-size: .9rem; color: rgba(250,247,242,.55); }
.appt-bar-cta { display: inline-block; padding: 14px 32px; background: #E8B84D; color: #1A1A1A; border-radius: 2px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .2s ease; }
.appt-bar-cta:hover { background: #f0c869; }
body.appt-has-bar { padding-bottom: 84px; }

/* ——— Bottom sheet "Seleziona l'orario" ——— */
.appt-sheet { position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility 0s linear .35s; }
.appt-sheet.is-open { visibility: visible; transition: visibility 0s linear 0s; }
.appt-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); opacity: 0; transition: opacity .3s ease; }
.appt-sheet.is-open .appt-sheet-backdrop { opacity: 1; }
.appt-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; height: 90vh; background: #1A1A1A;  transform: translateY(100%); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.appt-sheet.is-open .appt-sheet-panel { transform: translateY(0); }
@media (min-width: 720px) {
	.appt-sheet-panel { left: 50%; width: 480px; max-width: 92vw; transform: translate(-50%, 100%); border-radius: 16px; bottom: 24px; }
	.appt-sheet.is-open .appt-sheet-panel { transform: translate(-50%, 0); }
}

.appt-sheet-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid rgba(250,247,242,.1); flex: 0 0 auto; }
.appt-sheet-back { font-size: 16px; line-height: 1; color: #FAF7F2; }
.appt-sheet-head h2 { margin: 0; font-family: "Inter", sans-serif; font-size: 1.3rem; font-weight: 700; color: #FAF7F2; }
.appt-sheet-body { padding: 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* Dropdown collaboratore */
.appt-staff { position: relative; margin-bottom: 28px; }
.appt-staff-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(250,247,242,.22); border-radius: 4px; color: #FAF7F2; font-family: "Inter", sans-serif; font-size: .95rem; }
.appt-staff-current { flex: 1; text-align: left; }
.appt-staff-arrow { width: 9px; height: 9px; border-right: 2px solid rgba(250,247,242,.6); border-bottom: 2px solid rgba(250,247,242,.6); transform: rotate(45deg); transition: transform .2s ease; }
.appt-staff.is-open .appt-staff-arrow { transform: rotate(225deg); }
.appt-staff-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #242424; border: 1px solid rgba(250,247,242,.16); border-radius: 4px; z-index: 5; }
.appt-staff-menu[hidden] { display: none; }
.appt-staff-menu li { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 3px; cursor: pointer; color: rgba(250,247,242,.82); font-family: "Inter", sans-serif; font-size: .95rem; }
.appt-staff-menu li:hover { background: rgba(255,255,255,.05); }
.appt-staff-menu li.is-selected { color: #FAF7F2; }
.appt-staff-menu li.is-selected::after { content: "\2713"; color: #5BBF8A; font-weight: 700; }

/* Mese + navigazione */
.appt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.appt-cal-month { font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.1rem; color: #FAF7F2; text-transform: capitalize; }
.appt-cal-nav { display: flex; gap: 8px; }
.appt-cal-nav button { width: 36px; height: 36px; border: 1px solid rgba(250,247,242,.2); border-radius: 50%; color: #FAF7F2; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.appt-cal-nav button:hover { border-color: #E8B84D; }

/* Striscia giorni */
.appt-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(250,247,242,.1); scrollbar-width: none; }
.appt-days::-webkit-scrollbar { display: none; }
.appt-day { flex: 0 0 auto; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 8px; color: rgba(250,247,242,.7); transition: background .2s ease, color .2s ease; }
.appt-day-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(250,247,242,.45); }
.appt-day-num { font-size: 1.05rem; font-weight: 600; }
.appt-day:hover { background: rgba(255,255,255,.05); }
.appt-day.is-active { background: #E8B84D; color: #1A1A1A; }
.appt-day.is-active .appt-day-dow { color: rgba(26,26,26,.7); }
.appt-day.is-disabled { color: rgba(250,247,242,.25); pointer-events: none; }
.appt-day.is-disabled .appt-day-num { text-decoration: line-through; }

/* Banner "questo mese non accettiamo prenotazioni" — mostrato dal JS solo nei mesi con ferie */
.appt-days-banner { margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; background: rgba(168,68,45,.14); border: 1px solid rgba(168,68,45,.42); color: #FAF7F2; font-family: "Inter", sans-serif; font-size: .85rem; line-height: 1.4; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.appt-days-banner:hover { background: rgba(168,68,45,.22); border-color: rgba(168,68,45,.6); }
.appt-days-banner strong { color: #E8B84D; }
.appt-days-banner[hidden] { display: none; }
.appt-cal-nav button:disabled { opacity: .3; pointer-events: none; }

/* Orari */
.appt-slots { list-style: none; margin: 0; padding: 0; }
.appt-slot { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 4px; border-bottom: 1px solid rgba(250,247,242,.1); color: #FAF7F2; font-family: "Inter", sans-serif; transition: color .2s ease; }
.appt-slot:hover { color: #E8B84D; }
.appt-slot-time { font-size: 1.05rem; }
.appt-slot-price { color: rgba(250,247,242,.7); }
.appt-slot.is-selected { color: #E8B84D; }
.appt-slot.is-selected .appt-slot-price { color: #E8B84D; }
/* Slot occupato: barrato, non selezionabile */
.appt-slot.is-busy { color: rgba(250,247,242,.32); pointer-events: none; cursor: not-allowed; }
.appt-slot.is-busy:hover { color: rgba(250,247,242,.32); }
.appt-slot.is-busy .appt-slot-time { text-decoration: line-through; }
.appt-slot.is-busy .appt-slot-price { display: none; }
.appt-slot.is-busy::after { content: "Occupato"; font-size: .85rem; color: rgba(250,247,242,.4); }

/* Disponibilità non verificata (errore rete/DB): slot inattivo, niente "libero" ingannevole */
.appt-slot.is-unknown { color: rgba(250,247,242,.3); pointer-events: none; cursor: not-allowed; }
.appt-slot.is-unknown .appt-slot-price { display: none; }
.appt-slot.is-unknown::after { content: "—"; font-size: .85rem; color: rgba(250,247,242,.3); }

/* Pausa pranzo: non prenotabile ma segnalata come info (non come "occupato") */
.appt-slot.is-break { color: rgba(250,247,242,.55); pointer-events: none; cursor: not-allowed; }
.appt-slot.is-break:hover { color: rgba(250,247,242,.55); }
.appt-slot.is-break .appt-slot-price { display: none; }
.appt-slot.is-break::after { content: "Siamo in pausa"; font-size: .85rem; color: #5BBF8A; }
/* Slot "sfora": libero ma il servizio è troppo lungo -> cliccabile per i suggerimenti.
   L'orario resta del colore normale; solo l'etichetta a destra è dorata. */
.appt-slot.is-overflow { cursor: pointer; }
.appt-slot.is-overflow .appt-slot-time { color: #FAF7F2; text-decoration: none; }
.appt-slot.is-overflow:hover .appt-slot-time { color: #FAF7F2; }
.appt-slot.is-overflow .appt-slot-price { color: rgba(232,184,77,.78); font-size: .85rem; }
/* Con "Qualsiasi": solo se il collaboratore di default è occupato, l'etichetta
   a destra indica in giallo chi servirà ("con Romeo"). */
.appt-slot.is-withstaff .appt-slot-price { color: #E8B84D; font-size: .85rem; text-transform: capitalize; }

/* Slot libero (collaboratore di default disponibile): etichetta bianca "Disponibile" */
.appt-slot.is-free .appt-slot-price { color: #FAF7F2; font-size: .85rem; }

/* ——— Popup suggerimento servizi ——— */
.appt-suggest { position: fixed; inset: 0; z-index: 130; visibility: hidden; transition: visibility 0s linear .3s; }
.appt-suggest.is-open { visibility: visible; transition-delay: 0s; }
.appt-suggest-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .3s ease; }
.appt-suggest.is-open .appt-suggest-backdrop { opacity: 1; }
.appt-suggest-panel { position: absolute; left: 50%; bottom: 0; width: 480px; max-width: 100%; transform: translate(-50%, 100%); background: #1A1A1A; border-top: 1px solid rgba(250,247,242,.14); border-radius: 16px 16px 0 0; padding: 22px; transition: transform .32s cubic-bezier(.22,.61,.36,1); }
.appt-suggest.is-open .appt-suggest-panel { transform: translate(-50%, 0); }
@media (min-width: 720px) { .appt-suggest-panel { bottom: 24px; border-radius: 16px; } .appt-suggest.is-open .appt-suggest-panel { transform: translate(-50%, 0); } }
.appt-suggest-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.appt-suggest-head h3 { margin: 0; font-family: "Inter", sans-serif; font-size: 1.15rem; font-weight: 700; color: #FAF7F2; }
.appt-suggest-x { font-size: 18px; color: rgba(250,247,242,.6); }
.appt-suggest-sub { margin: 0 0 16px; font-family: "Inter", sans-serif; font-size: .9rem; color: rgba(250,247,242,.6); }
.appt-suggest-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.appt-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; border-bottom: 1px solid rgba(250,247,242,.1); cursor: pointer; color: #FAF7F2; transition: color .2s ease; }
.appt-suggest-item:hover { color: #E8B84D; }
.appt-suggest-name { font-family: "Inter", sans-serif; font-weight: 500; }
.appt-suggest-meta { font-family: "Inter", sans-serif; font-size: .85rem; color: rgba(250,247,242,.6); white-space: nowrap; }
.appt-suggest-empty { margin: 16px 0 0; font-size: .9rem; color: rgba(250,247,242,.5); }

/* ——— Sheet dettagli servizio ——— */
.appt-detail { z-index: 120; }
.appt-detail .appt-sheet-panel { height: auto; max-height: 85vh; }
.appt-detail-name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.25; margin: 0 0 12px; color: #FAF7F2; }
.appt-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(250,247,242,.1); font-family: "Inter", sans-serif; font-size: .95rem; }
.appt-detail-dur { color: rgba(250,247,242,.6); }
.appt-detail-price { font-weight: 600; color: #E8B84D; }
.appt-detail-desc { font-family: "Inter", sans-serif; font-size: 1rem; line-height: 1.6; color: rgba(250,247,242,.8); margin: 0; }

/* ——— Sheet conferma prenotazione (sopra quello degli orari) ——— */
.appt-book { z-index: 110; }
.appt-book-summary { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(250,247,242,.1); }
.appt-book-hour { font-family: "Inter", sans-serif; font-weight: 700; font-size: 2rem; line-height: 1; color: #FAF7F2; padding-right: 18px; border-right: 2px solid rgba(250,247,242,.2); }
.appt-book-when { display: flex; flex-direction: column; gap: 4px; }
.appt-book-day { font-family: "Inter", sans-serif; font-weight: 600; color: #FAF7F2; }
.appt-book-dur { font-size: .85rem; color: rgba(250,247,242,.55); }
.appt-book-services { padding: 18px 0; }
.appt-book-count { display: block; font-family: "Inter", sans-serif; font-weight: 600; color: #FAF7F2; margin-bottom: 2px; }
.appt-book-sub { font-size: .9rem; color: rgba(250,247,242,.55); }
.appt-book-progress { height: 4px; border-radius: 2px; margin-bottom: 28px; background: linear-gradient(90deg, #E8B84D 0 33%, #E8B84D 33% 66%, #E8B84D 66% 100%); }
.appt-book-form { display: flex; flex-direction: column; gap: 16px; }
.appt-field { display: block; }
.appt-field input { width: 100%; padding: 16px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(250,247,242,.22); border-radius: 4px; color: #FAF7F2; font-family: "Inter", sans-serif; font-size: .95rem; }
.appt-field input::placeholder { color: rgba(250,247,242,.45); }
.appt-field input:focus { outline: none; border-color: #E8B84D; }
.appt-field-err { display: none; margin-top: 6px; font-size: .8rem; color: #e0664f; }
.appt-field.has-error input { border-color: #e0664f; }
.appt-field.has-error .appt-field-err { display: block; }
.appt-book-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid rgba(250,247,242,.12); flex: 0 0 auto; background: none !important;}
.appt-book-pay { display: flex; flex-direction: column; line-height: 1.3; }
.appt-book-pay span { font-size: .8rem; color: rgba(250,247,242,.55); }
.appt-book-pay strong { font-family: "Inter", sans-serif; font-size: 1.1rem; color: #FAF7F2; }
.appt-book-cta { padding: 16px 32px; background: #E8B84D; color: #1A1A1A; border-radius: 2px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease; }
.appt-book-cta:hover { background: #f0c869; }

/* ——— Card di conferma prenotazione (riusa lo slide-up di .appt-sheet) ——— */
/* z-index sopra tutti gli altri sheet (suggest 130, detail 120, book 110). */
.appt-success { z-index: 140; }
.appt-success .appt-sheet-panel { height: auto; max-height: 92vh; }
.appt-success-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 32px; gap: 6px; }

/* Cerchio con spunta (oro), disegnato con animazione all'apertura */
.appt-success-check { display: inline-flex; width: 72px; height: 72px; color: #E8B84D; margin-bottom: 14px; }
.appt-success-check svg { width: 100%; height: 100%; }
.appt-success-check-ring { stroke-dasharray: 151; stroke-dashoffset: 151; }
.appt-success-check-mark { stroke-dasharray: 40; stroke-dashoffset: 40; }
.appt-success.is-open .appt-success-check-ring { animation: apptCheckRing .5s cubic-bezier(.65,0,.45,1) .15s forwards; }
.appt-success.is-open .appt-success-check-mark { animation: apptCheckMark .35s cubic-bezier(.65,0,.45,1) .5s forwards; }
@keyframes apptCheckRing { to { stroke-dashoffset: 0; } }
@keyframes apptCheckMark { to { stroke-dashoffset: 0; } }

.appt-success-title { margin: 0; font-family: "Inter", sans-serif; font-size: 1.45rem; font-weight: 700; color: #FAF7F2; }
.appt-success-sub { margin: 0 0 22px; font-family: "Inter", sans-serif; font-size: .9rem; color: rgba(250,247,242,.6); max-width: 320px; }

/* Riepilogo in card scura, stesso linguaggio dei campi form */
.appt-success-card { width: 100%; max-width: 360px; background: rgba(255,255,255,.04); border: 1px solid rgba(250,247,242,.14); border-radius: 8px; padding: 6px 18px; margin-bottom: 26px; }
.appt-success-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(250,247,242,.08); }
.appt-success-row:last-child { border-bottom: none; }
.appt-success-row span { font-family: "Inter", sans-serif; font-size: .82rem; color: rgba(250,247,242,.55); }
.appt-success-row strong { font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 600; color: #FAF7F2; text-align: right; }
.appt-success-done { width: 100%; max-width: 360px; text-align: center; }

@media (max-width: 860px) {
	/* Tab più compatti su mobile (lo slider è già attivo dal CSS base) */
	.appt-tabs { gap: 12px; padding: 16px 0; scroll-padding-inline: 16px; }
	.appt-tab { flex: 0 0 110px; min-height: 88px; }
	.appt-tab:first-child { margin-left: 0px; }
	.appt-tab:last-child { margin-right: 16px; }
	.appt-select:hover {
		background: none;
		border-color: rgba(250, 247, 242, .4);
		color: white;
	}

	/* Layout a colonna unica */
	.appt-body { grid-template-columns: 1fr; gap: 0; }

	/* Niente sidebar: si naviga con gli accordion */
	.appt-cats { display: none; }

	/* Mostra tutte le categorie della macro attiva, come accordion */
	.appt-group { border-bottom: 1px solid rgba(250,247,242,.12); }
	.appt-group:not(.is-hidden) { display: block; }
	.appt-group.is-hidden { display: none; }

	.appt-group-head { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 18px 0; background: transparent; border: 0; cursor: pointer; }
	.appt-group-head .appt-cat-name { font-size: 1.05rem; }
	.appt-group.is-open .appt-chevron { transform: rotate(225deg); }

	/* Corpo: chiuso di default, aperto se .is-open */
	.appt-group-body { display: none; }
	.appt-group.is-open .appt-group-body { display: block; padding-bottom: 8px; background: #181818; padding: 20px;}
	.appt-service:last-of-type{
		border: 0 !important;
	}

	.appt-service-name { font-size: 1.05rem; }

	/* Durata e dettagli impilati in colonna (come Treatwell mobile) */
	.appt-service-meta { flex-direction: column; gap: 4px; }

	/* Mobile: prezzo sopra, bottone sotto */
	.appt-service-action { flex-direction: column; }
}

/* ——— Avviso "orario appena occupato" (conflitto tra prenotazioni simultanee) ———
 * Mostrato in cima al foglio "Seleziona l'orario" quando il server rifiuta il
 * salvataggio perché un altro cliente ha appena preso lo slot (HTTP 409). */
.appt-conflict-note { display: none; margin: 0 0 16px; padding: 12px 16px; background: rgba(168,68,45,.16); border: 1px solid #A8442D; border-radius: 4px; font-family: "Inter", sans-serif; font-size: .9rem; line-height: 1.45; color: #FAF7F2; }
.appt-conflict-note.is-visible { display: block; }