/* ==========================================================================
   Alain Hotel — "Verdant" design system
   A warm, editorial resort aesthetic: deep emerald + sand + brushed gold.
   ========================================================================== */

:root {
  --emerald: #0f3d31;
  --emerald-deep: #082720;
  --emerald-soft: #1d5446;
  --sand: #f6f1e7;
  --sand-dark: #ece3d2;
  --gold: #c9a14a;
  --gold-soft: #e3c98a;
  --ink: #1a1d1b;
  --muted: #6b7570;
  --line: rgba(15, 61, 49, .12);

  --radius-lg: 1.75rem;
  --radius-md: 1.1rem;
  --radius-sm: .6rem;

  --shadow-soft: 0 10px 35px rgba(15, 61, 49, .1);
  --shadow-lift: 0 22px 50px rgba(15, 61, 49, .18);
}

* { box-sizing: border-box; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--sand);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-font {
  font-family: "Fraunces", "Playfair Display", Georgia, serif;
  letter-spacing: -.01em;
  color: var(--emerald-deep);
}

main { min-height: 60vh; }

a { transition: color .15s ease, opacity .15s ease; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
}

/* ---------------------------------------------------------------- Navbar */
.navbar-hotel {
  background: rgba(8, 39, 32, .92);
  backdrop-filter: blur(10px);
  padding-top: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.navbar-hotel .navbar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-top: 0;
  padding-bottom: 0;
}
/* Mobile menu toggler: white hamburger + light border on the dark navbar */
.navbar-hotel .navbar-toggler {
  border-color: rgba(246, 241, 231, .3);
}
.navbar-hotel .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(246, 241, 231, .18);
}
.navbar-hotel .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(246, 241, 231, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-hotel .navbar-brand .brand-mark {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  -webkit-mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
          mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
  flex: none;
}
.navbar-hotel .navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.navbar-hotel .navbar-brand .brand-name {
  font-family: "Fraunces", serif;
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--sand);
}
.navbar-hotel .navbar-brand .brand-sub {
  font-family: "Inter", sans-serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-top: 4px;
}

/* ------------------------------------------------------------ Brand lockup */
.footer-logo {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  -webkit-mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
          mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
  flex: none;
}
.navbar-hotel .nav-link {
  color: rgba(246, 241, 231, .75) !important;
  font-weight: 500;
  font-size: .92rem;
  position: relative;
  margin: 0 .35rem;
  padding: .4rem .2rem !important;
}
.navbar-hotel .nav-link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: inset-inline-end .2s ease;
}
.navbar-hotel .nav-link:hover { color: var(--sand) !important; }
.navbar-hotel .nav-link:hover::after { inset-inline-end: 0; }
.navbar-hotel .btn-nav-cta {
  background: var(--gold);
  color: var(--emerald-deep);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1.15rem;
  border-radius: 50px;
  margin-inline-start: .5rem;
}
.navbar-hotel .btn-nav-cta:hover { background: var(--gold-soft); }

/* Language switcher: a one-click toggle to the other language, white on the
   dark navbar. */
.navbar-hotel .lang-switch button {
  color: var(--sand) !important;
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
}
.navbar-hotel .lang-switch button:hover { color: var(--gold-soft) !important; }
.navbar-hotel .lang-switch button:focus { box-shadow: none; }

/* ----------------------------------------------------------------- Buttons */
.btn {
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: .01em;
}
.btn-lg { padding: .85rem 2rem; }
.btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--emerald-deep);
}
.btn-gold:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--emerald-deep);
}
.btn-outline-gold {
  border: 1.5px solid var(--emerald);
  color: var(--emerald);
  background: transparent;
}
.btn-outline-gold:hover {
  background: var(--emerald);
  color: var(--sand);
  border-color: var(--emerald);
}
.btn-ghost-light {
  border: 1.5px solid rgba(246, 241, 231, .35);
  color: var(--sand);
}
.btn-ghost-light:hover {
  background: rgba(246, 241, 231, .12);
  color: var(--sand);
  border-color: var(--sand);
}

