/* =========================================
   HOTEL DETAIL PAGE — Refonte UX
   Variables: uses --primary-color from base
========================================= */

.container-xl {
    max-width: 1500px;
}

:root {
    --hd-primary: var(--primary-color, #3F2A8C);
    --hd-primary-rgb: var(--primary-color-rgb, 63, 42, 140);
    --hd-text: #1a1a2e;
    --hd-text-light: #6b7280;
    --hd-text-muted: #9ca3af;
    --hd-bg: #f8f9fb;
    --hd-card: #fff;
    --hd-border: #e5e7eb;
    --hd-border-light: #f3f4f6;
    --hd-radius: 14px;
    --hd-radius-sm: 10px;
    --hd-radius-xs: 8px;
    --hd-shadow: 0 1px 4px rgba(0,0,0,0.04);
    --hd-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --hd-green: #059669;
    --hd-red: #ef4444;
    --hd-transition: 0.2s ease;
}

/* =========================================
   HERO
========================================= */
.hotel-hero {
    padding: 32px 0;
    background: var(--hd-card);
}
.hotel-hero__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 20px;
}
.hotel-hero__info {
    flex: 1;
    min-width: 0;
}
.hotel-hero__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}
.hotel-hero__unrated {
    font-size: 13px;
    color: var(--hd-text-muted);
}
.hotel-hero__name {
    font-size: 32px;
    font-weight: 800;
    color: var(--hd-text);
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.hotel-hero__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.hotel-hero__rating a {
    color: var(--hd-text-muted);
    text-decoration: underline;
}
.hotel-hero__rating small {
    color: var(--hd-text-muted);
}
.hotel-hero__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--hd-text-light);
    margin: 0;
}

/* Hero booking card */
.hotel-hero__booking-card {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    background: var(--hd-bg);
    padding: 16px 24px;
    border-radius: var(--hd-radius);
    flex-shrink: 0;
}
.hotel-hero__price-label {
    font-size: 12px;
    color: var(--hd-text-light);
}
.hotel-hero__price-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--hd-primary);
    line-height: 1.2;
}
.hotel-hero__dates-label {
    font-size: 13px;
    color: var(--hd-text-muted);
    margin-top: 4px;
    margin-bottom: 4px;
}
.btn-hero-book {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hd-primary);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--hd-radius-sm);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--hd-transition), transform var(--hd-transition);
}
.btn-hero-book:hover {
    background: color-mix(in srgb, var(--hd-primary) 85%, #000);
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================
   PHOTO GRID
========================================= */
.hotel-photo-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    height: 440px;
    border-radius: 16px;
    overflow: hidden;
}
.hotel-photo-grid--single {
    grid-template-columns: 1fr;
}
.hotel-photo-grid__main {
    overflow: hidden;
    border-radius: 16px 0 0 16px;
    cursor: pointer;
}
.hotel-photo-grid--single .hotel-photo-grid__main {
    border-radius: 16px;
}
.hotel-photo-grid__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.hotel-photo-grid__main:hover img {
    transform: scale(1.03);
}
.hotel-photo-grid__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}
.hotel-photo-grid__cell {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.hotel-photo-grid__cell:nth-child(2) { border-radius: 0 16px 0 0; }
.hotel-photo-grid__cell:nth-child(4) { border-radius: 0 0 16px 0; }
.hotel-photo-grid__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.hotel-photo-grid__cell:hover img {
    transform: scale(1.05);
}
.hotel-photo-grid__more {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.92);
    color: var(--hd-text);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-xs);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--hd-transition);
    backdrop-filter: blur(4px);
}
.hotel-photo-grid__more:hover {
    background: #fff;
}

