/* ============================================
   HOTELS MODULE STYLES
   Modern design for hotel search, detail, booking
   SwitchCorner brand colors: #0e1534 / #AB801C
   ============================================ */

/* ============================================
   CSS Variables — Charte SwitchCorner
   ============================================ */
:root {
  --hotel-primary: #0e1534;
  --hotel-primary-dark: #0a0f24;
  --hotel-primary-light: #1a2850;
  --hotel-accent: #AB801C;
  --hotel-accent-dark: #8a6616;
  --hotel-accent-light: #c9a03d;
  --hotel-gradient: linear-gradient(135deg, #0e1534 0%, #1a2850 50%, #1d2023 100%);
  --hotel-accent-gradient: linear-gradient(135deg, #AB801C 0%, #8a6616 100%);
  --hotel-dark: #1d2023;
  --hotel-light: #fdf8f0;
  --hotel-bg: #f8f9fa;
  --hotel-star: #AB801C;
  --hotel-success: #28a745;
  --hotel-warning: #AB801C;
  --hotel-error: #dc3545;
  --hotel-shadow: 0 4px 20px rgba(14, 21, 52, 0.12);
  --hotel-shadow-lg: 0 10px 40px rgba(14, 21, 52, 0.18);
  --hotel-radius: 16px;
  --hotel-radius-sm: 10px;
}

/* ============================================
   Search Header Section
   ============================================ */
.hotel-search-header {
  background:#fff;
  padding: 2rem 0;
  position: relative;
  overflow: visible;
}
.hotel-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: #303539;
}

.hotel-search-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0.5rem;
  --bs-breadcrumb-divider: '>';
}

.hotel-search-header .breadcrumb-item a {
  color: #303539;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hotel-search-header .breadcrumb-item a:hover {
  color: #333;
}

.hotel-search-header .breadcrumb-item.active {
  color: #303539;
  font-size: 0.9rem;
  font-weight: 400;
}

.hotel-search-header .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: rgba(48,53,57,0.4);
}

/* Search Summary Card */
.hotel-search-summary {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--hotel-radius);
      padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hotel-search-summary .destination {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}

.hotel-search-summary .search-details {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hotel-search-summary .search-details span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hotel-search-summary .search-details svg {
  width: 14px;
  height: 14px;
  fill: var(--hotel-accent);
}

.hotel-search-edit-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--hotel-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hotel-search-edit-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.hotel-search-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================
   Hotel Search Engine — same design as homepage
   ============================================ */
.sc-hotel-search-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(23, 59, 108, 0.18);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  overflow: visible;
  position: relative;
  z-index: 10;
}

.sc-hotel-search-wrap .searchForm-list .row {
  align-items: stretch;
}

.sc-hotel-search-wrap .searchForm-list .form-control {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  height: 52px;
  font-size: 0.95rem;
  padding-left: 48px;
  background: #f8f9fa;
  transition: all 0.2s ease;
}

.sc-hotel-search-wrap .searchForm-list .form-control:focus {
  border-color: #0e1534;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 59, 108, 0.1);
}

.sc-hotel-search-wrap .searchForm-list .input-separate,
.sc-hotel-search-wrap .searchForm-list .input-boxs {
  position: relative;
}

.sc-hotel-search-wrap .searchForm-list .destination {
  position: relative;
}

.sc-hotel-search-wrap .searchForm-list .pos-absolute-icons {
  color: #6c757d;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  position: absolute;
}

.sc-hotel-search-wrap .searchForm-list .pos-absolute-icons-right {
  right: 14px;
  left: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* Date picker block */
.sc-hotel-search-wrap .searchForm-list .js-datepicker {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 0 12px 0 48px;
  height: 52px;
  align-items: center;
}

.sc-hotel-search-wrap .searchForm-list .js-datepicker .pos-absolute-icons {
  left: 14px;
}

.sc-hotel-search-wrap .searchForm-list .js-datepicker .form-control {
  border: none;
  background: transparent;
  height: auto;
  padding: 0;
  font-size: 0.9rem;
}

.sc-hotel-search-wrap .searchForm-list .js-datepicker .form-control:focus {
  box-shadow: none;
}

.sc-hotel-search-wrap .searchForm-list .middle-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #dee2e6;
  /* margin: 0 auto; */
  align-self: center;
}

/* Guests / Occupancy field */
.sc-hotel-search-wrap .searchForm-list .users-p .totalhotel {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  height: 52px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  padding-left: 48px;
}

.sc-hotel-search-wrap .searchForm-list .users-p .totalhotel:hover {
  border-color: #0e1534;
}

/* Guests dropdown panel */
.sc-hotel-search-wrap .searchForm-list .guests {
  position: absolute;
  top: -5%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 1rem;
  z-index: 9999;
  margin-top: 8px;
}

.sc-hotel-search-wrap .searchForm-list .guests .form-select {
  border-radius: 8px;
  border-color: #e9ecef;
}

.sc-hotel-search-wrap .searchForm-list .guests .room-lab label {
  font-weight: 600;
  color: #0e1534;
}


.sc-hotel-search-wrap .searchForm-list .guests .search-footer {
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

.sc-hotel-search-wrap .searchForm-list .guests .add-room {
  color: #0e1534;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sc-hotel-search-wrap .searchForm-list .guests .add-room:hover {
  color: #AB801C;
}

/* Search submit button */
.sc-hotel-search-wrap .searchForm-list .btn-primary,
.sc-hotel-search-wrap .searchForm-list .btn-search-list {
  background: #AB801C;
  border-color: #AB801C;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  min-height: 52px;
  color: #fff;
  transition: all 0.3s ease;
}

.sc-hotel-search-wrap .searchForm-list .btn-primary:hover,
.sc-hotel-search-wrap .searchForm-list .btn-search-list:hover {
  background: #8a6616;
  border-color: #8a6616;
  transform: translateY(-1px);
}

/* Typeahead dropdown — ensure it escapes any parent stacking context */
.sc-hotel-search-wrap .twitter-typeahead {
  width: 100%;
}

.sc-hotel-search-wrap .tt-menu {
  z-index: 9999 !important;
}

/* Typeahead close button */
.sc-hotel-search-wrap .Typeahead-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.5;
}

.sc-hotel-search-wrap .Typeahead-close:hover {
  opacity: 1;
}

/* Hide error messages */
.sc-hotel-search-wrap .msg-help {
  display: none !important;
}

/* Responsive */
@media (max-width: 991.98px) {
  .sc-hotel-search-wrap .searchForm-list .guests {
           top: 100%; }
  .sc-hotel-search-wrap {
    border-radius: 10px;
    padding: 1rem;
    margin-top: 0px;
  }

  .sc-hotel-search-wrap .searchForm-list .form-control,
  .sc-hotel-search-wrap .searchForm-list .js-datepicker,
  .sc-hotel-search-wrap .searchForm-list .users-p .totalhotel {
    height: 48px;
  }

  .sc-hotel-search-wrap .searchForm-list .btn-primary,
  .sc-hotel-search-wrap .searchForm-list .btn-search-list {
    min-height: 48px;
  }
}

