/**
 * Hotel Booking Abdoul - Front-end Styles
 * Premium Design for booking tunnel shortcodes
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Design tokens are injected by inc/hba-theme.php — keep only local z-index layers here */
:root {
    /* =========================================================
       Z-INDEX LAYERS — règle globale de priorité d'affichage
       Base < Sticky < Header < Floating < Modal
       ========================================================= */
    --hba-layer-base:        1;
    --hba-layer-sticky-bar:  1000;
    --hba-layer-sidebar:     1001;
    --hba-layer-header:      1200;
    --hba-layer-floating:    1300;  /* dropdowns, popovers, tooltips, calendars */
    --hba-layer-modal:       1400;  /* modals, fullscreen overlays */
}

/* =========================================================
   CALQUE GLOBAL POUR LES FENÊTRES FLOTTANTES
   Tout dropdown / popover / menu rendu ici est affiché
   au-dessus du header et des éléments structurels du tunnel.
   ========================================================= */
#hba-floating-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--hba-layer-floating, 1300);
}
#hba-floating-layer > * {
    pointer-events: auto;
}

/* Surclasse intl-tel-input : dropdowns desktop et conteneur mobile/floating */
.iti__dropdown-content,
.iti--container,
.iti--fullscreen-popup.iti--container {
    z-index: var(--hba-layer-floating, 1300) !important;
}

/* Booking Wrapper */
.abdoul-booking-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    min-height: 100vh;
    overflow: visible !important;
}

/* Main Container */
.abdoul-main-container {
    background: var(--hba-white);
    border-radius: 24px;
    box-shadow: 0 10px 40px color-mix(in srgb, var(--hba-surface-inverse) 8%, transparent), 0 2px 10px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
    overflow: visible !important;
}

/* Booking Content Layout */
.abdoul-booking-content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
}

/* HBA Main Layout */
.hba-main-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 25px;
    position: relative;
    overflow: visible !important;
}

.hba-rooms-column {
    flex: 1;
    min-width: 0;
    pointer-events: auto !important;
}

/* Search Section */
.abdoul-search-section {
    display: flex;
    flex-direction: column;
}

.abdoul-results-card {
    background: var(--hba-white);
    border-radius: 20px;
    border: 1px solid var(--hba-gray-light);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
}

.abdoul-card-header {
    padding: 32px 32px 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
    border-bottom: 1px solid var(--hba-gray-light);
}

.abdoul-card-header h2 {
    margin: 0 0 8px;
    color: var(--hba-text-primary);
    font-size: 28px;
    font-weight: 700;
}

.abdoul-card-subtitle {
    margin: 0;
    color: var(--hba-text-secondary);
    font-size: 15px;
}

/* Form Grid */
.abdoul-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 32px;
    align-items: start;
}

.abdoul-input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.abdoul-input-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.abdoul-label-text {
    color: var(--hba-text-primary);
    font-size: 14px;
    font-weight: 600;
}

.abdoul-label-icon {
    font-size: 18px;
}

input.abdoul-date-input,
input.abdoul-select-input,
select.abdoul-select-input {
    width: 100%;
    padding: 0 16px;
    border: 2px solid var(--hba-gray-light);
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    color: var(--hba-text-primary);
    background: var(--hba-white);
    transition: all 0.3s ease;
    appearance: none;
    cursor: pointer;
    line-height: 48px;
    height: 48px;
    vertical-align: middle;
    box-sizing: border-box;
}

input.abdoul-select-input,
select.abdoul-select-input {
    text-align-last: center;
    padding-right: 40px;
}

/* Masque les flèches natives des champs nombre (appearance:none ne suffit pas) */
input.abdoul-select-input::-webkit-outer-spin-button,
input.abdoul-select-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input.abdoul-select-input[type="number"] {
    -moz-appearance: textfield;
}

input.abdoul-date-input:focus,
input.abdoul-select-input:focus,
select.abdoul-select-input:focus {
    outline: none;
    border: 2px solid var(--hba-border-focus) !important;
    background-color: var(--hba-white) !important;
    box-shadow: 0 0 0 4px var(--hba-focus-ring);
}

input.abdoul-date-input.abdoul-input-error,
input.abdoul-select-input.abdoul-input-error,
select.abdoul-select-input.abdoul-input-error {
    border-color: var(--hba-error-text) !important;
    background: var(--hba-error-soft) !important;
}

.abdoul-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.4);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.abdoul-date-input::-webkit-calendar-picker-indicator:hover {
    filter: invert(0.2);
    opacity: 1;
}

.abdoul-input-hint {
    display: block;
    color: var(--hba-text-secondary);
    font-size: 12px;
    margin-top: 6px;
}

.abdoul-validation-message {
    display: none;
    color: var(--hba-error-text);
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
}

/* Premium Button */
.abdoul-btn-premium {
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-hover) 100%);
    color: var(--hba-brand-primary-emphasis-contrast);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--hba-surface-inverse) 20%, transparent);
    margin: 0 32px 32px;
    box-sizing: border-box;
}

.abdoul-btn-premium:hover {
    background: var(--hba-brand-primary-hover);
    color: var(--hba-brand-primary-hover-contrast);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--hba-surface-inverse) 25%, transparent);
}

.abdoul-btn-premium:active {
    transform: translateY(0);
}

.abdoul-btn-premium:disabled {
    background: var(--hba-gray-medium);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.abdoul-btn-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.abdoul-btn-premium:hover .abdoul-btn-icon {
    transform: translateX(4px);
}

.abdoul-btn-loading .abdoul-btn-text::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Glassmorphism Sidebar */
.abdoul-sidebar-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--hba-brand-primary-emphasis);
    border-radius: 20px;
    color: var(--hba-brand-primary-emphasis-contrast);
    font-size: 12px;
    font-weight: 600;
}

.abdoul-badge-icon {
    font-size: 14px;
}

/* Skeleton Loading */
.abdoul-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.abdoul-skeleton-line {
    background: linear-gradient(90deg, var(--hba-gray-light) 25%, var(--hba-gray-medium) 50%, var(--hba-gray-light) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
}

.abdoul-skeleton-long {
    height: 24px;
}

.abdoul-skeleton-medium {
    height: 20px;
}

.abdoul-skeleton-short {
    height: 16px;
}

.abdoul-skeleton-tall {
    height: 32px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Sidebar Details */
/* Sidebar Message */
.abdoul-message-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.abdoul-message-text {
    color: var(--hba-text-primary);
    font-size: 14px;
    font-weight: 500;
}

.abdoul-placeholder-text {
    color: var(--hba-text-secondary);
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
}

.abdoul-divider {
    height: 1px;
    background: var(--hba-gray-light);
    margin: 8px 0;
}

.abdoul-price-highlight {
    color: var(--hba-brand-secondary-emphasis);
    font-size: 18px;
    font-weight: 700;
}

.abdoul-sidebar-footer {
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--hba-surface-soft) 0%, var(--hba-surface) 100%);
    border-top: 1px solid var(--hba-gray-light);
}

.abdoul-footer-note {
    margin: 0;
    color: var(--hba-text-secondary);
    font-size: 12px;
    text-align: center;
}

/* Results and Checkout Containers */
.abdoul-results-container,
.abdoul-checkout-container,
.abdoul-validation-section,
.abdoul-results-section {
    flex: 1;
    min-width: 0;
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 20px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
    padding: 40px;
}

/* Rooms Grid */
.abdoul-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Room Cards */
.abdoul-room-card {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--hba-surface-inverse) 6%, transparent);
    position: relative !important;
    pointer-events: auto !important;
}

.abdoul-room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--hba-surface-inverse) 15%, transparent);
    border-color: var(--hba-border-focus);
    z-index: 10;
}

.abdoul-room-card.abdoul-selected,
.abdoul-room-card.selected-card {
    border-color: var(--hba-border-selected);
    box-shadow: 0 0 0 2px var(--hba-selected-ring), 0 8px 24px color-mix(in srgb, var(--hba-surface-inverse) 15%, transparent);
    background: linear-gradient(135deg, var(--hba-surface-selected) 0%, var(--hba-surface) 100%);
}

/* Unavailable unit / room type card */
.abdoul-room-card.hba-unit-unavailable,
.abdoul-room-card.hba-room-unavailable {
    pointer-events: none !important;
    opacity: 0.5 !important;
    filter: grayscale(100%);
    background: var(--hba-gray-bg);
    border-color: var(--hba-gray-light);
}

.abdoul-room-card.hba-unit-unavailable .hba-unit-unavailable-label,
.abdoul-room-card.hba-room-unavailable .hba-room-unavailable-label {
    font-weight: 700;
    color: var(--hba-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
}

/* Room Image Slider */
.abdoul-room-image-slider {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    position: relative !important;
    overflow: hidden;
}

.abdoul-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.abdoul-slide.active {
    display: block;
}

.abdoul-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.abdoul-slider-prev,
.abdoul-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--hba-surface-inverse) 70%, transparent);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer !important;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.abdoul-slider-prev:hover,
.abdoul-slider-next:hover {
    background: var(--hba-brand-primary-hover);
}

.abdoul-slider-prev {
    left: 10px;
}

.abdoul-slider-next {
    right: 10px;
}

.abdoul-slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.abdoul-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto !important;
}

.abdoul-dot.active {
    background: var(--hba-brand-primary-emphasis);
    width: 30px;
    border-radius: 5px;
}

.abdoul-dot:hover {
    background: var(--hba-brand-primary-emphasis);
}

/* Room Placeholder for missing images */
.abdoul-room-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    color: var(--hba-text-primary);
    font-weight: 600;
    font-size: 16px;
}

/* Room Image (fallback for single image) */
.abdoul-room-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.abdoul-room-gallery {
    position: relative;
    width: 100%;
    height: 100%;
}

.abdoul-gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.abdoul-gallery-slide.active {
    opacity: 1;
    z-index: 1;
}

.abdoul-gallery-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.abdoul-gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.abdoul-gallery-dot.active {
    background: white;
    transform: scale(1.2);
}

.abdoul-gallery-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.abdoul-room-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.abdoul-room-card:hover .abdoul-room-img {
    transform: scale(1.05);
}

.abdoul-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--hba-text-secondary);
}

.abdoul-placeholder-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.abdoul-placeholder-text {
    font-size: 14px;
    font-weight: 500;
}

/* Room Content */
.abdoul-room-content {
    padding: 20px;
}

.abdoul-room-content h3 {
    margin: 0 0 8px;
    color: var(--hba-text-primary);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.abdoul-room-capacity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--hba-brand-primary-soft) 0%, var(--hba-surface-soft) 100%);
    border: 1px solid var(--hba-border-subtle);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hba-brand-primary-emphasis);
}

.abdoul-extra-fees-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 12px;
    color: #64748b;
    cursor: help;
}

.abdoul-info-icon {
    margin-left: 4px;
    font-style: normal;
}

.hba-select-room.selected,
.hba-select-room.hba-selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
}

.hba-select-room.selected .abdoul-btn-text,
.hba-select-room.hba-selected .abdoul-btn-text {
    content: 'Sélectionnée';
}

.hba-select-room-btn.is-selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
}

.hba-select-room-btn.is-selected .abdoul-btn-text::before {
    content: '✓ ';
}

.abdoul-room-excerpt {
    margin: 0 0 12px;
    color: var(--hba-text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Room Features */
.abdoul-room-features {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.abdoul-feature {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--hba-text-primary);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.abdoul-feature:hover {
    background: var(--hba-gray-light);
}

.abdoul-feature svg {
    flex-shrink: 0;
}

.abdoul-feature-label {
    font-size: 11px;
    color: var(--hba-gray-dark);
}

/* Amenity Icon Colors */
.abdoul-feature[title*="WiFi"] svg {
    color: #3b82f6;
}

.abdoul-feature[title*="Clim"] svg {
    color: #0ea5e9;
}

.abdoul-feature[title*="TV"] svg {
    color: #6366f1;
}

.abdoul-feature[title*="Petit"] svg,
.abdoul-feature[title*="déjeuner"] svg {
    color: #f59e0b;
}

.hba-select-room-btn {
    pointer-events: auto !important;
    z-index: 999 !important;
    cursor: pointer !important;
    /* Override Astra theme button styles */
    padding-top: 12px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;
    padding-left: 24px !important;
    border: none !important;
    border-width: 0 !important;
}

/* Room Price */
.abdoul-room-price {
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg, var(--hba-surface-soft) 0%, var(--hba-surface) 100%);
    border-radius: 12px;
    text-align: center;
}

/* View Details Link */
.abdoul-view-details {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--hba-brand-primary-emphasis);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.abdoul-view-details:hover {
    color: var(--hba-brand-primary-hover);
    text-decoration: underline;
}

/* Full Description */
.abdoul-room-full-desc {
    margin-bottom: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
    border-radius: 12px;
    border: 1px solid var(--hba-gray-light);
}

.abdoul-room-full-desc p {
    margin: 0 0 12px;
    color: var(--hba-text-primary);
    font-size: 14px;
    line-height: 1.6;
}

.abdoul-room-full-desc ul {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.abdoul-room-full-desc li {
    margin-bottom: 8px;
    color: var(--hba-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.abdoul-room-full-desc li:before {
    content: "✓";
    color: var(--hba-success);
    font-weight: bold;
    margin-right: 8px;
}

.abdoul-price-amount {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--hba-brand-secondary-emphasis);
}

.abdoul-price-unit {
    display: block;
    font-size: 14px;
    color: var(--hba-text-secondary);
    margin-top: 4px;
}

/* Select Room Button */
.abdoul-btn-select-room {
    width: 100%;
    margin: 0;
}

.abdoul-room-card.abdoul-selected .abdoul-btn-select-room {
    background: linear-gradient(135deg, var(--hba-success) 0%, #2f855a 100%);
}

.abdoul-room-card.abdoul-selected .abdoul-btn-select-room .abdoul-btn-text::before {
    content: '✓ ';
}

/* Results Footer */
.abdoul-results-footer {
    padding-top: 24px;
    border-top: 1px solid var(--hba-gray-light);
    text-align: center;
}

.abdoul-btn-next {
    max-width: 300px;
    margin: 0 auto;
}

/* No search data message */
.abdoul-no-search-data {
    text-align: center;
    padding: 48px 32px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
    border-radius: 12px;
    margin-bottom: 24px;
}

.abdoul-no-search-data p {
    color: var(--hba-text-primary);
    font-size: 16px;
    margin-bottom: 24px;
}

/* =========================================================
   ÉTAT "AUCUN RÉSULTAT EXACT" — passe UX/UI (scoped .hba-no-match)
   Réutilise les tokens et le socle .abdoul-no-search-data existants ;
   n'affecte aucun autre écran du tunnel.
   ========================================================= */
.hba-no-match {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 32px;
}

.hba-no-match-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.7;
}

.hba-no-match-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 14px;
}

.hba-no-match-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.hba-no-match-summary-chip {
    display: inline-block;
    padding: 4px 12px;
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hba-text-secondary);
}

.hba-no-match-summary-sep {
    color: var(--hba-gray-medium);
    font-size: 13px;
}

.hba-no-match-explain {
    font-size: 15px;
    line-height: 1.6;
    color: var(--hba-text-secondary);
    max-width: 480px;
    margin: 0 auto 28px;
}

.hba-no-match-explain strong {
    color: var(--hba-text-primary);
}

.hba-no-match-alt-section {
    text-align: left;
    border-top: 1px solid var(--hba-gray-light);
    padding-top: 24px;
    margin-bottom: 24px;
}

.hba-no-match-alt-heading {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hba-text-secondary);
    margin: 0 0 16px;
}

.hba-no-match-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.hba-no-match-alt-card {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
}

.hba-no-match-alt-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

.hba-no-match-alt-detail {
    font-size: 12px;
    line-height: 1.5;
    color: var(--hba-text-secondary);
}

.hba-no-match-alt-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--hba-brand-secondary-emphasis);
    margin-top: 2px;
}

.hba-no-match-alt-cta {
    align-self: flex-end;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--hba-brand-primary-emphasis);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.hba-no-match-alt-cta:hover {
    gap: 8px;
    color: var(--hba-brand-primary-hover);
}

.hba-no-match-alt-cta .abdoul-btn-icon {
    font-size: 14px;
}

.hba-no-match-hint {
    font-size: 13px;
    color: var(--hba-text-secondary);
    font-style: italic;
    margin-bottom: 24px;
}

.hba-no-match-actions {
    border-top: 1px solid var(--hba-gray-light);
    padding-top: 24px;
}

.hba-no-match-cta-btn.abdoul-btn-premium {
    width: auto;
    min-width: 240px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hba-no-match {
        padding: 28px 16px;
    }

    .hba-no-match-alt-grid {
        grid-template-columns: 1fr;
    }

    .hba-no-match-cta-btn.abdoul-btn-premium {
        width: 100%;
        min-width: 0;
    }
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.abdoul-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Fade-in animation for sidebar price rows */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#sidebar-price-divider,
#sidebar-price-row,
#sidebar-total-row {
    animation: fadeInUp 0.4s ease forwards;
}

#sidebar-price-row {
    animation-delay: 0.1s;
    opacity: 0;
}

#sidebar-total-row {
    animation-delay: 0.2s;
    opacity: 0;
}

/* Validation Summary */
.abdoul-validation-summary {
    padding: 32px;
}

.abdoul-summary-section {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
    border-radius: 12px;
    border: 1px solid var(--hba-gray-light);
}

.abdoul-summary-section h4 {
    margin: 0 0 16px;
    color: var(--hba-text-primary);
    font-size: 16px;
    font-weight: 600;
}

.abdoul-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--hba-gray-light);
}

.abdoul-summary-row:last-child {
    border-bottom: none;
}

.abdoul-summary-label {
    color: var(--hba-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.abdoul-summary-value {
    color: var(--hba-text-primary);
    font-size: 14px;
    font-weight: 600;
}

/* Confirmation Section */
.abdoul-confirmation-section {
    margin-top: 32px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(56, 161, 105, 0.05) 0%, rgba(72, 187, 120, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(56, 161, 105, 0.2);
}

.abdoul-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.abdoul-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--hba-success);
}

.abdoul-checkbox-text {
    color: var(--hba-text-primary);
    font-size: 14px;
    font-weight: 500;
}

/* Modify Links */
.abdoul-modify-link {
    color: var(--hba-brand-primary-emphasis);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.abdoul-modify-link:hover {
    color: var(--hba-text-primary);
    text-decoration: underline;
}

.abdoul-results-container h2,
.abdoul-checkout-container h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--hba-text-primary);
    font-size: 28px;
    font-weight: 700;
}

.abdoul-subtitle {
    color: var(--hba-text-secondary);
    font-size: 16px;
    margin-bottom: 30px;
}

/* Error and success pages */
.abdoul-error-page,
.abdoul-payment-fail-page {
    max-width: 600px;
    margin: 40px auto;
    padding: 40px;
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    border: 2px solid var(--hba-error-text);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(197, 48, 48, 0.1);
}

