/* Shared hotel color system. Loaded after page-specific styles. */
:root {
  --hotel-navy: #03205A;
  --hotel-primary: #2C61FE;
  --hotel-primary-hover: #03205A;
  --hotel-primary-soft: #EEF3FF;
  --hotel-accent: #F06703;
  --hotel-page-bg: #F7F8FA;
  --hotel-text: #1F2937;
  --hotel-muted: #667085;
  --hotel-border: #E5E7EB;
  --hotel-success: #16A34A;
  --hotel-warning: #F59E0B;
  --hotel-error: #DC2626;
}

body {
  background-color: var(--hotel-page-bg);
  color: var(--hotel-text);
}

body.hotel-page {
  background-color: #FFFFFF;
}

/* Reservation forms are intentionally full-width white surfaces. */
body:has(.reservation-container) {
  background-color: #FFFFFF;
}

/* Shared hotel headers and search navigation. */
.header,
.reservation-header,
.top-searcher-nav,
#customAlertBox-title {
  background-color: var(--hotel-navy);
}

.header-lang-item.is-active,
.header-h5-menu-login-card-lang-list-node.is-active,
.header-lang-item.is-active::after,
.header-h5-menu-login-card-lang-list-node.is-active::after {
  color: var(--hotel-primary);
}

.header-lang-item.is-active {
  background: var(--hotel-primary-soft);
}

/* Primary actions */
.top-searcher-box-form-btn-search,
.welcome-section-content-text-button,
.hotel-search-list-item-book,
.hotel-search-list-sidebar-apply,
.book-btn,
.booking-btn,
.home-btn,
.login-submit-btn,
.next-btn:not(.disabled),
#customAlertBox button {
  background: var(--hotel-primary);
  border-color: var(--hotel-primary);
  color: #FFFFFF;
}

.top-searcher-box-form-btn-search:hover,
.welcome-section-content-text-button:hover,
.hotel-search-list-item-book:hover,
.hotel-search-list-sidebar-apply:hover,
.book-btn:hover,
.booking-btn:hover,
.home-btn:hover,
.login-submit-btn:hover,
.next-btn:not(.disabled):hover,
#customAlertBox button:hover {
  background: var(--hotel-primary-hover);
  border-color: var(--hotel-primary-hover);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(44, 97, 254, 0.2);
}

/* The hotel homepage search CTA follows the flight homepage orange treatment. */
.hotel-page .search-button {
    background: var(--hotel-accent);
    border-color: var(--hotel-accent);
    border-radius: 6px;
    color: #FFFFFF;
    height: 60px;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #F06703;
    font-size: 16px;
    font-weight: 600;
    line-height: 140%;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    line-height: 60px;
    width: 150px;
    text-align: center;
    margin-left: 20px;
    transition: all 0.1s;
    -webkit-user-select: none;
    user-select: none;
}