/* ============================================
   Mobile Actions Bar
   ============================================ */
.hotel-mobile-actions {
  background: linear-gradient(135deg, var(--hotel-primary) 0%, var(--hotel-primary-light) 55%, #24366b 100%);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.hotel-mobile-actions .action-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.3s ease;
}

.hotel-mobile-actions .action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.hotel-mobile-actions .action-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ============================================
   Filters Sidebar
   ============================================ */
.hotel-filters {
  position: sticky;
  top: 100px;
}

.hotel-filter-card {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  margin-bottom: 1rem;
  overflow: hidden;
  border: none;
}

.hotel-filter-card .card-header {
  background: transparent;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--hotel-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hotel-filter-card .card-header svg {
  width: 18px;
  height: 18px;
  fill: var(--hotel-primary);
}

.hotel-filter-card .card-body {
  padding: 1rem 1.25rem;
}

/* Hotel Count Badge */
.hotel-results-count {
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  padding: 1rem 1.25rem;
  border-radius: var(--hotel-radius);
  text-align: center;
  margin-bottom: 1rem;
}

.hotel-results-count .count-number {
  font-size: 2rem;
  font-weight: 700;
  display: block;
  line-height: 1;
}

.hotel-results-count .count-label {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Price Range Slider */
.hotel-price-range {
  padding: 0 0.5rem;
}

.hotel-price-range .price-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hotel-dark);
}

.hotel-price-range input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  background: #e5e7eb;
  border-radius: 3px;
  outline: none;
}

.hotel-price-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hotel-accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(171, 128, 28, 0.4);
  transition: transform 0.2s ease;
}

.hotel-price-range input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* Star Rating Filter */
.hotel-star-filter .star-option {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem;
}

.hotel-star-filter .star-option:hover {
  background: var(--hotel-light);
}

.hotel-star-filter .star-option input {
  margin-right: 0.75rem;
  width: 18px;
  height: 18px;
  accent-color: var(--hotel-primary);
}

.hotel-star-filter .stars {
  display: flex;
  gap: 2px;
}

.hotel-star-filter .stars svg {
  width: 16px;
  height: 16px;
  fill:#FFB300;
}

.hotel-star-filter .star-count {
  margin-left: auto;
  background: #f3f4f6;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Board Type Filter */
.hotel-board-filter .board-option {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin: 0 -0.75rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.hotel-board-filter .board-option:hover {
  background: var(--hotel-light);
}

.hotel-board-filter .board-option input {
  margin-right: 0.75rem;
  width: 18px;
  height: 18px;
  accent-color: var(--hotel-primary);
}

.hotel-board-filter .board-label {
  flex: 1;
  font-size: 0.9rem;
}

.hotel-board-filter .board-count {
  background: #f3f4f6;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Clear Filters Button */
.hotel-clear-filters {
  background: transparent;
  border: 1px dashed #d1d5db;
  color: #6b7280;
  padding: 0.75rem;
  width: 100%;
  border-radius: var(--hotel-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hotel-clear-filters:hover {
  border-color: var(--hotel-primary);
  color: var(--hotel-primary);
  background: var(--hotel-light);
}

.hotel-clear-filters svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================
   Results Header & Sort
   ============================================ */
.hotel-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.hotel-results-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hotel-dark);
  margin: 0;
}

.hotel-results-title .searching-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hotel-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.hotel-sort-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Sort Dropdown */
.hotel-sort-dropdown {
  position: relative;
}

.hotel-sort-btn {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--hotel-radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.hotel-sort-btn:hover {
  border-color: var(--hotel-primary);
}

.hotel-sort-btn svg {
  width: 16px;
  height: 16px;
  fill: #9ca3af;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.hotel-sort-btn.active svg {
  transform: rotate(180deg);
}

.hotel-sort-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: var(--hotel-radius-sm);
  box-shadow: var(--hotel-shadow-lg);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.hotel-sort-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hotel-sort-menu .sort-option {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hotel-sort-menu .sort-option:hover {
  background: var(--hotel-light);
  color: var(--hotel-primary-dark);
}

.hotel-sort-menu .sort-option.active {
  background: var(--hotel-light);
  color: var(--hotel-primary-dark);
  font-weight: 600;
}

.hotel-sort-menu .sort-option.active::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--hotel-accent);
  border-radius: 50%;
}

/* Map Button */
.hotel-map-btn {
  background: var(--hotel-light);
  border: 1px solid var(--hotel-accent);
  color: var(--hotel-accent);
  padding: 0.6rem 1rem;
  border-radius: var(--hotel-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hotel-map-btn:hover {
  background: var(--hotel-accent);
  color: #fff;
  border-color: var(--hotel-accent);
}

.hotel-map-btn:hover svg {
  fill: #fff;
}

.hotel-map-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--hotel-accent-dark);
  transition: fill 0.3s ease;
}

/* ============================================
   Hotel Card - List View
   ============================================ */

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

.hotel-card {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 1px solid #f3f4f6;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
  animation: cardFadeIn 0.45s ease both;
}

.hotel-card:hover {
  box-shadow: var(--hotel-shadow);
  transform: translateY(-2px);
  border-color: #e5e7eb;
}

.hotel-card-inner {
  display: flex;
  flex-direction: row;
}

.hotel-card-image {
  width: 280px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.hotel-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hotel-card:hover .hotel-card-image img {
  transform: scale(1.05);
}

.hotel-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hotel-card-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.hotel-card-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hotel-card-favorite:hover {
  background: #fff;
  transform: scale(1.1);
}

.hotel-card-favorite svg {
  width: 18px;
  height: 18px;
  fill: #d1d5db;
  transition: fill 0.3s ease;
}

.hotel-card-favorite.active svg,
.hotel-card-favorite:hover svg {
  fill: #dc3545;
}

.hotel-card-content {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.hotel-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.hotel-card-name-block {
  flex: 1;
  min-width: 0;
}

.hotel-card-name a {
  color: inherit;
  text-decoration: none;
}

.hotel-card-name a:hover {
  color: var(--hotel-primary);
}

.hotel-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hotel-dark);
  margin: 0 0 0.35rem 0;
  transition: color 0.3s ease;
}

.hotel-card-name:hover {
  color: var(--hotel-primary);
}

.hotel-card-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.5rem;
}

.hotel-card-stars svg {
  width: 14px;
  height: 14px;
}

.hotel-card-stars svg.empty {
  fill: #e5e7eb;
}

.hotel-card-location {
  font-size: 0.85rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hotel-card-location svg {
  width: 14px;
  height: 14px;
  fill: var(--hotel-primary);
}

/* Hotel Score */
.hotel-card-score {
  text-align: right;
}

.hotel-score-badge {
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  padding: 0.5rem 0.75rem;
  border-radius: 8px 8px 8px 0;
  font-size: 1rem;
  font-weight: 700;
  display: inline-block;
  min-width: 45px;
  text-align: center;
}

.hotel-score-label {
  font-size: 0.75rem;
  color: var(--hotel-accent-dark);
  font-weight: 600;
  margin-top: 0.25rem;
}

.hotel-score-reviews {
  font-size: 0.7rem;
  color: #9ca3af;
}

.hotel-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Hotel Marketing text */
.hotel-card-marketing {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

/* Hotel Card Price nights */
.hotel-price-nights {
  font-size: 0.72rem;
  color: #9ca3af;
  display: block;
}

/* ============================================
   Hotel Card Rooms Accordion
   ============================================ */
.hotel-card-rooms {
  border-top: 2px solid #f3f4f6;
}

.hotel-rooms-inner {
  background: #f8fafc;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

/* Rooms header bar: title + board filters */
.rooms-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #f0f2f5;
}

.choice-room-line {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--hotel-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.boardsFilter .selection-type-room {
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px !important;
  border-color: #d1d5db;
  color: #6b7280;
  background: #fff;
  transition: all 0.2s ease;
}

.boardsFilter .btn-check:checked + .selection-type-room {
  background: var(--hotel-primary-dark) !important;
  border-color: var(--hotel-primary-dark) !important;
  color: #fff !important;
}

/* Rooms header bar */
.rooms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem 0.75rem;
  border-bottom: 2px solid #f0f2f5;
  margin-bottom: 0.75rem;
}

.rooms-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
}

/* Board type filters */
.boardsFilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.board-item {
  display: flex;
}

.selection-type-room {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-check:checked + .selection-type-room {
  background: var(--hotel-primary-dark) !important;
  border-color: var(--hotel-primary-dark) !important;
  color: #fff !important;
}

/* Individual room row */
.hotelsRooms {
  padding: 0 0.25rem 0.5rem;
}

.room-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.room-row:hover {
  border-color: #AB801C;
  box-shadow: 0 2px 8px rgba(171, 128, 28, 0.12);
}

/* Room name + occupants */
.room-row-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hotel-dark);
  margin-bottom: 0.2rem;
}

.room-row-occupants {
  font-size: 0.78rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Policy: cancel date, nrf, min stay */
.room-row-policy {
  font-size: 0.78rem;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.room-cancel-free {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #16a34a;
  font-weight: 500;
}

.hotel-room-text-danger {
  color: #dc2626;
  font-weight: 500;
}

/* Price block */
.room-row-price {
  text-align: right;
}

.room-board-label {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.room-old-price {
  font-size: 0.75rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.room-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hotel-dark);
  line-height: 1.1;
}

.room-amount span {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
}

/* Select checkbox styled as button */
.room-row-select {
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-select-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0;
}

.room-select-input {
  display: none;
}

.room-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  background: #f3f4f6;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  transition: all 0.2s ease;
  white-space: nowrap;
}


.room-select-label:hover .room-select-btn {
  border-color: #AB801C;
  background: #f9fbf0;
}

/* Room price in step1h results */
.room-price-amount {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--hotel-primary-dark);
  line-height: 1.1;
  margin-top: 10px;
}

.room-price-amount small {
  font-size: 0.72rem;
  color: #9ca3af;
  font-weight: 400;
}

/* Show more button wrapper */
.rooms-show-more-wrap {
  text-align: center;
  padding: 0.5rem 0;
}

.rooms-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hotel-primary);
  background: #f0f4ff;
  border: 1px solid rgba(30,77,140,0.2);
  border-radius: 20px;
  padding: 0.35rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
}