.abdoul-success-page {
    max-width: 600px;
    margin: 40px auto;
    padding: 40px;
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    border: 2px solid var(--hba-success);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(56, 161, 105, 0.1);
}

.abdoul-error-page h2,
.abdoul-payment-fail-page h2,
.abdoul-success-page h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.abdoul-success-page h2 {
    color: var(--hba-success);
}

.abdoul-error-page h2,
.abdoul-payment-fail-page h2 {
    color: var(--hba-error-text);
}

/* Room cards */
.room-card {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
}

.room-card:hover {
    box-shadow: 0 8px 30px color-mix(in srgb, var(--hba-surface-inverse) 12%, transparent);
    transform: translateY(-4px);
}

.room-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--hba-text-primary);
    font-size: 24px;
    font-weight: 700;
}

.room-card p {
    margin: 12px 0;
    color: var(--hba-text-secondary);
    font-size: 15px;
}

.room-card .select-room-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-hover) 100%);
    color: var(--hba-brand-primary-emphasis-contrast);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--hba-surface-inverse) 20%, transparent);
}

.room-card .select-room-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--hba-surface-inverse) 30%, transparent);
}

/* Responsive design */
@media (max-width: 1200px) {
    .abdoul-booking-content {
        grid-template-columns: 1fr 340px;
        gap: 30px;
        padding: 30px;
    }
}

@media (max-width: 992px) {
    .abdoul-booking-content {
        flex-direction: column;
    }
    
    .hba-main-layout {
        flex-direction: column;
    }
    
        
        
    .abdoul-form-grid {
        grid-template-columns: 1fr;
    }
    
    
    
}

@media (max-width: 768px) {
    .abdoul-booking-wrapper {
        padding: 20px 10px;
    }
    
    .abdoul-main-container {
        border-radius: 16px;
    }
    
    
    
    
    
    /* Disable sticky sidebar on mobile */
        
    .abdoul-booking-content {
        padding: 20px;
    }
    
    .abdoul-card-header {
        padding: 24px;
    }
    
    .abdoul-card-header h2 {
        font-size: 24px;
    }
    
    .abdoul-form-grid {
        padding: 24px;
        gap: 20px;
    }
    
    .abdoul-btn-premium {
        margin: 0 24px 24px;
    }
    
    .room-card {
        padding: 24px;
    }
    
    .room-card h3 {
        font-size: 20px;
    }
}

/* ============================================
   MODE GRILLE (défaut)
   ============================================ */
.abdoul-rooms-grid.hba-display-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .abdoul-rooms-grid.hba-display-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MODE LISTE
   ============================================ */
.abdoul-rooms-grid.hba-display-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.abdoul-rooms-grid.hba-display-list .abdoul-room-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 220px;
}

.abdoul-rooms-grid.hba-display-list .abdoul-room-image-slider {
    height: 100%;
    min-height: 220px;
    border-radius: 12px 0 0 12px;
}

.abdoul-rooms-grid.hba-display-list .abdoul-room-content {
    padding: 24px;
}

@media (max-width: 768px) {
    .abdoul-rooms-grid.hba-display-list .abdoul-room-card {
        grid-template-columns: 1fr;
    }
    .abdoul-rooms-grid.hba-display-list .abdoul-room-image-slider {
        border-radius: 12px 12px 0 0;
        min-height: 200px;
    }
}

/* ============================================
   STEP 3 — CONFIRMATION GRID
   ============================================ */
.abdoul-confirmation-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.abdoul-confirmation-form {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 20px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
    padding: 40px;
}

.abdoul-confirmation-summary {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 20px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
    padding: 28px;
    position: sticky;
    top: 20px;
}

.abdoul-confirmation-summary img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
}

.abdoul-confirmation-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--hba-gray-light);
    font-size: 13px;
}

.abdoul-confirmation-summary-row:last-child {
    border-bottom: none;
}

.abdoul-confirmation-summary-label {
    color: var(--hba-text-secondary);
}

.abdoul-confirmation-summary-value {
    font-weight: 600;
    color: var(--hba-text-primary);
}

.abdoul-confirmation-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 0;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
}

.abdoul-confirmation-total-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

/* Payment options */
.abdoul-payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0;
}

.abdoul-payment-option {
    border: 2px solid var(--hba-gray-light);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.abdoul-payment-option:has(input:checked) {
    border-color: var(--hba-border-selected);
    background: var(--hba-surface-selected);
}

.abdoul-payment-option input[type="radio"] {
    accent-color: var(--hba-brand-primary-emphasis);
}

.abdoul-payment-option-label {
    font-size: 13px;
    font-weight: 500;
}

.abdoul-payment-option-desc {
    font-size: 11px;
    color: var(--hba-text-secondary);
    margin-top: 2px;
}

/* Checkbox confirmation */
.abdoul-confirm-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: var(--hba-gray-bg);
    border-radius: 10px;
    margin: 20px 0;
    cursor: pointer;
}

.abdoul-confirm-checkbox-wrap input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--hba-brand-primary-emphasis);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.abdoul-confirm-checkbox-text {
    font-size: 13px;
    color: var(--hba-text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .abdoul-confirmation-grid {
        grid-template-columns: 1fr;
    }
    .abdoul-confirmation-summary {
        position: static;
    }
    .abdoul-payment-options {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   STEP 4 — VALIDATION
   ============================================ */
.abdoul-validation-card {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
}

.abdoul-validation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hba-gray-light);
}

.abdoul-validation-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(56, 161, 105, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.abdoul-validation-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

.abdoul-validation-subtitle {
    font-size: 13px;
    color: var(--hba-text-secondary);
    margin-top: 4px;
}

.abdoul-validation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--hba-gray-light);
    font-size: 14px;
}

.abdoul-validation-row:last-child {
    border-bottom: none;
}

.abdoul-validation-label {
    color: var(--hba-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.abdoul-validation-value {
    font-weight: 600;
    color: var(--hba-text-primary);
    text-align: right;
}

.abdoul-validation-total {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 100%);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.abdoul-validation-total-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--hba-text-primary);
}

.abdoul-validation-total-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

/* ============================================
   PAGES FINALES — SUCCÈS / ERREUR / ÉCHEC
   ============================================ */
.abdoul-success-page,
.abdoul-error-page,
.abdoul-payment-fail-page {
    text-align: center;
}

.abdoul-success-page h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--hba-success);
    margin-bottom: 12px;
}

.abdoul-error-page h2 {
    color: var(--hba-error-text);
}

.abdoul-page-icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
}

.abdoul-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 24px;
    background: var(--hba-surface);
    color: var(--hba-text-primary);
    border: 1px solid var(--hba-border-strong);
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s;
}

.abdoul-back-btn:hover {
    background: var(--hba-surface-soft);
    border-color: var(--hba-border-focus);
    color: var(--hba-text-primary);
}

/* ============================================
   CHECKOUT PAGE — PREMIUM STYLES
   ============================================ */

.hba-checkout-card {
    background: var(--hba-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--hba-surface-inverse) 12%, transparent), 0 8px 20px color-mix(in srgb, var(--hba-surface-inverse) 8%, transparent);
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.hba-checkout-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hba-brand-primary-emphasis), var(--hba-brand-secondary-emphasis), var(--hba-brand-primary-emphasis));
    background-size: 200% 100%;
    animation: shimmer-gradient 3s linear infinite;
}

@keyframes shimmer-gradient {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Section Titles */
.hba-checkout-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--hba-text-primary);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hba-gray-light);
}

/* Input Groups */
.hba-input-group {
    position: relative;
    margin-bottom: 16px;
}

.hba-input-field {
    width: 100%;
    padding: 14px 14px 14px 45px !important;
    border: 1.5px solid var(--hba-gray-light);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--hba-text-primary);
    outline: none;
    transition: all 0.3s ease;
}

.hba-input-field:focus {
    border-color: var(--hba-border-focus);
    background-color: var(--hba-surface-selected);
    box-shadow: 0 0 0 4px var(--hba-focus-ring);
}

.hba-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
    color: var(--hba-brand-primary-emphasis);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.hba-input-field:focus ~ .hba-input-icon {
    opacity: 1;
}

.hba-input-label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--hba-text-secondary);
    pointer-events: none;
    transition: all .2s;
}

.hba-input-field:focus ~ .hba-input-label,
.hba-input-field:not(:placeholder-shown) ~ .hba-input-label {
    top: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--hba-brand-primary-emphasis);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Checkout Summary Sidebar */
.hba-summary-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--hba-text-primary);
    margin-bottom: 20px;
}

.hba-room-thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--hba-surface-inverse) 10%, transparent);
}

.hba-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--hba-gray-light);
}

.hba-summary-row:last-of-type {
    border-bottom: none;
}

.hba-summary-label {
    color: var(--hba-text-secondary);
    font-size: 14px;
    font-weight: 700;
}

.hba-summary-value {
    color: var(--hba-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.hba-summary-total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--hba-gray-light);
}

.hba-summary-total-amount {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--hba-text-primary);
}

/* ===== HBA ROOM CATALOG STYLES ===== */

.hba-room-card {
    display: flex;
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 8%, transparent);
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.hba-room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--hba-surface-inverse) 15%, transparent);
}

/* Image Section (40%) */
.hba-room-image-section {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
}

.hba-room-slider {
    position: relative;
    width: 100%;
    height: 280px;
}

.hba-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hba-slide.active {
    opacity: 1;
}

.hba-room-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hba-slider-prev,
.hba-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hba-slider-prev {
    left: 10px;
}

.hba-slider-next {
    right: 10px;
}

.hba-slider-prev:hover,
.hba-slider-next:hover {
    background: var(--hba-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hba-slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hba-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.hba-dot.active {
    background: var(--hba-white);
    transform: scale(1.2);
}

/* Details Section (45%) */
.hba-room-details-section {
    flex: 0 0 45%;
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.hba-room-header {
    margin-bottom: 15px;
}

.hba-room-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.hba-room-meta-single {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.hba-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: var(--hba-text-secondary);
}

.hba-room-description {
    flex: 1;
    margin-bottom: 15px;
}

.hba-room-description p {
    color: var(--hba-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.hba-room-amenities {
    margin-bottom: 15px;
}

.hba-amenity-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 8px 0;
    padding: 4px 10px;
    background: var(--hba-gray-bg);
    border-radius: 20px;
    font-size: 12px;
    color: var(--hba-text-secondary);
}

.hba-amenity-icon {
    font-size: 14px;
}

.hba-amenity-name {
    font-weight: 500;
}

.hba-amenity-more {
    display: inline-block;
    padding: 4px 10px;
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

/* Action Section (25%) */
.hba-room-action-section {
    flex: 0 0 25%;
    padding: 25px 25px 25px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hba-room-price {
    margin-bottom: 20px;
}

.hba-price-label {
    font-size: 13px;
    color: var(--hba-text-secondary);
    margin-bottom: 5px;
    font-weight: 500;
}

.hba-price-amount {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--hba-text-primary);
    line-height: 1.2;
}

.hba-room-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hba-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.hba-btn-primary {
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-hover) 100%);
    color: var(--hba-brand-primary-emphasis-contrast);
    box-shadow: 0 4px 15px var(--hba-focus-ring);
}

.hba-btn-primary:hover {
    background: var(--hba-brand-primary-hover);
    color: var(--hba-brand-primary-hover-contrast);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--hba-selected-ring);
}

.hba-btn-secondary {
    background: var(--hba-surface);
    color: var(--hba-text-primary);
    border: 2px solid var(--hba-border-strong);
}

.hba-btn-secondary:hover {
    background: var(--hba-surface-soft);
    border-color: var(--hba-border-focus);
    color: var(--hba-text-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hba-room-card {
        flex-direction: column;
    }
    
    .hba-room-image-section,
    .hba-room-details-section,
    .hba-room-action-section {
        flex: 1;
        width: 100%;
    }
    
    .hba-room-action-section {
        padding: 20px;
        border-top: 1px solid var(--hba-gray-light);
    }
    
    .hba-room-buttons {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .hba-room-card {
        margin-bottom: 20px;
    }
    
    .hba-room-slider {
        height: 220px;
    }
    
    .hba-room-details-section,
    .hba-room-action-section {
        padding: 20px;
    }
    
    .hba-room-title {
        font-size: 20px;
    }
    
    .hba-price-amount {
        font-size: 20px;
    }
}

.hba-final-amount {
    font-size: 32px;
    font-weight: 800;
    color: var(--hba-brand-secondary-emphasis);
}

/* Privacy Policy Modal */
#hba-privacy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.hba-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.hba-modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.hba-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--hba-gray-dark);
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.hba-modal-close:hover {
    color: var(--hba-error-text);
}

.hba-modal-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 20px 0;
    padding-right: 40px;
}

.hba-modal-body {
    color: var(--hba-text-primary);
    font-size: 14px;
    line-height: 1.6;
}

.hba-modal-body p {
    margin-bottom: 15px;
}

/* Success Page */
.hba-success-page {
    padding: 60px 40px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.hba-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.hba-success-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 15px;
}

.hba-success-message {
    font-size: 18px;
    color: var(--hba-text-secondary);
    margin: 0 0 40px;
    line-height: 1.6;
}

.hba-success-summary {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #10b981;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: left;
}

/* =========================================================
   CORRECTIONS LOGIQUE OPTIONS
   ========================================================= */

.hba-included-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #E5E7EB;
}

.hba-options-included-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

.hba-included-category {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.hba-option-row.hba-included-row {
    background: #F9FAFB;
    border-color: #E5E7EB;
    margin-bottom: 8px;
}

.hba-option-row.hba-included-row:hover {
    border-color: #D1D5DB;
    box-shadow: none;
}

.hba-option-included {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hba-success);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.hba-option-included::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hba-success);
    color: #ffffff;
    font-size: 10px;
}

.hba-sidebar-service-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.hba-sidebar-service-meta {
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hba-option-row.is-selected .hba-option-add {
    display: none;
}

.hba-option-row:not(.is-selected) .hba-option-remove {
    display: none;
}

.hba-transfer-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hba-success-summary .hba-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.hba-success-summary .hba-summary-row:last-child {
    border-bottom: none;
}

.hba-success-summary .hba-summary-label {
    color: var(--hba-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.hba-success-summary .hba-summary-value {
    color: var(--hba-text-primary);
    font-size: 16px;
    font-weight: 700;
}

.hba-success-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.hba-btn-print {
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-hover) 100%);
    color: var(--hba-brand-primary-emphasis-contrast);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
    letter-spacing: 0.5px;
}

.hba-btn-print:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
    background: linear-gradient(135deg, var(--hba-brand-primary-hover) 0%, var(--hba-brand-primary-active) 100%);
    color: var(--hba-brand-primary-hover-contrast);
}

.hba-btn-icon {
    font-size: 18px;
}

.hba-btn-home {
    padding: 14px 28px;
    background: white;
    color: var(--hba-text-primary);
    border: 2px solid var(--hba-gray-light);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.hba-btn-home:hover {
    border-color: var(--hba-brand-primary-hover);
    color: var(--hba-brand-primary-hover);
}

/* Hide print template normally */
#hba-printable-invoice {
    display: none;
}

/* Print Styles */
@media print {
    /* Hide all elements except the invoice */
    * {
        visibility: hidden;
    }

    /* Show only the invoice and its children */
    #hba-printable-invoice,
    #hba-printable-invoice * {
        visibility: visible;
    }

    /* Position the invoice */
    #hba-printable-invoice {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        background: white;
        z-index: 9999;
    }

    /* Remove browser headers/footers */
    @page {
        margin: 0;
    }
    body {
        margin: 1.6cm;
    }

    /* A4 Paper Styling */
    .print-invoice-container {
        max-width: 210mm;
        margin: 0 auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--hba-text-primary);
        background: var(--hba-surface);
        padding: 20mm;
    }

    .print-header {
        border-bottom: 3px solid var(--hba-brand-primary-emphasis);
        padding-bottom: 20px;
        margin-bottom: 30px;
        text-align: center;
    }

    .print-logo {
        font-size: 48px;
        margin-bottom: 10px;
    }

    .print-hotel-name {
        font-size: 28px;
        font-weight: bold;
        color: var(--hba-text-primary);
        margin: 0;
    }

    .print-hotel-info {
        color: var(--hba-text-muted);
        font-size: 14px;
        margin: 5px 0;
    }

    .print-section {
        margin-bottom: 30px;
    }

    .print-section-title {
        font-size: 24px;
        font-weight: bold;
        color: var(--hba-text-primary);
        text-align: center;
        margin: 0 0 30px;
    }

    .print-subtitle {
        font-size: 16px;
        font-weight: bold;
        color: var(--hba-text-primary);
        border-bottom: 2px solid var(--hba-brand-primary-emphasis);
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .print-section p {
        margin: 10px 0;
        font-size: 14px;
    }

    .print-footer {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #e0e0e0;
        text-align: center;
        color: #666;
        font-size: 14px;
    }

    /* Hide all other elements during print */
    .abdoul-booking-wrapper > *:not(#hba-print-invoice) {
        display: none !important;
    }
}

/* Secure Checkout Badge */
.hba-secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 10px;
    border: 1px solid #bbf7d0;
}

.hba-secure-badge-icon {
    font-size: 20px;
}

.hba-secure-badge-text {
    color: #166534;
    font-size: 13px;
    font-weight: 600;
}

/* Confirm Button */
#abdoul-confirm-booking {
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-hover) 100%);
    color: var(--hba-brand-primary-emphasis-contrast);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#abdoul-confirm-booking::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

#abdoul-confirm-booking:hover::before {
    left: 100%;
}

#abdoul-confirm-booking:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--hba-surface-inverse) 25%, transparent);
}

#abdoul-confirm-booking:active {
    transform: translateY(0);
}

#abdoul-confirm-booking:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Split-Screen Layout */
.hba-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
    min-width: 0;
}

@media (max-width: 1024px) {
    .hba-checkout-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hba-checkout-grid > * {
        min-width: 0;
    }
    }

/* ============================================
   INPUT VALIDATION STATES
   ============================================ */

.hba-input-valid {
    border-color: #38a169 !important;
    background: #f0fdf4;
}

.hba-input-valid:focus {
    box-shadow: 0 0 0 4px rgba(56, 161, 105, 0.1);
}

.hba-input-invalid {
    border-color: #e53e3e !important;
    background: #fef2f2;
}

.hba-input-invalid:focus {
    box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.1);
}

.hba-input-field {
    transition: all 0.3s ease;
}

/* ============================================
   LUXURY SPINNER
   ============================================ */

.hba-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: hba-spin 0.8s ease-in-out infinite;
    margin-right: 10px;
    vertical-align: middle;
}

@keyframes hba-spin {
    to { transform: rotate(360deg); }
}

.abdoul-btn-loading {
    opacity: 0.8;
    cursor: wait;
}

/* ===== FLOOR SELECTION MODAL ===== */
#hba-floor-selection-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.75) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 20px 0 !important;
}

#hba-floor-selection-modal .hba-modal-inner {
    background: white;
    padding: 35px;
    border-radius: 16px;
    max-width: 860px;
    width: 95%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    margin: auto;
    position: relative;
}

