@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

:root {
  --teal-900:#1A2528; --teal-800:#2D3C41; --teal-700:#3D5158;
  --teal-600:#5A7079; --teal-100:#D7DEE0; --teal-50:#EEF1F2;
  --sage-600:#8AA530; --sage-400:#A7C140; --sage-100:#EEF3D4;
  --ink-900:#14201F; --ink-700:#344241; --ink-500:#5B6A69;
  --ink-400:#7C8A89; --ink-300:#AAB3B2; --ink-200:#D4DAD9; --ink-100:#E9ECEB;
  --paper:#FBFAF6; --paper-2:#F5F3EC; --white:#FFFFFF;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(20,32,31,.04),0 0 0 1px rgba(20,32,31,.06);
  --shadow-2:0 6px 18px -8px rgba(20,32,31,.12),0 0 0 1px rgba(20,32,31,.06);
}

/* ---------- 1. Tipografia: Lexend ovunque (le icone .fa restano intatte) ---------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, .title-main, .cap, .btn, .main_btn,
#sb_main #header .nav li a {
  font-family:'Lexend', system-ui, sans-serif !important;
}
body { color:var(--ink-700); -webkit-font-smoothing:antialiased; }
.title-main, .cap { color:var(--ink-900); font-weight:600; letter-spacing:-.01em; }
.badge.price, .bar-flex-item.price, .full-info-price--value,
.sb-cell, .invoice-amount--value { font-variant-numeric:tabular-nums; }

/* ---------- 2. Sidebar / menu ---------- */
#sb_main #header { background:var(--paper) !important; box-shadow:1px 0 0 var(--ink-100); }
#sb_main #header .header_nav_wrap .nav-wrapper .nav li a {
  color:var(--ink-700) !important; font-weight:400; font-size:15px;
}
#sb_main #header .header_nav_wrap .nav-wrapper .nav li.active a {
  color:var(--teal-800) !important; font-weight:600;
}
#sb_main #header .header_nav_wrap .nav-wrapper .nav li a:hover { color:var(--teal-900) !important; }
/* icone carrello / login */
/* Cerchi chiari con bordo sottile e icona teal visibile sopra il cerchio */
html body #sb_main #header .items-wrapper #sb_cart .item-container:before,
html body #sb_main #header .items-wrapper .item-container .logged-in:before,
html body #sb_main #header .items-wrapper .item-container .logged-out:before {
  background:var(--white) !important;
  box-shadow:inset 0 0 0 1px var(--ink-200), var(--shadow-1) !important;
}
html body #sb_main #header .items-wrapper .item-container i,
html body #sb_main #header .items-wrapper .item-container .item-container__icon {
  position:relative; z-index:2; color:var(--teal-800) !important; opacity:1 !important;
}
html body #sb_main #header .items-wrapper .item-container:hover:before,
html body #sb_main #header .items-wrapper .item-container:hover .logged-out:before,
html body #sb_main #header .items-wrapper .item-container:hover .logged-in:before {
  background:var(--teal-50) !important;
}
html body #sb_main #header .items-wrapper #sb_cart .item-container .counter {
  background-color:var(--sage-600) !important; color:var(--ink-900) !important; z-index:3;
}
/* selettore lingua Google */
.goog-te-gadget-simple {
  border:1px solid var(--ink-200) !important; border-radius:var(--r-md) !important;
  background:var(--white) !important; padding:6px 10px !important;
}

/* ---------- 3. Home: hero e CTA ---------- */
#main #main-content #sb_content #main-buttons .wrapper #main_description .descr {
  font-size:clamp(28px,3.4vw,44px); line-height:1.1; font-weight:500;
  letter-spacing:-.02em; color:var(--ink-900); max-width:16ch;
}
#main #main-content #sb_content #main-buttons .buttons_wrap #main_buttons_book_btn {
  background-color:var(--sage-600) !important;
  color:var(--ink-900) !important;               /* bianco su sage non passa WCAG AA */
  text-transform:none !important; letter-spacing:0;
  font-weight:500; font-size:16px;
  border-radius:var(--r-md) !important; box-shadow:var(--shadow-1);
  padding:14px 28px !important; transition:background .15s ease;
}
#main #main-content #sb_content #main-buttons .buttons_wrap #main_buttons_book_btn:hover {
  background-color:var(--sage-400) !important;
}

