/* ==========================================================================
   استراحة | Estraha — Design System
   --------------------------------------------------------------------------
   1.  Tokens (colors, typography, radii, shadows, spacing)
   2.  Base & Reset
   3.  Typography
   4.  Layout helpers & Sections
   5.  Buttons
   6.  Forms & Inputs
   7.  Badges & Pills
   8.  Cards (Property / Category / Destination / Offer / Review)
   9.  Navbar & Mobile nav
   10. Footer
   11. Search bar
   12. Modals, Offcanvas, Dropdowns
   13. Toasts
   14. Skeletons, Empty & Error states
   15. Calendar / Booking widget
   16. Dashboard shell
   17. Utilities & Animations
   --------------------------------------------------------------------------
   NOTE: All directional spacing uses CSS Logical Properties
   (margin-inline / padding-inline / inset-inline / border-inline-start ...)
   so this file is direction-agnostic and is loaded for BOTH directions.

   ما لا تستطيع الخصائص المنطقية التعبير عنه — وهو قليل: اتجاه الحركة،
   قلب الأيقونات، واتجاه اللمعان — مكانه style.rtl.css و style.ltr.css.
   يُحمَّل هذا الملف أولًا ثم ملف الاتجاه، فلا تكرار ولا تباعد بينهما.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand — Grass Green */
  --es-brand-50:  #F2F7F0;
  --es-brand-100: #E3EEDF;
  --es-brand-200: #C6DCBE;
  --es-brand-300: #9DC492;
  --es-brand-400: #6BA35F;
  --es-brand-500: #3F7D3A;   /* Primary */
  --es-brand-600: #35692F;
  --es-brand-700: #28552A;   /* Primary dark */
  --es-brand-800: #1D3F20;

  --es-brand:      var(--es-brand-500);
  --es-brand-dark: var(--es-brand-700);
  --es-brand-soft: var(--es-brand-50);

  /* Accents */
  --es-gold:   #D89B21;   /* ratings */
  --es-gold-soft: #FBF3E0;
  --es-clay:   #C0562F;   /* offers / discount */
  --es-clay-soft: #FBEDE8;
  --es-sky:    #2C6E8F;   /* info */
  --es-sky-soft:  #E8F2F7;
  --es-danger: #B3261E;
  --es-danger-soft: #FBEAE9;
  --es-success: #2F7D46;
  --es-success-soft: #E9F5EC;
  --es-warn:   #B07407;
  --es-warn-soft: #FDF3E2;

  /* Neutrals — Light theme */
  --es-bg:        #FFFFFF;
  --es-bg-subtle: #F7FAF5;
  --es-surface:   #FFFFFF;
  --es-surface-2: #F7FAF5;
  --es-surface-3: #EFF4EC;
  --es-line:      #E5EBE3;
  --es-line-soft: #F0F4EE;
  --es-ink:       #13211B;
  --es-ink-2:     #3E4E45;
  --es-ink-3:     #6C7B72;
  --es-ink-4:     #93A199;
  --es-overlay:   rgba(12, 22, 17, .55);

  /* Typography */
  --es-font: "Tajawal", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --es-fs-display: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --es-fs-h1: clamp(1.65rem, 1.1rem + 2.2vw, 2.6rem);
  --es-fs-h2: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  --es-fs-h3: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  --es-fs-lead: clamp(1rem, .95rem + .35vw, 1.15rem);
  --es-fs-sm: .875rem;
  --es-fs-xs: .78rem;

  /* Radii */
  --es-r-xs: 8px;
  --es-r-sm: 12px;
  --es-r:    16px;
  --es-r-lg: 22px;
  --es-r-xl: 30px;
  --es-r-pill: 999px;

  /* Shadows */
  --es-shadow-xs: 0 1px 2px rgba(16, 27, 21, .05);
  --es-shadow-sm: 0 2px 6px rgba(16, 27, 21, .06);
  --es-shadow:    0 10px 28px -16px rgba(16, 27, 21, .28), 0 2px 6px rgba(16, 27, 21, .04);
  --es-shadow-lg: 0 24px 52px -26px rgba(16, 27, 21, .38), 0 4px 12px rgba(16, 27, 21, .05);
  --es-shadow-brand: 0 14px 30px -16px rgba(63, 125, 58, .55);

  /* Layout */
  --es-nav-h: 74px;
  --es-bottomnav-h: 66px;
  --es-container: 1240px;

  /* Motion */
  --es-t-fast: .16s cubic-bezier(.2, .7, .3, 1);
  --es-t:      .26s cubic-bezier(.2, .7, .3, 1);
  --es-t-slow: .45s cubic-bezier(.2, .7, .3, 1);

  /* Bootstrap bridge */
  --bs-body-font-family: var(--es-font);
  --bs-primary: var(--es-brand);
  --bs-primary-rgb: 63, 125, 58;
  --bs-body-color: var(--es-ink);
  --bs-body-bg: var(--es-bg);
  --bs-border-color: var(--es-line);
  --bs-link-color: var(--es-brand-600);
  --bs-link-hover-color: var(--es-brand-700);
  --bs-border-radius: var(--es-r-sm);
  --bs-focus-ring-color: rgba(63, 125, 58, .28);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--es-font);
  background-color: var(--es-bg);
  color: var(--es-ink);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--es-t), color var(--es-t);
}

body.has-bottomnav { padding-block-end: calc(var(--es-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }

img { max-width: 100%; height: auto; }

a { color: var(--es-brand-600); text-decoration: none; transition: color var(--es-t-fast); }
a:hover { color: var(--es-brand-700); }

hr { border-color: var(--es-line); opacity: 1; }

::selection { background: var(--es-brand-200); color: var(--es-brand-800); }

/* Focus visibility (accessibility) */
:focus-visible {
  outline: 3px solid rgba(63, 125, 58, .45);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible { outline-offset: 1px; }

/* Scrollbar */
.es-scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.es-scroll-x::-webkit-scrollbar { height: 6px; }
.es-scroll-x::-webkit-scrollbar-thumb { background: var(--es-line); border-radius: 999px; }
.es-hide-scroll { scrollbar-width: none; }
.es-hide-scroll::-webkit-scrollbar { display: none; }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -100px;
  z-index: 2000;
  background: var(--es-brand);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--es-r-xs);
  transition: inset-block-start var(--es-t);
}
.skip-link:focus { inset-block-start: 1rem; color: #fff; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  font-weight: 800;
  color: var(--es-ink);
  line-height: 1.32;
  letter-spacing: -.01em;
}
.es-display { font-size: var(--es-fs-display); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
h1, .h1 { font-size: var(--es-fs-h1); }
h2, .h2 { font-size: var(--es-fs-h2); }
h3, .h3 { font-size: var(--es-fs-h3); }
.es-lead { font-size: var(--es-fs-lead); color: var(--es-ink-2); line-height: 1.75; }
.es-muted { color: var(--es-ink-3); }
.es-tiny  { font-size: var(--es-fs-xs); }
.es-sm    { font-size: var(--es-fs-sm); }
.es-strong { font-weight: 700; }
.es-num { font-variant-numeric: tabular-nums; }

.es-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--es-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--es-brand-600);
  background: var(--es-brand-soft);
  border: 1px solid var(--es-brand-100);
  padding: .32rem .8rem;
  border-radius: var(--es-r-pill);
}

.es-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  color: var(--es-brand-600);
}
.es-link-arrow i { transition: transform var(--es-t-fast); }

/* ==========================================================================
   4. LAYOUT & SECTIONS
   ========================================================================== */
.es-container {
  width: 100%;
  max-width: var(--es-container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.es-container-wide { max-width: 1600px; }

.es-section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.es-section-tight { padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.es-section-subtle { background: var(--es-bg-subtle); }

.es-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.8rem;
  flex-wrap: wrap;
}
.es-section-head p { margin: .35rem 0 0; color: var(--es-ink-3); }
.es-section-head h2 { margin: 0; }

.es-divider { height: 1px; background: var(--es-line); border: 0; margin-block: 1.5rem; }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
  --bs-btn-padding-y: .72rem;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--es-r-sm);
  font-family: var(--es-font);
  line-height: 1.4;
  transition: background-color var(--es-t-fast), color var(--es-t-fast),
              border-color var(--es-t-fast), transform var(--es-t-fast), box-shadow var(--es-t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--es-brand);
  --bs-btn-border-color: var(--es-brand);
  --bs-btn-hover-bg: var(--es-brand-600);
  --bs-btn-hover-border-color: var(--es-brand-600);
  --bs-btn-active-bg: var(--es-brand-700);
  --bs-btn-active-border-color: var(--es-brand-700);
  --bs-btn-disabled-bg: var(--es-brand-300);
  --bs-btn-disabled-border-color: var(--es-brand-300);
  color: #fff;
  box-shadow: var(--es-shadow-brand);
}
.btn-primary:hover { color: #fff; }

.btn-outline-primary {
  --bs-btn-color: var(--es-brand-600);
  --bs-btn-border-color: var(--es-brand-200);
  --bs-btn-hover-bg: var(--es-brand-soft);
  --bs-btn-hover-border-color: var(--es-brand-400);
  --bs-btn-hover-color: var(--es-brand-700);
  --bs-btn-active-bg: var(--es-brand-100);
  --bs-btn-active-color: var(--es-brand-700);
  background: transparent;
}

.btn-soft {
  background: var(--es-surface-2);
  border: 1px solid var(--es-line);
  color: var(--es-ink);
}
.btn-soft:hover { background: var(--es-surface-3); color: var(--es-ink); border-color: var(--es-line); }

.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--es-ink-2); }
.btn-ghost:hover { background: var(--es-surface-2); color: var(--es-ink); }

.btn-dark-solid { background: var(--es-ink); color: #fff; border: 1px solid var(--es-ink); }
.btn-dark-solid:hover { background: #000; color: #fff; }

.btn-lg { --bs-btn-padding-y: .95rem; --bs-btn-padding-x: 1.8rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: var(--es-r); }
.btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: var(--es-fs-sm); --bs-btn-border-radius: var(--es-r-xs); }
.btn-pill { --bs-btn-border-radius: var(--es-r-pill); }
.btn-block-mobile { width: 100%; }

/* Icon-only round button */
.es-icon-btn {
  inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--es-r-pill);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink-2);
  font-size: 1.15rem;
  cursor: pointer;
  transition: all var(--es-t-fast);
  flex: 0 0 auto;
  padding: 0;
}
.es-icon-btn:hover { background: var(--es-surface-2); color: var(--es-ink); border-color: var(--es-line); }
.es-icon-btn.is-sm { inline-size: 38px; block-size: 38px; font-size: 1rem; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.form-label { font-weight: 700; font-size: var(--es-fs-sm); color: var(--es-ink-2); margin-block-end: .4rem; }
.form-text { color: var(--es-ink-3); font-size: var(--es-fs-xs); }

.form-control,
.form-select {
  background-color: var(--es-surface);
  border: 1px solid var(--es-line);
  color: var(--es-ink);
  border-radius: var(--es-r-sm);
  padding: .78rem 1rem;
  font-size: 1rem;
  font-family: var(--es-font);
  transition: border-color var(--es-t-fast), box-shadow var(--es-t-fast), background-color var(--es-t-fast);
}
.form-control::placeholder { color: var(--es-ink-4); }
.form-control:focus,
.form-select:focus {
  background-color: var(--es-surface);
  border-color: var(--es-brand-400);
  color: var(--es-ink);
  box-shadow: 0 0 0 4px rgba(63, 125, 58, .14);
}
.form-control:disabled, .form-select:disabled { background: var(--es-surface-3); color: var(--es-ink-4); }

.form-control-lg { padding: 1rem 1.15rem; font-size: 1.05rem; border-radius: var(--es-r); }

.input-group-text {
  background: var(--es-surface-2);
  border-color: var(--es-line);
  color: var(--es-ink-3);
}

.es-input-icon { position: relative; }
.es-input-icon .form-control { padding-inline-start: 2.85rem; }
.es-input-icon > i {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--es-ink-4);
  pointer-events: none;
  font-size: 1.05rem;
}

.form-check-input { border-color: var(--es-line); background-color: var(--es-surface); width: 1.15em; height: 1.15em; margin-top: .22em; }
.form-check-input:checked { background-color: var(--es-brand); border-color: var(--es-brand); }
.form-check-input:focus { border-color: var(--es-brand-400); box-shadow: 0 0 0 4px rgba(63, 125, 58, .14); }
.form-check-label { color: var(--es-ink-2); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; margin-top: .1em; }

.form-range::-webkit-slider-thumb { background: var(--es-brand); }
.form-range::-moz-range-thumb { background: var(--es-brand); }
.form-range::-webkit-slider-runnable-track { background: var(--es-surface-3); }