#hba-floor-selection-modal h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
    text-align: center;
}

#hba-floor-selection-modal p {
    color: #666;
    text-align: center;
    margin-bottom: 25px;
}

#hba-floor-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}
#hba-floor-modal-close:hover { color: #333; }

.hba-floor-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 768px) {
    .hba-floor-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .hba-floor-cards {
        grid-template-columns: 1fr !important;
    }
}

.hba-floor-card {
    background: var(--hba-surface, white);
    border: 2px solid var(--hba-border, #e2e8f0);
    border-radius: 12px;
    padding: 20px 15px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hba-floor-card:hover {
    background: var(--hba-surface-selected, #f0fafa);
    border-color: var(--hba-border-focus, #008080);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--hba-focus-ring, rgba(0,128,128,0.2));
}

.hba-floor-card.is-selected {
    background: var(--hba-surface-selected, #f0fafa) !important;
    border-color: var(--hba-border-selected, #008080) !important;
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--hba-selected-ring, rgba(0,128,128,0.35));
}

.hba-floor-card.is-selected .hba-floor-text {
    color: var(--hba-brand-primary-emphasis, #008080) !important;
}
.hba-floor-card.is-selected .hba-unit-text {
    color: var(--hba-text-secondary, #4b5563) !important;
}

.hba-floor-card.is-booked {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #ccc;
}

.hba-floor-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--hba-text-primary, #111827);
}

.hba-unit-text {
    font-size: 12px;
    color: #888;
}

.hba-elevator-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    color: var(--hba-brand-primary-emphasis, #008080);
}

.hba-floor-card.is-selected .hba-elevator-icon svg {
    color: var(--hba-brand-primary-emphasis, #008080);
}

/* ===== BACK BUTTONS ===== */
.hba-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    background: white;
    color: #555;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hba-btn-back:hover {
    border-color: var(--hba-border-focus, #008080);
    color: var(--hba-brand-primary-emphasis, #008080);
    background: var(--hba-surface-selected, #f0fafa);
    transform: translateX(-3px);
    text-decoration: none;
}

.hba-btn-back-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.hba-btn-back:hover .hba-btn-back-icon {
    transform: translateX(-3px);
}

.hba-btn-back-text {
    font-size: 14px;
}

/* Step 2 footer layout */
.abdoul-results-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 30px !important;
    padding: 20px 0 !important;
}

/* Step 3 back button - improve existing */
.hba-form-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 30px !important;
}

.hba-form-actions .hba-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    border: 2px solid #e0e0e0 !important;
    background: white !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.hba-form-actions .hba-btn-outline:hover {
    border-color: var(--hba-border-focus, #008080) !important;
    color: var(--hba-brand-primary-emphasis, #008080) !important;
    background: var(--hba-surface-selected, #f0fafa) !important;
    transform: translateX(-3px) !important;
    text-decoration: none !important;
}

/* ===== HBA SEARCH BAR ===== */
.hba-searchbar-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 60px;
    padding: 8px 8px 8px 30px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
}

.hba-searchbar-light {
    background: #ffffff;
    color: #333;
}

.hba-searchbar-dark {
    background: rgba(20,20,20,0.85);
    color: #fff;
    backdrop-filter: blur(10px);
}

.hba-searchbar-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
    flex-wrap: nowrap;
}

.hba-searchbar-field {
    flex: 1;
    padding: 6px 16px;
    min-width: 0;
}

.hba-searchbar-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    color: inherit;
    opacity: 0.7;
}

.hba-searchbar-light .hba-searchbar-label { color: #333; }
.hba-searchbar-dark .hba-searchbar-label  { color: #fff; }

.hba-searchbar-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

.hba-searchbar-light .hba-searchbar-input { color: #1a1a1a !important; }
.hba-searchbar-dark  .hba-searchbar-input { color: #ffffff !important; }

.hba-searchbar-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

.hba-searchbar-divider {
    width: 1px;
    height: 40px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.hba-searchbar-dark .hba-searchbar-divider {
    background: rgba(255,255,255,0.2);
}

.hba-searchbar-counter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hba-counter-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--hba-border-focus, #008080) !important;
    background: transparent !important;
    color: var(--hba-brand-primary-emphasis, #008080) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.hba-counter-btn:hover {
    background: var(--hba-brand-primary-emphasis, #008080) !important;
    color: var(--hba-brand-primary-emphasis-contrast, white) !important;
}

.hba-counter-input {
    width: 32px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.hba-searchbar-btn-wrap {
    flex-shrink: 0;
    margin-left: 8px;
}

.hba-searchbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 28px !important;
    border-radius: 50px !important;
    border: none !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

.hba-searchbar-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25) !important;
    opacity: 0.92 !important;
}

.hba-searchbar-btn-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.hba-searchbar-btn:hover .hba-searchbar-btn-arrow {
    transform: translateX(4px);
}

.hba-searchbar-error {
    color: #e74c3c;
    font-size: 13px;
    padding: 8px 20px;
    margin-top: 6px;
}

/* Responsive */
@media (max-width: 900px) {
    .hba-searchbar-wrap {
        border-radius: 20px;
        padding: 20px;
        flex-direction: column;
    }
    .hba-searchbar-form {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    .hba-searchbar-field {
        width: 100%;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }
    .hba-searchbar-divider { display: none; }
    .hba-searchbar-btn-wrap {
        width: 100%;
        margin: 10px 0 0 0;
    }
    .hba-searchbar-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* =========================================================
   SOFT LUXURY SIDEBAR - Design Minimaliste
   ========================================================= */

.abdoul-price-highlight {
    color: var(--hba-brand-secondary-emphasis);
    font-weight: 700;
}

.abdoul-divider {
    height: 1px;
    background: #f1f3f5;
    margin: 16px 0;
}

/* Mobile Sticky Sidebar */
@media (max-width: 768px) {
        
    }

/* =========================================================
   PRICE BREAKDOWN SIDEBAR - Soft Luxury Style
   ========================================================= */

.hba-price-breakdown-sidebar {
    margin-top: 12px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hba-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f3f5;
    cursor: pointer;
    user-select: none;
}

.hba-breakdown-header:hover {
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    margin: -16px -16px 0 -16px;
    padding: 16px;
}

.hba-breakdown-icon {
    font-size: 16px;
    color: #212529;
}

.hba-breakdown-title {
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    flex: 1;
}

.hba-breakdown-chevron {
    font-size: 12px;
    color: #6c757d;
    transition: transform 0.3s ease;
}

.hba-breakdown-sidebar.collapsed .hba-breakdown-chevron {
    transform: rotate(-90deg);
}

.hba-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.hba-breakdown-list-active {
    display: block !important;
    max-height: 1000px !important;
    opacity: 1 !important;
}

.hba-breakdown-sidebar:not(.collapsed) .hba-breakdown-list {
    max-height: 500px;
}

.hba-breakdown-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.4;
}

.hba-breakdown-label {
    color: #6c757d;
    font-weight: 400;
    flex: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hba-breakdown-amount {
    color: #212529;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hba-breakdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid #e0e0e0;
    font-size: 18px;
    font-weight: 700;
}

.hba-breakdown-total-label {
    color: #212529;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hba-breakdown-total-amount {
    color: var(--hba-brand-secondary-emphasis);
    font-size: 22px;
    font-weight: 700;
}

.hba-breakdown-indicator {
    display: none;
}

/* =========================================================
   ELEGANT PAYMENT BUTTON
   ========================================================= */

.hba-payment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-active) 100%);
    border: none;
    border-radius: 12px;
    color: var(--hba-brand-primary-emphasis-contrast);
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--hba-focus-ring);
    text-transform: none;
    letter-spacing: 0;
}

.hba-payment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--hba-selected-ring);
    background: linear-gradient(135deg, var(--hba-brand-primary-hover) 0%, var(--hba-brand-primary-active) 100%);
    color: var(--hba-brand-primary-hover-contrast);
}

.hba-payment-btn:active {
    transform: translateY(0);
}

.hba-payment-btn-icon {
    font-size: 18px;
}

/* =========================================================
   MINI-MODALE BREAKDOWN - Overlay Minimaliste
   ========================================================= */

.hba-price-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hba-price-trigger:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.hba-price-trigger::after {
    content: 'ℹ️';
    font-size: 12px;
    opacity: 0.6;
}

.hba-breakdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hba-breakdown-overlay.active {
    display: flex;
}

.hba-breakdown-modal {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hba-breakdown-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f3f5;
}

.hba-breakdown-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hba-breakdown-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.hba-breakdown-modal-close:hover {
    color: #212529;
}

.hba-breakdown-modal-body {
    padding: 24px;
}

.hba-breakdown-modal .hba-price-breakdown-sidebar {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* =========================================================
   OPTIONS COUNTER INPUT — Bug #2 fix
   ========================================================= */

.hba-qty-input,
.hba-qty-input:focus {
    color: var(--hba-text-primary) !important;
    background: var(--hba-surface) !important;
    border: 1px solid var(--hba-gray-light) !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 70px !important;
    height: 34px !important;
    padding: 0 8px !important;
    margin: 0 2px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
}

.hba-qty-input::-webkit-outer-spin-button,
.hba-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.hba-qty-minus,
.hba-qty-plus {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--hba-gray-light) !important;
    border-radius: 8px !important;
    background: var(--hba-surface) !important;
    color: var(--hba-text-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.hba-qty-minus:hover:not(:disabled),
.hba-qty-plus:hover:not(:disabled) {
    background: var(--hba-brand-primary-hover) !important;
    color: var(--hba-brand-primary-hover-contrast) !important;
    border-color: var(--hba-brand-primary-hover) !important;
}

.hba-qty-minus:disabled,
.hba-qty-plus:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* =========================================================
   UNIT FILTERS SIDEBAR — Bloc H
   ========================================================= */

#hba-unit-filters-sidebar .hba-unit-filters h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#hba-filter-count:empty::before {
    content: '';
}

.hba-filter-group label {
    transition: all 0.2s ease;
    padding: 2px 0;
    border-radius: 6px;
}

.hba-filter-group label:hover {
    background: var(--hba-surface-selected);
}

.hba-filter-group input[type="checkbox"] {
    min-width: 16px;
    min-height: 16px;
}

#hba-no-units-message {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    #hba-unit-filters-sidebar }

/* =========================================================
   SOUS-BLOC A — Header + Stepper + Carte récapitulative
   (Flexibooking visual refresh)
   ========================================================= */

/* Override : fond blanc, pas de gradient, pas de gros shadow */
.abdoul-booking-wrapper {
    background: #ffffff !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    min-height: auto !important;
}

.abdoul-main-container {
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* === HEADER === */
.hba-tunnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #E5E7EB;
    background: #ffffff;
}

.hba-tunnel-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hba-tunnel-header-logo {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--hba-brand-primary-emphasis);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--hba-brand-primary-emphasis-contrast);
    font-size: 22px;
}

.hba-tunnel-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hba-tunnel-header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hba-tunnel-header-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.hba-tunnel-header-city {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.hba-tunnel-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hba-tunnel-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #4B5563;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    cursor: not-allowed;
    font-family: 'Inter', sans-serif;
}

.hba-tunnel-header-chevron {
    font-size: 9px;
    color: #9CA3AF;
}

.hba-tunnel-header-help {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #E5E7EB;
    background: #ffffff;
    color: #4B5563;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hba-tunnel-header-home {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
    color: #4B5563;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hba-tunnel-header-home:hover {
    background: #F3F4F6;
    color: var(--hba-text-primary);
    border-color: #D1D5DB;
}

.hba-tunnel-header-home-icon {
    font-size: 13px;
    line-height: 1;
}

.hba-tunnel-header-help:hover {
    border-color: var(--hba-border-focus);
    color: var(--hba-text-primary);
}

@media (max-width: 480px) {
    .hba-tunnel-header-home {
        padding: 7px 10px;
        font-size: 12px;
    }
    .hba-tunnel-header-home-label {
        display: none;
    }
}

/* === STEPPER (composant unique responsive) === */
.abdoul-progress-integrated {
    display: block;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 24px 28px;
    background: #ffffff;
    position: relative;
}

.abdoul-progress-step,
.abdoul-step-connector,
.abdoul-step-circle,
.abdoul-step-content,
.abdoul-step-title,
.abdoul-step-desc {
    display: none !important;
}

.abdoul-step-mobile-wrap {
    display: block;
    width: 100%;
}

/* --- Carte de progression bleu marine --- */
.abdoul-mprog {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, var(--hba-brand-primary-emphasis) 0%, var(--hba-brand-primary-active) 100%);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.abdoul-mprog-label {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.abdoul-mprog-ring {
    --hba-pct: 0;
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        conic-gradient(var(--hba-brand-secondary-emphasis) calc(var(--hba-pct) * 1%), rgba(255, 255, 255, 0.18) 0);
    transition: background 0.4s ease;
}

.abdoul-mprog-ring::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hba-brand-primary-active);
}

.abdoul-mprog-pct {
    position: relative;
    font-size: 17px;
    font-weight: 800;
    color: var(--hba-text-inverse);
    letter-spacing: -0.3px;
}

.abdoul-mprog-meta {
    flex: 1.3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.abdoul-mprog-position {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.abdoul-mprog-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--hba-brand-secondary-emphasis);
}

/* --- Rangée d'étapes --- */
.abdoul-step-mobile-icons {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.abdoul-mobile-step-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.abdoul-mobile-step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    border-radius: 1px;
    background: #E5E7EB;
}

.abdoul-mobile-step-item.is-completed:not(:last-child)::after {
    background: var(--hba-brand-secondary-emphasis);
}

.abdoul-mobile-step-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #F3F4F6;
    color: #9CA3AF;
    font-size: 15px;
    line-height: 1;
    transition: all 0.25s ease;
}

.abdoul-mobile-step-item.is-completed .abdoul-mobile-step-icon {
    background: var(--hba-brand-secondary-emphasis);
    color: var(--hba-brand-secondary-emphasis-contrast);
}

.abdoul-mobile-step-item.is-active .abdoul-mobile-step-icon {
    width: 40px;
    height: 40px;
    font-size: 19px;
    border-radius: 12px;
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    box-shadow: 0 4px 12px var(--hba-selected-ring);
}

.abdoul-mobile-step-item.is-active::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(100% + 12px);
    border-radius: 12px;
    background: var(--hba-surface-selected);
}

.abdoul-mobile-step-label {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 500;
    color: #9CA3AF;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.abdoul-mobile-step-item.is-active .abdoul-mobile-step-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

/* === CARTE RÉCAPITULATIVE === */
.hba-tunnel-recap {
    display: grid;
    grid-template-columns: 140px 1.5fr 1fr;
    gap: 0;
    align-items: center;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 24px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    max-width: 1200px;
}

.hba-tunnel-recap-media {
    width: 140px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hba-tunnel-recap-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hba-tunnel-recap-noimage {
    font-size: 28px;
}

.hba-tunnel-recap-info {
    padding: 0 20px;
    border-right: 1px solid #E5E7EB;
}

.hba-tunnel-recap-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.hba-tunnel-recap-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}

.hba-tunnel-recap-meta-item {
    font-size: 13px;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.hba-tunnel-recap-link {
    font-size: 12px;
    color: #2563EB;
    text-decoration: underline;
    font-weight: 500;
}

.hba-tunnel-recap-link:hover {
    color: #1D4ED8;
}

.hba-tunnel-recap-dates {
    padding-left: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: center;
    gap: 12px 24px;
    min-height: 60px;
}

.hba-tunnel-recap-dates .hba-tunnel-recap-modifier {
    display: inline-flex;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #4B5563;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-left: auto;
}

.hba-tunnel-recap-dates .hba-tunnel-recap-modifier:hover {
    border-color: var(--hba-border-focus);
    color: var(--hba-text-primary);
    background: #F9FAFB;
}

.hba-tunnel-recap-date-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hba-tunnel-recap-date-icon {
    font-size: 14px;
    color: #9CA3AF;
    width: 18px;
    text-align: center;
}

.hba-tunnel-recap-date-label {
    display: block;
    font-size: 11px;
    color: #9CA3AF;
    margin-bottom: 1px;
}

.hba-tunnel-recap-date-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.hba-tunnel-recap-header {
    display: none;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .hba-tunnel-recap {
        grid-template-columns: 140px 1fr 240px;
    }
}

@media (max-width: 768px) {
    .hba-tunnel-header {
        padding: 12px 16px;
    }

    .hba-tunnel-header-text {
        display: none;
    }

    .hba-tunnel-header-controls {
        gap: 6px;
    }

    .hba-tunnel-header-btn {
        padding: 6px 9px;
        font-size: 11px;
    }







    .hba-tunnel-recap-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        background: none;
        border: none;
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        cursor: pointer;
    }

    .hba-tunnel-recap-header-chevron {
        font-size: 12px;
        color: #6B7280;
    }

    .hba-tunnel-recap-content {
        display: none;
    }

    .hba-tunnel-recap.is-open .hba-tunnel-recap-content {
        display: block;
        margin-top: 12px;
    }

    .hba-tunnel-recap {
        display: block;
        padding: 16px;
        margin: 0 16px 20px;
    }

    .hba-tunnel-recap-media {
        width: 100%;
        height: 160px;
    }

    .hba-tunnel-recap-info {
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        padding: 0 0 12px;
    }

    .hba-tunnel-recap-dates {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        min-height: 0;
    }

    .hba-tunnel-recap-dates .hba-tunnel-recap-modifier {
        position: static;
        transform: none;
        margin-top: 10px;
        text-align: center;
        display: inline-block;
    }
}

/* =========================================================
   SOUS-BLOC B — Étape Unité : filtres + grille par étage
   ========================================================= */

.hba-unit-page .hba-main-layout,
.hba-unit-page {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.hba-unit-filters-sidebar {
    width: 180px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.hba-unit-filters-toggle {
    display: none;
    width: 100%;
    padding: 12px 16px;
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
}

.hba-filters-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--hba-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#hba-filter-count:empty::before {
    content: '';
}

.hba-filter-group {
    margin-bottom: 20px;
}

.hba-filter-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px 0;
}

.hba-filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hba-filter-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    position: relative;
    padding: 2px 0;
}

.hba-filter-options label:hover {
    color: #111827;
}

.hba-filter-options input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.hba-custom-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid #D1D5DB;
    border-radius: 4px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.hba-filter-options input[type="checkbox"]:checked + .hba-custom-check {
    background: var(--hba-brand-primary-emphasis);
    border-color: var(--hba-brand-primary-emphasis);
}

.hba-filter-options input[type="checkbox"]:checked + .hba-custom-check::after {
    content: '✓';
    color: var(--hba-brand-primary-emphasis-contrast);
    font-size: 10px;
    font-weight: 700;
}

.hba-filter-options input[type="checkbox"]:focus + .hba-custom-check {
    box-shadow: 0 0 0 3px var(--hba-focus-ring);
}

.hba-filter-empty {
    margin: 0;
    font-size: 12px;
    color: #9CA3AF;
    font-style: italic;
}

.hba-filters-reset {
    width: 100%;
    padding: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: none;
    margin-top: 10px;
}

.hba-filters-reset:hover {
    background: #F3F4F6;
}

/* Unité : colonne résultats */
.hba-unit-page .hba-rooms-column {
    flex: 1;
    min-width: 0;
}

.hba-unit-results .abdoul-card-header {
    background: transparent;
    border-bottom: none;
    padding: 0 0 8px;
}

.hba-unit-results .abdoul-card-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.hba-unit-results .abdoul-card-subtitle {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}

.hba-unit-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 16px 0;
    font-size: 12px;
    color: #6B7280;
}

.hba-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hba-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.hba-legend-available .hba-legend-dot {
    background: var(--hba-success);
}

.hba-legend-selected .hba-legend-dot {
    background: var(--hba-brand-primary-emphasis);
}

.hba-legend-unavailable .hba-legend-dot {
    background: #E5E7EB;
}

.hba-unit-selection-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--hba-info-soft);
    border: 1px solid var(--hba-info-border);
    border-radius: 10px;
    margin-bottom: 20px;
    color: var(--hba-info-text);
}

.hba-unit-selection-icon {
    font-size: 18px;
    color: var(--hba-brand-primary-emphasis);
    flex-shrink: 0;
}

.hba-unit-selection-title {
    font-size: 13px;
    color: #374151;
    margin-bottom: 4px;
}

.hba-unit-selection-title strong {
    color: #111827;
}

.hba-unit-selection-attrs {
    font-size: 12px;
    color: #6B7280;
}

/* Étages */
.hba-units-stages {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hba-unit-stage-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 0;
}

.hba-unit-stage-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

.hba-unit-stage-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.hba-unit-card {
    border: 1.5px solid var(--hba-success);
    border-radius: 10px;
    padding: 14px 4px;
    text-align: center;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

.hba-unit-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.hba-unit-card:hover:not(.hba-unit-unavailable):not(.is-selected) {
    border-color: #16a34a;
    box-shadow: 0 4px 12px rgba(56, 161, 105, 0.12);
    transform: translateY(-2px);
}

.hba-unit-unavailable {
    background: #F3F4F6;
    border-color: #E5E7EB;
    cursor: not-allowed;
    opacity: 0.9;
}

.hba-unit-card.is-selected {
    background: var(--hba-brand-primary-emphasis);
    border-color: var(--hba-brand-primary-active);
    color: var(--hba-brand-primary-emphasis-contrast);
}

.hba-unit-card.hba-unit-unavailable .hba-unit-number,
.hba-unit-card.hba-unit-unavailable .hba-unit-view {
    color: #9CA3AF;
}

.hba-unit-card.is-selected .hba-unit-number,
.hba-unit-card.is-selected .hba-unit-view {
    color: var(--hba-brand-primary-emphasis-contrast);
}

.hba-unit-card.is-selected .hba-select-unit-btn {
    display: none;
}

.hba-unit-number {
    font-size: 16px;
    font-weight: 700;
    color: var(--hba-success);
    line-height: 1.2;
    position: relative;
}

.hba-unit-card.is-selected .hba-unit-number::after {
    content: '✓';
    position: absolute;
    top: -8px;
    right: -14px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    color: var(--hba-brand-primary-emphasis);
    border-radius: 50%;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hba-unit-view {
    font-size: 10px;
    color: #6B7280;
    min-height: 14px;
}

.hba-unit-status-unavailable {
    font-size: 10px;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hba-select-unit-btn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 5;
}

.hba-unit-card[data-available="1"]:not(.is-selected):not(.hba-unit-unavailable) {
    cursor: pointer;
}

.hba-unit-footer {
    margin-top: 30px;
    padding: 20px 0 0;
}

.hba-unit-back {
    border-color: #D1D5DB;
    color: #6B7280;
}

/* Responsive */
@media (max-width: 1024px) {
    .hba-unit-stage-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .hba-unit-page,
    .hba-unit-page .hba-main-layout {
        flex-direction: column;
        gap: 16px;
    }

    .hba-unit-filters-sidebar {
        position: static;
        width: 100%;
        top: auto;
    }

    .hba-unit-filters-toggle {
        display: flex;
    }

    .hba-unit-filters-panel {
        display: none;
        padding: 16px;
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 0 0 10px 10px;
        margin-top: -6px;
    }

    .hba-unit-filters-panel.is-open {
        display: block;
    }

    .hba-unit-filters-toggle[aria-expanded="true"] .hba-filters-toggle-icon {
        transform: rotate(180deg);
    }

    .hba-unit-stage-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .hba-unit-legend {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hba-tunnel-recap-dates .hba-tunnel-recap-modifier {
        position: static;
        transform: none;
    }
}

@media (max-width: 480px) {
    .hba-unit-stage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hba-unit-number {
        font-size: 15px;
    }
}

/* =========================================================
   SOUS-BLOC C — Étape Options : services + compteurs + récap
   ========================================================= */

.hba-options-page {
    display: block !important;
}

.hba-options-page .hba-main-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
}

.hba-options-page .hba-rooms-column {
    flex: 1;
    min-width: 0;
}

.hba-options-page .hba-options-card {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    background: #ffffff;
}

.hba-options-header {
    background: transparent;
    border-bottom: none;
    padding: 0 0 8px;
    margin-bottom: 16px;
}

.hba-options-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.hba-options-header .abdoul-card-subtitle {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}

.hba-options-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hba-option-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #E5E7EB;
    flex-wrap: nowrap;
}

.hba-option-row:last-child {
    border-bottom: none;
}

.hba-option-media {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #F9FAFB;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hba-option-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hba-option-emoji {
    font-size: 24px;
    line-height: 1;
}

.hba-option-info {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hba-option-name {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.hba-option-description {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}

.hba-option-unit-price {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    margin-top: 2px;
}

.hba-option-included,
.hba-option-included-total {
    color: var(--hba-success);
    font-weight: 600;
}

.hba-option-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hba-qty-minus,
.hba-qty-plus {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #F3F4F6;
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.hba-qty-minus:hover:not(:disabled),
.hba-qty-plus:hover:not(:disabled) {
    background: var(--hba-brand-primary-hover);
    color: var(--hba-brand-primary-hover-contrast);
}

.hba-qty-minus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hba-qty-input {
    width: 40px;
    height: 26px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    -moz-appearance: textfield;
    appearance: textfield;
}

.hba-qty-input::-webkit-outer-spin-button,
.hba-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hba-option-total {
    min-width: 90px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: var(--hba-text-primary);
    flex-shrink: 0;
}

.hba-options-included-title {
    margin: 24px 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

/* Bottom section: Bon à savoir + Recap */
.hba-options-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E5E7EB;
}

.hba-option-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--hba-info-soft);
    border: 1px solid var(--hba-info-border);
    border-radius: 10px;
}

.hba-option-note-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.hba-option-note-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.hba-option-note-text {
    margin: 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.hba-options-recap {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
}

.hba-options-recap-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hba-options-recap-list {
    margin-bottom: 12px;
}

.hba-options-recap-empty {
    margin: 0;
    font-size: 13px;
    color: #9CA3AF;
    font-style: italic;
}

.hba-options-recap-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #374151;
    padding: 6px 0;
    border-bottom: 1px solid #F3F4F6;
}

.hba-options-recap-item:last-child {
    border-bottom: none;
}

.hba-options-recap-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}

.hba-options-recap-total-label {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.hba-options-recap-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

/* Footer */
.hba-options-footer {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 0;
    border-top: none;
}

.hba-options-back {
    border: none;
    background: transparent;
    color: #6B7280;
    padding: 0;
}

.hba-options-back:hover {
    background: transparent;
    color: #111827;
}

.hba-options-cta {
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hba-options-cta:hover {
    background: #1e3a75;
    transform: translateY(-1px);
}

.hba-options-cta .abdoul-btn-icon {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
    .hba-options-bottom {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 768px) {
    .hba-options-page .hba-main-layout {
        flex-direction: column;
    }

    .hba-options-page     .hba-option-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hba-option-info {
        min-width: 140px;
        order: 2;
    }

    .hba-option-qty {
        order: 3;
    }

    .hba-option-total {
        order: 4;
        flex: 1;
        text-align: left;
    }

    .hba-options-footer {
        flex-direction: row;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
    }

    .hba-options-footer .hba-unit-continue {
        flex: 1;
        padding: 14px 20px;
    }

    .hba-options-cta {
        justify-content: center;
    }
}

/* =========================================================
   SOUS-BLOC D — Passe design finale étape Unité
   ========================================================= */

/* --- Titre d'étape --- */
.hba-step-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 0 18px;
}

.hba-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.hba-step-title-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* --- Header icône bâtiment --- */
.hba-tunnel-header-logo svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
}



.hba-tunnel-recap-info {
    padding: 0 24px;
}

.hba-tunnel-recap-title {
    font-size: 18px;
    margin: 0 0 10px;
}

.hba-tunnel-recap-meta {
    gap: 16px;
    margin-bottom: 12px;
}

.hba-tunnel-recap-meta-item {
    font-size: 13px;
    color: #6B7280;
    position: relative;
}

.hba-tunnel-recap-meta-item:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -10px;
    color: #E5E7EB;
}

.hba-tunnel-recap-link {
    font-size: 13px;
    color: #2563EB;
    text-decoration: underline;
    font-weight: 600;
}

.hba-tunnel-recap-dates {
    padding-left: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    align-items: center;
    gap: 12px 24px;
    min-height: 60px;
}

.hba-tunnel-recap-date-icon {
    color: #9CA3AF;
    font-size: 14px;
}

.hba-tunnel-recap-dates .hba-tunnel-recap-modifier {
    padding: 8px 16px;
    font-size: 12px;
    border-color: #D1D5DB;
    color: #374151;
    background: #ffffff;
}

/* --- Section choix --- */
.hba-unit-page .abdoul-booking-content {
    padding: 0 24px;
}

.hba-unit-filters-sidebar {
    width: 190px;
    position: static;
}

.hba-filters-title {
    font-size: 13px;
    letter-spacing: 1.2px;
    margin: 0 0 22px;
    color: #111827;
}

.hba-filter-group {
    margin-bottom: 24px;
}

.hba-filter-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
}

.hba-filter-options {
    gap: 12px;
}

.hba-filter-options label {
    font-size: 13px;
    color: #374151;
    gap: 10px;
}

.hba-custom-check {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #D1D5DB;
}

.hba-filter-options input[type="checkbox"]:checked + .hba-custom-check {
    background: var(--hba-brand-primary-emphasis);
    border-color: var(--hba-brand-primary-emphasis);
}

.hba-filter-options input[type="checkbox"]:checked + .hba-custom-check::after {
    content: '✓';
    color: var(--hba-brand-primary-emphasis-contrast);
    font-size: 11px;
    font-weight: 700;
}

/* --- Légende --- */
.hba-unit-legend {
    gap: 24px;
    margin: 14px 0 22px;
    font-size: 13px;
    color: #6B7280;
}

.hba-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.hba-legend-available .hba-legend-dot {
    border-radius: 50%;
    background: var(--hba-success);
}

.hba-legend-selected .hba-legend-dot {
    border-radius: 3px;
    background: var(--hba-brand-primary-emphasis);
}

.hba-legend-unavailable .hba-legend-dot {
    border-radius: 3px;
    background: #E5E7EB;
}

/* --- Titres d'étage --- */
.hba-unit-stage-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.5px;
    margin: 0 0 16px;
    gap: 14px;
}