/* ---------- 3b. Home: contatti + orari in un unico riquadro ---------- */
/* La riga che contiene le due colonne (contatti | orari) diventa una sola card bianca */
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data > .row {
  background:var(--white) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-1) !important; margin:24px 0 0 !important;
  padding:24px 12px !important; display:flex; flex-wrap:wrap; align-items:stretch;
}
/* Il box contatti interno perde sfondo e ombra: ora è il contenitore a fare da card */
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #contacts_info,
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #contacts,
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data .schedule_data,
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #schedule {
  background:transparent !important; box-shadow:none !important; border:none !important;
}
/* Colonna orari separata da un filetto, con titolo "Orari" come "Contattaci" */
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data .schedule_data {
  border-left:1px solid var(--ink-100) !important; padding-left:24px !important; height:100%;
}
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data .schedule_data:before {
  content:"Orari"; display:block; font-family:'Lexend',sans-serif; font-weight:600;
  font-size:18px; color:var(--ink-900); margin:0 0 14px;
}
/* Giorni e orari: testo scuro e leggibile (il tema li forza in bianco) */
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons .wrapper #contacts_data #schedule,
html body #sb_main #sb-main-container #main #main-content #sb_content.masked #main-buttons .wrapper #contacts_data #schedule,
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons .wrapper #contacts_data #schedule td,
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons .wrapper #contacts_data #schedule .title-main {
  color:var(--ink-700) !important;
}
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #schedule table.overview {
  width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:14.5px;
}
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #schedule td {
  padding:6px 0 !important; border-bottom:1px solid var(--ink-100) !important; background:transparent !important;
}
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #schedule td.day { font-weight:500; color:var(--ink-900) !important; }
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #schedule td.time { text-align:right; }
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #schedule tr:last-child td { border-bottom:none !important; }
/* Testi e link del box contatti in scuro */
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons .wrapper #contacts_data #contacts_info .info ul li .links a,
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons .wrapper #contacts_data #contacts .info ul li .links a {
  color:var(--ink-900) !important;
}
html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data #contacts .icon { color:var(--teal-700) !important; }
/* Su mobile le colonne si impilano: filetto orizzontale al posto di quello verticale */
@media (max-width:991px){
  html body #sb_main #sb-main-container #main #main-content #sb_content #main-buttons #contacts_data .schedule_data {
    border-left:none !important; border-top:1px solid var(--ink-100) !important;
    padding:20px 0 0 !important; margin-top:12px;
  }
}

/* ---------- 4. Flusso di prenotazione: niente illustrazione velata ---------- */
/* Lo sfondo illustrato resta solo in home (.page--index) */
#sb_main:not(.page--index) #sb-main-container {
  background-image:none !important; background-color:var(--paper) !important;
}
#main #main-content #sb_content.masked { background-color:transparent !important; }
/* Testi che il tema rende chiari (pensati per lo sfondo scuro): ora scuri.
   Prefisso #sb_main per battere la specificità del tema Hugo. */
html body #sb_main #main #main-content #sb_content .title-main,
html body #sb_main #main #main-content #sb_content.masked .title-main,
html body #sb_main #main #main-content #sb_content.masked .section .title-main,
html body #sb_main #sb-timeline #steps #steps-content .step-content .split-title .title-section,
html body #sb_main .filter .title-small,
html body #sb_main #booking-result-view .back-to-services,
html body #sb_main #main #main-content #sb_content #booking-result-view #bookings_list_btns_wrap .show_all_btn,
html body #sb_main #main #main-content #sb_content #membership-view #membership-payment-history .table-responsive td,
html body #sb_main #main #main-content #sb_content #membership-view #membership-payment-history .table-responsive th,
html body #sb_main .alert.alert-booking,
html body #sb_main .bonus__count-row, html body #sb_main .bonus__count {
  color:var(--ink-900) !important;
}
html body #sb_main .alert.alert-booking { border-color:var(--ink-200) !important; }