/* Segmented control */
.es-segment {
  display: inline-flex;
  background: var(--es-surface-2);
  border: 1px solid var(--es-line);
  border-radius: var(--es-r-pill);
  padding: 4px;
  gap: 2px;
}
.es-segment button {
  border: 0;
  background: transparent;
  color: var(--es-ink-2);
  font-weight: 700;
  font-size: var(--es-fs-sm);
  padding: .45rem 1rem;
  border-radius: var(--es-r-pill);
  cursor: pointer;
  transition: all var(--es-t-fast);
  white-space: nowrap;
}
.es-segment button.active { background: var(--es-surface); color: var(--es-brand-700); box-shadow: var(--es-shadow-xs); }

/* Chip / filter pill */
.es-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--es-r-pill);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink-2);
  font-size: var(--es-fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--es-t-fast);
}
.es-chip:hover { border-color: var(--es-brand-300); color: var(--es-ink); }
.es-chip.active {
  background: var(--es-brand-soft);
  border-color: var(--es-brand-400);
  color: var(--es-brand-700);
}
.es-chip .bi { font-size: 1rem; }

/* Stepper (guests) */
.es-stepper { display: inline-flex; align-items: center; gap: .75rem; }
.es-stepper button {
  inline-size: 36px; block-size: 36px;
  border-radius: var(--es-r-pill);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--es-t-fast);
}
.es-stepper button:hover:not(:disabled) { border-color: var(--es-brand-400); color: var(--es-brand-600); }
.es-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.es-stepper output { min-inline-size: 2.2rem; text-align: center; font-weight: 700; }

/* ==========================================================================
   7. BADGES
   ========================================================================== */
.es-badge {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: var(--es-fs-xs);
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: var(--es-r-pill);
  line-height: 1.5;
  white-space: nowrap;
}
.es-badge-verified { background: var(--es-brand-soft); color: var(--es-brand-700); border: 1px solid var(--es-brand-200); }
.es-badge-gold     { background: var(--es-gold-soft); color: #8A6207; border: 1px solid #F0DFB4; }
.es-badge-clay     { background: var(--es-clay-soft); color: var(--es-clay); border: 1px solid #F3D6CB; }
.es-badge-sky      { background: var(--es-sky-soft); color: var(--es-sky); border: 1px solid #CFE2EC; }
.es-badge-neutral  { background: var(--es-surface-3); color: var(--es-ink-2); border: 1px solid var(--es-line); }
.es-badge-success  { background: var(--es-success-soft); color: var(--es-success); border: 1px solid #C9E6D2; }
.es-badge-danger   { background: var(--es-danger-soft); color: var(--es-danger); border: 1px solid #F2CFCC; }
.es-badge-warn     { background: var(--es-warn-soft); color: var(--es-warn); border: 1px solid #F2DFBB; }
.es-badge-glass {
  background: rgba(255, 255, 255, .92);
  color: var(--es-ink);
  backdrop-filter: blur(8px);
  box-shadow: var(--es-shadow-xs);
  max-inline-size: calc(100% - 2rem);
  white-space: normal;
}

.es-rating { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--es-ink); }
.es-rating .bi { color: var(--es-gold); }
.es-rating small { font-weight: 500; color: var(--es-ink-3); }

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.es-card {
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  box-shadow: var(--es-shadow-xs);
  transition: box-shadow var(--es-t), transform var(--es-t), border-color var(--es-t);
  position: relative;
}
.es-card-pad { padding: clamp(1.1rem, .9rem + .6vw, 1.6rem); }
.es-card-hover:hover { box-shadow: var(--es-shadow); transform: translateY(-3px); border-color: var(--es-line); }

/* ---- Property card ---- */
.es-prop {
  background: var(--es-surface);
  border-radius: var(--es-r);
  overflow: hidden;
  border: 1px solid var(--es-line);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--es-t), transform var(--es-t);
}
.es-prop:hover { box-shadow: var(--es-shadow); transform: translateY(-4px); }
.es-prop:hover .es-prop-img img { transform: scale(1.06); }

.es-prop-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--es-surface-3);
}
.es-prop-img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--es-t-slow);
}
.es-prop-img::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 42%;
  background: linear-gradient(to top, rgba(10, 20, 15, .45), transparent);
  pointer-events: none;
  opacity: .85;
}
.es-prop-tags {
  position: absolute;
  inset-block-start: .8rem;
  inset-inline-start: .8rem;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  z-index: 2;
  max-inline-size: calc(100% - 4.5rem);
}
.es-fav {
  position: absolute;
  inset-block-start: .7rem;
  inset-inline-end: .7rem;
  z-index: 3;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--es-r-pill);
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--es-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--es-shadow-xs);
  transition: transform var(--es-t-fast), color var(--es-t-fast), background var(--es-t-fast);
}
.es-fav:hover { transform: scale(1.08); background: #fff; }
.es-fav.is-active { color: var(--es-clay); }
.es-fav.is-active .bi::before { content: "\F415"; } /* bi-heart-fill */
.es-fav.pop { animation: esPop .34s cubic-bezier(.2, .9, .3, 1.4); }

/* زرّ المفضلة ذو النص (صفحة عرض المكان): لا يكفيه is-active لأنه .btn لا .es-fav،
   فحالته المفعّلة معرّفة هنا صراحة ونصّه وأيقونته يبدّلهما الجافاسكربت */
.btn.es-fav-btn { transition: color var(--es-t-fast), background var(--es-t-fast), border-color var(--es-t-fast); }
.btn.es-fav-btn.es-fav-on {
    color: var(--es-clay);
    background: var(--es-clay-soft);
    border-color: var(--es-clay);
}
.btn.es-fav-btn.es-fav-on .bi { color: var(--es-clay); }
.btn.es-fav-btn.pop { animation: esPop .34s cubic-bezier(.2, .9, .3, 1.4); }

/* مدخل المفضلة في الشريط العلوي — الشارة تُرسى عليه كما تُرسى على الجرس */
.es-fav-link { position: relative; text-decoration: none; }
.es-fav-link:hover { color: var(--es-clay); border-color: var(--es-clay); background: var(--es-clay-soft); }

.es-prop-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; }
.es-prop-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--es-ink);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.es-prop-meta { display: flex; align-items: center; gap: .35rem; color: var(--es-ink-3); font-size: var(--es-fs-sm); }
.es-prop-feats { display: flex; flex-wrap: wrap; gap: .5rem .9rem; color: var(--es-ink-3); font-size: var(--es-fs-xs); }
.es-prop-feats span { display: inline-flex; align-items: center; gap: .28rem; }
.es-prop-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  margin-block-start: auto;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--es-line-soft);
}
.es-price { display: flex; flex-direction: column; line-height: 1.25; }
.es-price small { color: var(--es-ink-3); font-size: var(--es-fs-xs); }
.es-price b { font-size: 1.15rem; font-weight: 800; color: var(--es-ink); }
.es-price b span { font-size: .8rem; font-weight: 600; color: var(--es-ink-3); }
.es-price .es-price-old { text-decoration: line-through; color: var(--es-ink-4); font-size: var(--es-fs-sm); font-weight: 600; }

/* Horizontal variant (list view / map side list) */
.es-prop-h { flex-direction: row; }
.es-prop-h .es-prop-img { aspect-ratio: auto; inline-size: 38%; min-inline-size: 130px; flex: 0 0 auto; }
.es-prop-h .es-prop-body { padding: .85rem 1rem; }