/* -------------------------------------------------------------------- Hero */
.hero-split {
  background: radial-gradient(circle at 100% 0%, var(--emerald-soft) 0%, var(--emerald) 45%, var(--emerald-deep) 100%);
  border-radius: 0 0 3rem 3rem;
  color: var(--sand);
  overflow: hidden;
  position: relative;
}
.hero-split::after {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border: 1px solid rgba(246, 241, 231, .08);
  border-radius: 50%;
  top: -120px; right: -120px;
}
/* Large faint logo watermark drifting behind the hero copy */
.hero-split::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  bottom: -150px;
  right: -90px;
  background: var(--sand);
  opacity: .045;
  -webkit-mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
          mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
  z-index: 0;
}

/* Large brand emblem sitting beside the hero copy */
.hero-emblem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}
.hero-emblem::before {
  content: "";
  position: absolute;
  width: 760px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 201, 138, .22), rgba(227, 201, 138, 0) 62%);
}
.hero-emblem .emblem-mark {
  position: relative;
  width: clamp(340px, 50vw, 660px);
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, var(--gold-soft), var(--gold) 72%);
  -webkit-mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
          mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
  filter: drop-shadow(0 24px 52px rgba(8, 39, 32, .5));
}
@media (max-width: 991px) {
  .hero-emblem { min-height: auto; margin-top: 1rem; }
  .hero-emblem .emblem-mark { width: clamp(260px, 70vw, 400px); }
}
.hero-split .hero-inner {
  position: relative;
  z-index: 1;
  padding: 6rem 0 5rem;
}
@media (max-width: 991px) {
  .hero-split .hero-inner { padding-inline: 1.5rem; }
}
.hero-split h1 {
  color: var(--sand);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 600;
}
.hero-split p.lead {
  color: rgba(246, 241, 231, .78);
  font-size: 1.05rem;
  max-width: 30rem;
}
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.hero-stats .stat b {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  color: var(--gold-soft);
}
.hero-stats .stat span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(246, 241, 231, .6);
}
.hero-card {
  background: var(--sand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 2rem;
  color: var(--ink);
}

/* Simpler page-header hero (used on rooms/booking pages) */
.page-hero {
  background: var(--emerald-deep);
  color: var(--sand);
  border-radius: 0 0 2.5rem 2.5rem;
  padding: 3.5rem 0 5rem;
  text-align: center;
  position: relative;
}
.page-hero h1 { color: var(--sand); }
.page-hero p { color: rgba(246, 241, 231, .7); }

/* --------------------------------------------------------------- Sections */
.section { padding: 5rem 0; }
.section-head { max-width: 38rem; margin: 0 auto 3rem; text-align: center; }
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: .5rem; }
.section-head p { color: var(--muted); margin-top: .75rem; }

.feature-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.feature-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-soft));
  color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
}

.cta-banner {
  background: linear-gradient(120deg, var(--emerald-deep), var(--emerald));
  border-radius: var(--radius-lg);
  color: var(--sand);
  padding: 3rem 2.5rem;
  text-align: center;
}
.cta-banner h3 { color: var(--sand); }

/* --------------------------------------------------------- Search / filter */
.search-bar {
  background: #fff;
  border-radius: 100px;
  box-shadow: var(--shadow-lift);
  padding: .5rem;
  padding-inline-start: 1.75rem;
  margin-top: -3.25rem;
  position: relative;
  z-index: 5;
  border: 1px solid rgba(15, 61, 49, .06);
}
.search-bar .seg {
  border-inline-end: 1px solid var(--line);
  padding-inline-end: 1.25rem;
  cursor: pointer;
}
.search-bar .seg label { cursor: pointer; }
.search-bar input[type="date"] { cursor: pointer; }
.search-bar label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .2rem;
  transition: color .2s ease;
}
.search-bar label i { color: var(--gold); font-size: .9rem; }
.search-bar .seg:focus-within label { color: var(--emerald); }
.search-bar input {
  border: none;
  padding: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  width: 100%;
}
.search-bar input:focus { outline: none; box-shadow: none; }
.search-bar select.form-select {
  border: none;
  padding: 0;
  padding-inline-end: 1.4rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background-color: transparent;
  background-position: right .25rem center;
  cursor: pointer;
}
[dir="rtl"] .search-bar select.form-select {
  background-position: left .25rem center;
}
.search-bar select.form-select:focus { outline: none; box-shadow: none; }
.search-bar .btn { padding: .9rem 1.5rem; }
/* Rooms filter is a Bootstrap .row, whose negative side margins push the white
   card past the container and make it look off-centre. Cancel them and balance
   the padding so the card aligns with the hero and the room grid. */