.rooms-show-more-btn:hover {
  background: var(--hotel-primary);
  color: #fff;
  border-color: var(--hotel-primary);
}

/* Room select checkbox styled as button */
.room-select {
  display: none;
}

.room-select:checked + .room-select-btn {
  background: #AB801C;
  border-color: #AB801C;
  color: #fff;
  box-shadow: 0 2px 8px rgba(171,128,28,0.3);
}

/* Selected room card state */
.room-row.selectedRow {
  border-color: var(--hotel-accent);
  box-shadow: 0 2px 10px rgba(171,128,28,0.18);
}

/* Booking bar actions */
.room-booking-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* See more rooms button */
.see-more-hotels {
  font-size: 0.8rem;
  color: var(--hotel-primary);
  border: 1px dashed var(--hotel-primary);
  border-radius: 6px;
  padding: 0.3rem 1rem;
  background: transparent;
  transition: all 0.2s ease;
}

.see-more-hotels:hover {
  background: var(--hotel-primary);
  color: #fff;
}

/* Booking summary bar */
.room-booking-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border-top: 1px solid #f0f2f5;
  border-radius: 0 0 16px 16px;
}

.room-booking-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hotel-dark);
}

.room-booking-btn {
  background: var(--hotel-gradient);
  color: #fff;
  border: none;
  padding: 0.6rem 1.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.room-booking-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 59, 108, 0.25);
}