/* Stepper (Sede · Categoria · Prestazione · …) */
html body #sb_main #main #main-content #sb_content #steps-nav #sb_booking_info ul li.step_info_item a {
  color:var(--ink-400) !important;
}
html body #sb_main #main #main-content #sb_content #steps-nav #sb_booking_info ul li.step_info_item.passed a,
html body #sb_main #main #main-content #sb_content #steps-nav #sb_booking_info ul li.step_info_item.filled a {
  color:var(--teal-700) !important;
}
html body #sb_main #main #main-content #sb_content #steps-nav #sb_booking_info ul li.step_info_item.active a {
  color:var(--ink-900) !important; font-weight:600;
}
#steps-nav #sb_booking_info ul li.step_info_item .title-small {
  font-size:13px; text-transform:uppercase; letter-spacing:.08em;
}
#steps-nav #sb_booking_info ul li.step_info_item.active { border-bottom-color:var(--sage-600) !important; }

/* "Il Nostro Tempo: 10:21 Europe/Rome" – inutile per utenza italiana */
#sb-timeline #time-settings { display:none !important; }

/* ---------- 5. Card (sedi, categorie, prestazioni, medici) ---------- */
#sb_booking_content .item .tab.tab-col {
  background:var(--white) !important; border:none !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--shadow-1);
  overflow:hidden; transition:box-shadow .2s ease, transform .2s ease;
}
#sb_booking_content .item .tab.tab-col:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
#sb_booking_content .item .preloader { background:var(--teal-50) !important; }
#sb_booking_content .item .tab-pd { padding:22px 24px !important; }
#sb_booking_content .item .cap.short {
  font-size:17px; font-weight:600; line-height:1.3; color:var(--ink-900);
}
#sb_booking_content .item .txt.short,
#sb_booking_content .location-item .address a { color:var(--ink-500) !important; font-size:14.5px; }
#sb_booking_content .item .read-more { color:var(--teal-700) !important; }

/* Bottone "Seleziona": outline teal, sentence case */
#main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content .item .btn-bar .select a {
  border:1px solid var(--teal-600) !important; color:var(--teal-800) !important;
  background:transparent !important; border-radius:var(--r-md) !important;
  text-transform:none !important; font-weight:500; letter-spacing:0;
  transition:background .15s ease, color .15s ease;
}
#main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content .item .btn-bar .select a:hover {
  background:var(--teal-800) !important; color:var(--white) !important; border-color:var(--teal-800) !important;
}

/* Il tema mette un bordo sage anche sul contenitore del bottone: rimosso */
html body #sb_main #sb_booking_content .item .tab.tab-col .excerpt-info .btn-bar .btn.select,
html body #sb_main #sb_booking_content .item .tab.tab-col .excerpt-info .btn-bar .btn.select:hover {
  border:none !important; background:transparent !important; padding:0 !important; box-shadow:none !important;
}
html body #sb_main #sb_booking_content .item .btn-bar .select a { display:block; padding:12px 16px; }

/* Link "Membership richiesta" e "Leggi di più": teal al posto del blu Bootstrap */
html body #sb_main .service-bar__text a,
html body #sb_main .panel .btn-bar .wrap-read-more .read-more .part { color:var(--teal-700) !important; }

/* Prezzo e durata nelle card servizio */
#sb_booking_content .item .badge.price { background:transparent !important; color:var(--ink-900) !important; font-weight:600; }
#sb_booking_content .item .badge.price:before,
#sb_booking_content .item .badge.price:after { display:none !important; }

/* ---------- 6. Calendario e orari ---------- */
.sb-cell.free {
  background:var(--white) !important; color:var(--teal-800) !important;
  border:1px solid var(--ink-200); border-radius:var(--r-sm);
}
.sb-cell.free a { color:var(--teal-800) !important; }
.sb-cell.free:hover, .sb-cell.free.hovered,
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb_time_slots_container .slot:hover {
  background:var(--teal-800) !important; color:var(--white) !important; border-color:var(--teal-800);
}
.sb-cell.free:hover a, .sb-cell.free.hovered a { color:var(--white) !important; }
.time-legend .available .circle { background:var(--white) !important; border:1px solid var(--teal-600); }
.datepicker table tr td.today { background-color:var(--teal-50) !important; color:var(--ink-900) !important; opacity:1 !important; }