.hba-unit-stage-title::after {
    height: 1px;
    background: #E5E7EB;
}

.hba-units-stages {
    gap: 28px;
}

/* --- Grille unités --- */
.hba-unit-stage-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.hba-unit-card {
    border: 1.5px solid var(--hba-success);
    border-radius: 12px;
    padding: 18px 8px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.2s ease;
}

.hba-unit-card-inner {
    gap: 6px;
}

.hba-unit-number {
    font-size: 18px;
    font-weight: 700;
    color: var(--hba-success);
    line-height: 1.2;
    position: relative;
}

.hba-unit-view {
    font-size: 11px;
    color: #6B7280;
    min-height: 14px;
}

.hba-unit-card.hba-unit-unavailable {
    background: #F3F4F6;
    border-color: #E5E7EB;
    cursor: not-allowed;
    opacity: 0.9;
}

.hba-unit-card.hba-unit-unavailable .hba-unit-number,
.hba-unit-card.hba-unit-unavailable .hba-unit-view {
    color: #9CA3AF;
}

.hba-unit-card.is-selected {
    background: var(--hba-brand-primary-emphasis);
    border-color: var(--hba-brand-primary-active);
    color: var(--hba-brand-primary-emphasis-contrast);
}

.hba-unit-card.is-selected .hba-unit-number,
.hba-unit-card.is-selected .hba-unit-view {
    color: var(--hba-brand-primary-emphasis-contrast);
}

.hba-unit-card.is-selected .hba-unit-number::after {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -18px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    color: var(--hba-brand-primary-emphasis);
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Bandeau de confirmation --- */
.hba-unit-selection-banner {
    align-items: center;
    padding: 16px 18px;
    background: #FFFBF5;
    border: 1px solid #F5E6D3;
    border-radius: 12px;
    margin-bottom: 24px;
    color: #111827;
}

.hba-unit-selection-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.hba-unit-selection-title {
    font-size: 14px;
    color: #374151;
    margin: 0;
}

.hba-unit-selection-attrs {
    font-size: 13px;
    color: #6B7280;
    margin-top: 4px;
}

/* --- Footer --- */
.hba-unit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 34px;
    padding: 24px 0 0;
    border-top: 1px solid #E5E7EB;
}

.hba-unit-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

.hba-unit-back:hover {
    color: var(--hba-text-primary);
}

.hba-unit-back-icon {
    font-size: 16px;
}

.hba-unit-continue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hba-unit-continue:hover {
    background: #142a5c;
    color: #ffffff;
}

.hba-unit-continue-arrow {
    font-size: 16px;
}

/* --- Bannière de confirmation d'unité sélectionnée (Bloc V) --- */
.hba-unit-confirmation {
    background: var(--hba-surface-selected);
    border: 1px solid var(--hba-border-selected);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 20px 0;
    box-shadow: 0 4px 12px var(--hba-selected-ring);
}

.hba-unit-confirm-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--hba-brand-primary-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 6px;
}

.hba-unit-confirm-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 4px;
}

.hba-unit-confirm-meta {
    font-size: 13px;
    color: #4B5563;
    margin: 0 0 8px;
}

.hba-unit-confirm-price {
    font-size: 14px;
    color: #374151;
}

.hba-unit-confirm-price strong {
    color: var(--hba-brand-secondary-emphasis);
    font-size: 16px;
}

/* =========================================================
   REFONTE OPTIONS / SERVICES — style Flexibooking
   ========================================================= */

.hba-options-page {
    --options-gap: 24px;
    --option-radius: 12px;
    --option-border: #E5E7EB;
    --option-bg: #ffffff;
}

.hba-options-page .hba-main-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--options-gap);
}

.hba-options-page .hba-rooms-column {
    flex: 1;
    min-width: 0;
}

.hba-options-page .hba-options-card {
    border: 1px solid var(--option-border);
    border-radius: 16px;
    padding: 28px;
    background: #ffffff;
}

.hba-options-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 28px;
}

.hba-options-title-block h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 6px;
    line-height: 1.2;
}

.hba-options-title-block .abdoul-card-subtitle {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

.hba-options-info-badges {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.hba-info-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #F9FAFB;
    font-size: 13px;
}

.hba-info-badge-icon {
    font-size: 18px;
    line-height: 1;
}

.hba-info-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hba-info-badge-value {
    font-weight: 700;
    color: var(--hba-text-primary);
    font-size: 15px;
}

.hba-info-badge-label {
    color: #6B7280;
    font-size: 12px;
}

.hba-options-category-title {
    margin: 28px 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--hba-text-primary);
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 8px;
}

.hba-options-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hba-option-row {
    display: grid;
    grid-template-columns: 64px 1fr 160px 110px;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: var(--option-radius);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.hba-option-row:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.hba-option-row.is-selected {
    border-color: var(--hba-border-selected);
    background: var(--hba-surface-selected);
    box-shadow: 0 2px 10px var(--hba-selected-ring);
}

.hba-option-row .hba-option-add {
    display: inline-flex;
}

.hba-option-row .hba-qty-control,
.hba-option-row .hba-transfer-choices,
.hba-option-row .hba-option-remove {
    display: none;
}

.hba-option-row.is-selected .hba-qty-control,
.hba-option-row.is-selected .hba-option-remove {
    display: inline-flex;
}

.hba-option-row.is-selected .hba-transfer-choices {
    display: flex;
}

.hba-option-row.is-selected .hba-option-add {
    display: none;
}

.hba-option-media {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hba-option-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hba-option-emoji {
    font-size: 28px;
    line-height: 1;
}

.hba-option-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hba-option-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.hba-option-description {
    margin: 0;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}

.hba-option-price-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hba-option-unit-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--hba-text-primary);
}

.hba-option-explanation {
    font-size: 12px;
    color: #9CA3AF;
}

.hba-option-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hba-qty-control {
    align-items: center;
    gap: 8px;
}

.hba-qty-minus,
.hba-qty-plus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    background: #ffffff;
    color: #374151;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
    padding: 0;
}

.hba-qty-minus:hover:not(:disabled),
.hba-qty-plus:hover:not(:disabled) {
    background: var(--hba-brand-primary-hover);
    color: var(--hba-brand-primary-hover-contrast);
    border-color: var(--hba-brand-primary-hover);
}

.hba-qty-input {
    width: 36px;
    height: 30px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    appearance: none;
    -moz-appearance: textfield;
}

.hba-option-add,
.hba-option-remove {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.hba-option-add {
    background: var(--hba-surface);
    color: var(--hba-brand-primary-emphasis);
    border-color: var(--hba-brand-primary-emphasis);
}

.hba-option-add:hover {
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
}

.hba-option-remove {
    background: transparent;
    color: #9CA3AF;
    border-color: transparent;
    text-decoration: underline;
    padding: 0;
    font-weight: 500;
    font-size: 12px;
}

.hba-option-remove:hover {
    color: #EF4444;
}

.hba-option-total {
    text-align: right;
    font-size: 17px;
    font-weight: 700;
    color: var(--hba-text-primary);
    min-width: 0;
}

.hba-transfer-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hba-transfer-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.hba-transfer-label input[type="radio"] {
    accent-color: var(--hba-brand-primary-emphasis);
}

/* Sidebar */
.hba-sidebar-services-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--hba-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 10px;
}

.hba-sidebar-services-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hba-sidebar-service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #374151;
    gap: 10px;
}

.hba-sidebar-service-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hba-sidebar-service-price {
    font-weight: 700;
    color: var(--hba-brand-secondary-emphasis);
    flex-shrink: 0;
}

