:root {
  --bg: #090806;
  --surface: #13100c;
  --surface-soft: #1a1611;
  --text: #f3e6cd;
  --muted: #c9b287;
  --line: #3a2f1e;
  --primary: #d4af37;
  --primary-dark: #b89222;
  --secondary: #0f0d0a;
  --accent: #f1cf73;
  --success: #2f9e6c;
  --warning: #d6a640;
  --danger: #d16363;
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
  --legacy-brown: #0f0d0a;
  --legacy-cream: #090806;
  --legacy-text: #f3e6cd;
}

body {
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.2), transparent 26%),
    radial-gradient(circle at left top, rgba(113, 86, 25, 0.25), transparent 20%),
    var(--bg);
  color: var(--text);
}

.site-shell.legacy-layout {
  background: var(--bg);
}

.legacy-topbar {
  background: #070605;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

.legacy-city-contact {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
}

.legacy-navbar-wrap {
  background: rgba(16, 13, 10, 0.96);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.legacy-nav > a,
.legacy-menu-item > a,
.legacy-mobile-nav > a,
.legacy-mobile-nav summary {
  color: var(--text);
}

.legacy-nav a:hover,
.legacy-menu-item:hover > a,
.legacy-mobile-nav details[open] summary,
.legacy-mobile-submenu a:hover {
  color: var(--accent);
}

.legacy-dropdown {
  background: #15120d;
  border-color: rgba(212, 175, 55, 0.22);
}

.legacy-dropdown a {
  color: var(--text);
}

.legacy-dropdown a:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--accent);
}

.legacy-mobile-nav {
  background: #120f0b;
  border-color: rgba(212, 175, 55, 0.25);
}

.legacy-mobile-nav > a,
.legacy-mobile-nav summary,
.legacy-mobile-submenu a {
  border-bottom-color: rgba(212, 175, 55, 0.2);
}

.legacy-slide-overlay {
  background: rgba(8, 6, 4, 0.58);
}

.hero-card,
.category-card,
.plan-card,
.city-card,
.feature-card,
.content-card,
.status-card,
.step-card,
.payment-option,
.purchase-option,
.simple-modal__panel,
.booking-panel,
.found-box,
.summary-card,
.points-wallet-box,
.legal-card,
.legal-highlight,
.legal-contact-card {
  background: var(--surface);
  border-color: var(--line);
}

.ciel-layout .step-card.is-collapsed {
  background: #15110d;
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.ciel-layout .step-card.is-collapsed h3 {
  color: #efe3ca;
}

.ciel-layout .step-card.is-collapsed .step-summary {
  color: #dfcc9d;
}

.section-soft {
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.42), rgba(11, 9, 7, 0.9));
}

.chip,
.city-meta span,
.metric-list li,
.points-copy__item,
.points-wallet-stat {
  background: #18140f;
  border-color: var(--line);
  color: var(--text);
}

.points-copy {
  background: #17120e;
  border-color: rgba(212, 175, 55, 0.22);
  color: var(--text);
}

.points-copy__head {
  color: var(--accent);
}

.points-copy__label,
.points-copy__value {
  color: var(--muted);
}

.points-copy__points,
.points-copy__value {
  color: var(--accent);
}

.points-copy__points {
  font-weight: 800;
}

.points-copy__promo {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.32);
  color: var(--accent);
}

.ciel-layout .detail-list li,
.ciel-layout .check-list li {
  background: #15110d;
  border-color: rgba(212, 175, 55, 0.22);
}

.ciel-layout .detail-list li span,
.ciel-layout .check-list li span {
  color: #cfba90;
}

.ciel-layout .detail-list li strong,
.ciel-layout .check-list li strong {
  color: #f3e6cd;
}

.ciel-layout .booking-panel,
.ciel-layout .step-card,
.ciel-layout .found-box,
.ciel-layout .summary-card,
.ciel-layout .payment-option,
.ciel-layout .purchase-option,
.ciel-layout .cabin-choice-box,
.ciel-layout .gift-preview-box,
.ciel-layout .points-wallet-box,
.ciel-layout .points-wallet-stat,
.ciel-layout .booking-benefits-box {
  background: #15110d;
  border-color: rgba(212, 175, 55, 0.22);
}

.ciel-layout .booking-close {
  background: #16120d;
  border-color: rgba(212, 175, 55, 0.3);
  color: #f0dfbf;
}

.ciel-layout .step-card.is-current {
  border-color: rgba(212, 175, 55, 0.38);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.36);
}

.ciel-layout .payment-option small,
.ciel-layout .purchase-option small,
.ciel-layout .points-wallet-stat span,
.ciel-layout .booking-grid label {
  color: #cfba90;
}

.ciel-layout .summary-card dt {
  color: #cfba90;
}