/* ---- Category card ---- */
.es-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1.4rem .75rem;
  border-radius: var(--es-r);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink);
  text-align: center;
  transition: all var(--es-t);
  block-size: 100%;
}
.es-cat:hover { border-color: var(--es-brand-300); background: var(--es-brand-soft); color: var(--es-brand-700); transform: translateY(-3px); }
.es-cat .es-cat-ico {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--es-r);
  background: var(--es-brand-soft);
  color: var(--es-brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: all var(--es-t);
}
.es-cat:hover .es-cat-ico { background: var(--es-brand); color: #fff; }
.es-cat b { font-size: .98rem; font-weight: 700; }
.es-cat small { color: var(--es-ink-3); font-size: var(--es-fs-xs); }
.es-cat:hover small { color: var(--es-brand-600); }

/* ---- Destination card ---- */
.es-dest {
  position: relative;
  display: block;
  border-radius: var(--es-r);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  color: #fff;
  isolation: isolate;
}
.es-dest img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--es-t-slow); }
.es-dest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 18, 13, .85) 4%, rgba(9, 18, 13, .18) 52%, rgba(9, 18, 13, .05));
  z-index: 1;
}
.es-dest:hover img { transform: scale(1.07); }
.es-dest-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.1rem;
  z-index: 2;
}
.es-dest-body b { display: block; font-size: 1.15rem; font-weight: 800; color: #fff; }
.es-dest-body span { font-size: var(--es-fs-sm); color: rgba(255, 255, 255, .82); }
.es-dest.is-wide { aspect-ratio: 16 / 10; }

/* ---- Offer card ---- */
.es-offer { position: relative; overflow: hidden; }
.es-offer-ribbon {
  position: absolute;
  inset-block-start: .8rem;
  inset-inline-start: .8rem;
  background: var(--es-clay);
  color: #fff;
  font-weight: 800;
  font-size: var(--es-fs-xs);
  padding: .35rem .75rem;
  border-radius: var(--es-r-pill);
  z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(192, 86, 47, .8);
}

/* ---- Feature / step card ---- */
.es-feature { display: flex; gap: 1rem; align-items: flex-start; }
.es-feature-ico {
  flex: 0 0 auto;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--es-r-sm);
  background: var(--es-brand-soft);
  color: var(--es-brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}
.es-feature h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.es-feature p { margin: 0; color: var(--es-ink-3); font-size: var(--es-fs-sm); }

.es-step { position: relative; text-align: center; padding: 1.5rem 1rem; }
.es-step-num {
  inline-size: 62px;
  block-size: 62px;
  margin-inline: auto;
  margin-block-end: 1rem;
  border-radius: var(--es-r-pill);
  background: var(--es-surface);
  border: 2px solid var(--es-brand-200);
  color: var(--es-brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  position: relative;
  z-index: 2;
  transition: all var(--es-t);
}
.es-step:hover .es-step-num { background: var(--es-brand); border-color: var(--es-brand); color: #fff; transform: translateY(-4px); }
.es-step b { display: block; font-size: 1.05rem; margin-block-end: .3rem; }
.es-step p { color: var(--es-ink-3); font-size: var(--es-fs-sm); margin: 0; }
.es-step-line {
  position: absolute;
  inset-block-start: 31px;
  inset-inline-start: 50%;
  inline-size: 100%;
  border-block-start: 2px dashed var(--es-line);
  z-index: 1;
}

/* ---- Review card ---- */
.es-review { display: flex; flex-direction: column; gap: .85rem; block-size: 100%; }
.es-review-head { display: flex; align-items: center; gap: .75rem; }
.es-avatar {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--es-r-pill);
  object-fit: cover;
  background: var(--es-brand-soft);
  color: var(--es-brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 auto;
  font-size: 1.05rem;
}
.es-avatar-lg { inline-size: 74px; block-size: 74px; font-size: 1.5rem; }
.es-avatar-sm { inline-size: 34px; block-size: 34px; font-size: .85rem; }
.es-review p { color: var(--es-ink-2); margin: 0; font-size: var(--es-fs-sm); line-height: 1.85; }
.es-review-foot { display: flex; align-items: center; gap: .5rem; color: var(--es-ink-3); font-size: var(--es-fs-xs); margin-block-start: auto; padding-block-start: .5rem; }
.es-stars { color: var(--es-gold); letter-spacing: 1px; font-size: .9rem; }

/* ---- Stat card (dashboards) ---- */
.es-stat { display: flex; align-items: flex-start; gap: 1rem; }
.es-stat-ico {
  inline-size: 46px; block-size: 46px; border-radius: var(--es-r-sm);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto;
}
.es-stat-val { font-size: 1.6rem; font-weight: 800; line-height: 1.2; display: block; }
.es-stat-lbl { color: var(--es-ink-3); font-size: var(--es-fs-sm); }
.es-trend { font-size: var(--es-fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: .2rem; }
.es-trend.up { color: var(--es-success); }
.es-trend.down { color: var(--es-danger); }

/* ==========================================================================
   9. NAVBAR
   ========================================================================== */
.es-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 1040;
  background: var(--es-surface);
  border-block-end: 1px solid var(--es-line);
  transition: box-shadow var(--es-t), background-color var(--es-t);
}
.es-nav.is-stuck { box-shadow: var(--es-shadow-sm); }
.es-nav-inner {
  min-block-size: var(--es-nav-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.es-logo { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.es-logo-mark {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--es-brand-400), var(--es-brand-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: var(--es-shadow-brand);
  flex: 0 0 auto;
}
.es-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.es-logo-text b { font-size: 1.22rem; font-weight: 800; color: var(--es-ink); letter-spacing: -.01em; }
.es-logo-text small { font-size: .68rem; color: var(--es-ink-3); font-weight: 600; }

.es-nav-links { display: flex; align-items: center; gap: .15rem; margin-inline-start: 1.25rem; }
.es-nav-links a {
  padding: .55rem .9rem;
  border-radius: var(--es-r-xs);
  color: var(--es-ink-2);
  font-weight: 600;
  font-size: .96rem;
  transition: all var(--es-t-fast);
  white-space: nowrap;
}
.es-nav-links a:hover { background: var(--es-surface-2); color: var(--es-ink); }
.es-nav-links a.active { color: var(--es-brand-600); background: var(--es-brand-soft); }
.es-nav-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }

.es-lang-btn {
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink-2);
  border-radius: var(--es-r-pill);
  padding: .48rem .95rem;
  font-weight: 700;
  font-size: var(--es-fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: all var(--es-t-fast);
}
.es-lang-btn:hover { border-color: var(--es-brand-300); color: var(--es-brand-700); }

.es-theme-btn .bi { transition: transform var(--es-t); }
.es-theme-btn:active .bi { transform: rotate(45deg) scale(.9); }

/* User dropdown */
.dropdown-menu {
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  box-shadow: var(--es-shadow-lg);
  background: var(--es-surface);
  padding: .5rem;
  min-inline-size: 232px;
}
.dropdown-item {
  border-radius: var(--es-r-xs);
  padding: .6rem .8rem;
  color: var(--es-ink-2);
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--es-surface-2); color: var(--es-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--es-brand-soft); color: var(--es-brand-700); }
.dropdown-divider { border-color: var(--es-line); }
.dropdown-header { color: var(--es-ink-3); font-size: var(--es-fs-xs); font-weight: 700; }

/* Mobile bottom navigation */
.es-bottomnav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1045;
  background: var(--es-surface);
  border-block-start: 1px solid var(--es-line);
  box-shadow: 0 -6px 22px -14px rgba(16, 27, 21, .4);
  padding-block-end: env(safe-area-inset-bottom, 0px);
  display: none;
}
.es-bottomnav-inner { display: flex; align-items: stretch; block-size: var(--es-bottomnav-h); }
.es-bottomnav a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  color: var(--es-ink-3);
  font-size: .7rem;
  font-weight: 700;
  padding-block: .35rem;
  position: relative;
  transition: color var(--es-t-fast);
}
.es-bottomnav a .bi { font-size: 1.35rem; }
.es-bottomnav a.active { color: var(--es-brand-600); }
.es-bottomnav a.active::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  left: 50%;   /* فيزيائي عمدًا: يقابل translateX الفيزيائي */
  transform: translateX(-50%);
  inline-size: 30px;
  block-size: 3px;
  border-radius: 0 0 6px 6px;
  background: var(--es-brand);
}
.es-bottomnav .es-bn-badge {
  position: absolute;
  inset-block-start: .3rem;
  inset-inline-end: 50%;
  margin-inline-end: -1.15rem;
  background: var(--es-clay);
  color: #fff;
  font-size: .6rem;
  min-inline-size: 17px;
  block-size: 17px;
  border-radius: var(--es-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.es-footer { background: var(--es-surface-2); border-block-start: 1px solid var(--es-line); padding-block: 3.5rem 1.5rem; }
.es-footer h4 { font-size: .95rem; font-weight: 800; margin-block-end: 1rem; color: var(--es-ink); }
.es-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.es-footer ul a { color: var(--es-ink-3); font-size: var(--es-fs-sm); font-weight: 500; }
.es-footer ul a:hover { color: var(--es-brand-600); }
.es-footer-bottom {
  margin-block-start: 2.5rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--es-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--es-ink-3);
  font-size: var(--es-fs-sm);
}
.es-social { display: flex; gap: .5rem; }
.es-social a {
  inline-size: 40px; block-size: 40px;
  border-radius: var(--es-r-pill);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: all var(--es-t-fast);
}
.es-social a:hover { background: var(--es-brand); border-color: var(--es-brand); color: #fff; transform: translateY(-2px); }

.es-store-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: var(--es-r-sm);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink);
  transition: all var(--es-t-fast);
  min-inline-size: 150px;
}
.es-store-btn:hover { border-color: var(--es-brand-300); color: var(--es-ink); transform: translateY(-2px); box-shadow: var(--es-shadow-sm); }
.es-store-btn .bi { font-size: 1.6rem; color: var(--es-ink); }
.es-store-btn span { display: flex; flex-direction: column; line-height: 1.2; text-align: start; }
.es-store-btn small { font-size: .66rem; color: var(--es-ink-3); }
.es-store-btn b { font-size: .95rem; font-weight: 700; }
.es-store-btn.on-dark { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; }
.es-store-btn.on-dark .bi, .es-store-btn.on-dark b { color: #fff; }
.es-store-btn.on-dark small { color: rgba(255, 255, 255, .75); }

/* ==========================================================================
   11. HERO & SEARCH
   ========================================================================== */
.es-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 7vw, 6.5rem) clamp(6rem, 4rem + 8vw, 8rem);
  color: #fff;
  overflow: hidden;
}
.es-hero-bg { position: absolute; inset: 0; z-index: -2; }
.es-hero-bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.es-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(9, 20, 14, .66), rgba(9, 20, 14, .5) 45%, rgba(9, 20, 14, .82)),
    radial-gradient(90% 70% at 50% 0%, rgba(63, 125, 58, .25), transparent 70%);
}
.es-hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .28); }
.es-hero p { color: rgba(255, 255, 255, .92); max-inline-size: 46ch; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.es-hero .es-eyebrow {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.es-hero-stats { display: flex; gap: 2rem; flex-wrap: wrap; margin-block-start: 2rem; }
.es-hero-stats div b { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; }
.es-hero-stats div span { font-size: var(--es-fs-sm); color: rgba(255, 255, 255, .78); }

/* Search widget */
.es-search {
  background: var(--es-surface);
  border-radius: var(--es-r-lg);
  box-shadow: var(--es-shadow-lg);
  border: 1px solid var(--es-line);
  padding: .55rem;
  display: flex;
  align-items: stretch;
  gap: .25rem;
}
.es-search-float { margin-block-start: 2.5rem; position: relative; z-index: 3; }
/* The hero creates its own stacking context (isolation), so the lifted search
   card must be positioned to paint above it — without this it disappears
   behind the hero image. */
.es-search-lifted { margin-block-start: -4.5rem; position: relative; z-index: 5; }
.es-search-lifted .es-search { box-shadow: var(--es-shadow-lg); }
.es-search-field {
  flex: 1 1 0;
  min-inline-size: 0;
  padding: .7rem 1.1rem;
  border-radius: var(--es-r);
  cursor: pointer;
  transition: background var(--es-t-fast);
  position: relative;
  border: 0;
  background: transparent;
  text-align: start;
}
.es-search-field:hover { background: var(--es-surface-2); }
.es-search-field + .es-search-field::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .55rem;
  inline-size: 1px;
  background: var(--es-line);
}
.es-search-field label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--es-fs-xs);
  font-weight: 800;
  color: var(--es-ink-2);
  margin: 0 0 .1rem;
  cursor: pointer;
}
.es-search-field label .bi { color: var(--es-brand); }
.es-search-field input,
.es-search-field select {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--es-ink);
  font-size: .96rem;
  font-family: var(--es-font);
  inline-size: 100%;
  outline: none;
  font-weight: 600;
}
.es-search-field input::placeholder { color: var(--es-ink-4); font-weight: 500; }
.es-search-field input[type="date"] { color: var(--es-ink); }
.es-search-submit {
  flex: 0 0 auto;
  border-radius: var(--es-r);
  padding-inline: 1.6rem;
  font-weight: 800;
}

/* Compact search (inner pages) */
.es-search-compact { padding: .4rem; border-radius: var(--es-r-pill); box-shadow: var(--es-shadow-sm); }
.es-search-compact .es-search-field { padding: .45rem 1rem; }
.es-search-compact .es-search-submit { border-radius: var(--es-r-pill); inline-size: 46px; padding-inline: 0; }

/* Suggestions dropdown */
.es-suggest {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  inline-size: min(340px, 90vw);
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  box-shadow: var(--es-shadow-lg);
  padding: .5rem;
  z-index: 30;
  max-block-size: 300px;
  overflow-y: auto;
}
.es-suggest button {
  display: flex;
  align-items: center;
  gap: .6rem;
  inline-size: 100%;
  border: 0;
  background: transparent;
  padding: .55rem .7rem;
  border-radius: var(--es-r-xs);
  color: var(--es-ink-2);
  font-weight: 600;
  font-size: .93rem;
  text-align: start;
  cursor: pointer;
}
.es-suggest button:hover { background: var(--es-surface-2); color: var(--es-ink); }
.es-suggest .bi { color: var(--es-brand); }

/* ==========================================================================
   12. MAP
   ========================================================================== */
.es-map {
  position: relative;
  border-radius: var(--es-r);
  overflow: hidden;
  border: 1px solid var(--es-line);
  background:
    radial-gradient(circle at 22% 28%, rgba(63, 125, 58, .16), transparent 42%),
    radial-gradient(circle at 76% 68%, rgba(44, 110, 143, .14), transparent 45%),
    var(--es-surface-2);
  min-block-size: 380px;
}
.es-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--es-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--es-line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .5;
}
.es-map::after {
  content: "";
  position: absolute;
  inset-block-start: 20%;
  inset-inline-start: -10%;
  inline-size: 130%;
  block-size: 34%;
  background: linear-gradient(90deg, transparent, rgba(44, 110, 143, .18), transparent);
  transform: rotate(-8deg);
  border-radius: 50%;
}
.es-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 4;
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-r-pill);
  padding: .35rem .8rem;
  font-weight: 800;
  font-size: var(--es-fs-xs);
  color: var(--es-ink);
  box-shadow: var(--es-shadow);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--es-t-fast);
}
.es-pin:hover, .es-pin.active { background: var(--es-brand); color: #fff; border-color: var(--es-brand); transform: translate(-50%, -100%) scale(1.06); }
.es-pin::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  left: 50%;   /* فيزيائي عمدًا: يقابل translateX الفيزيائي */
  transform: translateX(-50%) rotate(45deg);
  inline-size: 9px;
  block-size: 9px;
  background: inherit;
  border-inline-end: 1px solid var(--es-line);
  border-block-end: 1px solid var(--es-line);
}
.es-pin.active::after, .es-pin:hover::after { border-color: var(--es-brand); }
.es-map-me {
  position: absolute;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--es-sky);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(44, 110, 143, .22);
  z-index: 3;
}
.es-map-ctrl {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 5;
  display: grid;
  gap: .4rem;
}
.es-map-ctrl button {
  inline-size: 40px; block-size: 40px;
  border-radius: var(--es-r-xs);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  color: var(--es-ink-2);
  box-shadow: var(--es-shadow-xs);
  cursor: pointer;
}
.es-map-ctrl button:hover { color: var(--es-brand-600); }

/* ==========================================================================
   13. MODALS / OFFCANVAS
   ========================================================================== */
.modal-content {
  border: 1px solid var(--es-line);
  border-radius: var(--es-r-lg);
  background: var(--es-surface);
  box-shadow: var(--es-shadow-lg);
  color: var(--es-ink);
}
.modal-header, .modal-footer { border-color: var(--es-line); padding: 1.15rem 1.4rem; }
.modal-body { padding: 1.4rem; }
.modal-title { font-weight: 800; font-size: 1.15rem; }
.modal-backdrop.show { opacity: .55; }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 4px rgba(63,125,58,.14); border-radius: var(--es-r-pill); padding: .6rem; }

.offcanvas { background: var(--es-surface); color: var(--es-ink); border-color: var(--es-line); }
.offcanvas-header { border-block-end: 1px solid var(--es-line); padding: 1.1rem 1.25rem; }
.offcanvas-title { font-weight: 800; }

.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--es-line); --bs-accordion-btn-color: var(--es-ink); --bs-accordion-color: var(--es-ink-2); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--es-brand-700); --bs-accordion-btn-focus-box-shadow: none; }
.accordion-button { font-weight: 700; padding-inline: 0; background: transparent; }
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { padding-inline: 0; }