.hba-options-cta {
    width: 100%;
    margin-top: 18px;
    padding: 14px 20px;
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hba-options-cta:hover {
    background: var(--hba-brand-primary-emphasis);
}

.hba-options-secure-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hba-options-footer {
    margin-top: 28px;
    padding-top: 0;
    border-top: none;
}

.hba-options-bottom {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .hba-options-page     .hba-option-row {
        grid-template-columns: 56px 1fr 120px 100px;
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .hba-options-page .hba-main-layout {
        flex-direction: column;
    }
    .hba-options-page     .hba-options-header {
        flex-direction: column;
        gap: 16px;
    }
    .hba-options-info-badges {
        width: 100%;
        justify-content: flex-start;
    }
    .hba-option-row {
        grid-template-columns: 56px 1fr;
        gap: 12px;
    }
    .hba-option-actions,
    .hba-option-total {
        grid-column: span 2;
        width: 100%;
    }
    .hba-option-actions {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .hba-option-total {
        text-align: left;
    }
    }

/* ===== .hba-recap-sidebar ===== */
.hba-recap-sidebar {
    width: 360px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    background: var(--hba-white);
    border: 1px solid #ECE7DC;
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    z-index: 99;
}

.hba-recap-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 24px 4px;
    border-bottom: none;
    background: var(--hba-white);
}

.hba-recap-sidebar__thumbnail {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--hba-gray-light);
}

.hba-recap-sidebar__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hba-recap-sidebar__title {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--hba-text-primary);
    font-family: 'Playfair Display', serif;
    white-space: nowrap;
}

.hba-recap-sidebar__rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 14px;
    background: linear-gradient(90deg, transparent, #C8922E 45%, transparent);
    opacity: 0.7;
}

.hba-recap-sidebar__badge,
.hba-recap-sidebar__hotel,
.hba-recap-sidebar__loc,
.hba-recap-sidebar__thumbnail {
    display: none;
}

.hba-recap-sidebar__toggle {
    display: none;
}

.hba-recap-sidebar__body {
    padding: 24px;
}

.hba-recap-sidebar__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hba-recap-sidebar__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.hba-recap-sidebar__row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--hba-text-secondary);
    font-weight: 500;
}

.hba-recap-sidebar__row-ico {
    flex: 0 0 auto;
    width: 18px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #C8922E;
}

.hba-recap-sidebar__row-value {
    color: var(--hba-text-primary);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hba-recap-sidebar__breakdown {
    margin-top: 16px;
}

.hba-recap-sidebar__section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9A6F1F;
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--hba-gray-light);
}

.hba-recap-sidebar__services {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.hba-options-sidebar-empty {
    margin: 0;
    font-size: 13px;
    color: var(--hba-text-muted);
    font-style: italic;
}

.hba-options-sidebar-service {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
}

.hba-options-sidebar-service-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-weight: 600;
    color: var(--hba-text-primary);
    overflow-wrap: anywhere;
}

.hba-options-sidebar-service-name small {
    font-size: 12px;
    font-weight: 400;
    color: var(--hba-text-muted);
}

.hba-options-sidebar-service-price {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--hba-text-primary);
    white-space: nowrap;
}

.hba-recap-sidebar__sumline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--hba-border);
}

.hba-recap-sidebar__sumline + .hba-recap-sidebar__sumline {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.hba-recap-sidebar__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #E4D5B7;
    font-size: 15px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

.hba-recap-sidebar__total-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hba-text-primary);
}

.hba-recap-sidebar__total-value {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--hba-brand-secondary-emphasis);
    text-align: right;
    white-space: nowrap;
}

/* --- Bloc CTA navy « Un séjour d'exception » (modèle unifié) --- */
.hba-recap-sidebar__cta-block {
    padding: 20px 24px 24px;
    background: var(--hba-surface-inverse);
}

.hba-recap-sidebar__cta-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hba-recap-sidebar__cta-text {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 500;
    color: #E9D9B6;
    white-space: nowrap;
}

.hba-recap-sidebar__cta-rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 12px;
    background: linear-gradient(90deg, transparent, rgba(200, 146, 46, 0.7) 45%, transparent);
}

.hba-recap-sidebar__actions {
    margin-top: 0;
}

.hba-recap-sidebar__actions .abdoul-btn-premium,
.hba-recap-sidebar__actions .hba-options-cta {
    width: 100%;
    margin: 0;
}

.hba-recap-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.hba-recap-cta:hover {
    background: var(--hba-brand-primary-hover);
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .hba-recap-sidebar {
        width: 320px;
    }

    .hba-recap-sidebar[data-step="1"] {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hba-recap-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .hba-recap-sidebar__header {
        display: none;
    }

    .hba-recap-sidebar__hotel,
    .hba-recap-sidebar__loc {
        display: none;
    }

    .hba-recap-sidebar__thumbnail {
        display: none;
    }

    /* --- Barre récap mobile : modèle unifié (même design que la
       sticky-bar Options) — icône + libellé/montant empilés + chevron --- */
    .hba-recap-sidebar__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: var(--hba-surface-inverse, #0F172A) !important;
        background-color: var(--hba-surface-inverse, #0F172A);
        border: none;
        font-family: inherit;
        font-size: 14px;
        text-align: left;
        color: #fff;
        cursor: pointer;
    }

    .hba-recap-sidebar__toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        font-size: 18px;
        line-height: 1;
        overflow: hidden;
    }

    .hba-recap-sidebar__toggle-texts {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .hba-recap-continue {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 8px 14px;
        background: var(--hba-brand-primary-emphasis);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        cursor: not-allowed;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .hba-recap-continue:enabled {
        opacity: 1;
        cursor: pointer;
    }

    .hba-recap-sidebar__toggle-label {
        font-size: 10px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .hba-recap-sidebar__toggle-total {
        font-size: 16px;
        font-weight: 800;
        color: #fff;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .hba-recap-sidebar__toggle-chevron {
        flex: 0 0 auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        transition: transform 0.3s ease;
    }

    .hba-recap-sidebar.is-open .hba-recap-sidebar__toggle-chevron {
        transform: rotate(180deg);
    }

    .hba-recap-sidebar__body {
        display: none !important;
        max-height: 60vh;
        overflow-y: auto;
        padding: 20px;
    }

    .hba-recap-sidebar.is-open .hba-recap-sidebar__body {
        display: block !important;
    }

    /* Feuille ouverte : priorité absolue au-dessus de TOUT (header, barre
       sticky, modales, switcher langue) + titre serif visible */
    .hba-recap-sidebar.is-open {
        z-index: 100001;
    }

    .hba-recap-sidebar.is-open .hba-recap-sidebar__header {
        display: flex;
    }

    /* Intérieur unifié : la barre-toggle ne doit pas rester visible dans
       la feuille ouverte (fermeture = voile sombre / Escape) */
    .hba-recap-sidebar.is-open .hba-recap-sidebar__toggle {
        display: none;
    }

    .hba-recap-sidebar__total {
        border-top-color: var(--hba-gray-light);
    }
}

/* Voile sombre derrière la feuille récap ouverte (clic = fermer) */
@media (max-width: 768px) {
    .hba-recap-backdrop {
        position: fixed;
        inset: 0;
        z-index: 100000;
        background: rgba(15, 23, 42, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .hba-recap-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

.hba-recap-sidebar__breakdown summary::-webkit-details-marker,
.hba-recap-sidebar__breakdown > summary::marker {
    display: none;
}

.hba-recap-sidebar__breakdown > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hba-text-primary);
    border-top: 1px solid var(--hba-gray-light);
}

.hba-recap-sidebar__breakdown-chevron {
    transition: transform .2s ease;
}

.hba-recap-sidebar__breakdown[open] .hba-recap-sidebar__breakdown-chevron {
    transform: rotate(180deg);
}

.hba-recap-sidebar__breakdown-content {
    padding: 8px 0 16px;
}

.hba-recap-sidebar__breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.hba-recap-sidebar__breakdown-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--hba-text-secondary);
}

.hba-recap-sidebar__breakdown-amount {
    font-weight: 600;
    color: var(--hba-text-primary);
}

/* =========================================================
   [hba_select_unit] — Responsive mobile refonte
   ========================================================= */

/* --- Filtre mobile --- */
@media (max-width: 768px) {
    .hba-unit-filters-panel {
        display: none;
        padding: 16px;
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 0 0 10px 10px;
    }

    .hba-unit-filters-panel.is-open {
        display: block;
    }

    .hba-unit-filters-toggle[aria-expanded="true"] .hba-filters-toggle-icon {
        transform: rotate(180deg);
    }

    /* --- Titre étape --- */
    .hba-step-title-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        margin: 0 0 12px;
    }

    .hba-step-badge {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--hba-brand-primary-emphasis);
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        flex-shrink: 0;
    }

    .hba-step-title-text {
        font-size: 16px;
        font-weight: 700;
        color: var(--hba-text-primary);
        line-height: 1.3;
        margin: 0;
    }

    /* --- Récapitulatif supérieur --- */
    .hba-tunnel-recap {
        display: none;
    }

    /* --- Grille unités --- */
    .hba-unit-page .abdoul-booking-content {
        padding: 0 16px 100px;
    }

    .hba-unit-stage-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .hba-unit-card {
        padding: 14px 8px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 140px;
    }

    .hba-unit-card-inner {
        gap: 4px;
        width: 100%;
    }

    .hba-unit-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--hba-success);
        line-height: 1.2;
        display: block;
    }

    .hba-unit-number {
        font-size: 13px;
        font-weight: 600;
        color: #4B5563;
        line-height: 1.2;
        display: block;
    }

    .hba-unit-view {
        font-size: 12px;
        color: #6B7280;
        line-height: 1.3;
        display: block;
    }

    .hba-unit-status {
        font-size: 11px;
        font-weight: 600;
        color: var(--hba-success);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
    }

    .hba-unit-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--hba-success);
    }

    .hba-unit-card.hba-unit-unavailable {
        background: #F3F4F6;
        border-color: #E5E7EB;
        opacity: 0.8;
    }

    .hba-unit-card.hba-unit-unavailable .hba-unit-name,
    .hba-unit-card.hba-unit-unavailable .hba-unit-number,
    .hba-unit-card.hba-unit-unavailable .hba-unit-view,
    .hba-unit-card.hba-unit-unavailable .hba-unit-status {
        color: #9CA3AF;
    }

    .hba-unit-card.is-selected {
        background: var(--hba-brand-primary-emphasis);
        border-color: var(--hba-brand-primary-active);
        color: var(--hba-brand-primary-emphasis-contrast);
    }

    .hba-unit-card.is-selected .hba-unit-name,
    .hba-unit-card.is-selected .hba-unit-number,
    .hba-unit-card.is-selected .hba-unit-view,
    .hba-unit-card.is-selected .hba-unit-status {
        color: var(--hba-brand-primary-emphasis-contrast);
    }

    .hba-unit-card.is-selected .hba-unit-status::before {
        background: var(--hba-brand-primary-emphasis-contrast);
    }

    /* --- Étages --- */
    .hba-units-stages {
        gap: 24px;
    }

    .hba-unit-stage-title {
        font-size: 12px;
        font-weight: 700;
        color: #374151;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 14px;
    }

    .hba-unit-legend {
        gap: 12px;
        margin: 12px 0 20px;
        font-size: 12px;
    }

    /* --- CTA --- */
    .hba-unit-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 24px;
        padding-top: 20px;
    }

    .hba-unit-continue {
        flex: 1;
        padding: 14px 20px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
    }

    .hba-unit-back {
        font-size: 14px;
        color: #6B7280;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .hba-unit-selection-banner {
        margin-bottom: 16px;
        padding: 12px 14px;
    }

    .hba-unit-confirmation {
        margin: 16px 0;
    }

    /* --- Sidebar sticky --- */
    .hba-recap-sidebar {
        z-index: 1000;
    }

    .hba-recap-sidebar__toggle {
        font-size: 13px;
    }

    .hba-recap-sidebar__toggle-total {
        font-size: 15px;
    }

    .hba-recap-sidebar__body {
        padding: 16px;
    }

    .hba-recap-sidebar__total {
        font-size: 15px;
    }
}

/* =========================================================
   [hba_select_options] — Options step premium refonte
   ========================================================= */

.hba-options-page {
    padding: 0;
}

.hba-options-hero {
    padding: 24px 16px 12px;
    text-align: center;
}

.hba-options-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 8px;
    line-height: 1.25;
}

.hba-options-hero-subtitle {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
    line-height: 1.45;
}

.hba-options-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 20px;
    justify-content: center;
}

.hba-options-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 13px;
    color: #374151;
}

.hba-options-summary-item strong {
    color: var(--hba-text-primary);
    font-weight: 600;
}

.hba-options-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 24px 0 16px;
    padding: 0 16px;
}

.hba-options-included-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
}

.hba-option-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    min-width: 0;
}

.hba-included-row {
    background: #F6FFFA;
    border-color: #D1FAE5;
}

.hba-option-media {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 22px;
}

.hba-option-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hba-option-info {
    flex: 1;
    min-width: 0;
}

.hba-option-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
}

.hba-option-description {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 6px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.hba-option-included {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hba-success);
}

.hba-option-included::before {
    content: '✓';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hba-success);
    color: #ffffff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hba-option-price-line {
    font-size: 13px;
    color: #6B7280;
    margin-top: 6px;
}

.hba-option-unit-price {
    font-weight: 600;
    color: var(--hba-text-primary);
}

.hba-option-explanation {
    color: #9CA3AF;
}

.hba-option-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--hba-text-primary);
    text-align: right;
    min-width: 70px;
}

.hba-option-included-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--hba-success);
}

.hba-option-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.hba-option-add,
.hba-option-remove {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.hba-option-add {
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
}

.hba-option-remove {
    background: #E5E7EB;
    color: #374151;
    display: none;
}

.hba-option-row.is-selected .hba-option-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hba-option-row.is-selected .hba-option-remove::before {
    content: '✓';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--hba-success);
    color: #ffffff;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hba-option-row.is-selected .hba-option-add {
    display: none;
}

.hba-qty-control {
    display: none;
    align-items: center;
    gap: 8px;
    background: #F3F4F6;
    border-radius: 10px;
    padding: 4px;
}

.hba-option-row.is-selected .hba-qty-control {
    display: inline-flex;
}

.hba-qty-minus,
.hba-qty-plus {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: var(--hba-text-primary);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hba-qty-minus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hba-qty-input {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    -moz-appearance: textfield;
}

.hba-qty-input::-webkit-outer-spin-button,
.hba-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hba-transfer-choices {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.hba-transfer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
}

.hba-options-category-title {
    font-size: 14px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
    padding: 0 16px;
}

.hba-options-extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
}

.hba-options-extras .hba-option-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.hba-options-extras .hba-option-actions {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.hba-options-extras .hba-option-total {
    order: -1;
    text-align: left;
}

.hba-options-bottom {
    display: none;
}

.hba-options-footer {
    padding: 0 0 12px;
    margin-top: 150px;
    text-align: center;
}

.hba-options-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6B7280;
    font-size: 14px;
    text-decoration: none;
}

@media (max-width: 767px) {
    .hba-options-page {
        padding: 0 0 90px;
    }
}