/* Mobile: stack room row to 2 cols */
@media (max-width: 767.98px) {
  .fiche-marketing-tag {
    display: inline-grid !important;  }
  .room-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;

  }
  .room-row-select {
    justify-content: end;
}

  .room-row-policy {
    display: none;
  }

  .room-row-price {
    text-align: left;
  }

  .room-booking-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .room-booking-btn {
    width: 100%;
    text-align: center;
  }

  .rooms-type {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Hotel Features */
.hotel-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.hotel-feature-tag {
  background: #f3f4f6;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hotel-feature-tag svg {
  width: 12px;
  height: 12px;
  fill: var(--hotel-accent-dark);
}

/* Price Section */
.hotel-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.hotel-card-board {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hotel-board-badge {
  background: var(--hotel-light);
  color: #AB801C;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

.hotel-card-price {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hotel-price-from {
  font-size: 0.75rem;
  color: #9ca3af;
}

.hotel-price-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hotel-dark);
  line-height: 1;
}

.hotel-price-currency {
  font-size: 0.9rem;
  font-weight: 500;
}

.hotel-price-per {
  font-size: 0.75rem;
  color: #6b7280;
}

.hotel-card-cta {
  background:#AB801C;
  color:#fff;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: var(--hotel-radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.hotel-card-cta:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 15px rgba(171, 128, 28, 0.35);
  color: #fff;
}

.hotel-card-cta svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.hotel-card-cta:hover svg {
  transform: translateX(3px);
}

/* ============================================
   Hotel Detail Fiche Page
   ============================================ */

/* Hero banner */
.fiche-hero {
  background:#fff;
  padding: 1.25rem 0 1.5rem;
  color: #303539;
}

.fiche-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.fiche-breadcrumb > a {
  color: #303539;
  font-size: 0.82rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

.fiche-breadcrumb > a:hover {
  color: #AB801C;
}

.fiche-breadcrumb > span {
  color: rgba(48,53,57,0.4);
  line-height: 1;
}

.fiche-breadcrumb > .current {
  color: #303539;
  font-size: 0.82rem;
  font-weight: 400;
}

.fiche-breadcrumb .breadcrumb-item a {
  color: #303539;
  font-size: 0.82rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

.fiche-breadcrumb .breadcrumb-item a:hover {
  color: #AB801C;
}

.fiche-breadcrumb .breadcrumb-item.active {
  color: #303539;
  font-size: 0.82rem;
  font-weight: 400;
}

.fiche-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: rgba(48,53,57,0.4);
}

.fiche-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.fiche-hotel-name {
  font-size: 1.6rem;
  font-weight: 800;
  color: #303539;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.fiche-hotel-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 0.5rem;
  align-items: center;
}

.fiche-hotel-address {
  font-size: 0.85rem;
  color: #303539;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fiche-map-link {
  color: #AB801C;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  transition: opacity 0.2s;
}

.fiche-map-link:hover { opacity: 0.8; color: #AB801C; }

.fiche-marketing-tag {
  display: block;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  background: rgba(171,128,28,0.15);
  border: 1px solid rgba(171,128,28,0.35);
  color: #AB801C;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}
.fiche-marketing-tag span , .fiche-marketing-tag p{ font-family: inherit !important; color: inherit !important; font-weight: 600 !important; font-size: 14px !important;}
.fiche-hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.fiche-score-block {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 0.6rem 1rem;
}

.fiche-score-badge {
  font-size: 1.5rem;
  font-weight: 800;
  color: #AB801C;
  line-height: 1;
}

.fiche-score-badge span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

.fiche-score-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.fiche-score-label small {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  font-weight: 400;
}

.fiche-share-btn {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.15);
  border: 1px solid #AB801C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AB801C;
  transition: all 0.2s ease;
}

.fiche-share-btn:hover {
  background: #AB801C;
  color: #fff;
}

/* Gallery */
.fiche-gallery-wrap {
  background: #fff;
  padding: 0;
}

.fiche-gallery-grid {
  line-height: 0;
}

.fiche-carousel .carousel-item img {
  height: 280px;
  object-fit: cover;
  width: 100%;
}

.fiche-photo-count {
  position: absolute;
  bottom: 12px;
  right: 16px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s;
}

.fiche-photo-count:hover {
  background: rgba(0,0,0,0.85);
}

/* Body layout */
.fiche-body {
  background: #f8fafc;
  padding: 2rem 0 3rem;
}

.fiche-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

/* Sections */
.fiche-section {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid #f0f2f5;
}

.fiche-section-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f3f4f6;
}

.fiche-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin: 0;
}

.fiche-description {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
}

/* Sidebar widgets */
.fiche-sidebar {
  position: sticky;
  top: 80px;
}

.fiche-widget {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #f0f2f5;
}

.fiche-widget-header {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fiche-facilities-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fiche-facility-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: #374151;
  padding: 0.3rem 0;
  border-bottom: 1px solid #f9fafb;
}

.fiche-facility-item:last-child {
  border-bottom: none;
}

.fiche-show-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hotel-primary);
  background: none;
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: color 0.2s;
}

.fiche-show-more:hover {
  color: var(--hotel-accent-dark);
}

/* Check-in / Check-out widget */
.fiche-checkinout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fiche-checkinout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.fiche-checkinout-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #6c757d;
  font-weight: 500;
}

.fiche-checkinout-label svg {
  flex-shrink: 0;
  fill: #6c757d;
}

.fiche-checkinout-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
}

/* Themes widget */
.fiche-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fiche-theme-tag {
  display: inline-block;
  background: transparent;
  border: 1px solid #e0e4e8;
  color: #4a5568;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Gallery grid (desktop fancybox) */
.gallery-main img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.gallery-thumbs a img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}

.gallery-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 22px;
}

.gallery-thumbs a.after-five { display: none; }

.gallery-thumbs a img:hover { opacity: 0.85; }

/* Responsive */
@media (max-width: 991.98px) {
  .fiche-layout {
       display: block;
  }
  .fiche-sidebar {
    position: static;
  }
  .fiche-hotel-name {
    font-size: 1.25rem;
  }
  .gallery-main img {
    height: 260px;
  }
  .gallery-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
  .gallery-thumbs a img {
    height: 90px;
  }
  .gallery-thumb-placeholder {
    height: 90px;
  }
}

@media (max-width: 767.98px) {
  .fiche-hero-content {
    flex-direction: column;
    gap: 0.75rem;
  }
  .fiche-hero-actions {
    width: 100%;
    justify-content: end;
  }
  .fiche-score-block {
    flex: 1;
  }
  .gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   Hotel Fiche — Search Engine (step1)
   ============================================ */

.fiche-engine {
  background: var(--hotel-primary-dark);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Inherit inner engine layout from global .engine, override colors */
.fiche-engine .engine-hotel-list {
  gap: 0;
}

.fiche-engine .form-control-border {
  background: #fff;
  border-radius: 0;
  border-right: 1px solid #e5e7eb;
}

.fiche-engine .form-control-border:last-child {
  border-right: none;
}

.fiche-engine .input-date,
.fiche-engine .nights-count,
.fiche-engine .totalhotel {
  background: transparent !important;
  border: none !important;
  color: #1f2937;
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.55rem 0.75rem;
  height: 100%;
  box-shadow: none !important;
}

.fiche-engine .form-control-border {
  background: #fff;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  border: none;
}

.fiche-engine .js-datepicker {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.fiche-engine .pos-absolute-icons {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  z-index: 1;
  color: var(--hotel-primary);
}

.fiche-engine .js-datepicker .row.engine-hotel-list {
  background: #fff;
  border-radius: 8px;
  height: 48px;
  align-items: center;
}

.fiche-engine .input-separate .form-control,
.fiche-engine .input-separate .totalhotel {
  background: #fff !important;
  border-radius: 8px !important;
  border: none !important;
  height: 48px;
  padding-left: 2.5rem;
}

.fiche-engine .persons {
  position: relative;
}

.fiche-engine .guests {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  min-width: 300px;
}

.fiche-engine .guests .button-save {
  background: var(--hotel-primary-dark);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px 8px 0 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.fiche-engine .guests .rooms {
  padding: 0.75rem 1rem;
  max-height: 280px;
  overflow-y: auto;
}

.fiche-engine .guests .search-footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid #f3f4f6;
}

.fiche-engine .middle-line {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9ca3af;
  font-size: 1rem;
}

.fiche-engine .middle-line::after {
  content: '→';
}

/* Search/Update button */
.fiche-engine-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 48px;
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}

.fiche-engine-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.fiche-engine-btn:active {
  transform: translateY(0);
}

/* ============================================
   Hotel Fiche — Room Results (step1h)
   ============================================ */

#tarifs .tarifs {
  min-height: 60px;
}

/* Room results skeleton / loading */
#tarifs .tarifs:empty::after {
  content: '';
  display: block;
  height: 80px;
}