.nav-tabs { --bs-nav-tabs-border-color: var(--es-line); --bs-nav-link-color: var(--es-ink-3); --bs-nav-tabs-link-active-color: var(--es-brand-700); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--es-brand); gap: .25rem; }
.nav-tabs .nav-link { font-weight: 700; border-width: 0 0 2px; padding: .7rem 1rem; }
.nav-tabs .nav-link:hover { border-color: transparent transparent var(--es-line); color: var(--es-ink); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--es-ink); --bs-table-border-color: var(--es-line); --bs-table-hover-bg: var(--es-surface-2); --bs-table-hover-color: var(--es-ink); vertical-align: middle; }
.table > :not(caption) > * > * { padding: .9rem .85rem; }
.table thead th { color: var(--es-ink-3); font-size: var(--es-fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-block-end-width: 1px; white-space: nowrap; }

.pagination { --bs-pagination-color: var(--es-ink-2); --bs-pagination-bg: var(--es-surface); --bs-pagination-border-color: var(--es-line); --bs-pagination-hover-bg: var(--es-surface-2); --bs-pagination-hover-color: var(--es-ink); --bs-pagination-active-bg: var(--es-brand); --bs-pagination-active-border-color: var(--es-brand); --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(63,125,58,.14); --bs-pagination-disabled-bg: var(--es-surface-2); --bs-pagination-disabled-color: var(--es-ink-4); --bs-pagination-disabled-border-color: var(--es-line); gap: .3rem; }
.page-link { border-radius: var(--es-r-xs) !important; min-inline-size: 42px; text-align: center; font-weight: 700; }

.progress { background: var(--es-surface-3); border-radius: var(--es-r-pill); }
.progress-bar { background: var(--es-brand); }

/* ==========================================================================
   14. TOASTS
   ========================================================================== */
.es-toast-wrap {
  position: fixed;
  inset-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 1.25rem;
  z-index: 1090;
  display: grid;
  gap: .6rem;
  inline-size: min(360px, calc(100vw - 2.5rem));
}
.es-toast {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-inline-start: 4px solid var(--es-brand);
  border-radius: var(--es-r-sm);
  box-shadow: var(--es-shadow-lg);
  padding: .9rem 1rem;
  animation: esToastIn .3s cubic-bezier(.2, .8, .3, 1.1);
}
.es-toast.is-out { animation: esToastOut .25s ease forwards; }
.es-toast .bi { font-size: 1.2rem; color: var(--es-brand); flex: 0 0 auto; margin-block-start: .1rem; }
.es-toast-body { flex: 1 1 auto; font-size: var(--es-fs-sm); font-weight: 600; color: var(--es-ink); line-height: 1.6; }
.es-toast-body small { display: block; font-weight: 500; color: var(--es-ink-3); }
.es-toast button.es-toast-x { border: 0; background: transparent; color: var(--es-ink-4); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; }
.es-toast.type-success { border-inline-start-color: var(--es-success); }
.es-toast.type-success .bi { color: var(--es-success); }
.es-toast.type-error { border-inline-start-color: var(--es-danger); }
.es-toast.type-error .bi { color: var(--es-danger); }
.es-toast.type-warn { border-inline-start-color: var(--es-warn); }
.es-toast.type-warn .bi { color: var(--es-warn); }
.es-toast.type-info { border-inline-start-color: var(--es-sky); }
.es-toast.type-info .bi { color: var(--es-sky); }

/* ==========================================================================
   15. SKELETONS / EMPTY / ERROR
   ========================================================================== */
.es-skel {
  position: relative;
  overflow: hidden;
  background: var(--es-surface-3);
  border-radius: var(--es-r-xs);
}
.es-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: esShimmer 1.4s infinite;
}
.es-skel-line { block-size: 12px; margin-block-end: .55rem; border-radius: 6px; }
.es-skel-line.w-60 { inline-size: 60%; }
.es-skel-line.w-40 { inline-size: 40%; }
.es-skel-line.w-80 { inline-size: 80%; }
.es-skel-img { aspect-ratio: 4 / 3; border-radius: 0; }
.es-skel-circle { border-radius: 50%; }

