/*
 * RENDU DES BLOCS DU CMS — une seule feuille pour l'ÉDITEUR (apps/dashboard-salon/app.html) et le SITE
 * PUBLIC (apps/public-site/salon-page.html), 30/09/2026.
 *
 * Ces règles vivaient dans salon-page.html seulement : l'éditeur ne les appliquait pas (tunnel de
 * réservation 896 px dans l'éditeur, 760 px en ligne ; cartes, créneaux et couleurs du tunnel
 * différents). Les règles « petit écran » sont des requêtes de CONTENEUR (cyb-canevas) : dans l'éditeur,
 * le conteneur est l'écran simulé ; en ligne, c'est <body> (les pop-ups y sont téléportées).
 * Ne rien mettre ici qui concerne la page elle-même (défilement, préchargement, liens légaux).
 */
/* Booking tunnel scoped styles */
.booking-srv-item { background-color: var(--booking-card-bg); border-color: var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); border-width: 1px; border-style: solid; transition: all 0.2s ease; }
.booking-srv-item:hover { background-color: var(--booking-hover-bg); border-color: var(--booking-hover-border); color: var(--booking-hover-text); }
.booking-srv-item.is-selected { background-color: var(--booking-active-bg) !important; border-color: var(--booking-primary) !important; border-width: 2px !important; }

.booking-barber-item { background-color: var(--booking-card-bg); border-color: var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); border-width: 1px; border-style: solid; transition: all 0.2s ease; }
.booking-barber-item:hover { background-color: var(--booking-hover-bg); border-color: var(--booking-hover-border); color: var(--booking-hover-text); }
.booking-barber-item.is-selected { background-color: var(--booking-active-bg) !important; border-color: var(--booking-primary) !important; border-width: 2px !important; }