/* Room type header row */
.tarifs .rooms-type {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.tarifs .rooms-type-header {
  background: linear-gradient(to right, var(--hotel-primary-dark), var(--hotel-primary));
  color: #fff;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tarifs .table-tarif {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tarifs .table-tarif thead th {
  background: #f8fafc;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #f0f2f5;
}

.tarifs .table-tarif tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}

.tarifs .table-tarif tbody tr:last-child {
  border-bottom: none;
}

.tarifs .table-tarif tbody tr:hover {
  background: #f8faff;
}

.tarifs .table-tarif td {
  padding: 0.65rem 0.75rem;
  vertical-align: middle;
}
/* Availability badges */
.tarifs .badge-available {
  background: #d1fae5;
  color: #065f46;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  font-weight: 600;
}

.tarifs .badge-onrequest {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  font-weight: 600;
}

.tarifs .badge-nrf {
  background: #fee2e2;
  color: #991b1b;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  font-weight: 600;
}

/* Price column */
.tarifs .tarif-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--hotel-primary-dark);
  white-space: nowrap;
}

.tarifs .tarif-price small {
  font-size: 0.72rem;
  color: #9ca3af;
  font-weight: 400;
}

/* Select/book button */
.tarifs .btn-select-tarif {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}

.tarifs .btn-select-tarif:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: var(--hotel-primary-dark);
}

/* Cancellation policy */
.tarifs .cancel-policy {
  font-size: 0.78rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.tarifs .cancel-policy.non-refundable {
  color: #dc2626;
}

/* No availability message */
.tarifs .no-tarif-msg {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  padding: 1.5rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Loading spinner inside tarifs */
.tarifs .tarif-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--hotel-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 991.98px) {
  .fiche-engine {
    padding: 0.85rem 1rem;
  }
  .fiche-engine-btn {
    width: 100%;
    margin-top: 0.5rem;
  }
  .tarifs .table-tarif thead {
    display: none;
  }
  .tarifs .table-tarif tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem;
    border-bottom: 1px solid #f0f2f5;
  }
  .tarifs .table-tarif td {
    padding: 0.2rem 0.3rem;
  }
}

@media (max-width: 767.98px) {
  .fiche-engine .row.g-2 {
    gap: 0.5rem;
  }
}

/* ============================================
   Hotel Detail Page  (legacy — kept for compatibility)
   ============================================ */
.hotel-detail-hero {
  background: var(--hotel-gradient);
  padding: 1.5rem 0;
}

.hotel-detail-hero .breadcrumb {
  margin-bottom: 0;
  --bs-breadcrumb-divider: '>';
}

.hotel-detail-hero .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.8);
}

.hotel-detail-hero .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.6);
}

.hotel-detail-hero .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: rgba(255, 255, 255, 0.5);
}

/* Hotel Info Header */
.hotel-detail-header {
  padding: 1.5rem 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.hotel-detail-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.hotel-detail-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hotel-dark);
  margin: 0 0 0.5rem 0;
}

.hotel-detail-stars {
  display: inline-flex;
  gap: 3px;
  margin-left: 0.75rem;
  vertical-align: middle;
}

.hotel-detail-stars svg {
  width: 18px;
  height: 18px;
  fill: var(--hotel-star);
}

.hotel-detail-address {
  font-size: 0.95rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hotel-detail-address svg {
  width: 16px;
  height: 16px;
  fill: var(--hotel-primary);
}

.hotel-detail-map-link {
  color: var(--hotel-primary);
  font-weight: 500;
  margin-left: 0.5rem;
  cursor: pointer;
}

.hotel-detail-map-link:hover {
  text-decoration: underline;
}

.hotel-detail-promo {
  background: var(--hotel-light);
  color: var(--hotel-accent-dark);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hotel-detail-promo svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Hotel Score Section */
.hotel-detail-score {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hotel-detail-score-badge {
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  width: 60px;
  height: 60px;
  border-radius: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hotel-detail-score-number {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.hotel-detail-score-max {
  font-size: 0.7rem;
  opacity: 0.8;
}

.hotel-detail-score-text {
  text-align: left;
}

.hotel-detail-score-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hotel-dark);
}

.hotel-detail-score-reviews {
  font-size: 0.85rem;
  color: #6b7280;
}

.hotel-share-btn {
  background: #f3f4f6;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hotel-share-btn:hover {
  background: var(--hotel-light);
}

.hotel-share-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--hotel-primary);
}

/* Gallery Section */
.hotel-gallery {
  margin-bottom: 2rem;
}

.hotel-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 180px);
  gap: 0.5rem;
  border-radius: var(--hotel-radius);
  overflow: hidden;
}

.hotel-gallery-main {
  grid-row: span 2;
  position: relative;
}

.hotel-gallery-main img,
.hotel-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hotel-gallery-main img:hover,
.hotel-gallery-item img:hover {
  transform: scale(1.02);
}

.hotel-gallery-item {
  position: relative;
}

.hotel-gallery-more {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hotel-gallery-more:hover {
  background: rgba(0, 0, 0, 0.7);
}

.hotel-gallery-more-count {
  font-size: 1.5rem;
}

.hotel-gallery-more-text {
  font-size: 0.85rem;
}

/* Rates Section */
.hotel-rates-section {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.hotel-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hotel-dark);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hotel-section-title svg {
  width: 24px;
  height: 24px;
  fill: var(--hotel-primary);
}

/* Rate Card */
.hotel-rate-card {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: var(--hotel-radius-sm);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.hotel-rate-card:hover {
  border-color: var(--hotel-primary);
  background: #fff;
}

.hotel-rate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.hotel-rate-room {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hotel-dark);
  margin: 0 0 0.25rem 0;
}

.hotel-rate-board {
  font-size: 0.875rem;
  color: var(--hotel-primary-dark);
  font-weight: 500;
}

.hotel-rate-price {
  text-align: right;
}

.hotel-rate-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hotel-dark);
}

.hotel-rate-per-night {
  font-size: 0.75rem;
  color: #6b7280;
}

.hotel-rate-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hotel-rate-feature {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #4b5563;
}

.hotel-rate-feature svg {
  width: 14px;
  height: 14px;
  fill: var(--hotel-accent-dark);
}

.hotel-rate-feature.warning svg {
  fill: var(--hotel-warning);
}