.ciel-layout .summary-card dd {
  color: #f3e6cd;
}

.ciel-layout .timer-box {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.32);
  color: #f3d37e;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #f0cb69);
  color: #1d1408;
  box-shadow: 0 16px 34px rgba(212, 175, 55, 0.24);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #f0cb69, var(--primary));
}

.btn-secondary {
  background: #0d0b09;
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost {
  background: #17120e;
  border-color: var(--line);
  color: var(--text);
}

.btn-link {
  color: var(--accent);
}

.promo-badge,
.selection-pill {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.3);
  color: var(--accent);
}

.booking-grid input,
.booking-grid select,
.booking-grid textarea,
.points-wallet-input input {
  background: #120f0c;
  border-color: var(--line);
  color: var(--text);
}

.booking-grid input::placeholder,
.booking-grid textarea::placeholder {
  color: #8f7b57;
}

.flatpickr-calendar {
  background: #15110c;
  border: 1px solid rgba(212, 175, 55, 0.38);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-day {
  color: #f0dfbf;
}

.flatpickr-weekdays {
  background: #1c160f;
}

.ciel-layout .flatpickr-weekdaycontainer .flatpickr-weekday,
.ciel-layout .flatpickr-weekday {
  color: #efcf79 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.35);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #d4af37;
  border-color: #d4af37;
  color: #17120b;
}

.ciel-layout .slot-toggle {
  align-self: stretch;
  text-align: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #15110d;
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.ciel-layout .slot-toggle:hover,
.ciel-layout .slot-toggle:focus {
  background: #1c160f;
  border-color: rgba(212, 175, 55, 0.5);
  color: #efcf79;
}

.slot-btn {
  background: #17120e;
  border-color: var(--line);
  color: var(--text);
}

.slot-btn.is-active,
.preference-chip.is-active {
  background: #2a2114;
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--accent);
}

.preference-chip {
  background: #17120e;
  border-color: var(--line);
  color: var(--text);
}

.footer-payments {
  background: #15120e;
  border-color: var(--line);
}

.payment-badge {
  background: #17130f;
  border-color: var(--line);
  color: var(--accent);
}

.footer-map-card {
  background: #0d0b08;
  border-color: rgba(212, 175, 55, 0.2);
}

.footer-map-embed-wrap {
  border-color: rgba(212, 175, 55, 0.2);
}

.site-footer {
  background: #090806;
  border-top-color: rgba(212, 175, 55, 0.16);
}

.legacy-logo img {
  width: 220px;
  max-width: 100%;
  height: auto;
  filter: none;
}

@media (max-width: 760px) {
  .legacy-logo img {
    width: 160px;
  }
}

.legacy-dot {
  border-color: rgba(212, 175, 55, 0.6);
}

.legacy-dot.is-active {
  background: var(--accent);
}

.legal-note--warning {
  background: rgba(176, 138, 34, 0.16);
  border-color: rgba(212, 175, 55, 0.35);
  color: #f3cf74;
}

/* Distinct Ciel layout (different structure/feel from Spa5) */
.ciel-layout {
  --font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 12px;
  --radius-sm: 10px;
  --container: min(1240px, calc(100vw - 28px));
  --shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
  background:
    radial-gradient(circle at 8% 8%, rgba(212, 175, 55, 0.18), transparent 22%),
    radial-gradient(circle at 92% 0%, rgba(212, 175, 55, 0.12), transparent 18%),
    linear-gradient(180deg, #0a0806 0%, #13100c 54%, #0b0907 100%);
}

.ciel-layout h1,
.ciel-layout h2,
.ciel-layout h3,
.ciel-layout .legacy-slide-content h2,
.ciel-layout .brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
}

.ciel-layout .legacy-topbar {
  background: linear-gradient(90deg, #050403 0%, #100d09 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}

.ciel-layout .legacy-topbar-inner {
  padding: 8px 0;
}

.ciel-layout .legacy-city-contact {
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
}

.ciel-layout .legacy-city-contact strong {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.ciel-layout .legacy-navbar-wrap {
  background: rgba(12, 10, 8, 0.94);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.ciel-layout .legacy-navbar {
  padding: 18px 0;
}

.ciel-layout .legacy-logo img {
  width: 252px;
}

.ciel-layout .legacy-nav {
  gap: 22px;
}

.ciel-layout .legacy-nav > a,
.ciel-layout .legacy-menu-item > a {
  font-size: 0.87rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8d6b1;
}

.ciel-layout .legacy-dropdown {
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.26);
  background: #16120d;
}

.ciel-layout .legacy-dropdown a {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dfc796;
}

.ciel-layout .legacy-carousel {
  width: min(1240px, calc(100vw - 28px));
  min-height: 370px;
  margin: 18px auto 0;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  overflow: hidden;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.52);
}

.ciel-layout .legacy-carousel-track {
  min-height: 370px;
}

.ciel-layout .legacy-slide-content {
  min-height: 370px;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding-bottom: 56px;
}

.ciel-layout .legacy-slide-content h2 {
  margin: 0 0 10px;
  max-width: 760px;
  font-size: clamp(2.4rem, 5vw, 4.15rem);
  line-height: 0.96;
}

.ciel-layout .legacy-slide-content p {
  margin: 0 0 10px;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.ciel-layout .legacy-slide-text {
  max-width: 760px;
  font-size: 1rem !important;
  line-height: 1.5;
}

.ciel-layout .legacy-carousel-dots {
  left: auto;
  right: 24px;
  transform: none;
  bottom: 20px;
}

.ciel-layout .legacy-dot {
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 0;
}

.ciel-layout .legacy-dot.is-active {
  background: var(--accent);
}

.ciel-layout .hero {
  padding: 54px 0 34px;
}

.ciel-layout .hero-home {
  padding-top: 38px;
}

.ciel-layout .hero-grid {
  gap: 30px;
}

.ciel-layout .hero-card {
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 12px;
  background: linear-gradient(180deg, #17130f 0%, #0f0d0a 100%);
}

.ciel-layout .hero-card img {
  border-radius: 8px;
}

.ciel-layout .eyebrow {
  color: #f0cf75;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
}

.ciel-layout .lead {
  color: #d6bf94;
  line-height: 1.72;
}

.ciel-layout .section {
  padding: 36px 0;
}

.ciel-layout .section-soft {
  background: transparent;
}

.ciel-layout .section-heading h2 {
  font-size: clamp(2rem, 3vw, 2.9rem);
}

.ciel-layout .card-grid.three-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ciel-layout .category-card,
.ciel-layout .city-card,
.ciel-layout .plan-card {
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: linear-gradient(180deg, #17130f 0%, #11100d 100%);
  box-shadow: none;
}

.ciel-layout .category-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.ciel-layout .category-card__media {
  position: relative;
}

.ciel-layout .category-card img,
.ciel-layout .city-card > img,
.ciel-layout .plan-card > img {
  display: block;
  border-radius: 0;
  aspect-ratio: 16 / 10;
}

.ciel-layout .category-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #120f0c;
}

.ciel-layout .category-card h3,
.ciel-layout .plan-card-body h3,
.ciel-layout .city-card__body h3 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.08;
}

.ciel-layout .category-card p,
.ciel-layout .plan-card-body p,
.ciel-layout .city-card__body p {
  margin: 0;
  color: #c5ad80;
}

.ciel-layout .category-card p {
  min-height: 0;
  -webkit-line-clamp: 3;
}

.ciel-layout .category-card .btn {
  margin-top: 4px;
  align-self: flex-start;
}

.ciel-layout .plan-card {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.ciel-layout .plan-card > img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.ciel-layout .plan-card-body {
  padding: 20px;
  background: #120f0c;
  position: relative;
  z-index: 1;
}

.ciel-layout .plan-meta span,
.ciel-layout .price-stack small {
  color: #ccb489;
}

.ciel-layout .points-copy {
  border-radius: 8px;
}

.ciel-layout .cta-row {
  margin-top: 14px;
}

.ciel-layout .btn {
  border-radius: 6px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}

.ciel-layout .btn-primary {
  background: linear-gradient(90deg, #bf9a33 0%, #edc967 100%);
  color: #161107;
}

.ciel-layout .btn-secondary {
  background: #0d0b09;
  color: #efdcb7;
  border: 1px solid rgba(212, 175, 55, 0.26);
}

.ciel-layout .btn-ghost {
  background: #16120d;
  color: #e5d0a8;
  border: 1px solid rgba(212, 175, 55, 0.26);
}

.ciel-layout .footer-grid-rich {
  border-top: 1px solid rgba(212, 175, 55, 0.16);
  padding-top: 24px;
}

.ciel-layout .site-footer {
  margin-top: 34px;
}

.ciel-layout.page-account .account-hero-section,
.ciel-layout.page-account.page-membership .membership-hero-section {
  background: transparent;
}

.ciel-layout.page-account .account-hero-card,
.ciel-layout.page-account .account-card,
.ciel-layout.page-account .account-mini-card,
.ciel-layout.page-account .account-subcard,
.ciel-layout.page-account .account-empty-state,
.ciel-layout.page-account .account-policy-box,
.ciel-layout.page-account .account-detail-meta,
.ciel-layout.page-account .account-points-summary,
.ciel-layout.page-account .account-feedback,
.ciel-layout.page-account .membership-panel,
.ciel-layout.page-account .membership-tier-card,
.ciel-layout.page-account .membership-faq-card {
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 10px;
  background: linear-gradient(180deg, #17130f 0%, #11100d 100%);
  color: #ead7b3;
}

.ciel-layout.page-account .account-hero-copy h1,
.ciel-layout.page-account .membership-panel h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  line-height: 0.98;
  color: #f0debd;
}

.ciel-layout.page-account .account-hero-copy p,
.ciel-layout.page-account .membership-panel p,
.ciel-layout.page-account .account-help-inline,
.ciel-layout.page-account .account-card-copy,
.ciel-layout.page-account .account-card-meta {
  color: #cfba90;
}

.ciel-layout.page-account .account-tab-btn {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-color: rgba(212, 175, 55, 0.24);
  background: #16120d;
  color: #e4cea2;
}

.ciel-layout.page-account .account-tab-btn.is-active {
  background: linear-gradient(90deg, #bf9a33 0%, #edc967 100%);
  color: #1a1206;
  border-color: transparent;
}

.ciel-layout.page-account .account-form-grid input,
.ciel-layout.page-account .account-form-grid textarea,
.ciel-layout.page-account .account-form-grid select,
.ciel-layout.page-account .account-toolbar select {
  background: #0f0c09;
  border-color: rgba(212, 175, 55, 0.24);
  color: #f2dfbb;
}

.ciel-layout.page-account .account-form-grid label,
.ciel-layout.page-account .account-toolbar label {
  color: #d2bd96;
}

.ciel-layout.page-account .account-scope-note,
.ciel-layout.page-account .account-membership-subhead,
.ciel-layout.page-account .account-slot-label,
.ciel-layout.page-account .account-help-inline {
  color: #cfba90;
}

.ciel-layout.page-account .account-reservation-card,
.ciel-layout.page-account .account-giftcard-card,
.ciel-layout.page-account .account-request-card,
.ciel-layout.page-account .account-movement-card,
.ciel-layout.page-account .account-membership-inline,
.ciel-layout.page-account .account-membership-stat,
.ciel-layout.page-account .account-tier-chip,
.ciel-layout.page-account .account-slot-group,
.ciel-layout.page-account .account-inline-summary,
.ciel-layout.page-account .account-modal-dialog,
.ciel-layout.page-account .account-card-kv div {
  background: #15110d;
  border-color: rgba(212, 175, 55, 0.22);
  color: #ead7b3;
}

.ciel-layout.page-account .account-reservation-card h3,
.ciel-layout.page-account .account-giftcard-card h3,
.ciel-layout.page-account .account-request-card h3,
.ciel-layout.page-account .account-movement-card h3 {
  color: #f0debd;
}

.ciel-layout.page-account .account-card-copy,
.ciel-layout.page-account .account-card-meta,
.ciel-layout.page-account .account-card-kv span,
.ciel-layout.page-account .account-membership-stat span,
.ciel-layout.page-account .account-tier-chip span {
  color: #cfba90;
}

.ciel-layout.page-account .account-card-kv strong,
.ciel-layout.page-account .account-membership-stat strong,
.ciel-layout.page-account .account-tier-chip strong {
  color: #f0debd;
}

.ciel-layout.page-account .account-summary-grid--profile .account-metric-card strong {
  color: #efcf79;
}

.ciel-layout.page-account .account-modal-close {
  background: #16120d;
  border-color: rgba(212, 175, 55, 0.3);
  color: #f0dfbf;
}

@media (max-width: 1140px) {
  .ciel-layout .plan-card {
    display: flex;
    flex-direction: column;
  }

  .ciel-layout .plan-card > img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .ciel-layout .card-grid.three-up {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ciel-layout .legacy-navbar {
    padding: 12px 0;
  }

  .ciel-layout .legacy-logo img {
    width: 170px;
  }

  .ciel-layout .legacy-topbar-left {
    gap: 8px;
  }

  .ciel-layout .legacy-city-contact {
    width: 100%;
    justify-content: space-between;
  }

  .ciel-layout .legacy-slide-content {
    min-height: 300px;
    padding-bottom: 44px;
  }

  .ciel-layout .legacy-carousel,
  .ciel-layout .legacy-carousel-track {
    min-height: 300px;
  }

  .ciel-layout .category-card__body {
    padding: 14px;
    gap: 8px;
  }

  .ciel-layout .category-card h3 {
    font-size: 1.06rem;
    line-height: 1.24;
  }

  .ciel-layout .category-card p {
    font-size: 0.9rem;
    line-height: 1.42;
    -webkit-line-clamp: 2;
  }

  .ciel-layout .category-card .btn {
    width: 100%;
    justify-content: center;
  }
}