.booking-cal-cell { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 9999px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; transition: all 0.2s ease; box-shadow: none !important; }
.booking-cal-cell * { line-height: 1 !important; }
.booking-cal-cell:hover { background-color: var(--booking-hover-bg, #f1f5f9); border-color: var(--booking-hover-border, #cbd5e1); color: var(--booking-hover-text, #0f172a); }
.booking-cal-cell.is-selected { background-color: var(--booking-primary, #0f172a) !important; color: #ffffff !important; border-color: var(--booking-primary, #0f172a) !important; border-radius: 9999px !important; font-weight: 900 !important; }

/* Ensure calendar days header (Lu, Ma, Me...) is a perfect 7-column centered grid */
[data-layer="Jours Semaine"],
[data-layer="Jours Semaine"] > div { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; width: 100% !important; text-align: center !important; }
[data-layer^="Jour ("] { text-align: center !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* Cartes du TUNNEL de réservation : seule la carte intérieure porte la bordure. Limité au tunnel
   (30/09/2026) : appliqué à tout calque « Carte… », il retirait en ligne les ombres et bordures des
   cartes du gérant, visibles dans l'éditeur. */
.booking-tunnel [data-layer^="Carte"],
.booking-tunnel [data-layer="Carte Barbier"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.booking-srv-item,
.booking-barber-item {
    border-width: 2px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.booking-srv-item.is-selected,
.booking-barber-item.is-selected {
    border-color: var(--booking-primary, #0f172a) !important;
    border-width: 2px !important;
    transform: none !important;
}

.booking-slot-cell { background-color: var(--booking-card-bg, #ffffff); border: 1px solid var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); transition: all 0.2s ease; }
.booking-slot-cell:hover { background-color: var(--booking-hover-bg); border-color: var(--booking-hover-border); color: var(--booking-hover-text); }
.booking-slot-cell.is-selected { background-color: var(--booking-primary) !important; color: var(--booking-active-text) !important; border-color: var(--booking-primary) !important; font-weight: 900 !important; }

.booking-input { background-color: var(--booking-card-bg); border: 1px solid var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); transition: all 0.2s ease; }
.booking-input:focus { border-color: var(--booking-primary) !important; background-color: var(--booking-active-bg) !important; outline: none !important; }

/* Éléments du tunnel de réservation pilotés par les variables du thème (fond sombre ou clair) */
.booking-sticky-header-bar { background: var(--booking-surface, rgba(255,255,255,0.97)); border-bottom: 1px solid var(--booking-card-border, #f1f5f9); }
.booking-sticky-footer-bar { background: var(--booking-surface, rgba(255,255,255,0.95)); border-top: 1px solid var(--booking-card-border, #f1f5f9); }
.booking-secondary-btn { background: var(--booking-card-bg, #f1f5f9); color: var(--booking-text, #1e293b); border-color: var(--booking-card-border, #e2e8f0); }
.booking-secondary-btn:hover { border-color: var(--booking-primary, #0f172a); }
.booking-select { background: var(--booking-card-bg, #ffffff); color: var(--booking-text, #0f172a); border-color: var(--booking-card-border, #e2e8f0); }
.booking-select:hover, .booking-select:focus { border-color: var(--booking-primary, #0f172a); outline: none; }
.booking-select option { color: #0f172a; background: #ffffff; }
.booking-choice-card { background: var(--booking-card-bg, #ffffff); border-color: var(--booking-card-border, #e2e8f0); }
.booking-choice-card:hover { border-color: var(--booking-primary, #0f172a); }
.booking-choice-card.is-selected { border-color: var(--booking-primary, #0f172a) !important; background: var(--booking-light-bg, rgba(15,23,42,0.06)) !important; }
.booking-radio { border-color: var(--booking-card-border, #cbd5e1); background: transparent; }
.booking-radio.is-on { border-color: var(--booking-primary, #0f172a); background: var(--booking-primary, #0f172a); }
.booking-radio-dot { background: var(--booking-on-primary, #ffffff); }
.booking-avatar { border-color: var(--booking-card-border, #e2e8f0); background: var(--booking-card-bg, #ffffff); color: var(--booking-muted, #94a3b8); }
.booking-day { color: var(--booking-text, #0f172a); background: transparent; }
.booking-day:hover { background: var(--booking-light-bg, rgba(15,23,42,0.06)); }
.booking-day.is-off { color: var(--booking-muted, #94a3b8); }
.booking-day.is-selected { background: var(--booking-primary, #0f172a) !important; color: var(--booking-on-primary, #ffffff) !important; border-color: var(--booking-primary, #0f172a) !important; }
.booking-day-dot { background: var(--booking-primary, #0f172a); }
.booking-mobile-steps { background: var(--booking-card-bg, #f8fafc); border-color: var(--booking-card-border, #e2e8f0); }
.booking-step-badge { background: var(--booking-primary, #0f172a); color: var(--booking-on-primary, #ffffff); }
.booking-dot { background: var(--booking-card-border, #cbd5e1); }
.booking-dot.is-current { background: var(--booking-primary, #0f172a); }
.booking-dot.is-done { background: #10b981; }

/* Custom scrollbar for booking slots — thin, elegant, no double scroll */
.booking-slots-scroll { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.15) transparent; }
.booking-slots-scroll::-webkit-scrollbar { width: 4px; }
.booking-slots-scroll::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.booking-slots-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.15); border-radius: 4px; }
.booking-slots-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.3); }

/* Calendar wrapper — prevent overflow issues */
.booking-calendar-wrapper { width: 100%; min-width: 0; overflow: visible; }

/* The booking flow belongs to the page scroll, never to a nested panel. */
.booking-tunnel { width: 100%; max-width: 760px; min-width: 0; height: auto !important; max-height: none !important; overflow: visible !important; }
.booking-tunnel > *, .booking-tunnel [data-type="div"], .booking-tunnel [data-type="repeater"] { min-width: 0; }
.booking-tunnel [data-repeater-source="calendar_slots"] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; align-items: start !important; grid-auto-rows: max-content; max-height: none !important; overflow: visible !important; }
.booking-tunnel [data-repeater-source="calendar_slots"] > div { width: auto !important; min-width: 0; height: auto !important; align-self: start; }
.booking-calendar-block { width: 100%; min-width: 0; }
.booking-calendar-shell { min-width: 0; overflow: hidden; }
.booking-calendar-shell [data-layer="Calendrier Wrapper"] { min-width: 0; }

/* Smooth scale animation for selected items */
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0.8; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeInUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ===== DEFAULT BOOKING BLOCKS — THEME-AWARE STYLES ===== */
.bk-nav-btn { width: 38px; height: 38px; min-width: 38px; max-width: 38px; border-radius: 12px; background: var(--booking-card-bg, #fff); border: 1.5px solid var(--booking-card-border, #e2e8f0); color: var(--booking-text, #334155); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.bk-nav-btn:hover { background: var(--booking-hover-bg, #f8fafc); border-color: var(--booking-hover-border, #cbd5e1); transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06); }
.bk-nav-btn:active { transform: scale(0.95); }
.bk-nav-btn svg { width: 16px; height: 16px; }

.bk-day { width: 100%; aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; user-select: none; border: 2px solid transparent; color: var(--booking-text, #0f172a); }
.bk-day:hover:not(.bk-day--past):not(.bk-day--off):not(.bk-day--empty) { background: var(--booking-hover-bg, #f1f5f9); transform: scale(1.04); }
.bk-day--past, .bk-day--off { color: var(--booking-card-border, #cbd5e1); cursor: default; pointer-events: none; opacity: 0.6; }
.bk-day--empty { visibility: hidden; }
.bk-day--today:not(.bk-day--selected) { font-weight: 900; color: var(--booking-primary, #0f172a); }
.bk-day--today:not(.bk-day--selected)::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--booking-primary, #0f172a); }
.bk-day--selected { background: var(--booking-primary, #0f172a) !important; color: #fff !important; font-weight: 900; box-shadow: 0 6px 16px rgba(15,23,42,0.28); transform: scale(1.08); border-color: transparent; }

.bk-slot { padding: 12px 14px; border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 14px; background: var(--booking-card-bg, #fff); color: var(--booking-text, #1e293b); font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 800; text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.bk-slot:hover { border-color: var(--booking-primary, #0f172a); background: var(--booking-hover-bg, #f8fafc); transform: translateY(-1.5px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.bk-slot:active { transform: scale(0.97); }
.bk-slot--selected { background: var(--booking-primary, #0f172a) !important; color: #fff !important; border-color: var(--booking-primary, #0f172a) !important; box-shadow: 0 6px 18px rgba(15,23,42,0.22); transform: scale(1.02); }

.bk-radio { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 2px solid var(--booking-card-border, #cbd5e1); background: var(--booking-card-bg, #fff); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; }
.bk-radio--on { border-color: var(--booking-primary, #0f172a); background: var(--booking-primary, #0f172a); }
.bk-radio--on::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.bk-service-card { padding: 16px; background: var(--booking-card-bg, #fff); border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0,0,0,0.04); color: var(--booking-text, #0f172a); }
.bk-service-card:hover { border-color: var(--booking-hover-border, #94a3b8); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.bk-service-card--selected { border-color: var(--booking-primary, #0f172a) !important; background: var(--booking-active-bg, #f8fafc) !important; box-shadow: 0 0 0 3px rgba(15,23,42,0.08) !important; }

.bk-barber-card { padding: 16px 12px; background: var(--booking-card-bg, #fff); border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0,0,0,0.04); color: var(--booking-text, #0f172a); }
.bk-barber-card:hover { border-color: var(--booking-hover-border, #94a3b8); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1.5px); }
.bk-barber-card--selected { border-color: var(--booking-primary, #0f172a) !important; background: var(--booking-active-bg, #f8fafc) !important; box-shadow: 0 0 0 3px rgba(15,23,42,0.08) !important; }

.bk-price-badge { font-weight: 900; font-size: 13px; color: var(--booking-primary, #0f172a); background: var(--booking-hover-bg, #f1f5f9); padding: 5px 12px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }

.bk-primary-btn { width: 100%; padding: 15px 26px; background: var(--booking-primary, #0f172a); color: #fff; font-weight: 800; font-size: 14px; border-radius: 14px; border: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 18px rgba(15,23,42,0.18); display: flex; align-items: center; justify-content: center; gap: 8px; }
.bk-primary-btn:hover { opacity: 0.9; box-shadow: 0 8px 24px rgba(15,23,42,0.24); transform: translateY(-1px); }
.bk-primary-btn:active { transform: scale(0.98); }
.bk-primary-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bk-input { width: 100%; padding: 11px 15px; font-size: 13px; font-weight: 600; background: var(--booking-card-bg, #f8fafc); border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 12px; color: var(--booking-text, #0f172a); transition: all 0.2s ease; outline: none; box-sizing: border-box; }
.bk-input:focus { border-color: var(--booking-primary, #0f172a); background: var(--booking-active-bg, #fff); box-shadow: 0 0 0 3px rgba(15,23,42,0.08); }
.bk-input::placeholder { color: var(--booking-card-border, #94a3b8); font-weight: 500; }

.bk-label { display: block; font-size: 11px; font-weight: 800; color: var(--booking-text, #334155); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

.bk-recap-box { padding: 22px; border-radius: 18px; border: 1.5px solid var(--booking-card-border, #e2e8f0); background: var(--booking-card-bg, linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)); box-shadow: 0 1px 4px rgba(0,0,0,0.03); color: var(--booking-text, #0f172a); }
.bk-recap-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; }
.bk-recap-total { border-top: 1.5px solid var(--booking-card-border, #e2e8f0); margin-top: 14px; padding-top: 14px; }

.bk-category-tab { padding: 9px 18px; border-radius: 14px; font-size: 12px; font-weight: 800; cursor: pointer; transition: all 0.2s ease; border: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bk-category-tab--active { background: var(--booking-primary, #0f172a); color: #fff; box-shadow: 0 3px 10px rgba(15,23,42,0.2); }
.bk-category-tab--inactive { background: var(--booking-hover-bg, #f1f5f9); color: var(--booking-text, #475569); }
.bk-category-tab--inactive:hover { background: var(--booking-card-border, #e2e8f0); }

.bk-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--booking-card-border, #e2e8f0); box-shadow: 0 2px 6px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; background: var(--booking-primary, #0f172a); color: #fff; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.bk-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bk-section-title { font-size: 11px; font-weight: 900; color: var(--booking-text, #0f172a); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; }
.bk-section-title::before { content: ''; width: 4px; height: 15px; border-radius: 4px; background: var(--booking-primary, #0f172a); flex-shrink: 0; }

.bk-error { padding: 12px 16px; background: #fef2f2; color: #dc2626; font-size: 12px; font-weight: 700; border-radius: 12px; border: 1px solid #fecaca; }
.bk-success { padding: 14px 18px; background: #f0fdf4; color: #16a34a; font-size: 13px; font-weight: 700; border-radius: 14px; border: 1px solid #bbf7d0; display: flex; align-items: center; gap: 8px; }


/* ─── Widget réservation : les utilitaires clairs codés en dur dans le tunnel suivent les variables
   du widget (--booking-*) pour ne plus produire d'aplats blancs sur un site sombre. ─── */
.booking-tunnel .bg-white, .booking-tunnel .hover\:bg-white:hover { background-color: var(--booking-card-bg, #ffffff) !important; }
.booking-tunnel .bg-slate-50, .booking-tunnel .focus\:bg-white:focus { background-color: var(--booking-card-bg, #ffffff) !important; }
.booking-tunnel .bg-slate-100, .booking-tunnel .hover\:bg-slate-100:hover, .booking-tunnel .hover\:bg-slate-200\/80:hover { background-color: var(--booking-light-bg, rgba(15,23,42,0.06)) !important; }
.booking-tunnel .bg-slate-900 { background-color: var(--booking-primary, #0f172a) !important; }
.booking-tunnel .text-white, .booking-tunnel .bg-slate-900 > * { color: var(--booking-on-primary, #ffffff) !important; }
.booking-tunnel .bg-slate-400 { background-color: var(--booking-muted, #94a3b8) !important; }
.booking-tunnel .text-slate-700, .booking-tunnel .text-slate-800, .booking-tunnel .text-slate-900, .booking-tunnel .group:hover .group-hover\:text-slate-800 { color: var(--booking-text, #0f172a) !important; }
.booking-tunnel .text-slate-400, .booking-tunnel .text-slate-500, .booking-tunnel .text-slate-600 { color: var(--booking-muted, #64748b) !important; }
.booking-tunnel .border-slate-200, .booking-tunnel .border-slate-200\/80, .booking-tunnel .border-slate-200\/90, .booking-tunnel .border-slate-300 { border-color: var(--booking-card-border, #e2e8f0) !important; }
.booking-tunnel .ring-slate-900\/20 { --tw-ring-color: var(--booking-light-bg, rgba(15,23,42,0.2)) !important; }
.booking-tunnel input, .booking-tunnel textarea, .booking-tunnel select { color: var(--booking-text, #0f172a); }
.booking-tunnel input::placeholder, .booking-tunnel textarea::placeholder { color: var(--booking-muted, #94a3b8); opacity: 1; }
.booking-tunnel .bk-radio--on::after { background: var(--booking-on-primary, #fff); }
.booking-tunnel .bk-day--selected, .booking-tunnel .bk-slot--selected, .booking-tunnel .booking-cal-cell.is-selected, .booking-tunnel .booking-slot-cell.is-selected { color: var(--booking-on-primary, #fff) !important; }
.booking-tunnel .bk-primary-btn { color: var(--booking-on-primary, #fff); }

.bk-weekday { font-size: 11px; font-weight: 800; color: var(--booking-card-border, #94a3b8); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 0; text-align: center; }

.bk-fade-in { animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); }


.booking-tunnel,
.booking-tunnel * {
    box-sizing: border-box;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* ===== RESPONSIVE: Small screens (< 640px) ===== */
@container cyb-canevas (max-width: 640px) {
    .booking-tunnel { max-width: 100%; padding-left: 4px; padding-right: 4px; }
    .booking-tunnel .booking-calendar-wrapper, .booking-tunnel .booking-calendar-block { border-radius: 16px; }
    .booking-tunnel .booking-calendar-wrapper { padding: 14px 10px; }
    .booking-tunnel [data-repeater-source="calendar_days"] { gap: 3px; }
    .booking-tunnel [data-repeater-source="calendar_slots"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

    /* Step progress bar: compact on mobile */
    .booking-tunnel [data-type="booking_progress"] .flex { gap: 2px !important; }
    .booking-tunnel [data-type="booking_progress"] .flex > div { gap: 4px !important; }
    .booking-tunnel [data-type="booking_progress"] .flex > div > span.text-xs { font-size: 10px; display: none; }
    .booking-tunnel [data-type="booking_progress"] .flex > span { font-size: 9px; margin: 0 1px; }

    /* Service cards: ensure single column for clean stacking */
    .booking-tunnel [data-type="booking_services"] .grid { grid-template-columns: 1fr !important; }
    .booking-tunnel [data-type="booking_services"] .p-3 { padding: 12px !important; }

    /* Barber cards: 2 columns is fine but tighter */
    .booking-tunnel [data-type="booking_barbers"] .grid { gap: 8px !important; }
    .booking-tunnel [data-type="booking_barbers"] .p-3 { padding: 10px 8px !important; }

    /* Calendar: reduce day cell size for mobile */
    .bk-day { font-size: 12px; border-radius: 12px; }
    .bk-nav-btn { width: 34px; height: 34px; min-width: 34px; max-width: 34px; border-radius: 10px; }
    .bk-nav-btn svg { width: 14px; height: 14px; }

    /* Slots: 3 cols, tighter padding */
    .bk-slot { padding: 10px 8px; font-size: 12px; border-radius: 12px; }

    /* Recap box */
    .booking-tunnel [data-type="booking_recap"] .p-5 { padding: 14px !important; }
    .booking-tunnel [data-type="booking_recap"] .text-xs { font-size: 11px; }

    /* Form inputs: slightly smaller padding */
    .booking-tunnel [data-type="booking_form"] .grid { grid-template-columns: 1fr !important; }
    .booking-tunnel [data-type="booking_form"] input { font-size: 14px !important; padding: 10px 12px !important; }

    /* Confirmation success */
    .booking-tunnel [data-type="booking_form"] .p-6 { padding: 20px 16px !important; }

    /* Primary button: full width on mobile */
    .bk-primary-btn { padding: 12px 18px; font-size: 13px; border-radius: 14px; }

    /* Calendar wrapper inline override */
    .booking-calendar-wrapper { padding: 14px 10px !important; border-radius: 16px !important; }

    /* Booking calendar cell override for mobile */
    .booking-cal-cell { width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; font-size: 12px !important; }
}

/* ===== RESPONSIVE: Extra small screens (< 380px) ===== */
@container cyb-canevas (max-width: 380px) {
    .bk-day { font-size: 11px; border-radius: 10px; }
    .bk-slot { padding: 8px 6px; font-size: 11px; border-radius: 10px; }
    .bk-nav-btn { width: 30px; height: 30px; min-width: 30px; max-width: 30px; }
    .bk-nav-btn svg { width: 12px; height: 12px; }
    .booking-calendar-wrapper { padding: 10px 8px !important; }
    .booking-tunnel [data-type="booking_barbers"] .grid { grid-template-columns: 1fr !important; }
    .booking-cal-cell { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; font-size: 11px !important; }
}