.hotel-rate-select {
  background: var(--hotel-accent-gradient);
  color: var(--hotel-primary-dark);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: var(--hotel-radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.hotel-rate-select:hover {
  box-shadow: 0 4px 15px rgba(171, 128, 28, 0.4);
  transform: translateY(-2px);
}

/* Facilities Section */
.hotel-facilities {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.hotel-facilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.hotel-facility-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #374151;
  padding: 0.5rem 0;
}

.hotel-facility-item svg {
  width: 18px;
  height: 18px;
  fill: var(--hotel-accent-dark);
}

/* Description Section */
.hotel-description {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.hotel-description-content {
  color: #4b5563;
  line-height: 1.7;
  font-size: 0.95rem;
}

.hotel-description-content h3 {
  color: var(--hotel-dark);
  font-size: 1.1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* ============================================
   Booking Page Styles
   ============================================ */
.booking-header {
  background: var(--hotel-gradient);
  padding: 1.5rem 0;
  border-bottom: none;
}

/* Stepper */
.booking-stepper {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 1rem 0;
}

.booking-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.booking-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.booking-step.active .booking-step-icon,
.booking-step.completed .booking-step-icon {
  background: var(--hotel-gradient);
  color: #fff;
}

.booking-step.completed .booking-step-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.booking-step-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.booking-step.active .booking-step-label {
  color: #fff;
  font-weight: 600;
}

.booking-step-line {
  width: 80px;
  height: 3px;
  background: #e5e7eb;
  margin: 0 1rem;
}

.booking-step.completed + .booking-step-line,
.booking-step-line.completed {
  background: var(--hotel-accent);
}

/* Booking Form */
.booking-section {
  padding: 2rem 0;
}

.booking-form-card {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.booking-form-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hotel-dark);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.booking-form-title svg {
  width: 24px;
  height: 24px;
  fill: var(--hotel-primary);
}

/* Booking Summary Sidebar */
.booking-summary {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.booking-summary-header {
  background: var(--hotel-gradient);
  color: #fff;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}


.booking-summary-hotel {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.booking-summary-address {
  font-size: 0.85rem;
  opacity: 0.9;
}

.booking-summary-body {
  padding: 1.25rem;
}

.booking-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.9rem;
}

.booking-summary-item:last-child {
  border-bottom: none;
}

.booking-summary-label {
  color: #6b7280;
}

.booking-summary-value {
  font-weight: 500;
  color: var(--hotel-dark);
}

.booking-summary-total {
  background: var(--hotel-light);
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.booking-summary-total-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hotel-dark);
}

.booking-summary-total-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hotel-accent-dark);
}

/* ============================================
   Confirmation Page
   ============================================ */
.confirmation-section {
  padding: 2rem 0;
}

.confirmation-success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  border-radius: var(--hotel-radius);
  padding: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.confirmation-success-icon {
  width: 80px;
  height: 80px;
  background: var(--hotel-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.confirmation-success-icon svg {
  width: 40px;
  height: 40px;
  fill: #fff;
}

.confirmation-success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 0.5rem;
}

.confirmation-success-text {
  font-size: 1rem;
  color: #047857;
}

.confirmation-ref {
  font-size: 1.1rem;
  font-weight: 600;
  color: #065f46;
  margin-top: 1rem;
}

.confirmation-details {
  background: #fff;
  border-radius: var(--hotel-radius);
  box-shadow: var(--hotel-shadow);
  overflow: hidden;
}

.confirmation-details-header {
  background: var(--hotel-light);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.confirmation-details-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--hotel-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.confirmation-details-title svg {
  width: 20px;
  height: 20px;
  fill: var(--hotel-primary);
}

.confirmation-details-body {
  padding: 1.5rem;
}

.confirmation-item-row {
  display: flex;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f4f6;
}

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

.confirmation-item-label {
  width: 40%;
  color: #6b7280;
  font-size: 0.95rem;
}

.confirmation-item-value {
  width: 60%;
  font-weight: 500;
  color: var(--hotel-dark);
}

/* ============================================
   Skeleton Loaders
   ============================================ */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-hotel-card {
  height: 220px;
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-text-sm {
  height: 0.75rem;
  width: 60%;
}

.skeleton-badge {
  height: 2rem;
  width: 3rem;
  border-radius: 8px;
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 991.98px) {
  .hotel-card-inner {
    flex-direction: column;
  }

  .hotel-card-image {
    width: 100%;
    min-height: 200px;
  }

  .hotel-filters {
    position: static;
  }

  .hotel-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 100px 100px;
  }

  .hotel-gallery-main {
    grid-column: span 2;
    grid-row: span 1;
  }

  .hotel-detail-name {
    font-size: 1.5rem;
  }

  .hotel-facilities-grid {
    grid-template-columns: 1fr;
  }

  .booking-form-card {
    padding: 1.25rem;
  }

  .booking-summary {
    position: static;
    margin-top: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .hotel-search-header {
    background: var(--hotel-primary-light);
    padding: 1.25rem 0;
  }

  .hotel-search-header  .breadcrumb-item a, .hotel-search-header .breadcrumb-item.active {
color:  #fff;}
  .hotel-search-header .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: rgba(255, 255, 255, 0.4);
}
  .hotel-search-header .hotel-hero-title {
    color: #303539;
   font-size: 24px;
  }

  .hotel-search-summary .destination {
    font-size: 1.15rem;
    letter-spacing: 1.2px;
  }

  .hotel-card-content {
    padding: 1rem;
  }

  .hotel-card-name {
    font-size: 1rem;
  }

  .hotel-price-amount {
    font-size: 1.25rem;
  }

  .hotel-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .hotel-card-cta {
    justify-content: center;
  }

  .hotel-detail-name {
    font-size: 1.25rem;
  }

  .hotel-detail-stars {
    display: flex;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .hotel-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 200px repeat(2, 100px);
  }

  .hotel-gallery-main {
    grid-column: span 1;
  }

  .booking-stepper {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .booking-step-line {
    display: none;
  }

  .booking-step-label {
    display: none;
  }

  .confirmation-success {
    padding: 1.5rem;
  }

  .confirmation-success-title {
    font-size: 1.25rem;
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.animate-fade-up.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.6s ease;
}

.animate-fade-left.animated {
  opacity: 1;
  transform: translateX(0);
}

.animate-fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s ease;
}

.animate-fade-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* ── No results message ──────────────────────────────── */
.rooms-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--hotel-primary);
  background: #f5f7fb;
  border: 1.5px dashed #c9d6e8;
  border-radius: 12px;
  margin: 16px 0;
}
.rooms-no-results svg {
  color: #a0b4d0;
  flex-shrink: 0;
}
.rooms-no-results p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hotel-primary);
  opacity: 0.8;
}

/* Staggered animations for hotel cards */
.hotel-card:nth-child(1) { transition-delay: 0.05s; }
.hotel-card:nth-child(2) { transition-delay: 0.1s; }
.hotel-card:nth-child(3) { transition-delay: 0.15s; }
.hotel-card:nth-child(4) { transition-delay: 0.2s; }
.hotel-card:nth-child(5) { transition-delay: 0.25s; }


/* ============================================
   BOOKING PAGE (Step 2)
   ============================================ */

/* Hero + Stepper */
.resa-hero {
  background: #fff;
  padding: 1.25rem 0 1.5rem;
  color: #303539;
}

.resa-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 1rem;
}

.resa-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.45;
  transition: opacity 0.3s;
}

.resa-step.active,
.resa-step.completed {
  opacity: 1;
}

.resa-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid #AB801C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #AB801C;
  flex-shrink: 0;
  transition: all 0.3s;
}