.hba-options-cta {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.hba-option-row.is-selected .hba-option-name,
.hba-option-row.is-selected .hba-option-unit-price {
    color: var(--hba-text-primary);
}

/* Desktop options */
@media (min-width: 1024px) {
    .hba-options-extras {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .hba-options-extras .hba-option-row {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 20px;
    }

    .hba-options-extras .hba-option-actions {
        flex-direction: column;
        align-items: flex-end;
        width: auto;
    }

    .hba-options-extras .hba-option-total {
        order: 0;
        text-align: right;
    }

    .hba-options-hero-title {
        font-size: 28px;
    }

    .hba-options-hero-subtitle {
        font-size: 16px;
    }

    .hba-options-included-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =========================================================
   NOUVEAU LAYOUT OPTIONS — V2
   ========================================================= */
.hba-options-mobile-header { text-align: center; margin-bottom: 20px; }
.hba-options-mobile-header h2 { font-size: 24px; font-weight: 700; color: var(--hba-text-primary); margin: 0 0 8px; }
.hba-options-mobile-header p { font-size: 14px; color: #6B7280; margin: 0; }

.hba-stay-stats { display: flex; gap: 12px; margin-bottom: 24px; }
.hba-stat-card { flex: 1; background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 10px; }
.hba-stat-icon { width: 36px; height: 36px; border-radius: 50%; background: #FEF3C7; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hba-stat-icon-blue { background: #DBEAFE; }
.hba-stat-card strong { display: block; font-size: 18px; font-weight: 700; color: var(--hba-text-primary); }
.hba-stat-card span { font-size: 12px; color: var(--hba-text-secondary); }

.hba-included-block { background: var(--hba-surface-soft); border: 1px solid var(--hba-border); border-radius: 16px; padding: 20px; margin-bottom: 24px; }
.hba-included-block h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--hba-text-primary); margin: 0 0 16px; }
.hba-check-badge { width: 22px; height: 22px; border-radius: 50%; background: #10B981; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.hba-included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hba-included-item { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.hba-included-icon { width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; background: #F3F4F6; }
.hba-included-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hba-included-item strong { font-size: 13px; color: #111827; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hba-included-tag { font-size: 10.5px; color: #10B981; font-weight: 700; flex-shrink: 0; text-transform: uppercase; letter-spacing: .03em; }

.hba-add-block { margin-bottom: 100px; }
.hba-add-block h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; color: var(--hba-text-primary); margin: 0 0 6px; }
.hba-add-block > p { font-size: 14px; color: var(--hba-text-secondary); margin: 0 0 20px; }
.hba-sparkle { font-size: 20px; }

.hba-service-card { display: grid; grid-template-columns: 80px 1fr 120px; gap: 16px; background: var(--hba-surface); border: 1px solid var(--hba-border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.hba-service-card.is-selected { border-color: var(--hba-border-selected); background: var(--hba-surface-selected); box-shadow: 0 0 0 2px var(--hba-selected-ring); }
.hba-service-media { position: relative; width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: #F3F4F6; }
.hba-service-media img { width: 100%; height: 100%; object-fit: cover; }
.hba-service-emoji { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 30px; background: #EFF6FF; }
.hba-service-badge { position: absolute; bottom: -6px; left: -6px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.hba-service-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hba-service-body strong { font-size: 15px; font-weight: 700; color: #111827; overflow-wrap: anywhere; }
.hba-service-body p { font-size: 13px; color: #6B7280; margin: 0; overflow-wrap: anywhere; }
.hba-service-price { font-size: 13px; font-weight: 700; color: var(--hba-brand-secondary-emphasis); }
.hba-service-explain { font-size: 12px; color: var(--hba-text-disabled); }
.hba-service-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hba-service-total { font-size: 14px; font-weight: 700; color: var(--hba-text-primary); }
.hba-svc-add-btn { padding: 8px 18px; border: none; border-radius: 999px; background: var(--hba-brand-primary-emphasis); color: var(--hba-brand-primary-emphasis-contrast); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.hba-svc-add-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.16); }
.hba-svc-add-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.hba-svc-modify-btn, .hba-svc-remove-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 86px; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.18s ease; border: 1.5px solid transparent; line-height: 1.2; }
.hba-svc-modify-btn { background: #ffffff; border-color: var(--hba-border, #E5E7EB); color: var(--hba-text-secondary, #4B5563); }
.hba-svc-modify-btn:hover { border-color: var(--hba-brand-primary-emphasis); color: var(--hba-brand-primary-emphasis); background: var(--hba-brand-primary-soft, #FDF6E9); transform: translateY(-1px); }
.hba-svc-modify-btn::before { content: "✎"; font-size: 12px; line-height: 1; }
.hba-svc-remove-btn { background: #ffffff; border-color: #FECACA; color: #DC2626; }
.hba-svc-remove-btn:hover { background: #FEF2F2; border-color: #F87171; transform: translateY(-1px); }
.hba-svc-remove-btn::before { content: "✕"; font-size: 11px; line-height: 1; }
.hba-svc-modify-btn:active, .hba-svc-remove-btn:active { transform: translateY(0); }
.hba-svc-qty-wrap { display: inline-flex; align-items: center; gap: 8px; }
.hba-svc-qty-wrap .hba-qty-minus, .hba-svc-qty-wrap .hba-qty-plus { width: 32px; height: 32px; border: 1px solid #E5E7EB; border-radius: 50%; background: #F9FAFB; font-size: 16px; font-weight: 700; cursor: pointer; }
.hba-svc-qty-wrap .hba-qty-input { width: 32px; text-align: center; border: none; background: transparent; font-size: 14px; font-weight: 700; }
.hba-svc-added-badge { font-size: 12px; color: #10B981; font-weight: 700; cursor: pointer; }

.hba-options-footer .hba-unit-continue { white-space: nowrap; display: none; }

/* --- Barre sticky Options mobile : prix/gauche = toggle du récapitulatif --- */
.hba-options-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--hba-surface-inverse); z-index: 1001; box-shadow: 0 -4px 16px rgba(0,0,0,0.2); }
.hba-sticky-total-block { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 0; border: none; background: transparent; font-family: inherit; text-align: left; color: #fff; cursor: pointer; }
.hba-recap-sidebar__toggle-total.is-updated { animation: hba-pulse-price 0.3s ease; }
.hba-options-sticky-bar.is-open .hba-recap-sidebar__toggle-chevron { transform: rotate(180deg); }
.hba-sticky-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; border-radius: 10px; background: var(--hba-brand-primary-emphasis); color: var(--hba-brand-primary-emphasis-contrast); font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }

@media (min-width: 768px) {
    .hba-options-sticky-bar { display: none; }
}

@keyframes hba-pulse-price { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (max-width: 767px) {
    .hba-service-card { grid-template-columns: 64px 1fr 90px; gap: 12px; padding: 12px; }
    .hba-service-media { width: 64px; height: 64px; }
    .hba-stay-stats { gap: 8px; }
    .hba-stat-card { padding: 10px; }
    .hba-stat-icon { width: 30px; height: 30px; font-size: 15px; }
    .hba-stat-card strong { font-size: 15px; }
    .hba-included-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Barre de progression mobile collée en haut pendant le scroll --- */
@media (max-width: 767px) {
    .abdoul-progress-integrated {
        position: sticky;
        top: 0;
        z-index: var(--hba-layer-header, 1200);
        padding: 12px 14px 14px;
        background: #ffffff;
        border-bottom: 1px solid #E5E7EB;
        box-shadow: 0 6px 20px color-mix(in srgb, var(--hba-surface-inverse) 12%, transparent);
    }
}

/* Écrans très étroits : on resserre l'anneau et les libellés */
@media (max-width: 359px) {
    .abdoul-mprog { gap: 10px; padding: 12px 12px; }
    .abdoul-mprog-label { font-size: 10px; letter-spacing: 0.5px; }
    .abdoul-mprog-ring { width: 54px; height: 54px; }
    .abdoul-mprog-ring::before { width: 42px; height: 42px; }
    .abdoul-mprog-pct { font-size: 15px; }
    .abdoul-mprog-name { font-size: 13px; }
    .abdoul-mobile-step-label { font-size: 8px; }
}

@media (min-width: 1024px) {
    .abdoul-progress-integrated { padding: 22px 24px 30px; }
}

@media (min-width: 768px) {
    .hba-options-layout { display: grid !important; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
    .abdoul-booking-content.hba-options-page { display: block !important; }
}

/* Mobile : le bloc CTA navy n'apparaît que dans la feuille ouverte. */
@media (max-width: 768px) {
    .hba-recap-sidebar:not(.is-open) .hba-recap-sidebar__cta-block {
        display: none;
    }
}

/* Page Options mobile : le récapitulatif est ouvert depuis la barre sticky
   (le toggle du renderer partagé est donc masqué à cette étape). La feuille
   est la même bottom-sheet que les autres étapes — z-index 1600 quand
   ouverte, elle recouvre la barre sticky. */
@media (max-width: 767px) {
    .hba-recap-sidebar[data-step="4"] .hba-recap-sidebar__toggle { display: none; }
}

/* === STEPPER DESKTOP (maquette) === */
.abdoul-step-desktop-wrap { display: none; }

@media (min-width: 768px) {
    .abdoul-step-mobile-wrap { display: none !important; }
    .abdoul-step-desktop-wrap { display: block; width: 100%; margin-bottom: 24px; }

    .abdoul-step-desktop-track { position: relative; width: min(94%, 1320px); margin: 0 auto 32px; padding: 0 24px; }
    .abdoul-step-desktop-svg { width: 100%; height: 52px; overflow: visible; }
    .abdoul-step-desktop-svg .abdoul-desktop-line-back { stroke: #E5E7EB; stroke-width: 2; fill: none; }
    .abdoul-step-desktop-svg line { stroke: var(--hba-brand-primary-emphasis); stroke-width: 2; stroke-dasharray: 400; stroke-dashoffset: 0; transition: all 0.4s ease; }

    .abdoul-step-desktop-points { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 24px; box-sizing: border-box; }
    .abdoul-desktop-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; }
    .abdoul-desktop-step-ring { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
    .abdoul-desktop-step-circle { width: 48px; height: 48px; border-radius: 50%; background: #ffffff; border: 2px solid #D1D5DB; color: #9CA3AF; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px color-mix(in srgb, var(--hba-surface-inverse) 6%, transparent); }
    .abdoul-desktop-step-number { font-size: 12px; font-weight: 700; color: #9CA3AF; margin-bottom: 4px; transition: color 0.3s ease; }
    .abdoul-desktop-step-label { font-size: 13px; font-weight: 600; color: #6B7280; line-height: 1.2; transition: color 0.3s ease; padding: 0 4px; }

    .abdoul-desktop-step.is-active .abdoul-desktop-step-circle { background: var(--hba-brand-primary-emphasis); border-color: var(--hba-border-selected); color: var(--hba-brand-primary-emphasis-contrast); box-shadow: 0 0 0 6px var(--hba-focus-ring), 0 4px 16px var(--hba-selected-ring); animation: abdoul-pulse-halo 2.4s ease-in-out infinite; }
    .abdoul-desktop-step.is-active .abdoul-desktop-step-number { color: var(--hba-brand-primary-emphasis); }
    .abdoul-desktop-step.is-active .abdoul-desktop-step-label { color: var(--hba-text-primary); font-weight: 700; }
    .abdoul-desktop-step.is-completed .abdoul-desktop-step-circle { background: var(--hba-brand-secondary-emphasis); border-color: var(--hba-brand-secondary-emphasis); color: var(--hba-brand-secondary-emphasis-contrast); }
    .abdoul-desktop-step.is-completed .abdoul-desktop-step-number { color: var(--hba-brand-secondary-emphasis); }
    .abdoul-desktop-step.is-completed .abdoul-desktop-step-label { color: #111827; font-weight: 600; }

    .abdoul-step-desktop-card { display: flex; align-items: center; gap: 22px; width: min(94%, 1320px); margin: 0 auto; padding: 20px 24px; background: #ffffff; border: 1px solid #E5E7EB; border-radius: 20px; box-shadow: 0 4px 20px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent); }
    .abdoul-step-desktop-img { width: 120px; height: 90px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: #F3F4F6; display: none; }
    .abdoul-step-desktop-img[src]:not([src=""]) { display: block; }
    .abdoul-step-desktop-text { flex: 1; min-width: 0; }
    .abdoul-step-desktop-position { display: block; font-size: 12px; font-weight: 800; color: var(--hba-brand-secondary-emphasis); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
    .abdoul-step-desktop-title { font-size: 22px; font-weight: 800; color: var(--hba-text-primary); margin: 0 0 6px; }
    .abdoul-step-desktop-subtitle { font-size: 15px; color: var(--hba-text-secondary); margin: 0; }
    .abdoul-step-desktop-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border: none; border-radius: 999px; background: var(--hba-brand-primary-emphasis); color: var(--hba-brand-primary-emphasis-contrast); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; }
    .abdoul-step-desktop-cta:hover { background: var(--hba-brand-primary-hover); color: var(--hba-brand-primary-hover-contrast); transform: translateY(-1px); }
    .abdoul-step-desktop-cta:hover .abdoul-step-desktop-cta-arrow { transform: translateX(4px); }
    .abdoul-step-desktop-cta-arrow { display: inline-block; transition: transform 0.25s ease; }

    @keyframes abdoul-pulse-halo { 0%, 100% { box-shadow: 0 0 0 6px var(--hba-focus-ring), 0 4px 16px var(--hba-selected-ring); } 50% { box-shadow: 0 0 0 10px var(--hba-brand-primary-soft), 0 6px 20px var(--hba-focus-ring); } }
}

@media (min-width: 1024px) {
    .abdoul-desktop-step-circle { width: 56px; height: 56px; font-size: 22px; }
    .abdoul-desktop-step-label { font-size: 14px; }
    .abdoul-step-desktop-card { padding: 24px 28px; }
    .abdoul-step-desktop-img { width: 140px; height: 100px; }
    .abdoul-step-desktop-title { font-size: 26px; }
    .abdoul-step-desktop-subtitle { font-size: 16px; }
}

/* Méta sobre sous les listes de résultats (remplace l'ancien card-header) */
.abdoul-results-meta {
    margin: 0 0 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hba-text-secondary);
}

/* ==========================================================================
   TUNNEL HEADER UNIFIÉ (hero + hotelbar + stepper + step intro)
   Partagé par les 6 étapes du tunnel via hba_render_tunnel_top()
   ========================================================================== */

/* ===== HERO (identité + étape + stepper intégrés, desktop) ===== */
.hba-tunnel-hero {
    position: relative;
    background:
        radial-gradient(900px 320px at 85% -20%, color-mix(in srgb, var(--hba-brand-secondary-emphasis) 22%, transparent) 0%, transparent 60%),
        linear-gradient(120deg, var(--hba-brand-primary-active) 0%, var(--hba-brand-primary-emphasis) 55%, var(--hba-brand-primary-hover) 100%);
    color: var(--hba-text-inverse);
    padding: 0 clamp(20px,4vw,56px);
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}
.hba-tunnel-hero-inner {
    max-width: 1180px; margin: 0 auto;
    padding: 26px 0 0;
}
.hba-tunnel-hero-top {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.hba-tunnel-hero-hotel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hba-tunnel-hero-hotel-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
}
.hba-tunnel-hero-hotel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hba-tunnel-hero-hotel-txt strong {
    font-size: 15px; font-weight: 700; color: var(--hba-text-inverse);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hba-tunnel-hero-hotel-txt small { font-size: 12.5px; color: var(--hba-text-inverse); opacity: .82; }
.hba-tunnel-hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hba-tunnel-hero-actions a,
.hba-tunnel-hero-currency {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: var(--hba-text-inverse); border-radius: 10px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.hba-tunnel-hero-actions a:hover { background: rgba(255,255,255,.22); }
.hba-tunnel-hero-body { padding: 30px 0 8px; max-width: 720px; }
.hba-tunnel-hero-eyebrow {
    display: inline-block;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--hba-brand-secondary-emphasis);
    background: rgba(255,255,255,.10);
    border: 1px solid color-mix(in srgb, var(--hba-brand-secondary-emphasis) 45%, transparent);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 14px;
}
.hba-tunnel-hero-body h1 {
    margin: 0 0 8px;
    font-size: clamp(26px,3.2vw,38px); font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: var(--hba-text-inverse);
    letter-spacing: -.01em;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hba-tunnel-hero-body > p {
    margin: 0; font-size: 15px; color: var(--hba-text-inverse); opacity: .85;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.hba-tunnel-trust { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.hba-tunnel-trust span {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600;
    color: var(--hba-text-inverse); opacity: .88;
}
.hba-tunnel-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--hba-brand-secondary-emphasis), transparent 70%);
}

/* ===== HOTEL BAR ===== */
.hba-tunnel-hotelbar {
    max-width: 1180px; margin: 0 auto; padding: 22px clamp(20px,4vw,40px) 0;
    display: flex; align-items: center; gap: 12px;
}
.hba-tunnel-hotelbar-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--hba-brand-primary-emphasis); display: flex; align-items: center; justify-content: center;
    color: var(--hba-brand-primary-emphasis-contrast); font-size: 20px; flex-shrink: 0;
}
.hba-tunnel-hotelbar-name { font-weight: 700; color: var(--hba-text-primary); font-size: 15px; }
.hba-tunnel-hotelbar-loc { font-size: 12.5px; color: var(--hba-text-secondary); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.hba-tunnel-hotelbar-info { flex: 1; min-width: 0; }
/* "Accueil" dupliqué pour la barre hôtel : visible uniquement en mobile (cf. media query) */
.hba-tunnel-hotelbar-home {
    display: none;
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--hba-text-primary);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== MOBILE STEPPER (barre de progression + icônes) ===== */
.hba-tunnel-mobile-stepper {
    display: none;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px clamp(20px,4vw,40px) 4px;
}

/* --- Bandeau supérieur (barre hôtel + carte de progression) --- */
.hba-tunnel-topbar {
    background: transparent;
}

/* --- Carte de progression bleu marine (anneau + étape courante) --- */
.hba-mprog {
    display: none;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    background: var(--hba-brand-primary-emphasis);
    background: linear-gradient(145deg, var(--hba-brand-primary-active) 0%, var(--hba-brand-primary-emphasis) 55%, var(--hba-brand-primary-hover) 100%);
    border-radius: 24px;
    padding: 22px 28px;
    margin-bottom: 16px;
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.hba-mprog::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 50%;
    height: 180%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hba-brand-secondary-emphasis) 5%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.hba-mprog-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hba-surface);
    color: var(--hba-text-primary);
    text-decoration: none;
    flex: 0 0 auto;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}
.hba-mprog-back:hover {
    background: var(--hba-brand-secondary-emphasis);
    color: var(--hba-brand-secondary-emphasis-contrast);
    transform: translateX(-3px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--hba-brand-secondary-emphasis) 35%, transparent);
}
.hba-mprog-back:active {
    transform: translateX(-3px) scale(0.96);
}
.hba-mprog-back-icon {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.hba-mprog-ring {
    --hba-pct: 0;
    position: relative;
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--hba-brand-secondary-emphasis) calc(var(--hba-pct) * 1%), var(--hba-brand-primary-soft) 0);
    box-shadow: inset 0 0 16px rgba(0,0,0,0.1), 0 0 20px color-mix(in srgb, var(--hba-brand-secondary-emphasis) 12%, transparent);
    transition: background 0.6s ease;
}
.hba-mprog-ring::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--hba-brand-primary-active);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.hba-mprog-pct {
    position: relative;
    font-size: 26px;
    font-weight: 800;
    color: var(--hba-text-inverse);
    letter-spacing: -0.5px;
    z-index: 1;
    line-height: 1.1;
}
.hba-mprog-completed {
    position: relative;
    font-size: 10px;
    font-weight: 600;
    color: var(--hba-brand-primary-soft);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    z-index: 1;
    margin-top: 2px;
}
.hba-mprog-sep {
    width: 1px;
    height: 66px;
    background: color-mix(in srgb, var(--hba-brand-primary-soft) 30%, transparent);
    flex: 0 0 auto;
}
.hba-mprog-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}
.hba-mprog-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--hba-brand-secondary-emphasis) 0%, var(--hba-brand-secondary-soft) 100%);
    color: var(--hba-brand-secondary-emphasis-contrast);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--hba-brand-secondary-emphasis) 20%, transparent);
}
.hba-mprog-badge-icon {
    font-size: 14px;
}
.hba-mprog-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: var(--hba-text-inverse);
    line-height: 1.1;
    letter-spacing: -0.3px;
}
.hba-mprog-title-gold {
    color: var(--hba-brand-secondary-emphasis);
}
.hba-mprog-subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--hba-brand-primary-soft);
    line-height: 1.4;
}
.hba-mprog-room-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--hba-brand-primary-soft) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--hba-brand-primary-soft) 22%, transparent);
    backdrop-filter: blur(5px);
    font-size: 38px;
    color: var(--hba-brand-secondary-emphasis);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.06), 0 6px 18px rgba(0,0,0,0.1);
    text-shadow: 0 0 20px color-mix(in srgb, var(--hba-brand-secondary-emphasis) 25%, transparent);
    flex: 0 0 auto;
}

/* --- Rangée des 6 étapes --- */
.hba-tunnel-mobile-icons {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}
.hba-tunnel-mobile-icon-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.hba-tunnel-mobile-icon-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    border-radius: 1px;
    background: var(--hba-gray-light);
}
.hba-tunnel-mobile-icon-item.is-done:not(:last-child)::after {
    background: var(--hba-brand-secondary-emphasis);
}
.hba-tunnel-mobile-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #EDF2F7;
    color: var(--hba-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    transition: all 0.25s ease;
}
.hba-tunnel-mobile-icon-item.is-done .hba-tunnel-mobile-icon {
    background: var(--hba-brand-secondary-emphasis);
    color: var(--hba-brand-secondary-emphasis-contrast);
}
.hba-tunnel-mobile-icon-item.is-active .hba-tunnel-mobile-icon {
    width: 40px;
    height: 40px;
    font-size: 19px;
    border-radius: 12px;
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--hba-brand-primary-emphasis) 35%, transparent);
}
.hba-tunnel-mobile-icon-item.is-active::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(100% + 12px);
    border-radius: 12px;
    background: var(--hba-surface-selected);
}
.hba-tunnel-mobile-icon-label {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 500;
    color: var(--hba-text-secondary);
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}
.hba-tunnel-mobile-icon-item.is-active .hba-tunnel-mobile-icon-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--hba-text-primary);
}