/* =========================================
   LIGHTBOX
========================================= */
.hotel-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.92);
    align-items: center;
    justify-content: center;
}
.hotel-lightbox.active {
    display: flex;
}
.hotel-lightbox__content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hotel-lightbox__content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}
.hotel-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hd-transition);
}
.hotel-lightbox__close:hover {
    background: rgba(255,255,255,0.3);
}
.hotel-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hd-transition);
}
.hotel-lightbox__nav:hover {
    background: rgba(255,255,255,0.3);
}
.hotel-lightbox__prev { left: 20px; }
.hotel-lightbox__next { right: 20px; }
.hotel-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

/* =========================================
   CONTENT LAYOUT (2 columns)
========================================= */
.hotel-content {
    padding: 40px 0 80px;
    background: var(--hd-bg);
}
.hotel-content .row.g-4 > .col-lg-8 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.hotel-section {
    background: var(--hd-card);
    border-radius: var(--hd-radius);
    padding: 24px;
    box-shadow: var(--hd-shadow);
    margin-bottom: 0;
}
.hotel-section--compact {
    padding: 16px 20px;
}
.hotel-section--booking {
    padding: 28px;
}
.hotel-section__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--hd-text);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hd-border-light);
    display: flex;
    align-items: center;
    gap: 10px;
}
.hotel-section__title svg {
    color: var(--hd-primary);
    flex-shrink: 0;
}
.hotel-section__text {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
}

/* =========================================
   ABOUT — Highlights
========================================= */
.hotel-about-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.hotel-about-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--hd-bg);
    border-radius: var(--hd-radius-sm);
    flex: 1 1 180px;
    min-width: 0;
}
.hotel-about-highlight__icon {
    width: 36px;
    height: 36px;
    background: rgba(var(--hd-primary-rgb), 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-primary);
    font-size: 16px;
    flex-shrink: 0;
}
.hotel-about-highlight strong {
    font-size: 14px;
    color: var(--hd-text);
}
.hotel-about-highlight span {
    font-size: 12px;
    color: var(--hd-text-light);
}

/* About accordion override */
#aboutAccordion .accordion-button {
    font-size: 14px;
    font-weight: 600;
    color: var(--hd-primary);
    padding-top: 12px;
    padding-bottom: 0;
}
#aboutAccordion .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(3000%) hue-rotate(248deg);
}
#aboutAccordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(18%) sepia(60%) saturate(3000%) hue-rotate(248deg);
}
#aboutAccordion .accordion-button:focus {
    box-shadow: none;
}

/* =========================================
   AMENITIES
========================================= */
.hotel-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hotel-amenity {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(var(--hd-primary-rgb), 0.06);
    border-radius: var(--hd-radius-xs);
    font-size: 13px;
    color: var(--hd-primary);
    font-weight: 500;
}

/* =========================================
   BOOKING STEPPER
========================================= */
.booking-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 16px 0;
}
.booking-stepper__step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--hd-radius-xs);
    transition: all var(--hd-transition);
    white-space: nowrap;
}
.booking-stepper__step:disabled {
    cursor: default;
    opacity: 0.5;
}
.booking-stepper__step:not(:disabled):hover {
    background: var(--hd-bg);
}
.booking-stepper__number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hd-border);
    color: var(--hd-text-light);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--hd-transition);
    flex-shrink: 0;
}
.booking-stepper__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hd-text-light);
    transition: color var(--hd-transition);
}
.booking-stepper__step.active .booking-stepper__number {
    background: var(--hd-primary);
    color: #fff;
}
.booking-stepper__step.active .booking-stepper__label {
    color: var(--hd-text);
}
.booking-stepper__step.completed .booking-stepper__number {
    background: var(--hd-green);
    color: #fff;
}
.booking-stepper__step.completed .booking-stepper__label {
    color: var(--hd-text);
}
.booking-stepper__line {
    flex: 1;
    height: 2px;
    background: var(--hd-border);
    margin: 0 4px;
    transition: background var(--hd-transition);
}
.booking-stepper__line.completed {
    background: var(--hd-green);
}