.filter-bar { margin-left: 0; margin-right: 0; padding-inline: 1.5rem; }

/* Dual min–max price range slider */
.search-bar .seg-range label { justify-content: space-between; gap: .75rem; }
.search-bar .price-out {
  color: var(--emerald);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.range-dual {
  position: relative;
  height: 1.5rem;
  margin-top: .5rem;
}
.range-dual .range-track {
  position: absolute;
  left: 9px; right: 9px;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: var(--line);
  border-radius: 4px;
}
.range-dual .range-fill {
  position: absolute;
  height: 100%;
  background: var(--gold);
  border-radius: 4px;
}
.range-dual input[type="range"] {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-dual input[type="range"]::-webkit-slider-runnable-track { background: none; border: none; }
.range-dual input[type="range"]::-moz-range-track { background: none; border: none; }
.range-dual input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(8, 39, 32, .3);
  cursor: pointer;
  margin-top: 0;
}
.range-dual input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(8, 39, 32, .3);
  cursor: pointer;
}

@media (max-width: 767px) {
  .search-bar { border-radius: var(--radius-md); padding: 1.25rem; }
  .search-bar .seg { border-inline-end: none; border-bottom: 1px solid var(--line); padding: .5rem 0; }
}

/* Home page: search bar floats over the hero's rounded bottom edge */
.hero-split + .container .search-bar { margin-top: -3.25rem; margin-bottom: 1rem; }

/* --------------------------------------------------------- Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------- Testimonials */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.testimonial-card .stars { color: var(--gold); font-size: .9rem; letter-spacing: .15rem; }
.testimonial-card p {
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.5;
}
.testimonial-author { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.testimonial-author .avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald), var(--emerald-soft));
  color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: "Fraunces", serif;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-author b { display: block; font-size: .9rem; color: var(--emerald-deep); }
.testimonial-author span { font-size: .78rem; color: var(--muted); }

/* -------------------------------------------------------------- Room cards */
.room-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.room-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: transparent; }
.room-card .img-wrap {
  position: relative;
  overflow: hidden;
  height: 240px;
}
.room-card .img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.room-card:hover .img-wrap img { transform: scale(1.08); }
.room-card .img-wrap::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 39, 32, .55) 100%);
}
.room-card .price-pill {
  position: absolute;
  bottom: .9rem; inset-inline-start: .9rem;
  background: var(--gold);
  color: var(--emerald-deep);
  font-weight: 700;
  font-size: .85rem;
  padding: .4rem 1rem;
  border-radius: 50px;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(8, 39, 32, .28);
}
.room-card .price-pill small { font-weight: 500; opacity: .8; }
.room-card .count-pill {
  position: absolute;
  top: .9rem; inset-inline-end: .9rem;
  background: rgba(8, 39, 32, .55);
  color: var(--sand);
  font-size: .75rem;
  padding: .25rem .6rem;
  border-radius: 50px;
  z-index: 2;
}
/* Default inline pill (e.g. "Today", "You", room type, status badges).
   Bootstrap's .badge alone is white text on no background, so it's invisible
   on light surfaces — give it an on-brand fill. The .room-card override below
   is more specific and keeps the image-overlay style on cards. */