/* ---------- 7. Conferma dati e form ---------- */
.custom-form .form-control, #details .form-control {
  border:1px solid var(--ink-200) !important; border-radius:var(--r-md) !important;
  box-shadow:none !important; color:var(--ink-900);
}
.custom-form .form-control:focus, #details .form-control:focus {
  border-color:var(--teal-600) !important; box-shadow:0 0 0 3px var(--teal-50) !important;
}
#main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content #details .right-side .buttons-container .sb-book-btn-container .btn {
  background:var(--sage-600) !important; border-color:var(--sage-600) !important;
  color:var(--ink-900) !important; border-radius:var(--r-md) !important;
  text-transform:none !important; font-weight:500;
}
.detail-step-wrap.section, .current-booking-info {
  border-radius:var(--r-lg) !important; box-shadow:var(--shadow-1);
}

/* ---------- 8. Footer e cookie ---------- */
#footer { background-color:var(--teal-900) !important; }
#footer a { color:var(--teal-100) !important; }
#footer a:hover { color:var(--white) !important; }
#main .cookies .wrapper .btn, #footer .cookies .btn {
  background-color:var(--teal-800) !important; color:var(--white) !important;
  border-radius:var(--r-md) !important; text-transform:none !important;
}

/* ---------- 10. Login: bottoni leggibili e icona avatar ---------- */
/* "Iscriviti": pieno sage con testo scuro (prima testo bianco su fondo chiaro) */
html body #sb_main #header #sb_client_info .btn--sign-up,
html body #sb_main #header .nav-wrapper .items-wrapper .nav-item#sb_client_info .login-container .full-info #sb_login_form .not-logged .bar .btn-bar--row .btn--sign-up,
html body #sb_main #header #sb_client_info .btn--sign-up:hover {
  background-color:var(--sage-600) !important; border:1px solid var(--sage-600) !important;
  color:var(--ink-900) !important; border-radius:var(--r-md) !important; font-weight:500;
}
/* "Accedi" e "Le mie prenotazioni": outline teal (il testo sage su bianco non è leggibile) */
html body #sb_main #header .items-wrapper #sb_client_info #sb_login_form #sb_sign_in_form .bar #sb_sign_in_btn,
html body #sb_main #header .header_nav_wrap .items-wrapper .nav-item#sb_client_info .my-bookings .btn {
  border:1px solid var(--teal-600) !important; color:var(--teal-800) !important;
  background:transparent !important; border-radius:var(--r-md) !important;
}
html body #sb_main #header #sb_client_info .remind-pass, html body #sb_main #header #sb_client_info .remember-me__small-text { color:var(--ink-500) !important; }
html body #sb_main #header #sb_client_info .social .txt { color:var(--ink-500) !important; }

/* Icona avatar nel cerchio profilo (utente non loggato o senza foto) */
html body #sb_main #header .items-wrapper #sb_client_info .logged-out i,
html body #sb_main #header .items-wrapper #sb_client_info .logged-in i.item-container__icon--avatar { display:none !important; }
html body #sb_main #header .items-wrapper #sb_client_info .logged-out:after,
html body #sb_main #header .items-wrapper #sb_client_info .logged-in:not(:has(img)):after {
  content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D3C41' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c1.4-3.6 4.4-5.5 8-5.5s6.6 1.9 8 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 11. Contrasto: testi chiari residui del tema ---------- */