.resa-step.active .resa-step-circle {
  background: var(--hotel-accent);
  border-color: var(--hotel-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(171,128,28,0.4);
}

.resa-step.completed .resa-step-circle {
  background: rgba(255,255,255,0.2);
  border-color: var(--hotel-accent);
}

.resa-step-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #303539;
  white-space: nowrap;
}

.resa-step.active .resa-step-label {
  color: #303539;
}

.resa-step-line {
  width: 48px;
  height: 2px;
  background: #AB801C;
  margin: 0 0.75rem;
  flex-shrink: 0;
}

/* Body */
.resa-body {
  background: #f8fafc;
  padding: 2rem 0 3rem;
  min-height: 60vh;
}

/* Skeleton loader */
.resa-skeleton {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

.resa-skeleton-main {
  background: #fff;
  border-radius: var(--hotel-radius-sm);
  padding: 1.5rem;
  border: 1px solid #f0f2f5;
}

.resa-skeleton-side {
  background: #fff;
  border-radius: var(--hotel-radius-sm);
  padding: 1.5rem;
  border: 1px solid #f0f2f5;
}

/* Layout */
.resa-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}

.resa-main {
  min-width: 0;
}

/* Sidebar */
.resa-sidebar {
  position: sticky;
  top: 80px;
}

.resa-widget {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #f0f2f5;
}

.resa-widget-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin: 0 0 0.75rem;
}

.resa-hotel-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.resa-hotel-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin-bottom: 0.15rem;
}

.resa-hotel-address {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.resa-date-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f0f2f5;
}

.resa-date-row:last-child {
  border-bottom: none;
}

.resa-date-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #edf2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hotel-primary);
}

.resa-date-label {
  font-size: 0.72rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

.resa-date-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hotel-primary-dark);
}

.resa-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: #4b5563;
}

.resa-info-row .label {
  color: #6b7280;
}

.resa-info-row .value {
  font-weight: 600;
  color: var(--hotel-primary-dark);
}

.resa-total-box {
  background: #0e1534;
  color: #fff;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}

.resa-total-label {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
}

.resa-total-amount {
  font-size: 1.2rem;
  font-weight: 800;
}

/* Form sections */
.resa-section {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid #f0f2f5;
}

.resa-section-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.resa-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #edf2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-primary);
  flex-shrink: 0;
}

.resa-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin: 0;
}

.resa-section-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0.25rem 0 0;
}

/* Form controls */
.resa-form-group {
  margin-bottom: 0.85rem;
}

.resa-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
  display: block;
}

.resa-form-control {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  color: #1f2937;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.resa-form-control:focus {
  border-color: var(--hotel-primary);
  box-shadow: 0 0 0 3px rgba(30,77,140,0.1);
  outline: none;
}

.resa-form-select {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  color: #1f2937;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/12px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.resa-form-select:focus {
  border-color: var(--hotel-primary);
  box-shadow: 0 0 0 3px rgba(30,77,140,0.1);
  outline: none;
}

/* Room occupant cards */
.resa-room-card {
  background: #fafbfd;
  border: 1.5px solid #e8ecf4;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.resa-room-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0f2f5;
  flex-wrap: wrap;
}

.resa-room-badge {
 background: var(--hotel-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    line-height: 1.2;
}

.resa-room-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--hotel-primary-dark);
  margin: 0;
}

.resa-pax-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hotel-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
}

/* Payment cards */
.resa-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.resa-payment-card {
  position: relative;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.resa-payment-card:hover {
  border-color: var(--hotel-primary-light);
  box-shadow: 0 2px 8px rgba(30,77,140,0.08);
}

.resa-payment-card.selected,
.resa-payment-card:has(input:checked) {
  border-color: var(--hotel-accent);
  background: linear-gradient(135deg, rgba(171,128,28,0.06), rgba(171,128,28,0.03));
  box-shadow: 0 2px 12px rgba(171,128,28,0.15);
}

.resa-payment-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.resa-payment-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #edf2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-primary);
  margin-bottom: 0.5rem;
}

.resa-payment-card.selected .resa-payment-icon,
.resa-payment-card:has(input:checked) .resa-payment-icon {
  background: var(--hotel-accent);
  color: #fff;
}

.resa-payment-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hotel-primary-dark);
}

.resa-payment-desc {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.15rem;
}

/* Special requests */
.resa-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #374151;
  padding: 0.35rem 0;
  cursor: pointer;
}

.resa-check-label input[type="checkbox"] {
  accent-color: var(--hotel-primary);
  width: 16px;
  height: 16px;
}

.resa-textarea {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  color: #1f2937;
  resize: vertical;
  min-height: 70px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.resa-textarea:focus {
  border-color: var(--hotel-primary);
  box-shadow: 0 0 0 3px rgba(30,77,140,0.1);
  outline: none;
}

/* Cancellation policies */
.resa-policy-box {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #92400e;
  line-height: 1.6;
}

.resa-policy-box.resa-policy-free {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

/* Conditions */
.resa-conditions-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #374151;
  padding: 0.75rem 0;
}

.resa-conditions-check input[type="checkbox"] {
  accent-color: var(--hotel-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.resa-conditions-check a {
  color: var(--hotel-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* Action buttons */
.resa-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.resa-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hotel-primary);
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.resa-btn-back:hover {
  border-color: var(--hotel-primary);
  background: #f0f4ff;
  color: var(--hotel-primary);
}

.resa-btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--hotel-accent-gradient);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(171,128,28,0.3);
}

.resa-btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(171,128,28,0.4);
}

.resa-btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Supplement badge */
.resa-supplement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.88rem;
}

.resa-supplement-row:last-child {
  border-bottom: none;
}

.resa-supplement-name {
  color: #374151;
}

.resa-supplement-price {
  font-weight: 700;
  color: var(--hotel-primary-dark);
}

/* Mobile sidebar offcanvas */
.resa-mobile-summary-btn {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}

.resa-mobile-summary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resa-mobile-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hotel-primary-dark);
}

.resa-mobile-detail-btn {
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--hotel-primary);
  background: #edf2ff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Mobile hotel card in form */
.resa-mobile-hotel-card {
  display: none;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #f0f2f5;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.resa-mobile-hotel-info {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.resa-mobile-hotel-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.resa-mobile-hotel-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
}

