/* Trap tema v3 /
/ ============================================================================
TEMA TRAP per il widget SimplyBook (pagamenti.trapmilano.it)
Da incollare nel pannello: Custom CSS — SOSTITUENDO tutto il contenuto
(le regole che c'erano gia' sono conservate qui sotto, Sezione 1).
v3 — 30/07/2026 — aggiunto calendario/orari con le classi VERE del widget
========================================================================== */
/* ========== SEZIONE 1 — regole preesistenti (conservate) ================== */
#sb-main-container #header { display: none; }
#sb-timeline #steps-nav { display: none; }
#sb-timeline #steps #time-settings { display: none; }
.booking-info { display: none; }
#sb-timeline #steps #steps-content #sb_booking_content .item.panel .btn-bar .wrap-read-more .read-more .part.txt-part .less-part { display: none; }
@media (max-width: 767px){
#sb-timeline #steps #steps-content #sb_booking_content .item.panel .btn-bar.btn-bar-full-info { display: none; }
}
#sb-timeline #steps #steps-content #sb_booking_content .item.panel>.wrap-collapse-content { display: block!important; }
#sb-timeline #steps #steps-content #sb_booking_content .item.panel .btn-bar .wrap-read-more { display: none; }
#sb-timeline #steps #steps-content #sb_booking_content .item.panel>.wrap-collapse-content .collapse-content .biggest-previev { display: none; }
#sb-timeline #steps #steps-content #sb_booking_content .item.panel>.wrap-collapse-content .collapse-content .btn-bar-full-info .btn-hide { display: none; }
.is-widget #sb-main-container { padding-bottom: 0; }
@media (max-width: 767px){
#sb-timeline #steps-nav { padding-top: 50px!important; margin-bottom: 70px; display: block; min-height: inherit; }
#sb-timeline #steps #time-settings { max-width: 230px; top: 120px; right: -50px; }
}
/* ========== SEZIONE 2 — font del sito (Teko titoli, Poppins testo) ======== */
@font-face {
font-family: 'Teko';
src: url('https://trapmilano.it/fonts/teko-latin.woff2?sb=2') format('woff2');
font-weight: 300 600; font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('https://trapmilano.it/fonts/poppins-400-latin.woff2?sb=2') format('woff2');
font-weight: 400; font-display: swap;
}
/* ========== SEZIONE 3 — tema scuro Trap =================================== /
/ Palette: oro #FED908 (il giallo del sito) · fondo #111 · card #16161a */
/* fondo generale e testo */
body, #sb-main-container, .is-widget #sb-main-container {
background: #111111 !important;
color: #e8e8e8 !important;
font-family: 'Poppins', system-ui, sans-serif !important;
}
/* titoli */
h1, h2, h3, h4, .header-title, .title, .cap {
font-family: 'Teko', sans-serif !important;
letter-spacing: .02em;
color: #ffffff !important;
text-transform: uppercase;
}
/* card/pannelli (stanze, riepiloghi) */
.item.panel, .panel, .table-item, .modal-content {
background: #16161a !important;
border: 1px solid #2a2a30 !important;
border-radius: 12px !important;
color: #e8e8e8 !important;
box-shadow: 0 10px 26px -18px #000 !important;
}
.panel .txt, .panel p, .table-item .txt { color: #cfcfcf !important; }
/* bottoni principali: oro pieno, testo nero (come i PRENOTA del sito) */
a.btn.select, .btn.select.custom,
#sb_booking_content .tab .btn.select, #sb_time_classes_service_container .btn.select,
.package-content .btn.select, div.tab .btn.select,
.btn.btn-primary, #sb_pay_btn, button[type="submit"].btn {
background: #FED908 !important;
border-color: #FED908 !important;
color: #111111 !important;
font-weight: 700 !important;
border-radius: 8px !important;
text-transform: uppercase;
}
a.btn.select:hover, .btn.btn-primary:hover, #sb_pay_btn:hover,
.btn.select.custom:hover {
background: #e6c400 !important;
border-color: #e6c400 !important;
color: #111111 !important;
}
/* bottoni secondari (read more, indietro, hide) */
.btn.read-more, .btn.btn-hide, .btn.btn-invoice, .collapse-btn {
background: transparent !important;
border: 1px solid #FED908 !important;
color: #FED908 !important;
border-radius: 8px !important;
}
.btn.read-more:hover, .btn.btn-invoice:hover { background: #FED90822 !important; }
/* campi modulo */
.form-control, input, select, textarea {
background: #1d1d22 !important;
border: 1px solid #3a3a42 !important;
color: #ffffff !important;
border-radius: 8px !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
border-color: #FED908 !important;
box-shadow: 0 0 0 2px #fed90833 !important;
}
label, .help-block { color: #b9b9b9 !important; }
::placeholder { color: #8a8a8a !important; }
/* calendario: giorni disponibili chiari, selezionato oro */
#sb_dateview_container, #sb_datetime_step_container {
background: transparent !important; color: #e8e8e8 !important;
}
#sb_dateview_container td, #sb_dateview_container th { color: #d9d9d9 !important; }
#sb_dateview_container .selected, #sb_dateview_container td.active,
#sb_dateview_container .is-selected {
background: #FED908 !important; color: #111 !important; border-radius: 8px !important;
}
/* orari: slot come "gettoni" scuri col bordo oro, selezionato pieno */
#sb_timeview_container a, #sb_timeview_container .time-item,
#sb_timeview_container .btn {
background: #1d1d22 !important;
border: 1px solid #FED908 !important;
color: #ffffff !important;
border-radius: 8px !important;
}
#sb_timeview_container a:hover { background: #FED90822 !important; }
#sb_timeview_container .selected, #sb_timeview_container .active {
background: #FED908 !important; color: #111 !important;
}
/* barra laterale / riepilogo prenotazione */
#sb_sidebar_container, .sidebar {
background: #16161a !important;
border: 1px solid #2a2a30 !important;
color: #e8e8e8 !important;
}
/* link e paginazione */
a { color: #FED908; }
a:hover { color: #ffffff; }
.pagination-link { color: #FED908 !important; }
.pagination-link.active { background: #FED908 !important; color: #111 !important; }
/* avvisi */
.alert { border-radius: 10px !important; }
.alert-danger { background: #3a1414 !important; color: #ffb3b3 !important; border-color: #6e2020 !important; }
.alert-success { background: #143a1c !important; color: #b8f0c4 !important; border-color: #226e33 !important; }
.alert-info { background: #14273a !important; color: #b3d6ff !important; border-color: #20486e !important; }
/* prezzo in evidenza */
.event_price, .price, .total-price { color: #FED908 !important; font-weight: 700 !important; }
/* spunte (termini/privacy/cancellazione e simili): quadratino oro,
testo leggibile, link in oro come nel resto del tema */
input[type="checkbox"], input[type="radio"] { accent-color: #FED908 !important; width: 17px; height: 17px; }
.checkbox label, .terms, .agreement, label a { color: #cfcfcf !important; }
.checkbox a, .terms a, .agreement a { color: #FED908 !important; text-decoration: underline; }
/* ========== SEZIONE 4 (v3) — calendario e orari, classi VERE del widget ===
Rilevate ispezionando il DOM live: il titolo "Orari di inizio" e'
.container-caption; gli slot orari sono div.slot dentro .timeline-wrapper;
il mese sta nella riga .row-eq-height (div senza classe dentro .txt-center);
i Prev/Next Month sono span.txt nella stessa riga. */
/* "Orari di inizio" e titolo del mese in Teko, come i titoli del sito */
.container-caption {
font-family: 'Teko', sans-serif !important;
text-transform: uppercase; letter-spacing: .02em;
font-size: 26px !important; color: #ffffff !important;
}
.row-eq-height .txt-center > div {
font-family: 'Teko', sans-serif !important;
text-transform: uppercase; font-size: 24px !important; color: #ffffff !important;
}
/* frecce Prev/Next Month in oro */
.row-eq-height span.txt { color: #FED908 !important; }
/* slot orari: gettoni scuri col bordo oro, selezionato pieno */
.timeline-wrapper .slot, div.slot {
background: #1d1d22 !important;
border: 1.5px solid #FED908 !important;
color: #ffffff !important;
border-radius: 8px !important;
font-weight: 600;
}
.timeline-wrapper .slot:hover, div.slot:hover { background: #fed90822 !important; }
.timeline-wrapper .slot.active, .timeline-wrapper .slot.selected,
div.slot.active, div.slot.selected, div.slot.chosen {
background: #FED908 !important; color: #111111 !important;
}
/* giorni del calendario: numeri leggibili, spenti se non disponibili */
.date span { color: #e8e8e8; }
.date span.day-off { color: #555555 !important; }
/* pallino "Disponibile" della legenda in oro /
[class="available"] i, .available-color, .legend i, .legend .dot {
background: #FED908 !important; border-color: #FED908 !important;
}
#sb_back_button a[href="#book/"] { display: none !important; }
#sb_sidebar_container { display: none !important; }
#sb-timeline { padding-bottom: 10px !important; }