/* Testi che il tema mette in bianco pensando allo sfondo scuro */
html body #sb_main #main #main-content #sb_content #booking-result-view #bookings_list_btns_wrap #sb_back_btns_plugin .back-to-site a,
html body #sb_main #reviews-view .review-item .avatar a .author,
html body #sb_main #main #main-content #sb_content #membership-view #membership-payment-history .table + div,
html body #sb_main #sb_content .empty-week-time-part {
  color:var(--ink-900) !important;
}
/* Testo sage su bianco (contrasto 2,8:1) → teal */
html body #sb_main .btn--secondary, html body #sb_main .btn--secondary:hover,
html body #sb_main #main #main-content #sb_content #sb-timeline #steps-content #client-login .form-horizontal .btn.custom,
html body #sb_main #main #main-content #sb_content #client-login .form-horizontal .btn.custom,
html body #sb_main #client-profile-preview .bar-with-btn .btn,
html body #sb_main #client-profile-preview .bar-with-btn .btn.sb-client-edit-popup,
html body #sb_main #client-profile-edit #sb_profile_form .bar-with-btn #sb_update_btn,
html body #sb_main #main #main-content #sb_content #client-profile-preview #sb_membership_button_module .btn,
html body #sb_main #main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content #details .left-side .add-details .additional-info #sb_sign_out_btn,
html body #sb_main #remind-password .bar #sb_remind_btn,
html body #sb_main .modal-dialog .modal-content .modal-footer .btn#sb_set_button,
html body #sb_main .modal-dialog.delete-review .modal-footer #sb_review_delete_confirm,
html body #sb_main .modal-dialog.license-modal .modal-content .modal-footer .btn,
html body #sb_main .telegram-notifications__btn-bar .btn,
html body #sb_main #sb_content #sb_bookings_list .booking-item .booking-btns .btns_wrap .btn.sb_add_to_cal,
html body #sb_main #membership-view .mb.btn-bar .info-container a.wrapper,
html body #sb_main #membership-view .mb.btn-bar .info-container a.wrapper span,
html body #sb_main .tab.tab-col .excerpt-info .btn-bar .btn,
html body #sb_main .promo-list-wrap .promotion-list .promotion-item .btn-bar .btn.select a,
html body #sb_main .page-content--online-meeting .online-meeting .btn,
html body #sb_main .samesite-cookies__popup-btn,
html body #sb_main #footer #sb_scroll_top_btn {
  color:var(--teal-800) !important; border-color:var(--teal-600) !important;
}
/* Bottoni pieni sage: testo scuro invece di bianco (WCAG AA) */
html body #sb_main a.btn.select, html body #sb_main #sb_booking_content .tab .btn.select, html body #sb_main .package-content .btn.select,
html body #sb_main .btn--primary, html body #sb_main .btn--primary *, html body #sb_main .btn--next-available-date, html body #sb_main .btn--next-available-date:hover,
html body #sb_main .item.panel .btn-bar .btn, html body #sb_main .membership-item.panel .btn-bar .btn.price-formatter,
html body #sb_main #membership-view .mb.btn-bar .active-container a.wrapper,
html body #sb_main #main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content .item.panel .btn-bar .select,
html body #sb_main #main #main-content #sb_content #sb-timeline #steps-content #sb_booking_content #details .right-side .buttons-container #sb_multiple_booking_button_container > div .btn,
html body #sb_main #sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-footer .btn.next,
html body #sb_main .wrap-client-info-view .client-info-view .btn-bar .btn,
html body #sb_main .modal-dialog.payment-modal .modal-footer .confirm_btn#sb_pay_btn,
html body #sb_main .invoice-payment-systems #sb_pay_btn, html body #sb_main .invoice-pay-page .invoice-btn-bar .btn,
html body #sb_main .invoice-pay-page .promo-code-input .custom-form .btn, html body #sb_main .btn-invoice, html body #sb_main .btn-classes,
html body #sb_main .classes-modal #time_classes_time_container .time-slot,
html body #sb_main .waiting-list--btn-bar .btn, html body #sb_main .empty-week-time-part .btn-next-week,
html body #sb_main #header .items-wrapper #sb_cart .full-info .book_wrap a,
html body #sb_main #header .header_nav_wrap .items-wrapper #sb_cart .full-info #sb_multiple_booking_popup_btn,
html body #sb_main .btn-bar--gallery .btn--load-more, html body #sb_main .confirm-details .btn,
html body #sb_main .current-booking-info .btn.sb-ticket-download, html body #sb_main .current-booking-info .btn.sb-ticket-download .txt,
html body #sb_main .bonus__btn-bar--wrapper .btn, html body #sb_main .telegram-notifications--card .btn,
html body #sb_main .back-to-site .btn-primary, html body #sb_main .go-to-admin__button {
  color:var(--ink-900) !important;
}
html body #sb_main .tab.tab-col .excerpt-info .btn-bar .btn:hover { background-color:var(--teal-800) !important; color:var(--white) !important; }

/* ---------- 9. Elementi nascosti (regole già in uso, invariate) ---------- */
#sb_profile_form > div.bar-with-btn > a:nth-child(3) { display:none; }
tr.booking-info--item.booking-info--item_invoice { display:none; }
.invoice-pay-page .to-invoices-list { display:none !important; }
div#sb_invoice_buttons_container { display:none; }