/* ===== STEPPER (intégré au hero, sur fond marque) ===== */
.hba-tunnel-stepper {
    display: flex; align-items: flex-start; justify-content: space-between;
    position: relative;
    margin-top: 28px; padding: 18px 0 20px;
    border-top: 1px solid rgba(255,255,255,.16);
}
.hba-tunnel-stepper::before {
    content: ""; position: absolute; left: 40px; right: 40px; top: 37px; height: 2px;
    background: rgba(255,255,255,.22); z-index: 0;
}
.hba-tunnel-stepper::after {
    content: "";
    position: absolute; left: 40px; top: 37px; height: 2px; z-index: 0;
    width: calc((100% - 80px) * var(--hba-step-ratio, 0));
    background: var(--hba-brand-secondary-emphasis);
    transition: width .45s cubic-bezier(.22,1,.36,1);
}
.hba-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.hba-step-circle {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.10);
    border: 1.5px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    color: var(--hba-text-inverse);
    backdrop-filter: blur(4px);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.hba-step.is-active .hba-step-circle {
    background: var(--hba-surface);
    border-color: var(--hba-surface);
    color: var(--hba-brand-primary-emphasis);
    box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.25);
    transform: scale(1.12);
}
.hba-step.is-done .hba-step-circle {
    background: var(--hba-brand-secondary-emphasis);
    border-color: var(--hba-brand-secondary-emphasis);
    color: var(--hba-brand-secondary-emphasis-contrast);
}
.hba-step-label {
    font-size: 11.5px; font-weight: 600;
    color: var(--hba-text-inverse); opacity: .62;
    text-align: center; line-height: 1.25;
    max-width: 110px;
}
.hba-step.is-active .hba-step-label { opacity: 1; font-weight: 700; }
.hba-step.is-done .hba-step-label { opacity: .85; }

/* ==========================================================================
   TUNNEL DESKTOP - AFFINAGE VISUEL
   NB : les titres n'heritaient pas la couleur du hero (le theme WP declare
   `h1 { color }`, et une declaration directe bat toujours l'heritage), d'ou un
   titre sombre illisible sur le visuel. La couleur est donc explicite ici.
   ========================================================================== */
@media (min-width: 1025px) {
    /* ----- HERO ----- */
    .hba-tunnel-hero {
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }
    .hba-tunnel-hero-inner { padding-top: 30px; }
    .hba-tunnel-hero-actions a,
    .hba-tunnel-hero-currency {
        backdrop-filter: blur(8px);
        transition: transform .2s ease, background .2s ease;
    }
    .hba-tunnel-hero-actions a:hover { transform: translateY(-1px); }

    /* Barre hôtel + carte mprog : parcours mobile uniquement, le hero
       desktop porte déjà l'identité et la progression. */
    .hba-tunnel-topbar { display: none; }
}

@media (max-width: 1024px) {
    /* Header tunnel : occupe toute la largeur de l'écran en mobile/tablette */
    .hba-tunnel-topbar,
    .hba-tunnel-hotelbar,
    .hba-tunnel-mobile-stepper {
        max-width: 100%;
    }

    /* 1. Hero desktop (identité + titre + stepper) entièrement masqué */
    .hba-tunnel-hero {
        display: none;
    }

    /* 2. Barre hôtel : le lien "Accueil" (seul) y apparaît, aligné à droite */
    .hba-tunnel-hotelbar {
        display: flex;
        align-items: center;
    }
    .hba-tunnel-hotelbar-home {
        display: inline-flex;
    }

    /* 3. Le stepper mobile (barre de progression + icônes) prend le relais */
    .hba-tunnel-mobile-stepper {
        display: block;
    }
}

@media (max-width: 600px) {
    .hba-tunnel-hotelbar { padding: 14px 16px 0; }
    .hba-tunnel-mobile-stepper { padding: 12px 16px 12px; }
}

/* Seule la carte de progression bleue reste collée en haut en mobile ;
   la barre hôtel et la rangée d'icônes défilent avec le contenu. */
@media (max-width: 1024px) {
    .hba-tunnel-topbar {
        position: relative;
        z-index: var(--hba-layer-header, 1200);
        padding-bottom: 14px;
        background: transparent;
    }
    .hba-mprog {
        display: flex;
        position: relative;
        margin: 14px clamp(20px, 4vw, 40px) 0;
        box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.35);
    }
    .hba-mprog.is-stuck {
        position: fixed;
        top: 12px;
        left: clamp(20px, 4vw, 40px);
        right: clamp(20px, 4vw, 40px);
        margin: 0;
        border-radius: 24px;
        z-index: calc(var(--hba-layer-header, 1200) + 1);
        box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.45);
    }
    .hba-mprog-placeholder {
        display: none;
    }
}

@media (max-width: 600px) {
    .hba-mprog { margin: 12px 16px 0; }
    .hba-mprog.is-stuck {
        top: 12px;
        left: 16px;
        right: 16px;
    }
}

/* Écrans mobiles : header compact, horizontal, sans icône lit */
@media (max-width: 480px) {
    .hba-mprog {
        justify-content: flex-start;
        gap: 14px;
        padding: 16px 18px;
    }
    .hba-mprog-back {
        width: 40px;
        height: 40px;
    }
    .hba-mprog-back-icon {
        font-size: 18px;
    }
    .hba-mprog-ring {
        width: 84px;
        height: 84px;
    }
    .hba-mprog-ring::before {
        width: 66px;
        height: 66px;
    }
    .hba-mprog-pct {
        font-size: 24px;
    }
    .hba-mprog-completed {
        font-size: 9px;
        letter-spacing: 0.2px;
    }
    .hba-mprog-sep {
        height: 70px;
    }
    .hba-mprog-main {
        flex: 1 1 auto;
        min-width: 0;
        gap: 7px;
    }
    .hba-mprog-badge {
        font-size: 10px;
        padding: 5px 10px;
    }
    .hba-mprog-title {
        font-size: 19px;
        letter-spacing: -0.2px;
    }
    .hba-mprog-subtitle {
        font-size: 12px;
    }
    .hba-mprog-room-icon {
        display: none !important;
    }
}

@media (max-width: 359px) {
    .hba-mprog {
        gap: 12px;
        padding: 14px 15px;
    }
    .hba-mprog-back {
        width: 38px;
        height: 38px;
    }
    .hba-mprog-ring {
        width: 78px;
        height: 78px;
    }
    .hba-mprog-ring::before {
        width: 62px;
        height: 62px;
    }
    .hba-mprog-pct {
        font-size: 22px;
    }
    .hba-mprog-sep {
        height: 64px;
    }
    .hba-mprog-main {
        gap: 6px;
    }
    .hba-mprog-badge {
        font-size: 9px;
        padding: 4px 9px;
    }
    .hba-mprog-title {
        font-size: 17px;
    }
    .hba-mprog-subtitle {
        font-size: 11px;
    }
    .hba-tunnel-mobile-icon-label { font-size: 8px; }
}

/* Statut email sur la page de confirmation */
.hba-email-notice.is-success {
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
    border-color: #9ae6b4;
}
.hba-email-notice.is-warning {
    background: linear-gradient(135deg, #fffaf0 0%, #fefcbf 100%);
    border-color: #fbd38d;
}

/* Coordonnées : téléphone indicatif + numéro */
.hba-phone-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.hba-phone-country {
    min-width: 150px;
    max-width: 42%;
    padding: 14px 12px;
    border: 1px solid var(--hba-gray-light);
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: var(--hba-text-primary);
    height: 50px;
    cursor: pointer;
}
.hba-phone-number {
    flex: 1;
    min-width: 0;
}
.hba-field-error {
    display: block;
    color: #e53e3e;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .hba-phone-input-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .hba-phone-country {
        max-width: none;
        width: 100%;
    }
    .hba-phone-number {
        width: 100%;
    }
}

/* intl-tel-input overrides */
.iti {
    width: 100%;
    display: block;
}
.iti__tel-input {
    width: 100%;
}
.iti__selected-country-primary,
.iti__selected-dial-code {
    color: var(--hba-text-primary);
    font-size: 14px;
}
.iti__country-list {
    border-radius: 12px;
    border: 1px solid var(--hba-gray-light);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--hba-surface-inverse) 8%, transparent);
}
.iti__country {
    font-size: 13px;
}
#guest_phone_input.iti__tel-input {
    height: 50px;
    border-radius: 12px;
    padding-left: 92px !important;
    padding-right: 16px !important;
}

/* Bloc statut email + formulaire de renvoi */
.hba-email-notice {
    position: relative;
    border-radius: 16px;
    padding: 22px;
    border: 1px solid var(--hba-gray-light);
    background: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
    margin-bottom: 18px;
}
.hba-email-notice.is-success {
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
    border-color: #9ae6b4;
}
.hba-email-notice.is-warning {
    background: linear-gradient(135deg, #fffaf0 0%, #fefcbf 100%);
    border-color: #fbd38d;
}
.hba-email-notice-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 10px;
}
.hba-email-notice-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin-bottom: 6px;
}
.hba-email-notice-desc {
    font-size: 14px;
    color: var(--hba-text-secondary);
    line-height: 1.5;
}
.hba-email-resend {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hba-gray-light);
}
.hba-email-resend-intro {
    font-size: 13px;
    color: var(--hba-text-secondary);
    margin-bottom: 12px;
}
.hba-email-resend-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.hba-email-resend-field {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}
.hba-email-resend-field .hba-input-field {
    width: 100%;
    height: 48px;
    border: 1px solid var(--hba-gray-border, #d1d5db);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--hba-text-primary);
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hba-email-resend-field .hba-input-field:focus {
    border-color: var(--hba-border-focus);
    box-shadow: 0 0 0 3px var(--hba-focus-ring);
}
.hba-email-resend-field .hba-input-label {
    position: absolute;
    left: 14px;
    top: -8px;
    background: #fff;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hba-text-secondary);
}
.hba-email-resend-form .hba-cta-button {
    height: 48px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    background: var(--hba-brand-primary-emphasis);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
    white-space: nowrap;
}
.hba-email-resend-form .hba-cta-button:hover {
    background: var(--hba-brand-secondary-emphasis);
}
.hba-email-resend-form .hba-cta-button:disabled {
    opacity: .7;
    cursor: not-allowed;
}
.hba-resend-count {
    width: 100%;
    font-size: 12px;
    color: var(--hba-text-secondary);
    margin-top: 4px;
}
.hba-hotel-contact {
    margin-top: 14px;
    padding: 14px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--hba-gray-light);
    font-size: 13px;
    color: var(--hba-text-secondary);
}
.hba-hotel-contact-title {
    font-weight: 700;
    color: var(--hba-text-primary);
    margin-bottom: 8px;
}
.hba-hotel-contact-line a {
    color: var(--hba-brand-secondary-emphasis);
    text-decoration: none;
    font-weight: 600;
}
.hba-hotel-contact-line a:hover {
    text-decoration: underline;
}
@media (max-width: 600px) {
    .hba-email-resend-form {
        flex-direction: column;
    }
    .hba-email-resend-form .hba-cta-button {
        width: 100%;
    }
}

/* ============================================================
   REFONTE COORDONNÉES / CHECKOUT
   ============================================================ */
.hba-checkout-page-header {
    margin-bottom: 6px;
    grid-column: 1 / -1;
}
.hba-checkout-page-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--hba-text-primary);
    margin: 0 0 6px 0;
    line-height: 1.2;
}
.hba-checkout-page-subtitle {
    font-size: 14px;
    color: var(--hba-text-secondary);
    margin: 0;
}

.hba-premium-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: start;
}

.hba-checkout-card {
    background: var(--hba-white);
    border: 1px solid var(--hba-gray-light);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--hba-surface-inverse) 4%, transparent);
}

.hba-checkout-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.hba-checkout-card-header--payment {
    margin-top: 28px;
}
.hba-checkout-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(200,146,46,0.12);
    color: var(--hba-brand-secondary-emphasis);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.hba-checkout-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0;
}
.hba-checkout-card-sep {
    height: 1px;
    background: var(--hba-gray-light);
    margin: 0 0 24px 0;
}

.hba-checkout-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.hba-input-group {
    margin-bottom: 20px;
    position: relative;
}
.hba-input-group--half {
    margin-bottom: 0;
}

.hba-input-label-above {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin-bottom: 7px;
}

.hba-input-wrap {
    position: relative;
}

.hba-input-field {
    width: 100%;
    height: 50px;
    border: 1px solid var(--hba-gray-light);
    border-radius: 12px;
    padding: 0 16px;
    font-size: 14px;
    color: var(--hba-text-primary);
    background: var(--hba-white);
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hba-input-field:focus {
    border-color: var(--hba-border-focus);
    box-shadow: 0 0 0 3px var(--hba-focus-ring);
}

.hba-input-icon-inside {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--hba-text-secondary);
    pointer-events: none;
}
.hba-input-wrap .hba-input-field {
    padding-left: 42px;
}

.hba-phone-input {
    padding-left: 92px;
}

.hba-input-help {
    font-size: 12px;
    color: var(--hba-text-secondary);
    margin: 6px 0 0 0;
    line-height: 1.45;
}

.hba-field-error {
    display: block;
    color: var(--hba-error-text);
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}

.hba-payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
.hba-payment-card {
    position: relative;
    border: 1px solid var(--hba-gray-light);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: var(--hba-white);
    transition: all .2s ease;
}
.hba-payment-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hba-payment-card-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--hba-gray-medium);
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: border-color .2s ease;
}
.hba-payment-card input[type="radio"]:checked + .hba-payment-card-radio {
    border-color: var(--hba-brand-primary-emphasis);
    background: var(--hba-brand-primary-emphasis);
}
.hba-payment-card input[type="radio"]:checked + .hba-payment-card-radio::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--hba-brand-primary-emphasis-contrast);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.hba-payment-card:has(input[type="radio"]:checked) {
    border-color: var(--hba-border-selected);
    background: var(--hba-surface-selected);
    box-shadow: 0 0 0 1px var(--hba-selected-ring);
}
.hba-payment-card-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.hba-payment-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hba-payment-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hba-text-primary);
}
.hba-payment-card-desc {
    font-size: 12px;
    color: var(--hba-text-secondary);
}

.hba-confirm-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--hba-text-secondary);
    line-height: 1.5;
    margin-bottom: 24px;
}
.hba-confirm-checkbox-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--hba-brand-primary-emphasis);
    flex-shrink: 0;
}
.hba-confirm-checkbox-wrap a {
    color: var(--hba-brand-primary-emphasis);
    text-decoration: underline;
    font-weight: 600;
}
.hba-confirm-checkbox-wrap a:hover {
    text-decoration: none;
}

/* ===== Ticket promo (tunnel réservation) ===== */
.hba-checkout-card-header--promo {
    margin-top: 26px;
}
.hba-promo-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
}
.hba-promo-row .hba-input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.hba-promo-row .hba-input.hba-promo-input-ok {
    border-color: var(--hba-success, #16a34a);
    background: #f0fdf4;
    color: #15803d;
}
.hba-promo-apply {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--hba-brand-primary-emphasis, #4338ca);
    background: #fff;
    color: var(--hba-brand-primary-emphasis, #4338ca);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.hba-promo-apply:hover:not(:disabled) {
    background: var(--hba-brand-primary-emphasis, #4338ca);
    color: #fff;
}
.hba-promo-apply:disabled {
    opacity: 0.6;
    cursor: wait;
}
/* Le .hba-btn générique passe à width:100% sous 900px — dans la ligne
   promo, le bouton garde sa taille naturelle pour ne pas écraser le champ. */
.hba-promo-row .hba-promo-apply {
    width: auto;
}
.hba-promo-feedback {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.hba-promo-ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}
.hba-promo-err {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.hba-button-group {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.hba-btn-outline {
    border-color: var(--hba-gray-light);
    color: var(--hba-text-primary);
    background: var(--hba-white);
}
.hba-btn-outline:hover {
    border-color: var(--hba-border-focus);
    background: var(--hba-gray-bg);
}
.hba-btn-primary {
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    border-color: var(--hba-brand-primary-emphasis);
    flex: 1;
    gap: 8px;
}
.hba-btn-primary:hover {
    background: var(--hba-brand-primary-hover);
    color: var(--hba-brand-primary-hover-contrast);
    border-color: var(--hba-brand-primary-hover);
}
.hba-btn-primary:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Sidebar */
.hba-sidebar-column {
    position: sticky;
    top: 24px;
}
.hba-checkout-sidebar {
    padding: 24px;
}
.hba-checkout-sidebar-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin: 0 0 18px 0;
}
.hba-checkout-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}
.hba-checkout-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hba-gray-light);
    font-size: 14px;
}
.hba-checkout-sidebar-item:last-child {
    border-bottom: none;
}
.hba-checkout-sidebar-icon {
    width: 26px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}
.hba-checkout-sidebar-label {
    color: var(--hba-text-secondary);
    flex: 0 0 85px;
}
.hba-checkout-sidebar-value {
    color: var(--hba-text-primary);
    font-weight: 600;
    margin-left: auto;
    text-align: right;
}
.hba-checkout-sidebar-services {
    padding: 12px 0;
    border-top: 1px solid var(--hba-gray-light);
    margin-bottom: 14px;
}
.hba-checkout-sidebar-services-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--hba-text-primary);
    margin-bottom: 8px;
}
.hba-checkout-sidebar-service-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--hba-text-secondary);
    padding: 4px 0;
}
.hba-checkout-sidebar-total {
    padding: 18px 0;
    border-top: 1px solid var(--hba-gray-light);
    border-bottom: 1px solid var(--hba-gray-light);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.hba-checkout-sidebar-total-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--hba-text-primary);
}
.hba-checkout-sidebar-total-amount {
    font-size: 28px;
    font-weight: 800;
    color: var(--hba-text-primary);
}
.hba-checkout-sidebar-breakdown {
    margin-bottom: 16px;
}
.hba-checkout-sidebar-breakdown-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--hba-text-secondary);
    padding: 5px 0;
}
.hba-checkout-sidebar-guarantee {
    background: rgba(200,146,46,0.10);
    border: 1px solid rgba(200,146,46,0.25);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hba-brand-secondary-emphasis);
    font-weight: 700;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 900px) {
    .hba-premium-layout {
        grid-template-columns: 1fr;
    }
    .hba-sidebar-column {
        position: static;
    }
    .hba-checkout-name-row {
        grid-template-columns: 1fr;
    }
    .hba-payment-options {
        grid-template-columns: 1fr;
    }
    .hba-button-group {
        flex-direction: column;
    }
    .hba-btn {
        width: 100%;
        white-space: normal;
    }
    /* Le nowrap du CTA primaire fixait un min-content ~385px qui faisait
       déborder toute la grille checkout sur mobile. */
    .hba-checkout-grid,
    .hba-checkout-grid > * {
        min-width: 0;
    }
}

/* =========================================================
   BOUTON RETOUR UNIFIÉ + STICKY UNITÉ MOBILE
   ========================================================= */