/* =========================================
   BOOKING STEPS
========================================= */
.booking-step__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--hd-text);
    margin: 0 0 8px 0;
}
.booking-step__hint {
    font-size: 13px;
    color: var(--hd-text-muted);
    margin: 0 0 20px 0;
}
.booking-step__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.booking-step__header .booking-step__title {
    margin: 0;
}
.booking-step__actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}
.booking-step__empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--hd-text-muted);
}
.booking-step__empty p {
    margin: 8px 0 0;
    font-size: 14px;
}

/* Back button */
.btn-step-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-xs);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hd-text-light);
    cursor: pointer;
    transition: all var(--hd-transition);
    white-space: nowrap;
}
.btn-step-back:hover {
    border-color: var(--hd-primary);
    color: var(--hd-primary);
}

/* Next button */
.btn-step-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hd-primary);
    color: #fff;
    border: none;
    border-radius: var(--hd-radius-sm);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--hd-transition);
}
.btn-step-next:hover:not(:disabled) {
    background: color-mix(in srgb, var(--hd-primary) 85%, #000);
    transform: translateY(-1px);
}
.btn-step-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* =========================================
   DATE PICKER
========================================= */
.date-picker {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.date-picker::-webkit-scrollbar {
    height: 4px;
}
.date-picker::-webkit-scrollbar-track {
    background: var(--hd-border-light);
    border-radius: 2px;
}
.date-picker::-webkit-scrollbar-thumb {
    background: var(--hd-border);
    border-radius: 2px;
}
.date-picker__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 72px;
    padding: 14px 12px;
    border: 2px solid var(--hd-border);
    border-radius: var(--hd-radius);
    background: var(--hd-card);
    cursor: pointer;
    transition: all var(--hd-transition);
    flex-shrink: 0;
    user-select: none;
}
.date-picker__date:hover {
    border-color: rgba(var(--hd-primary-rgb), 0.4);
    background: rgba(var(--hd-primary-rgb), 0.02);
}
.date-picker__date.selected {
    border-color: var(--hd-primary);
    background: rgba(var(--hd-primary-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--hd-primary-rgb), 0.1);
}
.date-picker__day {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hd-text-muted);
}
.date-picker__num {
    font-size: 22px;
    font-weight: 800;
    color: var(--hd-text);
    line-height: 1.1;
}
.date-picker__month {
    font-size: 12px;
    color: var(--hd-text-light);
    font-weight: 500;
}
.date-picker__date.selected .date-picker__day,
.date-picker__date.selected .date-picker__month {
    color: var(--hd-primary);
}
.date-picker__date.selected .date-picker__num {
    color: var(--hd-primary);
}

/* Date picker summary */
.date-picker__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(var(--hd-primary-rgb), 0.06);
    border-radius: var(--hd-radius-xs);
    font-size: 14px;
    font-weight: 600;
    color: var(--hd-primary);
}

/* =========================================
   TARIF TYPE TOGGLE
========================================= */
.tarif-type-toggle {
    margin-bottom: 24px;
}
.tarif-type-toggle__options {
    display: flex;
    gap: 12px;
}
.tarif-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--hd-card);
    border: 2px solid var(--hd-border);
    border-radius: var(--hd-radius);
    cursor: pointer;
    transition: all var(--hd-transition);
    text-align: left;
}
.tarif-type-btn i {
    font-size: 20px;
    color: var(--hd-text-muted);
    width: 24px;
    text-align: center;
    transition: color var(--hd-transition);
    flex-shrink: 0;
}
.tarif-type-btn span {
    font-size: 15px;
    font-weight: 700;
    color: var(--hd-text);
    display: block;
}
.tarif-type-btn small {
    font-size: 12px;
    color: var(--hd-text-light);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}
.tarif-type-btn:hover {
    border-color: var(--hd-primary);
    background: rgba(var(--hd-primary-rgb), 0.02);
}
/* Flex active */
.tarif-type-btn[data-type="flex"].active {
    border-color: var(--hd-green);
    background: rgba(5, 150, 105, 0.06);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}