.es-empty { text-align: center; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.25rem; max-inline-size: 460px; margin-inline: auto; }
.es-empty-art {
  inline-size: 112px;
  block-size: 112px;
  margin-inline: auto;
  margin-block-end: 1.4rem;
  border-radius: var(--es-r-lg);
  background: var(--es-brand-soft);
  color: var(--es-brand-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border: 1px solid var(--es-brand-100);
}
.es-empty h3 { margin-block-end: .5rem; }
.es-empty p { color: var(--es-ink-3); margin-block-end: 1.5rem; }

.es-error-page { min-block-size: 72vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.es-error-code {
  font-size: clamp(4.5rem, 3rem + 12vw, 9rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(150deg, var(--es-brand-400), var(--es-brand-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-block-end: .5rem;
}

/* ==========================================================================
   16. GALLERY / CALENDAR / BOOKING
   ========================================================================== */
.es-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .55rem; border-radius: var(--es-r-lg); overflow: hidden; }
.es-gallery > button { border: 0; padding: 0; position: relative; overflow: hidden; background: var(--es-surface-3); cursor: pointer; }
.es-gallery > button:first-child { grid-row: span 2; }
.es-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--es-t-slow), filter var(--es-t-fast); }
.es-gallery > button:hover img { transform: scale(1.04); filter: brightness(.94); }
.es-gallery-more {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  background: rgba(255, 255, 255, .95);
  color: var(--es-ink);
  border-radius: var(--es-r-sm);
  padding: .5rem .9rem;
  font-weight: 700;
  font-size: var(--es-fs-sm);
  box-shadow: var(--es-shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.es-amenity {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem .95rem;
  border-radius: var(--es-r-sm);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  font-weight: 600;
  font-size: var(--es-fs-sm);
  color: var(--es-ink-2);
}
.es-amenity .bi { font-size: 1.25rem; color: var(--es-brand-600); }
.es-amenity.is-off { color: var(--es-ink-4); text-decoration: line-through; }
.es-amenity.is-off .bi { color: var(--es-ink-4); }

/* Calendar */
.es-cal { border: 1px solid var(--es-line); border-radius: var(--es-r); padding: 1rem; background: var(--es-surface); }
.es-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .85rem; }
.es-cal-head b { font-size: 1rem; font-weight: 800; }
.es-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.es-cal-dow { text-align: center; font-size: var(--es-fs-xs); font-weight: 700; color: var(--es-ink-3); padding-block: .35rem; overflow: hidden; text-overflow: clip; }
.es-cal-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: var(--es-r-xs);
  background: var(--es-surface-2);
  color: var(--es-ink);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all var(--es-t-fast);
  position: relative;
  padding: 0;
}
.es-cal-day .dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.es-cal-day.is-empty { background: transparent; cursor: default; }
.es-cal-day.is-available { background: var(--es-success-soft); color: var(--es-success); border-color: transparent; }
.es-cal-day.is-available:hover { border-color: var(--es-success); transform: translateY(-2px); }
.es-cal-day.is-booked { background: var(--es-danger-soft); color: var(--es-danger); cursor: not-allowed; opacity: .85; }
.es-cal-day.is-blocked { background: var(--es-warn-soft); color: var(--es-warn); cursor: not-allowed; opacity: .85; }

/* نصف اليوم مباع والنصف الآخر معروض — يبقى قابلًا للنقر */
.es-cal-day.is-partial {
  background: var(--es-warn-soft);
  color: var(--es-warn);
  border-color: transparent;
  position: relative;
}
.es-cal-day.is-partial::before {
  content: "";
  position: absolute;
  inset-block-end: 5px;
  left: 50%;   /* فيزيائي عمدًا: يقابل translateX الفيزيائي */
  transform: translateX(-50%);
  inline-size: 12px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .65;
}
.es-cal-day.is-partial:hover { border-color: var(--es-warn); transform: translateY(-2px); }
.es-cal-day.is-partial.is-selected::before { background: #fff; }
.es-cal-day.is-past { background: transparent; color: var(--es-ink-4); cursor: not-allowed; }
.es-cal-day.is-selected { background: var(--es-brand); color: #fff; border-color: var(--es-brand); box-shadow: var(--es-shadow-brand); }
.es-cal-day.is-today::after {
  content: "";
  position: absolute;
  inset-block-end: 5px;
  inline-size: 16px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}
.es-cal-legend { display: flex; flex-wrap: wrap; gap: .35rem .95rem; margin-block-start: 1rem; font-size: var(--es-fs-xs); color: var(--es-ink-3); }
.es-cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.es-cal-legend i { inline-size: 10px; block-size: 10px; border-radius: 3px; display: inline-block; }

/* Booking widget */
.es-booking-card {
  border: 1px solid var(--es-line);
  border-radius: var(--es-r-lg);
  background: var(--es-surface);
  box-shadow: var(--es-shadow);
  padding: 1.35rem;
}
.es-booking-sticky { position: sticky; inset-block-start: calc(var(--es-nav-h) + 1.25rem); }
.es-summary-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: var(--es-fs-sm); color: var(--es-ink-2); padding-block: .4rem; }
.es-summary-row.is-total { font-size: 1.05rem; font-weight: 800; color: var(--es-ink); padding-block-start: .9rem; margin-block-start: .5rem; border-block-start: 1px solid var(--es-line); }
.es-summary-row .es-underline { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

.es-mobile-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1046;
  background: var(--es-surface);
  border-block-start: 1px solid var(--es-line);
  box-shadow: 0 -8px 24px -16px rgba(16, 27, 21, .5);
  padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Timeline / stepper for booking flow */
.es-steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.es-steps-item { display: inline-flex; align-items: center; gap: .5rem; color: var(--es-ink-4); font-weight: 700; font-size: var(--es-fs-sm); }
.es-steps-item i.num {
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: var(--es-surface-3); color: var(--es-ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: .82rem;
}
.es-steps-item.is-active { color: var(--es-ink); }
.es-steps-item.is-active i.num { background: var(--es-brand); color: #fff; }
.es-steps-item.is-done { color: var(--es-brand-600); }
.es-steps-item.is-done i.num { background: var(--es-brand-soft); color: var(--es-brand-600); }
.es-steps-sep { inline-size: 26px; block-size: 1px; background: var(--es-line); }

/* ==========================================================================
   17. DASHBOARD SHELL
   ========================================================================== */
.es-dash { display: flex; min-block-size: calc(100vh - var(--es-nav-h)); }
.es-dash-side {
  inline-size: 268px;
  flex: 0 0 auto;
  background: var(--es-surface);
  border-inline-end: 1px solid var(--es-line);
  padding: 1.25rem 1rem;
  position: sticky;
  inset-block-start: var(--es-nav-h);
  block-size: calc(100vh - var(--es-nav-h));
  overflow-y: auto;
}
.es-dash-main { flex: 1 1 auto; min-inline-size: 0; padding: 1.75rem clamp(1rem, .5rem + 1.5vw, 2rem); background: var(--es-bg-subtle); }
.es-dash-nav { display: grid; gap: .2rem; }
.es-dash-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .68rem .85rem;
  border-radius: var(--es-r-sm);
  color: var(--es-ink-2);
  font-weight: 600;
  font-size: .95rem;
  transition: all var(--es-t-fast);
}
.es-dash-nav a .bi { font-size: 1.15rem; color: var(--es-ink-3); }
.es-dash-nav a:hover { background: var(--es-surface-2); color: var(--es-ink); }
.es-dash-nav a.active { background: var(--es-brand-soft); color: var(--es-brand-700); }
.es-dash-nav a.active .bi { color: var(--es-brand-600); }
.es-dash-nav .es-dash-group { font-size: var(--es-fs-xs); font-weight: 800; color: var(--es-ink-4); padding: 1rem .85rem .35rem; letter-spacing: .04em; }

/* Mini bar chart */
.es-bars { display: flex; align-items: flex-end; gap: .55rem; block-size: 180px; }
.es-bars div { flex: 1 1 0; background: var(--es-brand-100); border-radius: 8px 8px 4px 4px; position: relative; transition: background var(--es-t-fast); min-block-size: 4px; }
.es-bars div:hover { background: var(--es-brand); }
.es-bars div::after { content: attr(data-label); position: absolute; inset-block-end: -1.6rem; inset-inline: 0; text-align: center; font-size: var(--es-fs-xs); color: var(--es-ink-3); }
.es-bars-wrap { padding-block-end: 1.6rem; }

/* ==========================================================================
   18. UTILITIES & ANIMATIONS
   ========================================================================== */
.es-surface-2 { background: var(--es-surface-2); }
.es-radius { border-radius: var(--es-r); }
.es-radius-lg { border-radius: var(--es-r-lg); }
.es-border { border: 1px solid var(--es-line); }
.es-shadow { box-shadow: var(--es-shadow); }
.es-ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; }
.es-ratio-1x1 { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }
.es-cover { inline-size: 100%; block-size: 100%; object-fit: cover; }
.es-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.es-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.es-text-brand { color: var(--es-brand-600) !important; }
.es-bg-brand-soft { background: var(--es-brand-soft); }
.es-flip-x { display: inline-block; }
.es-noscroll { overflow: hidden; }

.es-cta-band {
  border-radius: var(--es-r-lg);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
  background: linear-gradient(135deg, var(--es-brand-700), var(--es-brand-500) 55%, var(--es-brand-600));
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.es-cta-band::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -10%;
  inline-size: 420px;
  block-size: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%);
  z-index: -1;
}
.es-cta-band h2, .es-cta-band h3 { color: #fff; }
.es-cta-band p { color: rgba(255, 255, 255, .88); }

.es-phone-mock {
  inline-size: min(280px, 72vw);
  aspect-ratio: 9 / 18.5;
  border-radius: 38px;
  background: var(--es-ink);
  padding: 10px;
  box-shadow: var(--es-shadow-lg);
  position: relative;
  margin-inline: auto;
}
.es-phone-mock > div { inline-size: 100%; block-size: 100%; border-radius: 30px; overflow: hidden; background: var(--es-surface); position: relative; }
.es-phone-mock::before {
  content: "";
  position: absolute;
  inset-block-start: 18px;
  left: 50%;   /* فيزيائي عمدًا: يقابل translateX الفيزيائي */
  transform: translateX(-50%);
  inline-size: 92px;
  block-size: 22px;
  border-radius: 999px;
  background: var(--es-ink);
  z-index: 3;
}

.es-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.es-reveal.is-in { opacity: 1; transform: none; }


@keyframes esPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes esToastIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes esToastOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes esFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes esSpin { to { transform: rotate(360deg); } }
.es-fade-up { animation: esFadeUp .5s cubic-bezier(.2, .7, .3, 1) both; }
.es-spin { animation: esSpin 1s linear infinite; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .es-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   19. LIGHTBOX (property gallery viewer)
   --------------------------------------------------------------------------
   A full-screen dark viewer: the image gets the whole viewport minus the
   header and the thumbnail strip, so a landscape photo fills the width and a
   portrait photo fills the height — always the largest size that fits.

   The stage is forced to `direction: ltr` on purpose: the slide track is a
   visual carousel, so its index maths must not flip with the page direction.
   Everything else still uses logical properties, so the arrows land on the
   correct visual sides in both RTL and LTR.
   ========================================================================== */
.es-lightbox .modal-dialog { max-inline-size: none; }

.es-lightbox .modal-content {
  background: #0A100D;
  color: #EAF2EC;
  border: 0;
  border-radius: 0;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.es-lightbox .modal-header {
  flex: 0 0 auto;
  border: 0;
  padding: .85rem clamp(.9rem, .5rem + 1.2vw, 1.6rem);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent);
}
.es-lightbox .modal-title { color: #fff; }
.es-lightbox .btn-close { filter: invert(1) grayscale(1) brightness(2.4); opacity: .85; }
.es-lightbox .btn-close:hover { opacity: 1; }

.es-lb-count {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}

.es-lightbox .modal-body {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 0 clamp(.6rem, .3rem + 1.4vw, 2rem) clamp(.75rem, .5rem + 1vw, 1.4rem);
}

.es-lb-stage {
  direction: ltr;
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: hidden;
  border-radius: var(--es-r);
  background: transparent;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.es-lb-stage.is-dragging { cursor: grabbing; }
.es-lb-stage:focus-visible { outline: 3px solid rgba(109, 178, 96, .6); outline-offset: -3px; }

.es-lb-track {
  display: flex;
  block-size: 100%;
  will-change: transform;
  transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}
.es-lb-stage.is-dragging .es-lb-track { transition: none; }

.es-lb-slide {
  flex: 0 0 100%;
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-lb-slide img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--es-r-sm);
  pointer-events: none;
  -webkit-user-drag: none;
}

.es-lb-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--es-r-pill);
  border: 0;
  background: rgba(255, 255, 255, .93);
  color: #13211B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8);
  cursor: pointer;
  z-index: 3;
  transition: background var(--es-t-fast), transform var(--es-t-fast), opacity var(--es-t-fast);
}
.es-lb-nav.is-prev { inset-inline-start: clamp(.5rem, .2rem + 1vw, 1.25rem); }
.es-lb-nav.is-next { inset-inline-end: clamp(.5rem, .2rem + 1vw, 1.25rem); }
.es-lb-nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.es-lb-nav:disabled { opacity: .28; cursor: default; transform: translateY(-50%); }

.es-lb-hint {
  position: absolute;
  inset-block-end: 14px;
  left: 50%;   /* فيزيائي عمدًا: يقابل translateX الفيزيائي */
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(10, 16, 13, .74);
  color: #fff;
  border-radius: var(--es-r-pill);
  padding: .32rem .85rem;
  font-size: var(--es-fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  backdrop-filter: blur(6px);
  transition: opacity .4s;
  pointer-events: none;
}
.es-lb-hint.is-gone { opacity: 0; }

.es-lb-thumbs {
  direction: ltr;
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-block: .15rem;
  justify-content: center;
  justify-content: safe center;
}
.es-lb-thumb {
  flex: 0 0 auto;
  inline-size: 96px;
  block-size: 66px;
  border-radius: var(--es-r-xs);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--es-t-fast), border-color var(--es-t-fast), transform var(--es-t-fast);
}
.es-lb-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.es-lb-thumb:hover { opacity: 1; transform: translateY(-2px); }
.es-lb-thumb.is-active { opacity: 1; border-color: var(--es-brand-400); }

@media (max-width: 575.98px) {
  .es-lb-nav { inline-size: 42px; block-size: 42px; font-size: 1.05rem; }
  .es-lb-thumb { inline-size: 68px; block-size: 50px; }
  .es-lightbox .modal-body { gap: .6rem; }
}

/* Very short windows: give the picture the room instead of the thumbnails */
@media (max-height: 520px) {
  .es-lb-thumbs { display: none; }
}

/* ==========================================================================
   20. THREADS — TICKETS & ON-SITE MESSAGES
   Shared bubble language for support tickets and guest↔host conversations.
   Logical properties throughout so RTL and LTR mirror without overrides.
   ========================================================================== */

.es-thread {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.es-bubble {
  max-inline-size: 82%;
  padding: .85rem 1rem;
  border-radius: var(--es-r);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  box-shadow: var(--es-shadow-xs);
  position: relative;
}

/* Incoming — from the other side */
.es-bubble-in {
  align-self: flex-start;
  border-start-start-radius: var(--es-r-xs);
  background: var(--es-surface-2);
}

/* Outgoing — from the current viewer */
.es-bubble-out {
  align-self: flex-end;
  border-start-end-radius: var(--es-r-xs);
  background: var(--es-brand-soft);
  border-color: var(--es-brand-100);
}

.es-bubble-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-block-end: .35rem;
}
.es-bubble-head b { font-size: .92rem; }

.es-bubble-body {
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.es-bubble-body a { color: var(--es-brand-dark); }

.es-bubble-flag {
  margin-block-start: .5rem;
  padding-block-start: .5rem;
  border-block-start: 1px dashed var(--es-line);
  font-size: .78rem;
  color: var(--es-clay);
}

/* Composer */
.es-composer { background: var(--es-surface); }

/* Small inline note / policy callout */
.es-note {
  display: block;
  padding: .75rem 1rem;
  border-radius: var(--es-r-sm);
  background: var(--es-surface-2);
  border: 1px solid var(--es-line);
  font-size: .9rem;
}
.es-note i { color: var(--es-brand); }

/* Unread dot */
.es-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--es-brand);
  display: inline-block;
}

.es-ticket { transition: transform .18s ease, box-shadow .18s ease; }
.es-ticket:hover { transform: translateY(-2px); box-shadow: var(--es-shadow); }

/* Conversation list rows */
.es-convo {
  display: flex;
  gap: .9rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: var(--es-r-sm);
  border: 1px solid var(--es-line);
  background: var(--es-surface);
  transition: background .18s ease, border-color .18s ease;
}
.es-convo:hover { background: var(--es-surface-2); border-color: var(--es-brand-200); }
.es-convo.is-unread { border-inline-start: 3px solid var(--es-brand); }
.es-convo img {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--es-r-xs);
  object-fit: cover;
  flex-shrink: 0;
}
.es-convo-body { min-inline-size: 0; flex: 1 1 auto; }
.es-convo-last {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .87rem;
  color: var(--es-muted, #6b7a6d);
}

/* Masked host phone */
.es-phone-locked {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: var(--es-r-pill);
  background: var(--es-surface-2);
  border: 1px dashed var(--es-line);
  font-size: .88rem;
  letter-spacing: .5px;
}

@media (max-width: 575.98px) {
  .es-bubble { max-inline-size: 92%; }
  .es-convo img { inline-size: 46px; block-size: 46px; }
}

/* ==========================================================================
   21. REALTIME — BELL · PRESENCE · TYPING · LIVE STATES
   Everything here is driven by ws.js / realtime.js and degrades to a plain
   static look when the WebSocket server is not running.
   ========================================================================== */

/* ---- Notification bell ---- */
.es-bell-btn { position: relative; }

.es-bell-badge {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: -3px;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 5px;
  border-radius: var(--es-r-pill);
  background: var(--es-clay);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.es-bell-btn.has-new { animation: esBell .6s ease 2; }

@keyframes esBell {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

/* live connection dot on the bell */
.es-ws-dot {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: -1px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--es-line);
  border: 2px solid var(--es-surface);
  transition: background .25s ease;
}
.es-ws-dot[data-state="online"] { background: #35c26a; }

.es-bell-menu {
  inline-size: min(340px, 92vw);
  max-block-size: 420px;
  overflow-y: auto;
  padding: .35rem;
}

.es-bell-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem .65rem;
  border-radius: var(--es-r-sm);
  color: inherit;
  text-decoration: none;
}
.es-bell-item:hover { background: var(--es-surface-2); }

.es-bell-ico {
  flex-shrink: 0;
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--es-r-xs);
  background: var(--es-brand-soft);
  color: var(--es-brand);
}

.es-bell-txt { min-inline-size: 0; }
.es-bell-txt b { display: block; font-size: .9rem; }
.es-bell-txt small {
  display: block;
  color: var(--es-muted, #6b7a6d);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-bell-empty {
  padding: 1.6rem .75rem;
  text-align: center;
  color: var(--es-muted, #6b7a6d);
  font-size: .88rem;
}

/* ---- Sound toggle ---- */
.es-sound-btn .bi-volume-mute { display: none; }
.es-sound-btn[data-on="0"] .bi-volume-up { display: none; }
.es-sound-btn[data-on="0"] .bi-volume-mute { display: inline-block; }
.es-sound-btn[data-on="0"] { opacity: .6; }

/* ---- Presence ---- */
.es-presence { position: relative; }
.es-presence::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-end: 2px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--es-line);
  border: 2px solid var(--es-surface);
  transition: background .25s ease;
}
.es-presence[data-online="1"]::after { background: #35c26a; }

.es-dot-presence {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--es-line);
  margin-inline-end: .25rem;
  transition: background .25s ease;
}
.es-dot-presence[data-online="1"] { background: #35c26a; box-shadow: 0 0 0 3px rgba(53, 194, 106, .18); }

/* ---- Typing indicator ---- */
.es-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .6rem .9rem;
  border-radius: var(--es-r);
  background: var(--es-surface-2);
  border: 1px solid var(--es-line);
  font-size: .82rem;
  color: var(--es-muted, #6b7a6d);
}
.es-typing span {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--es-brand);
  animation: esType 1.1s infinite ease-in-out;
}
.es-typing span:nth-child(2) { animation-delay: .18s; }
.es-typing span:nth-child(3) { animation-delay: .36s; }
.es-typing em { font-style: normal; }

@keyframes esType {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Message meta (sent / seen) ---- */
.es-bubble-meta {
  margin-block-start: .3rem;
  text-align: end;
  font-size: .72rem;
  color: var(--es-muted, #6b7a6d);
}
.es-bubble-meta .is-seen { color: var(--es-brand); }

/* new bubble slides in */
.es-bubble-fresh { animation: esBubbleIn .28s ease both; }

@keyframes esBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- A calendar day that just changed ---- */
.es-flash { animation: esFlash 1.1s ease 2; }

@keyframes esFlash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(224, 118, 76, .45); }
}

/* ---- Offline banner ---- */
html[data-ws="offline"] .es-live-only { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .es-bell-btn.has-new,
  .es-bubble-fresh,
  .es-flash,
  .es-typing span { animation: none; }
}

/* ==========================================================================
   22. REVIEW FORM & REPORTING
   ========================================================================== */

.es-review-form { border-inline-start: 3px solid var(--es-brand); }

/* صف النجوم القابلة للنقر */
.es-rate {
  display: inline-flex;
  gap: .2rem;
  direction: ltr;      /* ترتيب النجوم يبقى من اليسار في اللغتين */
}

.es-rate-star {
  background: none;
  border: 0;
  padding: .1rem;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--es-line);
  cursor: pointer;
  transition: transform .12s ease, color .12s ease;
}
.es-rate-star:hover { transform: scale(1.15); }
.es-rate-star.is-on { color: var(--es-gold, #D9A62E); }
.es-rate-star:focus-visible {
  outline: 2px solid var(--es-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* معاينة التمرير تُدار من realtime.js لتضيء النجوم حتى المؤشر */
.es-rate-star.is-preview { color: var(--es-gold-soft, #EBD9A8); }

@media (prefers-reduced-motion: reduce) {
  .es-rate-star:hover { transform: none; }
}

/* ==========================================================================
   23. INTERACTIVE MAP (Leaflet)
   Leaflet ships its own CSS; this only themes the pin, popup and container
   so the map matches the rest of the product in both light and dark mode.
   ========================================================================== */

.es-leaflet {
  inline-size: 100%;
  border-radius: var(--es-r);
  overflow: hidden;
  border: 1px solid var(--es-line);
  background: var(--es-surface-2);
  z-index: 0;                      /* يبقى تحت القوائم المنسدلة والنوافذ */
}

/* علامة المكان */
.es-pin { background: none; border: 0; }

.es-pin-dot {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: var(--es-brand);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: var(--es-shadow);
}
.es-pin-dot i { transform: rotate(45deg); font-size: 1rem; }

/* نافذة العلامة */
.leaflet-popup-content-wrapper {
  border-radius: var(--es-r-sm);
  background: var(--es-surface);
  color: var(--es-text, #1C2A1E);
  box-shadow: var(--es-shadow);
}
.leaflet-popup-tip { background: var(--es-surface); }
.leaflet-popup-content { margin: .8rem 1rem; font-size: .9rem; line-height: 1.8; }
.leaflet-popup-content a { color: var(--es-brand-dark); }
.es-map-price { color: var(--es-brand); font-weight: 700; }

/* أدوات التحكم */
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .82) !important;
  font-size: .68rem;
}
.leaflet-bar a {
  background: var(--es-surface);
  color: var(--es-text, #1C2A1E);
  border-block-end-color: var(--es-line);
}
.leaflet-bar a:hover { background: var(--es-surface-2); }

/* اختيار الموقع */
.es-map-picker { position: relative; }
.es-map-picker .es-leaflet { block-size: 320px; cursor: crosshair; }
.es-map-coords { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .6rem; }
.es-map-coords input { max-inline-size: 180px; }

/* ==========================================================================
   24. INVOICES
   ========================================================================== */

.es-invoice-paper {
  background: #fff;
  border-radius: var(--es-r);
  border: 1px solid var(--es-line);
  box-shadow: var(--es-shadow-sm);
  overflow: hidden;
}

/* الفاتورة نفسها مبنية بألوان ثابتة (لأنها تُستعمل في البريد وملف PDF)،
   فنُبقي خلفيتها بيضاء في الوضع الليلي أيضًا ولا نعكس ألوانها. */

@media print {
  .es-noprint,
  header, footer, .es-bottomnav, .es-toast-wrap, .modal { display: none !important; }

  body { background: #fff !important; }
  main.es-section { padding: 0 !important; }

  .es-invoice-paper {
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  @page { margin: 12mm; }
}

/* =========================================================================
   25 — عدد المشاهدين الآن (يظهر فقط عند وجود مشاهدين غيرك)
   ========================================================================= */

.es-viewers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--es-success, #3F7D3A);
    font-weight: 600;
}

.es-viewers-dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--es-success, #3F7D3A);
    flex: none;
    animation: esViewersPulse 1.8s ease-in-out infinite;
}

@keyframes esViewersPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    .es-viewers-dot { animation: none; }
}

/* =========================================================================
   26 — منتقي التاريخ (يستبدل تقويم المتصفّح الافتراضي)
   ========================================================================= */

.es-datefield { position: relative; }

.es-datefield-btn {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm, 12px);
    background: var(--es-surface);
    color: var(--es-ink);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.es-datefield-btn > .bi:first-child { color: var(--es-brand); font-size: 1.05rem; flex: none; }
.es-datefield-btn [data-date-text] { flex: 1 1 auto; }

.es-datefield.is-empty .es-datefield-btn [data-date-text] {
    color: var(--es-ink-4);
    font-weight: 500;
}

.es-datefield-caret {
    flex: none;
    color: var(--es-ink-4);
    font-size: .8rem;
    transition: transform .2s ease;
}

.es-datefield-btn:hover { border-color: var(--es-brand); background: var(--es-brand-soft); }

.es-datefield-btn:focus-visible {
    outline: none;
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-brand-soft);
}

.es-datefield.is-open .es-datefield-btn {
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-brand-soft);
}
.es-datefield.is-open .es-datefield-caret { transform: rotate(180deg); }

/* داخل شريط البحث: بلا إطار، يرث شكل الحقل المجاور */
.es-datefield.is-bare .es-datefield-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .96rem;
    font-weight: 600;
}
.es-datefield.is-bare .es-datefield-btn:hover,
.es-datefield.is-bare.is-open .es-datefield-btn { background: transparent; box-shadow: none; }

/* ------------------------------------------------------------ النافذة */

.es-datepop {
    position: absolute;
    z-index: 1045;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    inline-size: min(20rem, calc(100vw - 2rem));
    padding: 1rem;
    background: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r, 16px);
    box-shadow: var(--es-shadow-lg, 0 18px 48px rgba(12, 22, 17, .16));
    animation: esDatePopIn .16s ease;
}

@keyframes esDatePopIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .es-datepop { animation: none; }
}

/* منقولة إلى <body> لتعلو كل شيء ولا يقصّها أي عنصر أب */
.es-datepop.es-datepop-float { z-index: 1200; }

/* الإحداثيات تُحسب بالجافاسكربت على الشاشات المتوسطة فأكبر فقط،
   أما الجوال فيبقى لوحًا سفليًا بعرض الشاشة */
@media (min-width: 576px) {
    .es-datepop.es-datepop-float {
        position: fixed;
        inset-block-start: auto;
        inset-inline-start: auto;
    }
}

.es-datepop .es-cal-head { margin-block-end: .75rem; }
.es-datepop .es-cal-grid.is-loading { opacity: .45; pointer-events: none; }
.es-datepop .es-cal-day { font-size: var(--es-fs-sm, .9rem); }
.es-datepop .es-cal-legend { margin-block-start: .85rem; }
.es-datepop .es-cal-dow abbr { text-decoration: none; }

.es-cal-foot {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-block-start: .6rem;
    padding-block-start: .6rem;
    border-block-start: 1px solid var(--es-line-soft);
}

/* الشاشات الصغيرة: لوح سفلي بدل نافذة معلّقة */
@media (max-width: 575.98px) {
    .es-datefield.is-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1047;
        background: var(--es-overlay);
        animation: esDateFadeIn .18s ease;
    }

    .es-datepop {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1048;            /* فوق شريط الحجز السفلي */
        inline-size: 100%;
        max-block-size: 82vh;
        overflow-y: auto;
        border-radius: var(--es-r, 16px) var(--es-r, 16px) 0 0;
        border-inline: 0;
        border-block-end: 0;
        padding-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        animation: esDateSheetIn .2s ease;
    }

    /* مقبض صغير يوضّح أنه لوح قابل للسحب بصريًا */
    .es-datepop::before {
        content: "";
        display: block;
        inline-size: 40px;
        block-size: 4px;
        border-radius: 99px;
        background: var(--es-line);
        margin: -.25rem auto .85rem;
    }

    @keyframes esDateSheetIn {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    @keyframes esDateFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .es-datepop .es-cal-day { block-size: 2.5rem; }
}

/* بلا بيانات إتاحة (حقل البحث): أيام محايدة بلا ألوان حالة */
.es-cal-grid.is-plain .es-cal-day.is-available {
    background: transparent;
    color: var(--es-ink);
    border-color: transparent;
}
.es-cal-grid.is-plain .es-cal-day.is-available:hover {
    background: var(--es-brand-soft);
    border-color: var(--es-brand);
    transform: none;
}
.es-cal-grid.is-plain .es-cal-day.is-selected {
    background: var(--es-brand);
    color: #fff;
}

/* =========================================================================
   27 — خريطة الأماكن القريبة (عدّة نقاط)
   ========================================================================= */

/* فقاعة السعر بدل العلامة المدبّبة عند تعدّد الأماكن */
.es-pin-price { background: none; border: 0; }

.es-pin-price > span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--es-surface);
    color: var(--es-ink);
    border: 1.5px solid var(--es-line);
    box-shadow: var(--es-shadow);
    font-size: var(--es-fs-xs);
    font-weight: 800;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.es-pin-price:hover > span,
.es-pin-price.is-active > span {
    background: var(--es-brand);
    color: #fff;
    border-color: var(--es-brand);
    transform: scale(1.08);
    z-index: 500;
}

/* بطاقة داخل نافذة العلامة */
.es-map-card { display: flex; gap: .7rem; align-items: stretch; }

.es-map-card img {
    inline-size: 78px;
    block-size: 78px;
    object-fit: cover;
    border-radius: var(--es-r-sm);
    flex: none;
}

.es-map-card-body { display: grid; gap: .15rem; align-content: start; min-inline-size: 0; }
.es-map-card-body b { font-size: .95rem; line-height: 1.4; }
.es-map-card-body small { color: var(--es-ink-3); font-size: var(--es-fs-xs); }
.es-map-card-body .btn { margin-block-start: .35rem; justify-self: start; }

/* البطاقة المقابلة للعلامة في القائمة */
[data-nearby-item] { border-radius: var(--es-r); transition: box-shadow .18s ease, transform .18s ease; }
[data-nearby-item].is-active {
    box-shadow: 0 0 0 2px var(--es-brand), var(--es-shadow);
    transform: translateY(-2px);
}

/* المسافة عن الزائر */
.es-dist {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: .6rem;
    color: var(--es-brand);
    font-weight: 700;
}

/* لا توجد نقاط */
.es-leaflet.is-empty {
    display: grid;
    place-items: center;
    background: var(--es-surface-2);
}
.es-map-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    color: var(--es-ink-3);
    font-size: var(--es-fs-sm);
    padding: 2rem;
}
.es-map-empty .bi { font-size: 1.8rem; color: var(--es-ink-4); }