.badge-type {
  background: var(--emerald);
  color: var(--sand);
  font-weight: 600;
  border-radius: 50px;
}
.room-card .badge-type {
  position: absolute;
  top: .9rem; inset-inline-start: .9rem;
  z-index: 2;
  background: rgba(246, 241, 231, .92);
  color: var(--emerald);
  border: none;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 50px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(8, 39, 32, .18);
}
.room-card .no-img {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand-dark);
  color: var(--muted);
  font-size: 2.2rem;
}
.room-card .card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.room-card h5 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.25rem;
  transition: color .2s ease;
}
.room-card:hover h5 { color: var(--gold); }
/* The "Details →" arrow points the reading direction; flip it in RTL */
[dir="rtl"] .room-cta i { transform: scaleX(-1); }
[dir="rtl"] .room-card:hover .room-cta i { transform: scaleX(-1) translateX(4px); }
.room-card .room-desc {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.room-card .card-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.room-card .room-cap { color: var(--muted); font-size: .82rem; font-weight: 600; }
.room-card .room-cap i { color: var(--gold); }
.room-card .room-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--emerald);
  font-weight: 700;
  font-size: .85rem;
}
.room-card .room-cta i { transition: transform .25s ease; }
.room-card:hover .room-cta { color: var(--gold); }
.room-card:hover .room-cta i { transform: translateX(4px); }

/* ---------------------------------------------------------------- Detail page */
.gallery-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  position: relative;
}
/* Responsive gallery height: scales with the viewport instead of a fixed 460px */
.gallery-img {
  height: clamp(240px, 52vw, 460px);
  object-fit: cover;
}
/* Softer, rounded carousel controls that don't crowd the image edges on mobile */
.gallery-hero .carousel-control-prev,
.gallery-hero .carousel-control-next {
  width: auto;
  align-items: center;
  opacity: 1;
  padding: 0 .75rem;
}
.gallery-hero .carousel-control-prev-icon,
.gallery-hero .carousel-control-next-icon {
  background-color: rgba(20, 45, 40, .55);
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  background-size: 45%;
  transition: background-color .2s ease;
}
.gallery-hero:hover .carousel-control-prev-icon,
.gallery-hero:hover .carousel-control-next-icon { background-color: rgba(20, 45, 40, .8); }
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: .75rem;
}
.thumb-grid img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: .7;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.thumb-grid img:hover { opacity: 1; transform: translateY(-2px); }
.thumb-grid img.active { opacity: 1; border-color: var(--gold); box-shadow: 0 4px 12px rgba(201, 161, 74, .3); }
@media (max-width: 575.98px) {
  .thumb-grid { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .thumb-grid img { height: 62px; }
}

.info-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: none;
}
.info-card .list-group-item { border-color: var(--line); padding: 1rem 1.25rem; }
.sticky-panel { position: sticky; top: 6.5rem; }

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--sand-dark);
  color: var(--emerald);
  border-radius: 50px;
  padding: .4rem .85rem;
  font-size: .82rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------ Forms */
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(201, 161, 74, .18);
}
.form-label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--emerald-deep);
}
.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: none;
}
.form-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
}

.order-summary {
  background: var(--emerald-deep);
  color: var(--sand);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.order-summary h6 { color: rgba(246, 241, 231, .6); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.order-summary .line {
  display: flex; justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(246, 241, 231, .12);
  font-size: .92rem;
}
.order-summary .line.total {
  border-bottom: none;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-soft);
  padding-top: 1rem;
}

/* ----------------------------------------------------------- Success / receipt */
.receipt-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  position: relative;
  overflow: hidden;
}
.receipt-card .receipt-head {
  background: var(--emerald-deep);
  color: var(--sand);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
.receipt-card .receipt-body { padding: 2rem; }
.receipt-perforation {
  height: 0;
  border-top: 2px dashed var(--line);
  position: relative;
  margin: 0 2rem;
}
.check-badge {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--emerald-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

/* ------------------------------------------------------------- Location */
.location-section {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(15, 61, 49, .05), transparent 60%),
    linear-gradient(180deg, #fffdf8 0%, var(--sand-dark) 100%);
  border-top: 1px solid var(--line);
}
/* slim gold accent that marks the split from the rooms section */
.location-section::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
}

.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  align-items: stretch;
}
.location-info {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.location-info h5 { color: var(--emerald); }
.location-info p { color: var(--muted); margin-bottom: .25rem; }
.location-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  min-height: 340px;
}
.location-map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .location-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- Misc */
.text-gold { color: var(--gold); }
.text-emerald { color: var(--emerald); }
.empty-state { padding: 4.5rem 1rem; text-align: center; color: var(--muted); }

