/* ==========================================================================
   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,
.room-card .card-body h3 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.25rem;
  transition: color .2s ease;
}
.room-card:hover h5,
.room-card:hover .card-body h3 { 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;
}
/* Thumbnails are buttons (keyboard + screen reader); the image fills them. */
.thumb-btn {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.thumb-btn img {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
}
.thumb-btn:hover,
.thumb-btn:focus-visible { opacity: 1; transform: translateY(-2px); }
.thumb-btn.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-btn 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;
}

/* ----- Booking success page (bookings/success/) ----- */
.booking-confirm .min-w-0 { min-width: 0; }

/* Progress: Booking → Payment → Confirmed */
.booking-steps {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: 0;
  margin: 0 auto 1.75rem;
  max-width: 440px;
}
.booking-steps li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  position: relative;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
}
/* connector line to the next step (logical side → works in RTL) */
.booking-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  inset-inline-start: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: var(--line);
}
.booking-steps li.is-done:not(:last-child)::after { background: var(--gold); }
.booking-steps .step-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 2px solid var(--line);
  font-weight: 600;
  color: var(--muted);
}
.booking-steps li.is-done .step-dot { background: var(--gold); border-color: var(--gold); color: var(--emerald-deep); }
.booking-steps li.is-done { color: var(--emerald-deep); }
.booking-steps li.is-current .step-dot {
  border-color: var(--gold);
  color: var(--emerald-deep);
  box-shadow: 0 0 0 4px rgba(201, 161, 74, .2);
}
.booking-steps li.is-current { color: var(--emerald-deep); font-weight: 600; }

/* Header variants */
.receipt-head h1 { color: var(--sand); }
.receipt-head .head-sub { color: rgba(246, 241, 231, .78); }
.receipt-head.is-cancelled { background: #3b3f3d; }
.receipt-head.is-cancelled .check-badge { background: rgba(246, 241, 231, .15); color: var(--sand); }
.receipt-head.is-paid .check-badge { animation: badge-pop .45s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes badge-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: rgba(246, 241, 231, .1);
  border: 1px solid rgba(246, 241, 231, .2);
  color: rgba(246, 241, 231, .8);
  font-size: .85rem;
}
.ref-chip strong { color: var(--gold-soft); }

/* Room strip */
.stay-room {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stay-room-img {
  flex: none;
  width: 96px; height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--sand-dark);
}
.stay-room-img.no-img {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 1.5rem;
}

/* Check-in / nights / check-out */
.stay-dates {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.date-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem .5rem;
  border-radius: var(--radius-md);
  background: var(--sand);
  border: 1px solid var(--line);
}
.date-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}
.date-day {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--emerald-deep);
  margin-top: .25rem;
}
.date-month { font-weight: 600; color: var(--ink); font-size: .95rem; }
.date-weekday { font-size: .85rem; color: var(--muted); }
.nights-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  color: var(--emerald-soft);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.nights-pill i { color: var(--gold); font-size: 1.1rem; }