.hotel-page .search-button:hover {
  background: var(--hotel-accent);
  border-color: var(--hotel-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(240, 103, 3, 0.3);
}

/* Secondary navigation actions */
.back-btn,
.top-btn.back-btn,
.reservation-back-btn,
.back-btn.secondary-action,
.surroundings-view-more-btn,
.support-btn {
  background: #FFFFFF;
  border-color: var(--hotel-primary);
  color: var(--hotel-primary);
}

.back-btn:hover,
.top-btn.back-btn:hover,
.reservation-back-btn:hover,
.back-btn.secondary-action:hover,
.surroundings-view-more-btn:hover,
.support-btn:hover {
  background: var(--hotel-primary-soft);
  border-color: var(--hotel-primary);
  color: var(--hotel-primary);
  box-shadow: none;
}

/* Search, booking and payment totals */
.price-main,
.price-amount,
.price-current,
.booking-current,
.hotel-search-list-item-price-current,
.hotel-search-list-item-price-amount,
.total-amount,
.total-value,
.total-price,
.summary-value.total-amount,
.summary-row.total-row .summary-value,
.price-total .total-amount {
  color: var(--hotel-accent);
}

.success-summary-card.cancelled .summary-row.total-row .summary-value {
  color: var(--hotel-muted);
}

/* Navigation, tabs and selected controls */
.featured-hotels-tab.active,
.featured-hotels-tab:hover,
.detail-nav a.active,
.detail-nav a:hover,
.hotel-search-list-header-results-count,
.hotel-search-list-item-apartment,
.hotel-search-list-item-price-hint,
.surrounding-summary-item .item-distance,
.route-recommendations-section .recommendations-tab.active,
.route-recommendations-section .recommendations-item:hover {
  color: var(--hotel-primary);
}

.featured-hotels-tab.active,
.hotel-search-list-item:focus-visible {
  border-color: var(--hotel-primary);
}

.featured-hotels-tab.active {
  background-color: var(--hotel-primary-soft);
  color: var(--hotel-primary);
}

.hotel-search-list-sidebar-checkbox input[type="checkbox"]:checked,
.hotel-search-list-sidebar-rating-option input[type="radio"]:checked {
  background-color: var(--hotel-primary);
}

/* Cards and controls use one neutral border level. */
.featured-hotels-grid-card,
.hotel-search-list-item,
.hotel-search-list-sidebar,
.detail-navigation,
.detail-sidebar,
.hotel-search-list-item-badge,
.form-section,
.confirmation-section,
.payment-currency-note-box,
.finish-order-card,
.reservation-summary,
.hotel-info-card {
  border-color: var(--hotel-border);
}

.hotel-search-list-item:hover,
.featured-hotels-grid-card:hover {
  border-color: var(--hotel-border);
  box-shadow: 0 10px 24px rgba(3, 32, 90, 0.1);
}

/* Inputs retain a clear focus state without changing their layout. */
.hotel-search-form input:focus,
.hotel-search-form select:focus,
.reservation-form input:focus,
.reservation-form select:focus,
.guest-form input:focus,
.guest-form select:focus,
.nationality-search-box input:focus {
  border-color: var(--hotel-primary);
  box-shadow: 0 0 0 3px rgba(44, 97, 254, 0.12);
}

/* Countdown and cancellation notices are warnings, not primary actions. */
.hotelDetails-countdown,
.cancellation-policy,
.payment-warning,
.cancellation-list li,
.cancellation-policy-summary,
.plan-card.highlighted,
.room-type-group.highlighted {
  background-color: #FFF7E6;
  border-color: var(--hotel-warning);
}

.hotelDetails-countdown,
.cancellation-policy,
.payment-warning,
.cancellation-list li,
.cancellation-policy-summary {
  color: var(--hotel-text);
}

.hotelDetails-countdown i,
.hotelDetails-countdown .time-highlight,
.cancellation-policy i,
.payment-warning i,
.cancellation-header i,
.plan-detail-title--refund i,
.plan-note-link--refund i,
.no-cancellation-info i,
.notice-header i {
  color: var(--hotel-warning);
}

/* Yellow remains reserved for ratings and warning semantics. */
.stars i,
.hotel-search-list-item-stars-star,
.hotel-search-list-sidebar-rating-stars i,
.destination-detail-attractions-card-content-rating-stars-star {
  color: var(--hotel-warning);
}

/* Semantic feedback */
.success,
.success-message,
.cancellation-free,
.cancellation-details-card .value.free {
  color: var(--hotel-success);
}

.error,
.error-message,
.field-error,
.cancellation-details-card .value.charged {
  color: var(--hotel-error);
}

#cancelBooking {
  background: var(--hotel-error);
  border-color: var(--hotel-error);
  color: #FFFFFF;
}

#cancelBooking:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}

@media screen and (max-width: 767px) {
  .hotel-page .search-actions {
    display: flex;
    width: 100%;
    margin-top: 14px;
  }

  .hotel-page .search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    line-height: 1.2 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  .top-searcher-box-form-btn-search,
  .search-button,
  .hotel-search-list-item-book,
  .book-btn,
  .booking-btn,
  .next-btn:not(.disabled),
  .back-btn,
  .top-btn.back-btn {
    box-shadow: none;
  }
}