.breadcrumb { font-size: .82rem; }
.breadcrumb-item a { color: var(--emerald); text-decoration: none; font-weight: 600; }
.breadcrumb-item a:hover { color: var(--gold); }
.breadcrumb-item.active { color: var(--muted); }

/* ------------------------------------------------------------- Dashboard */
.stat-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.stat-card .icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--sand-dark);
  color: var(--emerald);
  flex-shrink: 0;
}
.stat-card .value {
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--emerald-deep);
  line-height: 1.1;
}
.stat-card .label {
  font-size: .76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dash-toolbar {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}

.dash-table {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.dash-table table { margin-bottom: 0; }
.dash-table thead th {
  background: var(--sand-dark);
  color: var(--emerald-deep);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: none;
  padding: 1rem;
  white-space: nowrap;
}
.dash-table tbody td {
  padding: 1rem;
  vertical-align: middle;
  border-color: var(--line);
  white-space: nowrap;
}
.dash-table tbody tr { transition: background .15s ease; }
.dash-table tbody tr:hover { background: var(--sand); }
.dash-table .room-thumb {
  width: 42px; height: 42px;
  border-radius: .5rem;
  object-fit: cover;
}

.status-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.status-PENDING { background: #fbeec7; color: #8a6d1d; }
.status-CONFIRMED { background: #d8f0e6; color: #0f3d31; }
.status-CHECKED_IN { background: #dbe9fb; color: #1d4d8a; }
.status-CHECKED_OUT { background: #e6e6e6; color: #4a4a4a; }
.status-CANCELLED { background: #fbdada; color: #8a1d1d; }

.balance-pos { color: #b3361e; font-weight: 700; }
.balance-clear { color: #1d5446; font-weight: 700; }

/* Rows that belong to a group booking — a soft gold tint so they stand out
   from single-room rows. Bootstrap's .table paints each cell's background, so
   the tint has to sit on the <td>s (not the <tr>) to actually show. Payment
   for these lives on the group, so their row links out to it. */
.dash-table tbody tr.group-booking-row > td {
  background-color: rgba(201, 161, 74, 0.14);
}
.dash-table tbody tr.group-booking-row:hover > td {
  background-color: rgba(201, 161, 74, 0.22);
}

.detail-stat {
  background: var(--sand-dark);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  text-align: center;
}
.detail-stat .v { font-family: "Fraunces", serif; font-weight: 700; font-size: 1.25rem; color: var(--emerald-deep); }
.detail-stat .l { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Coloured stat cards: green for amount paid, red for the balance due */
.detail-stat.stat-green { background: #1d5446; }
.detail-stat.stat-red { background: #b3361e; }
.detail-stat.stat-green .v,
.detail-stat.stat-red .v { color: #fff; }
.detail-stat.stat-green .l,
.detail-stat.stat-red .l { color: rgba(255, 255, 255, .85); }

.timeline-item {
  border-inline-start: 2px solid var(--line);
  padding: 0 0 1.25rem;
  padding-inline-start: 1.25rem;
  position: relative;
}
.timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px; top: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline-item:last-child { border-color: transparent; padding-bottom: 0; }

/* --------------------------------------------------------------- Footer */
.footer-hotel {
  background: var(--emerald-deep);
  color: rgba(246, 241, 231, .65);
  padding: 3.5rem 0 1.5rem;
}
.footer-hotel h6 {
  color: var(--sand);
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.footer-hotel a {
  color: rgba(246, 241, 231, .65);
  text-decoration: none;
  display: block;
  margin-bottom: .5rem;
  font-size: .9rem;
}
.footer-hotel a:hover { color: var(--gold-soft); }
.footer-bottom {
  border-top: 1px solid rgba(246, 241, 231, .1);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: .82rem;
  text-align: center;
}

/* ----------------------------------------------- Flatpickr range calendar */
.search-bar .seg-dates input { cursor: pointer; }
.flatpickr-calendar {
  box-shadow: var(--shadow-lift);
  border-radius: var(--radius-md);
  border: none;
  font-family: "Inter", sans-serif;
  padding: .35rem;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-monthDropdown-months { color: var(--emerald-deep); fill: var(--emerald-deep); }
.flatpickr-weekday { color: var(--muted); font-weight: 700; }
.flatpickr-day { border-radius: 8px; color: var(--ink); }
.flatpickr-day:hover { background: var(--sand); border-color: var(--sand); }
.flatpickr-day.today { border-color: var(--gold); }
.flatpickr-day.today:hover { background: var(--gold); border-color: var(--gold); color: var(--emerald-deep); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--sand);
}
.flatpickr-day.inRange {
  background: var(--sand-dark);
  border-color: var(--sand-dark);
  box-shadow: -5px 0 0 var(--sand-dark), 5px 0 0 var(--sand-dark);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gold); }

/* Booked nights: shown in a distinct colour and not selectable */
.flatpickr-day.booked-day,
.flatpickr-day.booked-day.flatpickr-disabled {
  background: rgba(178, 58, 47, .14);
  color: #b23a2f;
  border-color: transparent;
  text-decoration: line-through;
  opacity: 1;
  cursor: not-allowed;
}
.flatpickr-day.booked-day:hover { background: rgba(178, 58, 47, .22); }

/* Legend swatches under the booking calendar */
.cal-legend {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 4px;
  vertical-align: -1px;
  margin-inline-end: .35rem;
}
.cal-legend-booked { background: rgba(178, 58, 47, .35); }
.cal-legend-free { background: var(--sand-dark); }

/* ============================================================ RTL / Arabic
   Cairo's glyphs sit lower in the line box and need more leading than Inter,
   which is why Arabic text looked "dropped" and cramped against English.
   These rules only apply when <html dir="rtl"> (i.e. the Arabic locale).
   ========================================================================== */
[dir="rtl"] {
  font-family: 'Cairo', system-ui, sans-serif;
}
[dir="rtl"] body,
[dir="rtl"] .navbar,
[dir="rtl"] .btn,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
  font-family: 'Cairo', system-ui, sans-serif;
}
/* Cairo needs a touch more vertical breathing room than the Latin default */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] .display-font { line-height: 1.45; }

/* Centre glyphs vertically in tight single-line components so Arabic
   doesn't appear to drop below icons / borders. */
[dir="rtl"] .navbar-hotel .nav-link,
[dir="rtl"] .search-bar label,
[dir="rtl"] .btn,
[dir="rtl"] .status-badge,
[dir="rtl"] .amenity-chip,
[dir="rtl"] .badge-type,
[dir="rtl"] .price-pill { line-height: 1.6; }

/* Brand wordmark is set to line-height:1 for Latin; give Cairo room */
[dir="rtl"] .navbar-hotel .navbar-brand .brand-text { line-height: 1.25; }
/* Arabic sub-brand: larger and without the Latin letter-spacing (which breaks connected script) */
[dir="rtl"] .navbar-hotel .navbar-brand .brand-sub { font-size: .82rem; letter-spacing: normal; }

/* Icons immediately followed by Arabic text align better when nudged down a hair */
[dir="rtl"] .feature-icon i,
[dir="rtl"] .stat-card .icon i { vertical-align: middle; }

/* ======================================================================
   Staff Dashboard — sidebar layout (admin panel shell)
   ====================================================================== */
:root { --dash-sidebar-w: 264px; }

.dash-body { background: var(--sand); }

.dash-layout { display: flex; min-height: 100vh; }

/* ----- Sidebar ----- */
.dash-sidebar {
  width: var(--dash-sidebar-w);
  flex: 0 0 var(--dash-sidebar-w);
  background: var(--emerald-deep);
  color: rgba(246, 241, 231, .8);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.dash-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.25rem;
  border-bottom: 1px solid rgba(246, 241, 231, .1);
}
.dash-brand a { text-decoration: none; }
.dash-brand .brand-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  -webkit-mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
          mask: url("../images/logo-no-bg.e67ddb590abc.png") center/contain no-repeat;
  flex: none;
}
.dash-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.dash-brand .brand-name { font-family: "Fraunces", serif; font-size: 1.2rem; font-weight: 600; color: var(--sand); }
.dash-brand .brand-sub { font-size: .56rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
.dash-sidebar-close { background: none; border: none; color: rgba(246,241,231,.7); font-size: 1.1rem; }

.dash-nav { flex: 1; padding: 1rem .75rem; }
.dash-nav-label {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246, 241, 231, .4);
  padding: 1rem .75rem .4rem;
}
.dash-nav-label:first-child { padding-top: .25rem; }
.dash-nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border-radius: var(--radius-sm);
  color: rgba(246, 241, 231, .8);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: .15rem;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}
.dash-nav-link i { font-size: 1.05rem; width: 1.3rem; text-align: center; flex: none; }
.dash-nav-link:hover { background: rgba(246, 241, 231, .07); color: var(--sand); }
.dash-nav-link.active { background: var(--gold); color: var(--emerald-deep); font-weight: 600; }
.dash-sidebar-foot {
  padding: .75rem;
  border-top: 1px solid rgba(246, 241, 231, .1);
}

/* ----- Main column ----- */
.dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.dash-burger { background: none; border: none; font-size: 1.5rem; color: var(--emerald-deep); }
.dash-topbar-title { flex: 1; min-width: 0; }
.dash-topbar-title h1 { font-size: 1.35rem; margin: 0; color: var(--emerald-deep); }
.dash-topbar-title .sub { font-size: .82rem; color: var(--muted); margin: 0; }
.dash-user {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--emerald-deep);
}
.dash-user i { font-size: 1.4rem; color: var(--gold); }
.dash-content { padding: 1.75rem; flex: 1; }

/* ----- Mobile drawer ----- */
.dash-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 39, 32, .5);
  z-index: 1040;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
@media (max-width: 991.98px) {
  .dash-sidebar {
    position: fixed;
    inset-inline-start: 0; top: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  [dir="rtl"] .dash-sidebar { transform: translateX(100%); }
  body.dash-nav-open .dash-sidebar { transform: translateX(0); }
  body.dash-nav-open .dash-backdrop { opacity: 1; visibility: visible; }
}

/* ----- Short viewports -----
   The sidebar is 100vh tall, so on a short screen (small laptop window, a
   landscape phone) its brand + nav + footer overflow and it gains an ugly inner
   scrollbar. Instead of scrolling, scale the text and padding down with the
   viewport HEIGHT so everything keeps fitting. */
@media (max-height: 820px) {
  .dash-brand { padding: 1rem 1.25rem; }
  .dash-nav { padding: .6rem .75rem; }
  .dash-nav-label { padding: .6rem .75rem .3rem; font-size: .6rem; }
  .dash-nav-link { padding: .5rem .75rem; font-size: .84rem; margin-bottom: .1rem; }
  .dash-nav-link i { font-size: 1rem; }
}
@media (max-height: 680px) {
  .dash-brand { padding: .7rem 1.1rem; }
  .dash-brand .brand-name { font-size: 1.05rem; }
  .dash-nav { padding: .4rem .6rem; }
  .dash-nav-label { padding: .5rem .75rem .2rem; letter-spacing: .1em; }
  .dash-nav-link { padding: .4rem .7rem; font-size: .8rem; gap: .6rem; margin-bottom: .05rem; }
  .dash-nav-link i { font-size: .95rem; }
  .dash-sidebar-foot { padding: .5rem; }
}
@media (max-height: 560px) {
  /* Drop the section headings to reclaim the most space. */
  .dash-nav-label { display: none; }
  .dash-brand { padding: .5rem 1rem; }
  .dash-brand .brand-sub { display: none; }
  .dash-nav-link { padding: .32rem .65rem; font-size: .76rem; }
  .dash-nav-link i { font-size: .9rem; width: 1.15rem; }
}

/* ----- Dashboard helper bits ----- */
.dash-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
}
.dash-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.dash-card-head h2, .dash-card-head h5 { margin: 0; font-size: 1.1rem; color: var(--emerald-deep); }
.room-thumb-sm { width: 48px; height: 48px; border-radius: .5rem; object-fit: cover; }
.room-thumb-ph {
  width: 48px; height: 48px; border-radius: .5rem;
  background: var(--sand-dark); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.dash-form label { font-weight: 600; font-size: .85rem; color: var(--emerald-deep); margin-bottom: .3rem; }
.dash-form .form-text { font-size: .78rem; }