/* زر «قريب مني» أثناء الانتظار */
[data-locate-me].is-loading { opacity: .65; pointer-events: none; }
[data-locate-me].is-loading .bi { animation: esSpin .9s linear infinite; }
@keyframes esSpin { to { transform: rotate(360deg); } }

/* القائمة المجاورة تمرّر داخليًا على الشاشات الكبيرة */
@media (min-width: 992px) {
    [data-nearby-list] {
        max-block-size: 520px;
        overflow-y: auto;
        padding-inline-end: .35rem;
        scrollbar-width: thin;
    }
}

/* =========================================================================
   28 — الفرق والصلاحيات
   ========================================================================= */

.es-team-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .6rem .9rem;
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
    border: 1px solid var(--es-line);
}
.es-team-bar .bi { color: var(--es-brand); }
.es-team-bar .form-select { inline-size: auto; min-inline-size: 12rem; }

.es-perm-group {
    padding: .9rem;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background: var(--es-surface-2);
    block-size: 100%;
}

.es-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: var(--es-r-sm);
    cursor: pointer;
    transition: background .15s ease;
}
.es-check:hover { background: var(--es-surface-3); }
.es-check input { margin-block-start: .25rem; flex: none; accent-color: var(--es-brand); }
.es-check b { font-weight: 700; font-size: var(--es-fs-sm); }
.es-check small { font-size: var(--es-fs-xs); line-height: 1.6; }

/* شريط المعاينة بعين عضو */
.es-preview-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .6rem .9rem;
    border-radius: var(--es-r-sm);
    background: var(--es-gold-soft);
    border: 1px solid var(--es-gold);
    color: var(--es-ink);
}
.es-preview-bar .bi { color: var(--es-gold); }

/* =========================================================================
   29 — رمز التحقّق
   ========================================================================= */

.es-verify-ico {
    display: inline-grid;
    place-items: center;
    inline-size: 62px;
    block-size: 62px;
    border-radius: 50%;
    background: var(--es-brand-soft);
    color: var(--es-brand);
    font-size: 1.6rem;
}

.es-otp {
    display: flex;
    gap: .6rem;
    justify-content: center;
}

.es-otp input {
    inline-size: 3.4rem;
    block-size: 4rem;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--es-ink);
    background: var(--es-surface-2);
    border: 2px solid var(--es-line);
    border-radius: var(--es-r-sm);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.es-otp input:focus {
    outline: none;
    background: var(--es-surface);
    border-color: var(--es-brand);
    box-shadow: 0 0 0 3px var(--es-brand-soft);
}

.es-otp input:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 400px) {
    .es-otp input { inline-size: 2.9rem; block-size: 3.4rem; font-size: 1.4rem; }
}