.resa-mobile-hotel-dates {
  font-size: 0.78rem;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 991.98px) {
  .resa-skeleton {
    grid-template-columns: 1fr;
  }
  .resa-skeleton-side {
    display: none;
  }
  .resa-layout {
    grid-template-columns: 1fr;
  }
  .resa-sidebar {
    display: none;
  }
  .resa-mobile-summary-btn {
    display: block;
  }
  .resa-mobile-hotel-card {
    display: block;
  }
  .resa-body {
    padding-bottom: 5rem;
  }
}

@media (max-width: 767.98px) {
  .resa-hero {
    padding: 1rem 0 1.25rem;
  }
  .resa-step-label {
    display: none;
  }
  .resa-step-line {
    width: 32px;
  }
  .resa-section {
    padding: 1rem;
    border-radius: 10px;
  }
  .resa-room-card {
    padding: 0.75rem 1rem;
  }
  .resa-payment-grid {
    grid-template-columns: 1fr;
  }
  .resa-actions {
    flex-direction: column-reverse;
    gap: 0.75rem;
  }
  .resa-btn-confirm,
  .resa-btn-back {
    width: 100%;
    justify-content: center;
  }
}

/* ── Form validation states ── */
.resa-form-control.is-invalid,
.resa-form-select.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.12);
}
.resa-form-control.is-invalid:focus,
.resa-form-select.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.18);
}
.resa-error-msg {
  display: block;
  color: #dc3545;
  font-size: 0.76rem;
  margin-top: 0.25rem;
  font-weight: 500;
}
#checkbox-2.is-invalid {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
  border-radius: 3px;
}
#confirm2-error {
  color: #dc3545;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 0.35rem;
}
.resa-btn-confirm:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   CONFIRMATION PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Layout ── */
.conf-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

/* ── Main column ── */
.conf-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.conf-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* ── Status cards ── */
.conf-status-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--hotel-radius);
  border: 1px solid;
}
.conf-status-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.conf-status-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.conf-status-text {
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}

/* Success */
.conf-status-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #bbf7d0;
  color: #166534;
}
.conf-status-success .conf-status-icon {
  background: #dcfce7;
  color: #16a34a;
}

/* Pending */
.conf-status-pending {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border-color: #bfdbfe;
  color: #1e40af;
}
.conf-status-pending .conf-status-icon {
  background: #dbeafe;
  color: #2563eb;
}

/* Error */
.conf-status-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
  border-color: #fecaca;
  color: #991b1b;
}
.conf-status-error .conf-status-icon {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Marketing reassurance card ── */
.conf-marketing-card {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--hotel-radius-sm);
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
}

.conf-marketing-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-primary);
  background: rgba(30, 77, 140, 0.12);
}

.conf-marketing-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin-bottom: 0.2rem;
}

.conf-marketing-text {
  margin: 0;
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.45;
}

/* ── Sections (reservation, hotel, room, client) ── */
.conf-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--hotel-radius);
  padding: 1.5rem;
  box-shadow: var(--hotel-shadow);
}

.conf-section-compact {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(14, 21, 52, 0.08);
}

.conf-section-compact .conf-section-header {
  margin-bottom: 0.8rem;
  padding-bottom: 0.55rem;
}

.conf-section-compact .conf-info-row {
  padding: 0.52rem 0;
  gap: 0.75rem;
}

.conf-section-compact .conf-info-label {
  min-width: 112px;
  font-size: 0.8rem;
}

.conf-section-compact .conf-info-value {
  font-size: 0.84rem;
}
.conf-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f3f4f6;
}
.conf-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30,77,140,0.08), rgba(30,77,140,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hotel-primary);
  flex-shrink: 0;
}
.conf-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin: 0;
}

/* ── Info grid (label / value rows) ── */
.conf-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.conf-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f3f4f6;
  gap: 1rem;
}
.conf-info-row:last-child {
  border-bottom: none;
}
.conf-info-label {
  font-size: 0.85rem;
  color: #6b7280;
  flex-shrink: 0;
  min-width: 140px;
}
.conf-info-value {
  font-size: 0.88rem;
  color: #1f2937;
  text-align: right;
}

/* ── Badges ── */
.conf-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.conf-badge-success {
  background: #dcfce7;
  color: #166534;
}
.conf-badge-pending {
  background: #dbeafe;
  color: #1e40af;
}
.conf-badge-error {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Room list (cards) ── */
.conf-room-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.conf-room-row {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  gap: 1rem;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: var(--hotel-radius-sm);
  padding: 1rem 1.25rem;
}
.conf-room-cell {
  display: flex;
  justify-content: space-between;
  align-self: center;
   align-items: center;
  /* flex-direction: column; */
  gap: 0.2rem;
}
.conf-room-cell-2 { display: flex; align-self: center;
   align-items: center;}
.conf-room-label {
  font-size: 0.72rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.conf-room-value {
  font-size: 0.88rem;
  color: #1f2937;
  font-weight: 500;
}

/* ── Passengers compact block ── */
.conf-pax-section {
  padding: 0.9rem 1rem;
}

.conf-pax-list {
  gap: 0.5rem;
}

.conf-pax-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
}

.conf-pax-cell {
  gap: 0.3rem;
}

.conf-pax-cell .conf-room-label {
  font-size: 0.68rem;
}

.conf-pax-cell .conf-room-value {
  font-size: 0.84rem;
}

/* ── Sidebar ── */
.conf-sidebar {
  position: sticky;
  top: 80px;
}
.conf-widget {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe7f5;
  border-radius: var(--hotel-radius);
  padding: 1.5rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  text-align: center;
}
.conf-widget-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(30,77,140,0.06), rgba(30,77,140,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.conf-widget-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hotel-primary-dark);
  margin-bottom: 0.5rem;
}
.conf-widget-text {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 1.1rem;
}

.conf-widget-support-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.conf-contact-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0;
  font-size: 0.88rem;
}
.conf-contact-row a {
  color: var(--hotel-primary);
  text-decoration: none;
  font-weight: 500;
}
.conf-contact-row a:hover {
  text-decoration: underline;
}

.conf-widget-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.95rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  background: var(--hotel-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.conf-widget-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  opacity: 0.95;
}

/* ── Confirmation responsive ── */
@media (max-width: 991.98px) {
  .conf-layout {
    grid-template-columns: 1fr;
  }
  .conf-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .conf-sidebar {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .conf-status-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem;
  }

  .conf-marketing-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .conf-compact-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .conf-section {
    padding: 1rem;
    border-radius: 10px;
  }
  .conf-room-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .conf-pax-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.65rem 0.75rem;
  }
  .conf-info-row {
    flex-direction: column;
    gap: 0.15rem;
  }
  .conf-info-label {
    min-width: auto;
  }
  .conf-info-value {
    text-align: left;
  }
}