.hba-btn-back-unified {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    min-height: 44px;
    border: 1px solid var(--hba-gray-light);
    border-radius: 8px;
    background: var(--hba-white);
    color: var(--hba-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    line-height: 1.4;
}
.hba-btn-back-unified:hover {
    background: var(--hba-gray-bg);
    border-color: var(--hba-gray-medium);
    color: var(--hba-text-primary);
}
.hba-btn-back-unified-icon {
    font-size: 16px;
    line-height: 1;
}

/* Étape Unité : barre récap sticky visible en permanence sur mobile */
@media (max-width: 768px) {
    .hba-recap-sidebar[data-step="3"] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
    }
    .hba-recap-sidebar[data-step="3"] .hba-recap-sidebar__content,
    .hba-recap-sidebar[data-step="3"] .hba-recap-sidebar__details {
        max-height: 55vh;
        overflow-y: auto;
    }

    /* Espacement pour que le Retour reste accessible au-dessus du sticky */
    .abdoul-booking-content.hba-unit-page {
        padding-bottom: 160px;
    }
}

/* =========================================================
   BOUTON DE RECHERCHE — alignement avec les champs
   ========================================================= */
/* Le bouton 'Vérifier les disponibilités' sortait du cadre car
   width:100% + margin:0 24px (mobile) ou 0 32px (desktop) faisait
   déborder la boîte. En passant en width:auto, il occupe exactement
   la largeur entre les marges, identique au contenu de .abdoul-form-grid. */
#abdoul-search-btn {
    width: auto;
}

/* --- Étape 4 (Options) : le récapitulatif utilise la sidebar
   du tunnel, ouverte depuis la barre sticky. --- */
.hba-options-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    border: 1px solid #D1D5DB;
    border-radius: 14px;
    background: #fff;
    color: #4B5563;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}
.hba-options-back-link:hover {
    border-color: #9CA3AF;
    color: #1F2937;
    background: #F9FAFB;
}
.hba-options-back-icon {
    font-size: 16px;
}

@media (max-width: 767px) {
    .abdoul-booking-content.hba-options-page {
        padding-bottom: 150px;
    }
}

/* =========================================================
   ÉTAPE 3 — FILTRES EN PANNEAU SUPERPOSÉ + CARTES D'UNITÉ
   Cette section est volontairement placée en fin de fichier :
   elle redéfinit les règles héritées des blocs plus haut, qui
   ont une spécificité plus faible (.hba-unit-card seul).
   ========================================================= */

/* ---------- Bouton d'ouverture des filtres ---------- */
.hba-unit-page .hba-unit-filters-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--hba-gray-light);
    border-radius: 12px;
    background: #ffffff;
    color: var(--hba-text-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--hba-surface-inverse) 6%, transparent);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hba-unit-page .hba-unit-filters-toggle:active {
    transform: scale(0.99);
}
.hba-filters-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.hba-filters-toggle-glyph {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--hba-text-primary);
}
.hba-filters-toggle-glyph svg {
    width: 100%;
    height: 100%;
}
.hba-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hba-brand-primary-emphasis);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}
.hba-filters-badge[hidden] {
    display: none;
}
.hba-filters-toggle-icon {
    font-size: 11px;
    color: #9CA3AF;
    transition: transform 0.3s ease;
}

/* ---------- Éléments réservés au panneau superposé ---------- */
.hba-filters-backdrop,
.hba-filters-grabber,
.hba-filters-close,
.hba-filters-actions .hba-filters-apply {
    display: none;
}

/* ---------- Mobile / tablette : panneau superposé ---------- */
@media (max-width: 991px) {
    /* La sidebar ne réserve plus de hauteur : elle ne contient
       visuellement que le bouton, le panneau étant en overlay. */
    .hba-unit-page .hba-unit-filters-sidebar {
        width: 100%;
        margin: 0 0 16px;
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
    }

    .hba-unit-page .hba-unit-filters-toggle {
        display: flex;
    }
    .hba-unit-page .hba-unit-filters-toggle[aria-expanded="true"] .hba-filters-toggle-icon {
        transform: rotate(180deg);
    }

    /* Voile sombre */
    .hba-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1400;
        background: rgba(11, 26, 53, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.28s ease;
    }
    .hba-filters-backdrop[hidden] {
        display: none;
    }
    .hba-filters-backdrop.is-visible {
        opacity: 1;
    }

    /* Feuille remontant du bas de l'écran */
    .hba-unit-page .hba-unit-filters-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1401;
        max-height: 82vh;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 22px 22px 0 0;
        background: #ffffff;
        box-shadow: 0 -12px 40px rgba(11, 26, 53, 0.25);
        transform: translateY(100%);
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
        visibility: hidden;
        overflow: visible;
    }
    .hba-unit-page .hba-unit-filters-panel.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .hba-filters-grabber {
        display: block;
        width: 42px;
        height: 4px;
        margin: 10px auto 2px;
        border-radius: 999px;
        background: #D1D5DB;
        flex: 0 0 auto;
    }

    .hba-filters-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 20px 12px;
        border-bottom: 1px solid var(--hba-gray-light);
        flex: 0 0 auto;
    }
    .hba-unit-page .hba-filters-title {
        margin: 0;
    }
    .hba-filters-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: #F3F4F6;
        color: #4B5563;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    .hba-filters-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 20px 8px;
        overscroll-behavior: contain;
    }

    .hba-filters-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 0 auto;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--hba-gray-light);
        background: #ffffff;
    }
    .hba-unit-page .hba-filters-reset {
        flex: 0 0 auto;
        margin: 0;
        padding: 13px 16px;
        border: 1px solid var(--hba-gray-light);
        border-radius: 12px;
        background: #ffffff;
        color: #4B5563;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    .hba-filters-actions .hba-filters-apply {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 1 1 auto;
        padding: 14px 16px;
        border: none;
        border-radius: 12px;
        background: var(--hba-brand-primary-emphasis);
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    /* Empêche le contenu de défiler derrière la feuille */
    body.hba-filters-open {
        overflow: hidden;
    }
}

/* ---------- Cartes d'unité (mobile + desktop) ---------- */
.hba-unit-page .hba-unit-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.hba-unit-page .hba-unit-card {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    border: 1.5px solid var(--hba-gray-light);
    border-radius: 14px;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.hba-unit-page .hba-unit-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 14px 16px 15px;
    text-align: left;
}

.hba-unit-page .hba-select-unit-btn {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
}

.hba-unit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hba-unit-page .hba-unit-number {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: var(--hba-text-primary);
}
.hba-unit-page .hba-unit-card.is-selected .hba-unit-number::after {
    content: none;
}

/* Pastille de sélection */
.hba-unit-radio {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.hba-unit-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hba-unit-blocked {
    display: inline-flex;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #9CA3AF;
}
.hba-unit-blocked svg {
    width: 100%;
    height: 100%;
}

/* Pastille de statut */
.hba-unit-page .hba-unit-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.hba-unit-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.hba-unit-page .hba-unit-status-available {
    background: #E7F7EE;
    color: #14804A;
}
.hba-unit-page .hba-unit-status-available .hba-unit-status-dot {
    background: #16A34A;
}
.hba-unit-page .hba-unit-status-unavailable {
    background: transparent;
    padding-left: 0;
    color: #9CA3AF;
}
.hba-unit-page .hba-unit-status-unavailable .hba-unit-status-dot {
    background: #EF4444;
}

.hba-unit-page .hba-unit-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--hba-text-primary);
    line-height: 1.35;
    min-height: 0;
    font-weight: 500;
}
.hba-unit-page .hba-unit-view-icon {
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
}

.hba-unit-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}
.hba-unit-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6B7280;
}
.hba-unit-meta-item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* --- État survolé --- */
.hba-unit-page .hba-unit-card[data-available="1"]:not(.is-selected):not(.hba-unit-unavailable):hover {
    border-color: #16A34A;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.14);
    transform: translateY(-2px);
}
.hba-unit-page .hba-unit-card[data-available="1"]:not(.is-selected):not(.hba-unit-unavailable):hover .hba-unit-radio {
    border-color: #16A34A;
}

/* --- État sélectionné --- */
.hba-unit-page .hba-unit-card.is-selected {
    border-color: #16A34A;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
}
.hba-unit-page .hba-unit-card.is-selected .hba-unit-number,
.hba-unit-page .hba-unit-card.is-selected .hba-unit-view {
    color: var(--hba-text-primary);
}
.hba-unit-page .hba-unit-card.is-selected .hba-unit-radio {
    border-color: #16A34A;
    background: #16A34A;
}
.hba-unit-page .hba-unit-card.is-selected .hba-unit-radio::after {
    transform: translate(-50%, -50%) scale(1);
}

/* --- État indisponible --- */
.hba-unit-page .hba-unit-card.hba-unit-unavailable {
    background: #F5F6F8;
    border-color: #EAECEF;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}
.hba-unit-page .hba-unit-card.hba-unit-unavailable .hba-unit-number {
    color: #9CA3AF;
}
.hba-unit-page .hba-unit-card.hba-unit-unavailable .hba-unit-view {
    color: #9CA3AF;
}

/* --- Titres d'étage enrichis (icône + description) --- */
.hba-unit-page .hba-unit-stage-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--hba-text-primary);
}
.hba-unit-page .hba-unit-stage-title .hba-unit-stage-icon {
    font-size: 16px;
    line-height: 1;
}
.hba-unit-page .hba-unit-stage-title .hba-unit-stage-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--hba-text-primary);
}
.hba-unit-page .hba-unit-stage-title .hba-unit-stage-desc {
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    letter-spacing: 0;
    margin-top: -4px;
    margin-left: 28px;
}

/* --- Légende alignée sur les nouveaux états --- */
.hba-unit-page .hba-legend-available .hba-legend-dot {
    border-radius: 50%;
    background: #16A34A;
}
.hba-unit-page .hba-legend-selected .hba-legend-dot {
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 3px #16A34A;
}
.hba-unit-page .hba-legend-unavailable .hba-legend-dot {
    border-radius: 50%;
    background: #EF4444;
}

/* --- Titres d'étage --- */
.hba-unit-page .hba-unit-stage-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #4B5563;
}

@media (max-width: 767px) {
    .hba-unit-page .hba-unit-stage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .hba-unit-page .hba-unit-card-inner {
        gap: 8px;
        padding: 12px 12px 13px;
    }
    .hba-unit-page .hba-unit-number {
        font-size: 20px;
    }
    .hba-unit-page .hba-unit-view {
        font-size: 13px;
    }
    .hba-unit-meta {
        gap: 10px;
    }
    .hba-unit-meta-item {
        font-size: 12px;
    }
    /* Les unités indisponibles occupent toute la largeur, comme le modèle */
    .hba-unit-page .hba-unit-card.hba-unit-unavailable {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   TUNNEL DESKTOP - FINITION V2
   Ecran d'ordinateur uniquement (>=1025px). Aucune couleur codee en dur :
   toutes les teintes proviennent des tokens de la charte (inc/hba-theme.php).
   ========================================================================== */
@media (min-width: 1025px) {

    /* ----- HERO : profondeur + halo dore discret ----- */
    .hba-tunnel-hero {
        box-shadow: inset 0 -80px 100px -70px rgba(0,0,0,.4);
    }
    .hba-tunnel-hero-inner { position: relative; z-index: 1; }

    /* Boutons du hero : verre depoli */
    .hba-tunnel-hero-actions a,
    .hba-tunnel-hero-currency {
        background: color-mix(in srgb, var(--hba-text-inverse) 14%, transparent);
        border-color: color-mix(in srgb, var(--hba-text-inverse) 30%, transparent);
    }
    .hba-tunnel-hero-actions a:hover {
        background: color-mix(in srgb, var(--hba-text-inverse) 24%, transparent);
    }
    .hba-tunnel-hero-currency {
        font-weight: 700;
        letter-spacing: .03em;
        color: var(--hba-brand-secondary-emphasis);
        border-color: color-mix(in srgb, var(--hba-brand-secondary-emphasis) 55%, transparent);
    }

    /* Etape active : halo or pour guider l'oeil */
    .hba-step.is-active .hba-step-circle {
        box-shadow: 0 0 0 4px rgba(255,255,255,.18),
                    0 0 0 7px color-mix(in srgb, var(--hba-brand-secondary-emphasis) 30%, transparent),
                    0 6px 16px rgba(0,0,0,.28);
    }
    .hba-step.is-done .hba-step-circle {
        box-shadow: 0 4px 14px color-mix(in srgb, var(--hba-brand-secondary-emphasis) 40%, transparent);
    }
}

/* =========================================================
   Étape Unité — aération & hiérarchie (v3)
   ========================================================= */
.abdoul-booking-wrapper:has(.hba-unit-page) { max-width: 1440px !important; }
.hba-unit-page { gap: 32px !important; }
.hba-unit-page .hba-unit-filters-sidebar { width: 230px; }
@media (min-width: 769px) {
    .hba-unit-page .hba-recap-sidebar { width: 320px; }
}

.hba-unit-page .hba-unit-stage { margin-bottom: 30px; }
.hba-unit-page .hba-unit-stage-title {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px; margin-bottom: 16px;
    border-bottom: 1px solid var(--hba-gray-light, #E5E7EB);
}
.hba-unit-page .hba-unit-stage-title::after { display: none; }

.hba-unit-page .hba-unit-stage-grid {
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}
.hba-unit-page .hba-unit-card {
    border-radius: 16px;
    border-color: var(--hba-gray-light, #E5E7EB);
}
.hba-unit-page .hba-unit-card:hover {
    border-color: var(--hba-brand-primary-emphasis);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(17,24,39,.08);
}
.hba-unit-page .hba-unit-card-inner { gap: 12px; padding: 18px 20px 20px; }

.hba-unit-price {
    display: flex; align-items: baseline; gap: 6px;
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed var(--hba-gray-light, #E5E7EB);
}
.hba-unit-price-val { font-size: 16px; font-weight: 800; color: var(--hba-brand-primary-emphasis); }
.hba-unit-price-per { font-size: 12px; color: var(--hba-text-muted); }

@media (max-width: 1100px) {
    .abdoul-booking-wrapper:has(.hba-unit-page) { max-width: 100% !important; }
    .hba-unit-page .hba-unit-stage-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 480px) {
    .hba-unit-page .hba-unit-stage-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hba-unit-page .hba-unit-card-inner { padding: 14px 14px 16px; }
}

.hba-tunnel-header { display: none; }
@media (min-width: 1025px) {
    .hba-tunnel-header {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 16px 24px;
        border-bottom: 1px solid var(--hba-border);
        background: var(--hba-surface);
        border-radius: 24px 24px 0 0;
        max-width: 1180px;
        margin: 0 auto;
    }
    .hba-tunnel-hero { border-radius: 20px; }
}
.hba-tunnel-header-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.hba-tunnel-header-logo {
    width: 44px; height: 44px; min-width: 44px;
    background: var(--hba-brand-primary-emphasis);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: var(--hba-brand-primary-emphasis-contrast);
    font-size: 20px;
}
.hba-tunnel-header-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hba-tunnel-header-text { display: flex; flex-direction: column; line-height: 1.2; }
.hba-tunnel-header-name { font-size: 15px; font-weight: 700; color: var(--hba-text-primary); display: flex; align-items: center; gap: 6px; }
.hba-tunnel-header-stars { color: var(--hba-brand-secondary-emphasis); font-size: 12px; letter-spacing: 1px; }

.hba-tunnel-header-location { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; }
.hba-tunnel-header-location-icon { font-size: 14px; margin-top: 1px; }
.hba-tunnel-header-location-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hba-tunnel-header-location-text strong { font-size: 13px; font-weight: 700; color: var(--hba-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hba-tunnel-header-location-text small { font-size: 12px; color: var(--hba-text-secondary); }

.hba-tunnel-header-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hba-tunnel-header-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; font-size: 12px; font-weight: 600;
    color: var(--hba-text-secondary);
    background: var(--hba-surface-soft);
    border: 1px solid var(--hba-border);
    border-radius: 6px;
}
.hba-tunnel-header-chevron { font-size: 9px; color: var(--hba-text-disabled); }

.hba-tunnel-header-help-link {
    display: inline-flex; align-items: center; gap: 8px;
    width: auto; height: auto;
    justify-content: flex-start;
    max-width: 210px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--hba-border);
    border-radius: 999px;
    background: var(--hba-surface-soft);
    text-decoration: none;
    flex-shrink: 0;
    transition: all .2s ease;
}
.hba-tunnel-header-help-link:hover { background: var(--hba-brand-primary-soft); border-color: var(--hba-brand-primary-emphasis); }
.hba-tunnel-header-help-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--hba-brand-primary-emphasis);
    color: var(--hba-brand-primary-emphasis-contrast);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.hba-tunnel-header-help-text { display: flex; flex-direction: column; line-height: 1.25; }
.hba-tunnel-header-help-text small { font-size: 11px; color: var(--hba-text-secondary); }
.hba-tunnel-header-help-text strong {
    font-size: 13px; color: var(--hba-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: block;
}

.hba-tunnel-stepper-bar { display: none; }
@media (min-width: 1025px) {
    .hba-tunnel-stepper-bar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        max-width: 1180px;
        margin: 0 auto;
        padding: 24px 40px 28px;
        background: var(--hba-surface);
        border-radius: 0 0 24px 24px;
        box-shadow: 0 1px 0 var(--hba-border);
    }
    .hba-tunnel-stepper-bar::before {
        content: ""; position: absolute; left: 76px; right: 76px; top: 43px; height: 2px;
        background: var(--hba-border); z-index: 0;
    }
    .hba-tunnel-stepper-bar::after {
        content: "";
        position: absolute; left: 76px; top: 43px; height: 2px; z-index: 0;
        width: calc((100% - 152px) * var(--hba-step-ratio, 0));
        background: var(--hba-brand-primary-emphasis);
        transition: width .45s cubic-bezier(.22,1,.36,1);
    }
    .hba-tunnel-stepper-bar .hba-step-circle {
        background: var(--hba-surface);
        border: 1.5px solid var(--hba-border-strong);
        color: var(--hba-text-disabled);
    }
    .hba-tunnel-stepper-bar .hba-step.is-active .hba-step-circle {
        background: var(--hba-brand-primary-emphasis);
        border-color: var(--hba-brand-primary-emphasis);
        color: var(--hba-brand-primary-emphasis-contrast);
        box-shadow: 0 0 0 4px var(--hba-brand-primary-soft);
        transform: scale(1.1);
    }
    .hba-tunnel-stepper-bar .hba-step.is-done .hba-step-circle {
        background: var(--hba-brand-primary-emphasis);
        border-color: var(--hba-brand-primary-emphasis);
        color: var(--hba-brand-primary-emphasis-contrast);
    }
    .hba-tunnel-stepper-bar .hba-step-label { color: var(--hba-text-secondary); opacity: 1; }
    .hba-tunnel-stepper-bar .hba-step.is-active .hba-step-label,
    .hba-tunnel-stepper-bar .hba-step.is-done .hba-step-label { color: var(--hba-text-primary); font-weight: 700; }
}

/* =========================================================
   Pages immersives — masque un footer custom injecté via
   wp_footer (ex. snippets de site), hors footer du thème
   ========================================================= */
.hba-tunnel-page .mh-footer,
.hba-dashboard-page .mh-footer {
    display: none !important;
}