/* فترة لم تعد متاحة في التاريخ المختار */
.es-chip.is-off {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.es-chip.is-off:hover { border-color: var(--es-line); transform: none; }

/* ==========================================================================
   نظام الإشعارات — Notifications
   ========================================================================== */
.es-bell-item { position: relative; }
.es-bell-item.is-unread { background: var(--es-brand-soft); }
.es-bell-item.is-unread .es-bell-txt b { font-weight: 700; }
.es-bell-ago {
  display: block;
  font-size: var(--es-fs-xs);
  color: var(--es-ink-4);
  margin-block-start: .15rem;
}
/* يبقى ظاهرًا أسفل القائمة مهما طالت */
.es-bell-all {
  position: sticky;
  inset-block-end: -.35rem;
  margin-block-start: .25rem;
  margin-inline: -.35rem;
  margin-block-end: -.35rem;
  border-block-start: 1px solid var(--es-line);
  background: var(--es-surface);
}
.es-bell-all a {
  display: block;
  text-align: center;
  padding: .65rem .7rem;
  font-size: var(--es-fs-sm);
  font-weight: 600;
  color: var(--es-brand-600);
  text-decoration: none;
}
.es-bell-all a:hover { background: var(--es-surface-2); color: var(--es-brand-700); }

/* ---- صفحة الإشعارات ---- */
.es-notif-list { display: flex; flex-direction: column; gap: .65rem; }

.es-notif {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .95rem 1.05rem;
  border-radius: var(--es-r);
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--es-t-fast), transform var(--es-t-fast), border-color var(--es-t-fast);
}
.es-notif:hover {
  color: inherit;
  border-color: var(--es-brand-200);
  box-shadow: var(--es-shadow-sm);
  transform: translateY(-1px);
}
.es-notif.is-unread {
  background: var(--es-brand-soft);
  border-color: var(--es-brand-200);
}

.es-notif-ico {
  flex-shrink: 0;
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  border-radius: var(--es-r-sm);
  background: var(--es-brand-100);
  color: var(--es-brand-700);
}

.es-notif-txt { flex: 1 1 auto; min-inline-size: 0; }
.es-notif-txt b {
  display: block;
  margin-block-end: .1rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5;
}
.es-notif-txt small {
  display: block;
  font-size: var(--es-fs-sm);
  color: var(--es-ink-2);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.es-notif-txt .es-tiny {
  display: block;
  margin-block-start: .3rem;
}

.es-notif-dot {
  flex-shrink: 0;
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--es-r-pill);
  background: var(--es-brand);
  margin-block-start: .65rem;
}

.es-notif-empty {
  text-align: center;
  padding: 3.2rem 1rem;
  color: var(--es-ink-3);
}
.es-notif-empty i {
  display: block;
  font-size: 2.8rem;
  color: var(--es-ink-4);
  margin-block-end: .75rem;
}

@media (max-width: 575.98px) {
  .es-notif { padding: .8rem .85rem; gap: .65rem; }
  .es-notif-ico { inline-size: 36px; block-size: 36px; font-size: .95rem; }
  .es-notif-txt b { font-size: .9rem; }
}

/* ==========================================================================
   تمديد الحجز — Extend
   ========================================================================== */
.es-extend-thumb {
  inline-size: 72px;
  block-size: 56px;
  object-fit: cover;
  border-radius: var(--es-r-sm);
  flex-shrink: 0;
}

/* الإقامة كسلسلة ليالٍ */
.es-chain { display: flex; flex-direction: column; gap: .25rem; }
.es-chain-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .7rem;
  border-radius: var(--es-r-sm);
  color: inherit;
  text-decoration: none;
  font-size: var(--es-fs-sm);
}
.es-chain-row:hover { background: var(--es-surface-2); color: inherit; }
.es-chain-row.is-current { background: var(--es-brand-soft); font-weight: 600; }
.es-chain-date { min-inline-size: 9rem; }

/* قائمة أيام التمديد */
.es-extend-list { display: flex; flex-direction: column; gap: .6rem; }

.es-extend-day {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  background: var(--es-surface);
}
.es-extend-day.is-full { background: var(--es-surface-2); }
.es-extend-date { min-inline-size: 10rem; }

.es-extend-periods { display: flex; flex-wrap: wrap; gap: .5rem; margin-inline-start: auto; }

.es-extend-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-inline-size: 6.5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--es-brand-200);
  border-radius: var(--es-r-sm);
  background: var(--es-brand-soft);
  color: var(--es-brand-700);
  cursor: pointer;
  transition: transform var(--es-t-fast), box-shadow var(--es-t-fast);
}
.es-extend-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--es-shadow-sm);
  border-color: var(--es-brand);
}
.es-extend-label { font-size: var(--es-fs-sm); font-weight: 600; }
.es-extend-price { font-size: var(--es-fs-xs); opacity: .8; }

.es-extend-watch { margin-inline-start: auto; }

@media (max-width: 575.98px) {
  .es-extend-day { gap: .6rem; }
  .es-extend-date { min-inline-size: 100%; }
  .es-extend-periods,
  .es-extend-watch { margin-inline-start: 0; inline-size: 100%; }
  .es-extend-btn { flex: 1 1 auto; }
  .es-chain-date { min-inline-size: 7rem; }
}

/* ملاحظة أن هذه الليلة جزء من إقامة أطول */
.es-stay-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem .85rem;
  margin-block-end: .75rem;
  border-radius: var(--es-r-sm);
  background: var(--es-brand-soft);
  border: 1px solid var(--es-brand-200);
  color: var(--es-brand-800);
  font-size: var(--es-fs-sm);
  line-height: 1.6;
}
.es-stay-note i { font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }

/* ==========================================================================
   كوبون الخصم — Coupon
   ========================================================================== */
.es-coupon { margin-block: .85rem; }

.es-coupon-form { display: flex; gap: .5rem; align-items: stretch; }
.es-coupon-form .es-input-icon { flex: 1 1 auto; min-inline-size: 0; }
.es-coupon-form .form-control { text-transform: uppercase; }
.es-coupon-form .btn { flex-shrink: 0; }

.es-coupon-on {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem .45rem .75rem;
  padding-inline-start: .75rem;
  border-radius: var(--es-r-sm);
  background: var(--es-brand-soft);
  border: 1px dashed var(--es-brand-300);
}
.es-coupon-tag {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1 1 auto;
  min-inline-size: 0;
  color: var(--es-brand-700);
  font-size: var(--es-fs-sm);
}
.es-coupon-tag b { letter-spacing: .04em; }
.es-coupon-tag small { opacity: .75; }

.es-coupon-msg {
  margin: .45rem 0 0;
  font-size: var(--es-fs-xs);
  line-height: 1.6;
}
.es-coupon-msg.is-good { color: var(--es-success); }
.es-coupon-msg.is-bad  { color: var(--es-danger); }

/* بطاقات الكوبونات في لوحة المضيف */
.es-coupon-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 1.05rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  background: var(--es-surface);
}
.es-coupon-card.is-off { background: var(--es-surface-2); opacity: .75; }

.es-coupon-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .3rem .7rem;
  border-radius: var(--es-r-xs);
  background: var(--es-brand-soft);
  color: var(--es-brand-700);
  border: 1px dashed var(--es-brand-300);
}
.es-coupon-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: var(--es-fs-xs); color: var(--es-ink-3); }
.es-coupon-actions { margin-inline-start: auto; display: flex; gap: .4rem; }

@media (max-width: 575.98px) {
  .es-coupon-actions { margin-inline-start: 0; inline-size: 100%; }
}

/* ==========================================================================
   إدارة الفترات — أوقاتها وأسعارها
   ========================================================================== */
.es-periods { display: flex; flex-direction: column; gap: .75rem; }

.es-period-card {
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  padding: .9rem 1.05rem;
  background: var(--es-surface);
  transition: border-color var(--es-t-fast), background var(--es-t-fast);
}
.es-period-card.is-off { background: var(--es-surface-2); border-style: dashed; }
.es-period-card.is-off .es-period-head { opacity: .65; }

.es-period-head { margin-block-end: .5rem; }
.es-period-head .form-check-label { cursor: pointer; }
.es-period-head small { font-size: var(--es-fs-xs); margin-block-start: .1rem; }

.es-period-body { padding-block-start: .5rem; border-block-start: 1px solid var(--es-line-soft); }

/* شبكة أسعار أيام الأسبوع */
.es-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .4rem;
}
.es-day-cell { display: flex; flex-direction: column; gap: .25rem; min-inline-size: 0; }
.es-day-cell span {
  font-size: var(--es-fs-xs);
  color: var(--es-ink-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.es-day-cell .form-control { text-align: center; padding-inline: .25rem; }

@media (max-width: 767.98px) {
  .es-day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .es-day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ==========================================================================
   منتقي الوقت — Time picker
   يتبع لغة منتقي التاريخ نفسها: زرّ بهوية الموقع ثم نافذة معلّقة
   تُنقل إلى <body> فلا يقصّها حاوٍ ولا تختفي خلف بطاقة.
   ========================================================================== */

.es-timefield { position: relative; }

.es-timefield-btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-r-sm);
  background: var(--es-surface);
  color: var(--es-ink);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--es-t-fast), box-shadow var(--es-t-fast), background var(--es-t-fast);
}
.es-timefield-btn > .bi:first-child { color: var(--es-brand); font-size: 1.05rem; flex: none; }
.es-timefield-btn [data-time-text] { flex: 1 1 auto; }

.es-timefield-caret {
  flex: none;
  color: var(--es-ink-4);
  font-size: .8rem;
  transition: transform .2s ease;
}
.es-timefield-btn:hover { border-color: var(--es-brand); background: var(--es-brand-soft); }
.es-timefield-btn:focus-visible {
  outline: none;
  border-color: var(--es-brand);
  box-shadow: 0 0 0 3px var(--es-brand-soft);
}
.es-timefield.is-open .es-timefield-btn {
  border-color: var(--es-brand);
  box-shadow: 0 0 0 3px var(--es-brand-soft);
}
.es-timefield.is-open .es-timefield-caret { transform: rotate(180deg); }

/* ------------------------------------------------------------ النافذة */

.es-timepop {
  position: absolute;
  z-index: 1045;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  inline-size: min(19rem, calc(100vw - 2rem));
  padding: .9rem;
  background: var(--es-surface);
  border: 1px solid var(--es-line);
  border-radius: var(--es-r);
  box-shadow: var(--es-shadow-lg);
  animation: esDatePopIn .16s ease;
}
@media (prefers-reduced-motion: reduce) { .es-timepop { animation: none; } }

.es-timepop.es-timepop-float { z-index: 1200; }

@media (min-width: 576px) {
  .es-timepop.es-timepop-float {
    position: fixed;
    inset-block-start: auto;
    inset-inline-start: auto;
  }
}

.es-timepop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-block-end: .7rem;
}
.es-timepop-head b { font-size: .95rem; font-weight: 800; }
.es-timepop-now {
  font-weight: 700;
  color: var(--es-brand-700);
  background: var(--es-brand-soft);
  border-radius: var(--es-r-pill);
  padding: .15rem .6rem;
  font-size: var(--es-fs-sm);
}

/* ---- الأعمدة ---- */
.es-timepop-cols { display: flex; gap: .4rem; }

.es-timecol { flex: 1 1 0; min-inline-size: 0; }
.es-timecol.is-ap { flex: 0 0 4.2rem; }

.es-timecol-cap {
  display: block;
  font-size: var(--es-fs-xs);
  color: var(--es-ink-4);
  text-align: center;
  margin-block-end: .3rem;
}

.es-timecol-list {
  block-size: 11.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .2rem;
  border: 1px solid var(--es-line-soft);
  border-radius: var(--es-r-sm);
  background: var(--es-surface-2);
  overscroll-behavior: contain;
}
.es-timecol.is-ap .es-timecol-list { block-size: auto; }