/* Price block */
.price-box {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--line);
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.price-row dt { font-weight: 400; color: var(--muted); }
.price-row dd { margin: 0; font-weight: 600; }
.price-total {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  color: var(--gold);
}
.price-total small { font-family: "Inter", sans-serif; font-size: .85rem; color: var(--muted); }
.price-row.is-due dt, .price-row.is-due dd { color: #b02a37; font-weight: 600; }

/* Payment panel */
.pay-panel {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.pay-timer {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  background: rgba(201, 161, 74, .14);
  color: var(--emerald-deep);
  font-size: .95rem;
  transition: background-color .3s ease, color .3s ease;
}
.pay-timer i { color: var(--gold); font-size: 1.15rem; }
.pay-timer-clock { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.pay-timer.is-urgent { background: rgba(220, 53, 69, .1); color: #b02a37; }
.pay-timer.is-urgent i { color: #b02a37; }
.policy-check .form-check-input { width: 1.15em; height: 1.15em; }
.policy-check a { color: var(--emerald-soft); font-weight: 600; }
.pay-btn { min-height: 52px; }
.pay-secure {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .85rem;
  font-size: .8rem;
  color: var(--muted);
}
.pay-secure .bi-shield-lock { color: var(--emerald-soft); }
.pay-cards { display: inline-flex; gap: .4rem; }

@media (max-width: 575.98px) {
  .receipt-card .receipt-head { padding: 2rem 1.25rem 1.5rem; }
  .receipt-card .receipt-body { padding: 1.5rem 1.25rem; }
  .receipt-perforation { margin: 0 1.25rem; }
  .stay-dates { gap: .4rem; }
  .date-tile { padding: .8rem .35rem; }
  .date-day { font-size: 1.8rem; }
  .nights-pill { padding: .25rem; font-size: .8rem; }
  .booking-steps { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .receipt-head.is-paid .check-badge { animation: none; }
  .pay-timer { transition: none; }
}

/* ------------------------------------------------------------- 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;
}
.footer-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.footer-payments img {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* ----------------------------------------------- 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; }

/* ==========================================================================
   Tables & data views (shared by the staff dashboard and the guest profile)
   Guidance applied (ui-ux-pro-max): tabular figures for data columns, visible
   keyboard focus, 24px+ pointer targets, helpful empty states, accessible
   busy state, and a card layout instead of sideways scrolling on phones.
   ========================================================================== */

/* Figures line up column-to-column (prices, dates, counts). */
.table tbody,
.stat-card .value,
.detail-stat .v { font-variant-numeric: tabular-nums; }

/* Money / count columns sit at the end edge (right in English, left in Arabic). */
.table th.col-num,
.table td.col-num { text-align: end; }

/* Visible keyboard focus everywhere (mouse clicks keep the clean look). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.dash-nav-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: none;
}

/* Wider screens: keep lines readable instead of stretching edge to edge. */
.dash-content { width: 100%; max-width: 1680px; margin-inline: auto; }
@media (max-width: 575.98px) {
  .dash-content { padding: 1rem; }
  .dash-toolbar { padding: .85rem 1rem; }
}

/* ----- Sortable headers ----- */
.dash-table thead th.dt-orderable-asc,
.dash-table thead th.dt-orderable-desc { cursor: pointer; }
.dash-table thead th.dt-orderable-asc:hover,
.dash-table thead th.dt-orderable-desc:hover { background: #e4d9c3; }
.dash-table thead th.dt-ordering-asc,
.dash-table thead th.dt-ordering-desc {
  background: #e4d9c3;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* ----- DataTables chrome inside the white table card ----- */
.dash-table .dt-container > .dt-layout-row {
  --bs-gutter-x: 0;
  margin: 0;
  padding: .85rem 1.25rem;
  align-items: center;
  row-gap: .6rem;
}
.dash-table .dt-container > .dt-layout-row.dt-layout-table { padding: 0; }
.dash-table .dt-container > .dt-layout-row:first-child { border-bottom: 1px solid var(--line); }
.dash-table .dt-container > .dt-layout-row:last-child {
  border-top: 1px solid var(--line);
  background: #fdfbf7;
}

/* Search: pill input with a magnifier; the "Search:" label stays for screen
   readers only (the placeholder carries it visually). */
.dt-container .dt-search label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dt-container .dt-search input {
  min-width: 260px;
  margin: 0 !important;
  border-radius: 50px;
  border-color: var(--line);
  padding: .45rem .95rem .45rem 2.25rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7570'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat .9rem center / 14px;
}
[dir="rtl"] .dt-container .dt-search input {
  padding: .45rem 2.25rem .45rem .95rem;
  background-position: right .9rem center;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(201, 161, 74, .25);
}
.dt-container .dt-length { font-size: .82rem; color: var(--muted); }
.dt-container .dt-length select {
  border-radius: 50px;
  border-color: var(--line);
  margin-inline: .35rem;
}
.dt-container .dt-info { font-size: .82rem; color: var(--muted); }

/* Pagination: 36px targets, emerald current page. */
.dt-container .pagination { margin: 0; gap: .3rem; flex-wrap: wrap; }
.dt-container .page-link {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) !important;
  color: var(--emerald);
  background: #fff;
  font-size: .85rem;
  font-weight: 600;
}
.dt-container .page-link:hover { background: var(--sand); color: var(--emerald-deep); }
.dt-container .page-item.active .page-link {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--sand);
}
.dt-container .page-item.disabled .page-link {
  background: transparent;
  color: #b7bdb9;
}

/* Empty / no-results state: an icon and a sentence, not a blank row. */
table.dataTable td.dt-empty {
  padding: 3rem 1rem !important;
  white-space: normal !important;
  text-align: center !important;
}
.dt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .92rem;
}
.dt-empty-state i { font-size: 1.8rem; color: var(--gold); }

/* ----- Phones: rows become stacked cards (no sideways scrolling) -----
   Cells carry data-label (static/js/tables.js), shown before each value. */
@media (max-width: 767.98px) {
  .dash-table .table-responsive { overflow-x: visible; }

  table.table-cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  table.table-cards,
  table.table-cards tbody,
  table.table-cards tr,
  table.table-cards td { display: block; }
  table.table-cards { width: 100% !important; }

  table.table-cards tbody tr {
    margin: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 61, 49, .05);
    overflow: hidden;
  }
  table.table-cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .95rem !important;
    border-bottom: 1px solid var(--line);
    white-space: normal !important;
    text-align: end !important;
    min-width: 0;
  }
  table.table-cards tbody td:last-child { border-bottom: 0; }
  table.table-cards tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: start;
  }
  table.table-cards tbody td[data-label=""]::before { content: none; }
  table.table-cards tbody td[data-label=""] { justify-content: flex-end; }
  /* Empty-state rows (DataTables' or a colspan "Nothing yet") stay one
     centred block. */
  table.table-cards tbody td.dt-empty,
  table.table-cards tbody td[colspan] { display: block; text-align: center !important; }
  table.table-cards tbody td.dt-empty::before,
  table.table-cards tbody td[colspan]::before { content: none; }

  .dt-container .dt-search,
  .dt-container .dt-search input { width: 100%; min-width: 0; }
  .dt-container .dt-layout-cell { text-align: center; }
  .dt-container .pagination { justify-content: center; }
}

/* ==========================================================================
   Dashboard polish (round 2)
   ========================================================================== */

/* ----- Status badges: an icon as well as a colour, so status never relies
   on colour alone (colour-blind staff, greyscale printouts). ----- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.2;
}
.status-badge::before {
  font-family: "bootstrap-icons";
  font-size: .8em;
  font-weight: normal;
  line-height: 1;
}
.status-PENDING::before     { content: "\f41f"; } /* hourglass-split */
.status-CONFIRMED::before   { content: "\f26a"; } /* check-circle-fill */
.status-CHECKED_IN::before  { content: "\f307"; } /* door-open-fill */
.status-CHECKED_OUT::before { content: "\f1c3"; } /* box-arrow-right */
.status-CANCELLED::before   { content: "\f622"; } /* x-circle-fill */

/* ----- Stat cards: tinted icons, clickable to the list behind the number ----- */
.stat-card { border: 1px solid transparent; }
.stat-card .value small { font-size: .55em; font-weight: 600; color: var(--muted); }
.stat-link {
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-link:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(201, 161, 74, .35);
}
.stat-emerald .icon { background: rgba(15, 61, 49, .09); color: var(--emerald); }
.stat-gold .icon    { background: rgba(201, 161, 74, .18); color: #8a6a1f; }
.stat-warn .icon    { background: #fbe3dc; color: #b3361e; }
.stat-warn .value   { color: #b3361e; }

/* ----- Segmented filter (overview: Upcoming / Arriving / Leaving today) ----- */
.seg-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .25rem;
  border-radius: 50px;
  background: var(--sand);
  border: 1px solid var(--line);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 34px;
  padding: .3rem .85rem;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--emerald);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.seg-btn:hover { background: rgba(15, 61, 49, .07); }
.seg-btn[aria-pressed="true"] {
  background: var(--emerald);
  color: var(--sand);
  box-shadow: 0 2px 6px rgba(15, 61, 49, .2);
}
.seg-count {
  min-width: 1.4rem;
  padding: 0 .4rem;
  border-radius: 50px;
  background: rgba(201, 161, 74, .25);
  color: var(--emerald-deep);
  font-size: .72rem;
  line-height: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.seg-btn[aria-pressed="true"] .seg-count { background: var(--gold); color: var(--emerald-deep); }
@media (max-width: 575.98px) {
  .seg-filter { width: 100%; border-radius: var(--radius-sm); }
  .seg-btn { flex: 1 1 auto; justify-content: center; border-radius: var(--radius-sm); }
}

/* ----- Topbar: frosted, so content scrolling under it stays legible ----- */
.dash-topbar {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
          backdrop-filter: saturate(160%) blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(15, 61, 49, .04);
}

/* ----- Buttons & table rows: smooth (not instant) state changes ----- */
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn-gold:active, .btn-outline-gold:active { transform: translateY(1px); }

/* ----- Respect "reduce motion" system settings ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .stat-link:hover { transform: none; }
}

/* ==========================================================================
   Guest pages: rooms list, home, room page
   ========================================================================== */

/* ----- Rooms list: results bar (count · filter chips · sort) ----- */
.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-top: 1.75rem;
}
.results-bar + .section { padding-top: 1.5rem; }
.results-left { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.results-count { color: var(--ink); font-size: .95rem; }
.results-count strong { font-variant-numeric: tabular-nums; color: var(--emerald-deep); }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 32px;
  padding: .25rem .5rem .25rem .75rem;
  border-radius: 50px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--emerald-deep);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
[dir="rtl"] .filter-chip { padding: .25rem .75rem .25rem .5rem; }
.filter-chip .bi:first-child { color: var(--gold); }
.filter-chip .chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sand-dark);
  font-size: .6rem;
  transition: background-color .2s ease, color .2s ease;
}
.filter-chip:hover { border-color: var(--gold); color: var(--emerald-deep); }
.filter-chip:hover .chip-x { background: #b3361e; color: #fff; }
.filter-clear {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-clear:hover { color: #b3361e; }

.sort-form { display: flex; align-items: center; gap: .5rem; }
.sort-form .form-select {
  width: auto;
  border-radius: 50px;
  border-color: var(--line);
  font-weight: 600;
  color: var(--emerald-deep);
}
.sort-form .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201, 161, 74, .25); }
@media (max-width: 575.98px) {
  .sort-form { width: 100%; }
  .sort-form .form-select { flex: 1; }
}

/* ----- Home: why-book strip under the search bar ----- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
}
.trust-strip i {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 161, 74, .16);
  color: #8a6a1f;
  font-size: 1.2rem;
}
.trust-strip span { display: flex; flex-direction: column; line-height: 1.3; }
.trust-strip strong { color: var(--emerald-deep); font-size: .92rem; }
.trust-strip small { color: var(--muted); font-size: .8rem; }
@media (max-width: 767.98px) {
  .trust-strip { grid-template-columns: 1fr; gap: .6rem; }
}

/* ----- Room page: the guest's stay (availability + total) ----- */
.stay-box {
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  overflow: hidden;
}
.stay-avail {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  font-weight: 600;
  font-size: .9rem;
}
.stay-box.is-free .stay-avail  { background: #d8f0e6; color: #0f3d31; }
.stay-box.is-taken .stay-avail { background: #fbdada; color: #8a1d1d; }
.stay-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  font-weight: 600;
  color: var(--emerald-deep);
  font-variant-numeric: tabular-nums;
}
.stay-dates span { display: flex; flex-direction: column; }
.stay-dates small {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stay-arrow { color: var(--gold); }
[dir="rtl"] .stay-arrow { transform: scaleX(-1); }
.stay-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-top: 1px dashed var(--line);
  background: var(--sand);
  font-size: .88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stay-total strong { font-size: 1.15rem; color: var(--emerald-deep); }

/* ----- Pill-shaped selects ("Show [10] entries", rooms "Sort by") -----
   Bootstrap's small-select padding is too tight once the corners are fully
   rounded: the number ran into the dropdown arrow. Give the text and the
   arrow their own room (mirrored in Arabic, where the arrow sits on the left). */
.dt-container .dt-length select,
.sort-form .form-select {
  min-width: 4.75rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
  padding-left: .9rem;
  padding-right: 2.25rem;
  background-position: right .8rem center;
  background-size: 12px 9px;
}
[dir="rtl"] .dt-container .dt-length select,
[dir="rtl"] .sort-form .form-select {
  padding-left: 2.25rem;
  padding-right: .9rem;
  background-position: left .8rem center;
}