.tarif-type-btn[data-type="flex"].active i {
    color: var(--hd-green);
}
/* NA/NR active */
.tarif-type-btn[data-type="nanr"].active {
    border-color: var(--hd-primary);
    background: rgba(var(--hd-primary-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--hd-primary-rgb), 0.1);
}
.tarif-type-btn[data-type="nanr"].active i {
    color: var(--hd-primary);
}

/* =========================================
   TARIF CARDS
========================================= */
.tarif-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.tarif-card {
    background: var(--hd-card);
    border: 1.5px solid var(--hd-border);
    border-radius: var(--hd-radius);
    padding: 20px;
    position: relative;
    transition: border-color var(--hd-transition), box-shadow var(--hd-transition);
}
.tarif-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 2px 12px rgba(var(--hd-primary-rgb), 0.08);
}
.tarif-card--soldout {
    opacity: 0.5;
    pointer-events: none;
}
.tarif-card--hidden {
    display: none;
}
.tarif-card--active {
    border-color: var(--hd-primary);
    box-shadow: 0 0 0 3px rgba(var(--hd-primary-rgb), 0.1);
}
.tarif-card__badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--hd-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 6px;
}
.tarif-card__top {
    margin-bottom: 16px;
}
.tarif-card__icon {
    width: 44px;
    height: 44px;
    background: rgba(var(--hd-primary-rgb), 0.06);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-primary);
    font-size: 20px;
    margin-bottom: 12px;
}
.tarif-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--hd-text);
    margin: 0 0 4px 0;
}
.tarif-card__desc {
    font-size: 13px;
    color: var(--hd-text-light);
    margin: 0;
    line-height: 1.4;
}
/* Détails chambre */
.tarif-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}
.tarif-card__detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--hd-text-light);
    background: var(--hd-bg-light);
    padding: 4px 8px;
    border-radius: 6px;
}
.tarif-card__detail svg {
    flex-shrink: 0;
    opacity: .7;
}
/* Badge remise */
.tarif-card__discount {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.tarif-card__discount-badge {
    display: inline-flex;
    align-items: center;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}
.tarif-card__discount-public {
    font-size: 12px;
    color: var(--hd-text-light);
    text-decoration: line-through;
}

.tarif-card__price-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hd-border-light);
}
.tarif-card__price {
    font-size: 24px;
    font-weight: 800;
    color: var(--hd-primary);
}
.tarif-card__price-suffix {
    font-size: 13px;
    color: var(--hd-text-muted);
    font-weight: 400;
}
.tarif-card__soldout {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hd-red);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0;
}

/* Dates info badge on card */
.tarif-card__dates-info {
    font-size: 12px;
    color: var(--hd-text-muted);
    margin-bottom: 12px;
    min-height: 18px;
}
.tarif-card__dates-info .dates-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--hd-primary-rgb), 0.06);
    color: var(--hd-primary);
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.tarif-card__dates-info .dates-badge--warn {
    background: rgba(239, 68, 68, 0.08);
    color: var(--hd-red);
}

/* Quantity control on card */
.tarif-card__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.tarif-card__qty-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hd-text-light);
}

/* =========================================
   QUANTITY CONTROL (shared)
========================================= */
.qty-control {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--hd-border);
    border-radius: var(--hd-radius-xs);
    overflow: hidden;
    background: var(--hd-card);
}
.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--hd-card);
    font-size: 18px;
    font-weight: 600;
    color: var(--hd-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--hd-transition);
    user-select: none;
}
.qty-btn:hover {
    background: rgba(var(--hd-primary-rgb), 0.06);
}
.qty-value {
    width: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--hd-text);
    border-left: 1.5px solid var(--hd-border);
    border-right: 1.5px solid var(--hd-border);
    line-height: 36px;
}

/* =========================================
   OPTIONS — Auto tags
========================================= */
.tarif-options-auto {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.tarif-option-auto-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--hd-radius-xs);
}
.tarif-option-auto-tag svg {
    color: #22c55e;
    flex-shrink: 0;
}
.tarif-option-auto-tag small {
    color: #15803d;
    font-weight: 600;
    margin-left: 2px;
}