.es-timecell {
  flex: none;
  padding: .45rem .2rem;
  border: 1px solid transparent;
  border-radius: var(--es-r-xs);
  background: transparent;
  color: var(--es-ink-2);
  font: inherit;
  font-size: var(--es-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  transition: background var(--es-t-fast), color var(--es-t-fast);
}
.es-timecell:hover { background: var(--es-brand-100); color: var(--es-brand-700); }
.es-timecell:focus-visible { outline: 2px solid var(--es-brand); outline-offset: -2px; }
.es-timecell.is-on {
  background: var(--es-brand);
  border-color: var(--es-brand);
  color: #fff;
}

/* ---- أوقات شائعة ---- */
.es-timequick {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-block-start: .7rem;
  padding-block-start: .7rem;
  border-block-start: 1px solid var(--es-line-soft);
}
.es-timequick-btn {
  flex: 1 1 auto;
  padding: .35rem .5rem;
  border: 1px solid var(--es-line);
  border-radius: var(--es-r-pill);
  background: var(--es-surface);
  color: var(--es-ink-2);
  font: inherit;
  font-size: var(--es-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--es-t-fast), background var(--es-t-fast), color var(--es-t-fast);
}
.es-timequick-btn:hover { border-color: var(--es-brand); background: var(--es-brand-soft); color: var(--es-brand-700); }
.es-timequick-btn.is-on { background: var(--es-brand); border-color: var(--es-brand); color: #fff; }

.es-timepop-foot { margin-block-start: .7rem; }

/* ---- الشاشات الصغيرة: لوح سفلي ---- */
@media (max-width: 575.98px) {
  .es-timefield.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1047;
    background: var(--es-overlay);
    animation: esDateFadeIn .18s ease;
  }
  .es-timepop {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1048;
    inline-size: 100%;
    max-block-size: 82vh;
    overflow-y: auto;
    border-radius: var(--es-r) var(--es-r) 0 0;
    border-inline: 0;
    border-block-end: 0;
    padding-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    animation: esDateSheetIn .2s ease;
  }
  .es-timepop::before {
    content: "";
    display: block;
    inline-size: 40px;
    block-size: 4px;
    border-radius: 4px;
    background: var(--es-line);
    margin: 0 auto .75rem;
  }
  .es-timecol-list { block-size: 13rem; }
}

/* ==========================================================================
   18. SELECT2 — قوائم الاختيار بهوية الموقع
   --------------------------------------------------------------------------
   طبقة فوق select2.min.css (الطراز default) تستبدل ألوانه ومقاساته
   بالرموز التصميمية، فتتبع الوضع الداكن والاتجاهين تلقائيًا.
   ========================================================================== */

.select2-container { inline-size: 100%; max-inline-size: 100%; font-family: var(--es-font); }
.select2-container.es-sel-auto { inline-size: auto !important; min-inline-size: 10rem; }

/* ------------------------------------------------------------- الحقل === */

.select2-container--default .select2-selection--single {
    position: relative;
    block-size: auto;
    min-block-size: 3.05rem;
    display: flex;
    align-items: center;
    background: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    padding: .78rem 1rem;
    transition: border-color var(--es-t-fast), box-shadow var(--es-t-fast), background-color var(--es-t-fast);
}

.select2-container--default.es-sel .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding: 0;
    padding-inline-end: 1.6rem;
    line-height: 1.5;
    color: var(--es-ink);
    font-size: 1rem;
    font-weight: 600;
    text-align: start;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--es-ink-4);
    font-weight: 500;
}

.select2-container--default .select2-selection--single:hover {
    border-color: var(--es-brand-300);
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    outline: none;
    border-color: var(--es-brand-400);
    box-shadow: 0 0 0 4px rgba(63, 125, 58, .14);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--es-surface-3);
    border-color: var(--es-line);
    cursor: not-allowed;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--es-ink-4);
}

.select2-container.es-sel-invalid .select2-selection--single,
.select2-container.es-sel-invalid .select2-selection--multiple {
    border-color: var(--es-danger);
    box-shadow: 0 0 0 4px rgba(179, 38, 30, .12);
}

/* المقاسات */
.select2-container.es-sel-sm .select2-selection--single {
    min-block-size: 2.4rem;
    padding: .42rem .75rem;
    border-radius: var(--es-r-xs);
}
.select2-container--default.es-sel.es-sel-sm .select2-selection--single .select2-selection__rendered { font-size: var(--es-fs-sm); }
.select2-container.es-sel-lg .select2-selection--single { min-block-size: 3.5rem; padding: 1rem 1.15rem; border-radius: var(--es-r); }
.select2-container--default.es-sel.es-sel-lg .select2-selection--single .select2-selection__rendered { font-size: 1.05rem; }

/* داخل شريط البحث: بلا إطار، كما فعلنا مع منتقي التاريخ */
.select2-container.es-sel-bare .select2-selection--single {
    border: 0;
    background: transparent;
    padding: 0;
    min-block-size: 0;
    box-shadow: none;
}
.select2-container--default.es-sel.es-sel-bare .select2-selection--single .select2-selection__rendered {
    font-size: .96rem;
    padding-inline-end: 1.25rem;
}
.select2-container--default.es-sel.es-sel-bare .select2-selection--single .select2-selection__arrow { inline-size: 1.1rem; }

/* ------------------------------------------------------------- السهم === */

.select2-container--default.es-sel .select2-selection--single .select2-selection__arrow {
    inline-size: 1.4rem;
    block-size: 100%;
    inset-block-start: 0;
    /* الإبطال المادي أولًا ثم المنطقي، وإلا فاز المتأخر ووقع السهم في غير موضعه.
       الحقل flex، وموضع العنصر المطلق فيه يبدأ من أول صندوق المحتوى لا بعد أشقائه،
       فلا بدّ من تثبيت الطرفين صراحة. */
    right: auto;
    left: auto;
    inset-inline-end: .85rem;
    inset-inline-start: auto;
}
.select2-container--default.es-sel.es-sel-bare .select2-selection--single .select2-selection__arrow { inset-inline-end: 0; }
.select2-container--default.es-sel.es-sel-sm .select2-selection--single .select2-selection__arrow { inset-inline-end: .6rem; }

/* شيفرون مرسوم بالحدود بدل مثلث select2 — يدور عند الفتح */
.select2-container--default.es-sel .select2-selection--single .select2-selection__arrow b {
    border: 0;
    /* شكل مرسوم لا تخطيط: الحدود مادية وإلا انقلب الشيفرون في RTL */
    border-right: 2px solid var(--es-ink-4);
    border-bottom: 2px solid var(--es-ink-4);
    border-radius: 1px;
    inline-size: .48rem;
    block-size: .48rem;
    margin: 0;
    inset-block-start: 50%;
    /* التوسيط بـ translate يقتضي إحداثيًّا ماديًّا، وهو هنا متماثل فلا يتأثر بالاتجاه */
    left: 50%;
    right: auto;
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform var(--es-t-fast), border-color var(--es-t-fast);
}
.select2-container--default.es-sel.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: translate(-50%, -20%) rotate(225deg);
    border-color: var(--es-brand);
}

/* ------------------------------------------------------------- المسح === */

.select2-container--default.es-sel .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: auto;
    left: auto;
    inset-inline-end: 2.35rem;
    inset-inline-start: auto;
    inset-block-start: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--es-r-pill);
    background: var(--es-surface-3);
    color: var(--es-ink-3);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--es-t-fast), color var(--es-t-fast);
}
.select2-container--default.es-sel .select2-selection--single .select2-selection__clear:hover {
    background: var(--es-danger-soft);
    color: var(--es-danger);
}
.select2-container--default.es-sel.es-sel-bare .select2-selection--single .select2-selection__clear { inset-inline-end: 1.35rem; }

/* ------------------------------------------------------ الاختيار المتعدد === */

.select2-container--default .select2-selection--multiple {
    background: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    padding: .32rem .45rem;
    min-block-size: 3.05rem;
    transition: border-color var(--es-t-fast), box-shadow var(--es-t-fast);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--es-brand-400);
    box-shadow: 0 0 0 4px rgba(63, 125, 58, .14);
}
/* شبكة مرنة بدل float: تتبع اتجاه الصفحة وحدها فلا نحتاج قواعد RTL */
.select2-container--default.es-sel .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
}
.select2-container--default.es-sel .select2-selection--multiple .select2-selection__choice {
    float: none;
    background: var(--es-brand-soft);
    border: 1px solid var(--es-brand-200);
    color: var(--es-brand-700);
    border-radius: var(--es-r-pill);
    padding: .2rem .65rem;
    margin: .22rem;
    font-size: var(--es-fs-sm);
    font-weight: 700;
}
.select2-container--default.es-sel .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--es-brand-600);
    margin-inline-end: .4rem;
    margin-right: 0;
    font-weight: 800;
}
.select2-container--default.es-sel .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--es-danger); }
.select2-container--default.es-sel .select2-selection--multiple .select2-search--inline {
    float: none;
    display: flex;
    flex: 1 1 6rem;
    min-inline-size: 0;
}
.select2-container--default.es-sel .select2-selection--multiple .select2-search--inline .select2-search__field {
    inline-size: 100% !important;
    font-family: var(--es-font);
    color: var(--es-ink);
    margin-block-start: .45rem;
    margin-inline-start: .25rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: var(--es-ink-4); }

/* ------------------------------------------------------------ القائمة === */

.select2-dropdown {
    background: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    box-shadow: var(--es-shadow-lg);
    overflow: hidden;
}
.select2-container--open .select2-dropdown--below { border-radius: var(--es-r-sm); margin-block-start: 6px; }
.select2-container--open .select2-dropdown--above { border-radius: var(--es-r-sm); margin-block-start: -6px; }
.select2-container--default .select2-dropdown { animation: esDatePopIn .14s ease; }
@media (prefers-reduced-motion: reduce) { .select2-container--default .select2-dropdown { animation: none; } }

/* أعلى من نافذة bootstrap المنبثقة (1055) ومن اللوح الجانبي (1045) */
.select2-container--open { z-index: 1200; }

.select2-search--dropdown { padding: .55rem .55rem .35rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-xs);
    background: var(--es-surface-2);
    color: var(--es-ink);
    font-family: var(--es-font);
    font-size: var(--es-fs-sm);
    padding: .5rem .7rem;
    outline: none;
    transition: border-color var(--es-t-fast), box-shadow var(--es-t-fast);
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder { color: var(--es-ink-4); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--es-brand-400);
    box-shadow: 0 0 0 3px var(--es-brand-soft);
}

.select2-results__options { padding: .3rem; }
.select2-container--default .select2-results > .select2-results__options { max-block-size: 16rem; }

.select2-container--default .select2-results__option {
    padding: .55rem .7rem;
    border-radius: var(--es-r-xs);
    color: var(--es-ink-2);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    transition: background var(--es-t-fast), color var(--es-t-fast);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--es-surface-3);
    color: var(--es-ink);
    font-weight: 700;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background: var(--es-brand-soft);
    color: var(--es-brand-700);
}
.select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--es-ink-4); }
.select2-container--default .select2-results__group {
    color: var(--es-ink-3);
    font-size: var(--es-fs-xs);
    font-weight: 800;
    letter-spacing: .02em;
    padding: .5rem .7rem .3rem;
}
.select2-results__message { color: var(--es-ink-3); font-size: var(--es-fs-sm); padding: .8rem .7rem; }

.es-sel-opt { display: inline-flex; align-items: center; gap: .5rem; }
.es-sel-opt .bi { color: var(--es-brand); font-size: 1rem; }

/* الجوال: أهداف لمس أوسع */
@media (max-width: 575.98px) {
    .select2-container--default .select2-results__option { padding: .7rem .75rem; }
    .select2-container--default .select2-results > .select2-results__options { max-block-size: 55vh; }
}

/* ==========================================================================
   19. عمولة المنصة — الشرح والحساب الحيّ في نموذج المكان
   ========================================================================== */

.es-commission {
    padding: 1rem 1.1rem;
    border: 1px solid var(--es-brand-200);
    border-radius: var(--es-r-sm);
    background: var(--es-brand-soft);
}

.es-commission-head { display: flex; align-items: flex-start; gap: .7rem; }
.es-commission-head > .bi { color: var(--es-brand); font-size: 1.15rem; flex: none; margin-block-start: .1rem; }
.es-commission-head b { display: block; margin-block-end: .2rem; }

.es-commission-calc {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .6rem;
    margin-block-start: .9rem;
}
.es-commission-calc > .bi,
.es-commission-eq {
    align-self: center;
    color: var(--es-ink-4);
    flex: none;
}
.es-commission-calc > .bi { font-size: .85rem; }
.es-commission-eq { font-size: 1.1rem; font-weight: 800; }

.es-commission-cell {
    flex: 1 1 8rem;
    min-inline-size: 0;
    padding: .6rem .8rem;
    border-radius: var(--es-r-xs);
    background: var(--es-surface);
    border: 1px solid var(--es-line);
}
.es-commission-cell span {
    display: block;
    font-size: var(--es-fs-xs);
    color: var(--es-ink-3);
    margin-block-end: .15rem;
}
.es-commission-cell b { font-size: 1.05rem; font-weight: 800; color: var(--es-ink); }

/* ما يدفعه الضيف هو الرقم الذي يعني المضيف، فليكن أبرزها */
.es-commission-cell.is-total {
    background: var(--es-brand);
    border-color: var(--es-brand);
}
.es-commission-cell.is-total span { color: rgba(255, 255, 255, .82); }
.es-commission-cell.is-total b { color: #fff; }

/* تلميح صغير تحت كل حقل سعر آخر */
.es-guest-hint { color: var(--es-brand-600); font-weight: 600; }

@media (max-width: 575.98px) {
    .es-commission-calc > .bi,
    .es-commission-eq { display: none; }
    .es-commission-cell { flex: 1 1 100%; }
}