/* Options — Selectable card */
.tarif-option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1.5px solid var(--hd-border);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-card);
    transition: border-color var(--hd-transition), box-shadow var(--hd-transition);
    position: relative;
    margin-bottom: 8px;
}
.tarif-option-card:hover {
    border-color: #93c5fd;
}
.tarif-option-card--selected {
    border-color: var(--hd-primary);
    background: rgba(var(--hd-primary-rgb), 0.03);
}
.tarif-option-card__badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: var(--hd-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.tarif-option-card__info {
    flex: 1;
    min-width: 0;
}
.tarif-option-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--hd-text);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
}
.tarif-option-card__desc {
    font-size: 12px;
    color: var(--hd-text-light);
    margin: 0 0 4px 0;
}
.tarif-option-card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--hd-primary);
}
.tarif-option-card__actions {
    flex-shrink: 0;
    margin-left: 16px;
}
.btn-add-option {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--hd-primary);
    color: #fff;
    border: none;
    border-radius: var(--hd-radius-xs);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--hd-transition);
}
.btn-add-option:hover {
    background: color-mix(in srgb, var(--hd-primary) 85%, #000);
}
.option-qty-control {
    display: flex;
    align-items: center;
}

/* Options accordion overrides */
#optionsAccordion .accordion-item {
    border: 1.5px solid var(--hd-border);
    border-radius: var(--hd-radius-sm) !important;
    margin-bottom: 10px;
    overflow: hidden;
}
#optionsAccordion .accordion-button {
    font-size: 14px;
    font-weight: 700;
    color: var(--hd-text);
    background: var(--hd-card);
    padding: 14px 16px;
}
#optionsAccordion .accordion-button:not(.collapsed) {
    background: rgba(var(--hd-primary-rgb), 0.03);
    color: var(--hd-primary);
    box-shadow: none;
}
#optionsAccordion .accordion-button:focus {
    box-shadow: none;
}
#optionsAccordion .accordion-body {
    padding: 8px 16px 16px;
}

/* =========================================
   SIDEBAR (sticky)
========================================= */
.hotel-sidebar {
    position: sticky;
    top: 24px;
    z-index: 10;
}
.hotel-sidebar__inner {
    background: var(--hd-card);
    border-radius: var(--hd-radius);
    padding: 24px;
    box-shadow: var(--hd-shadow-md);
    border: 1px solid var(--hd-border);
}

/* Sidebar empty state */
.sidebar-empty {
    text-align: center;
    padding: 20px 8px;
    color: var(--hd-text-muted);
}
.sidebar-empty p {
    font-size: 14px;
    margin: 12px 0 0;
    line-height: 1.5;
}

/* Sidebar summary */
.sidebar-summary__type {
    margin-bottom: 12px;
}
.sidebar-summary__items {
    margin-bottom: 16px;
}

/* Summary badges */
.summary-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}
.summary-badge--flex {
    background: rgba(5, 150, 105, 0.1);
    color: var(--hd-green);
}
.summary-badge--nanr {
    background: rgba(239, 68, 68, 0.1);
    color: var(--hd-red);
}

/* Summary sections */
.summary-section {
    margin-bottom: 12px;
}
.summary-section--options {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hd-border);
}
.summary-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.summary-section__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--hd-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.summary-section__title i {
    font-size: 13px;
}
.summary-section__subtotal {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
}

/* Summary tarif group */
.summary-tarif-group {
    background: var(--hd-bg);
    border-radius: var(--hd-radius-xs);
    padding: 10px 12px;
    margin-bottom: 6px;
}
.summary-tarif-group__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.summary-tarif-group__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--hd-text);
    flex: 1;
}
.summary-tarif-group__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--hd-text);
    white-space: nowrap;
}
.summary-tarif-icon {
    font-size: 13px;
    color: var(--hd-primary);
}
.summary-tarif-group__detail {
    font-size: 11.5px;
    color: var(--hd-text-light);
    padding-left: 2px;
    line-height: 1.5;
}

/* Summary auto block */
.summary-auto-block {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(var(--hd-primary-rgb), 0.04);
    border-radius: 6px;
}
.summary-auto-block__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--hd-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: block;
    margin-bottom: 4px;
}
.summary-auto-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.7;
}
.summary-auto-line span:last-child {
    margin-left: auto;
    white-space: nowrap;
}
.summary-auto-icon {
    font-size: 11px;
    color: var(--hd-primary);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.summary-auto-detail {
    font-size: 10.5px;
    color: var(--hd-text-muted);
    padding-left: 20px;
    line-height: 1.5;
}

/* Summary option */
.summary-option-group {
    margin-bottom: 6px;
}
.summary-option-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 3px;
}
.summary-option-line span:last-child {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}
.summary-option-icon {
    font-size: 13px;
    color: var(--hd-primary);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.summary-option-nights {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 22px;
    margin-top: 2px;
}
.summary-option-night-tag {
    font-size: 11px;
    color: var(--hd-text-light);
    background: var(--hd-border-light);
    border-radius: 4px;
    padding: 1px 6px;
}

/* Total & CTA */
.sidebar-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    margin-top: 4px;
    border-top: 2px solid var(--hd-border-light);
}
.sidebar-summary__total span {
    font-size: 15px;
    font-weight: 600;
    color: var(--hd-text);
}
.sidebar-summary__total strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--hd-primary);
}
.btn-book {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--hd-primary);
    color: #fff;
    border: none;
    border-radius: var(--hd-radius-sm);
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--hd-transition);
}
.btn-book:hover {
    background: color-mix(in srgb, var(--hd-primary) 85%, #000);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--hd-primary-rgb), 0.3);
}

/* =========================================
   MOBILE BOTTOM BAR
========================================= */
.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--hd-card);
    border-top: 1px solid var(--hd-border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.mobile-bottom-bar__price {
    display: flex;
    flex-direction: column;
}
.mobile-bottom-bar__label {
    font-size: 12px;
    color: var(--hd-text-light);
}
.mobile-bottom-bar__price strong {
    font-size: 20px;
    font-weight: 800;
    color: var(--hd-primary);
}
.btn-book--mobile {
    width: auto;
    flex-shrink: 0;
    padding: 12px 28px;
    font-size: 15px;
}

/* =========================================
   MAP (legacy fallback for iframe embed)
========================================= */
.hotel-map {
    border-radius: 12px;
    overflow: hidden;
}

/* =========================================
   GOOGLE MAPS DIRECTIONS
========================================= */
.venue-directions-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.venue-directions-input {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    background: var(--hd-card);
    border: 2px solid var(--hd-border);
    border-radius: 50px;
    padding: 0 16px;
    transition: border-color var(--hd-transition);
}
.venue-directions-input:focus-within {
    border-color: var(--hd-primary);
}
.venue-directions-input input {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px 8px;
    font-size: 14px;
    background: transparent;
    color: var(--hd-text);
}
.venue-directions-input input::placeholder {
    color: var(--hd-text-muted);
}
.venue-directions-input input.error {
    animation: shake 0.4s;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.venue-directions-modes {
    display: flex;
    gap: 6px;
}
.venue-directions-modes button {
    width: 40px;
    height: 40px;
    border: 2px solid var(--hd-border);
    border-radius: 50%;
    background: var(--hd-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--hd-text-light);
    transition: all var(--hd-transition);
}
.venue-directions-modes button:hover {
    border-color: var(--hd-primary);
    color: var(--hd-primary);
}
.venue-directions-modes button.active {
    background: var(--hd-primary);
    border-color: var(--hd-primary);
    color: #fff;
}
.btn-directions {
    background: var(--hd-primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--hd-transition);
    white-space: nowrap;
}
.btn-directions:hover {
    background: color-mix(in srgb, var(--hd-primary) 85%, #000);
}
.btn-directions:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Carte + panneau */
.venue-directions-wrapper {
    display: flex;
    gap: 16px;
    border-radius: var(--hd-radius);
    overflow: hidden;
}
#venue-gmap {
    flex: 1;
    min-height: 500px;
    border-radius: var(--hd-radius);
}
.venue-directions-panel {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
}
.venue-directions-panel.visible {
    width: 380px;
    overflow-y: auto;
    max-height: 500px;
}

/* Options de route */
.route-option {
    padding: 14px;
    border: 2px solid var(--hd-border);
    border-radius: var(--hd-radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--hd-card);
    transition: all var(--hd-transition);
}
.route-option:hover {
    border-color: rgba(var(--hd-primary-rgb), 0.4);
}
.route-option.active {
    border-color: var(--hd-primary);
    background: rgba(var(--hd-primary-rgb), 0.04);
}
.route-option-duration {
    font-size: 15px;
    font-weight: 700;
    color: var(--hd-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.route-option-duration i {
    color: var(--hd-primary);
}
.route-option-distance {
    font-size: 13px;
    color: var(--hd-text-muted);
    display: block;
    margin-top: 2px;
}
.route-option-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--hd-primary);
    color: #fff;
    padding: 3px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.route-steps {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hd-border-light);
    max-height: 200px;
    overflow-y: auto;
}
.route-step {
    padding: 4px 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
}

/* =========================================
   RESPONSIVE
========================================= */

/* Tablet */
@media (max-width: 991px) {
    .hotel-sidebar {
        position: static;
    }
    .hotel-content .col-lg-4 {
        display: none;
    }
    .venue-directions-wrapper {
        flex-direction: column;
    }
    .venue-directions-panel.visible {
        width: 100%;
        max-height: 300px;
    }
    #venue-gmap {
        min-height: 350px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hotel-hero__header {
        flex-direction: column;
    }
    .hotel-hero__booking-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        width: 100%;
        min-width: 0;
    }
    .hotel-hero__name {
        font-size: 24px;
    }
    .hotel-photo-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .hotel-photo-grid__main {
        height: 250px;
        border-radius: 16px 16px 0 0;
    }
    .hotel-photo-grid__side {
        height: 180px;
    }
    .hotel-photo-grid__cell:nth-child(2) { border-radius: 0; }
    .hotel-photo-grid__cell:nth-child(3) { border-radius: 0 0 0 16px; }
    .hotel-photo-grid__cell:nth-child(4) { border-radius: 0 0 16px 0; }

    .hotel-section {
        padding: 16px;
        border-radius: var(--hd-radius-sm);
    }
    .hotel-section--booking {
        padding: 20px 16px;
    }

    /* Stepper compact */
    .booking-stepper__label {
        display: none;
    }
    .booking-stepper__step {
        padding: 6px 8px;
    }

    /* Date picker scrollable */
    .date-picker__date {
        min-width: 64px;
        padding: 10px 8px;
    }
    .date-picker__num {
        font-size: 18px;
    }

    /* Tarif toggle stack */
    .tarif-type-toggle__options {
        flex-direction: column;
    }

    /* Cards single column */
    .tarif-cards-grid {
        grid-template-columns: 1fr;
    }

    /* About highlights compact */
    .hotel-about-highlights {
        gap: 8px;
    }
    .hotel-about-highlight {
        flex: 1 1 140px;
        padding: 8px 12px;
    }

    /* Add padding for bottom bar */
    .hotel-content {
        padding-bottom: 100px;
    }

}

/* Small mobile */
@media (max-width: 480px) {
    .hotel-hero {
        padding: 20px 0;
    }
    .hotel-hero__price-value {
        font-size: 24px;
    }
    .btn-hero-book {
        width: 100%;
        justify-content: center;
    }
    .venue-directions-input {
        min-width: 100%;
    }
    .btn-directions {
        width: 100%;
        text-align: center;
    }
    .booking-step__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}