/* BUILD 1.7.0 — 2026-10-26 */
/* ===========================================================================
 * Chalehat — Elementor widgets stylesheet
 *
 * Built from the Laravel design system (tokens.css + app.css) with every
 * class prefixed swb-, every custom property prefixed --swb-, and every rule
 * scoped under the .swb-w wrapper each widget prints. The wrapper adds one
 * class of specificity, which is what lets these rules beat the theme and
 * Elementor's own resets without !important. Elementor's style controls use
 * "{{WRAPPER}} .swb-w ..." - one class stronger again - so a control always
 * wins over the design default.
 *
 * Order: 00 base & theme shield → 10 the design (generated) → 20+ widget parts
 *        → 90 editor / motion / horizontal-scroll guarantees.
 * ======================================================================== */

/* --- Theme shield ---------------------------------------------------------
 * Hello Elementor (and most themes) paint every <button> pink with a border
 * and every link in their own colour. These resets sit FIRST so every
 * component rule below overrides them; the hover reset is (0,2,0) to tie
 * the theme's [type=button]:hover and win by coming later.
 * ------------------------------------------------------------------------ */
:where(.swb-w) :where(button, [type="button"], [type="submit"], [type="reset"]) {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: inherit;
  white-space: normal;
  text-align: inherit;
  box-shadow: none;
  line-height: inherit;
}
.swb-w :where(button, [type="button"], [type="submit"], [type="reset"]):is(:hover, :focus) {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}
:where(.swb-w) :where(input, select, textarea) {
  font-family: inherit;
}
:where(.swb-w) a:where(:not([class])) { text-decoration: none; }

/* Elementor's containers around our full-width sections stay invisible. */
.elementor-widget-container:has(> .swb-w) { padding: 0; margin: 0; }

/* The header is fixed. On a page that does not open on a photograph the
 * content would slide under it, so the header widget prints a spacer that is
 * only visible on those pages (Laravel: body:not(.has-hero-photo) main). */
.swb-w .swb-header-spacer { display: block; height: var(--swb-header-height); }
body.swb-has-hero-photo .swb-w .swb-header-spacer { display: none; }
/* Logged-in WordPress toolbar pushes fixed headers down. */
body.admin-bar .swb-w .swb-site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .swb-w .swb-site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .swb-w .swb-site-header { top: 0; } }

/* ===== 10 — The design, generated from the Laravel stylesheet (tools/convert_css.py) ===== */
/*
 * Chalehat - design tokens
 * ---------------------------------------------------------------------------
 * Every colour, space, radius, shadow and duration in the product resolves to a
 * variable here. Nothing downstream hardcodes a hex value.
 *
 * Two rules this file exists to protect:
 *
 *  1. The 70 / 20 / 10 balance. The interface is mostly white and off-white,
 *     with purple used for intent (actions, focus, brand moments) and the
 *     remaining tenth carrying photography and trust signals. Purple is an
 *     accent, not a background.
 *
 *  2. The verification colours are NOT part of the brand palette. Blue, green
 *     and gold carry specific meaning - completed bookings, video verified,
 *     physically inspected - and are never recoloured to match the brand.
 *     They are declared in their own block below and must stay there.
 */

:root{
  /* ---------------------------------------------------------------------
   * Brand
   * ------------------------------------------------------------------ */
  --swb-purple-950: #071A1E;
  --swb-purple-900: #0B2A30;
  --swb-purple-850: #0E333A;
  --swb-purple-800: #123E46;   /* the signature - deep aubergine */
  --swb-purple-700: #1B4E57;   /* raised surface on the deep ground */
  --swb-purple-600: #285F69;
  --swb-purple-500: #123E46;   /* primary */
  --swb-purple-450: #3A7480;
  --swb-purple-400: #4F8892;
  --swb-purple-350: #6E9FA6;
  --swb-purple-300: #97BEC2;
  --swb-purple-200: #BED8D8;
  --swb-purple-100: #D6E8E7;
  --swb-purple-50:  #EAF3F2;
  --swb-purple-25:  #F3F8F7;

  /* Champagne. The only warm colour in the system, and it earns its place:
     prices, an active link, a thin rule under a heading. Never a whole panel. */
  --swb-gold-600: #8F6E47;
  --swb-gold-500: #B8956B;
  --swb-gold-400: #D5B58F;
  --swb-gold-300: #E6D3BA;
  --swb-gold-100: #F6EEE3;

  --swb-brand: var(--swb-purple-800);
  --swb-brand-hover: var(--swb-purple-900);
  --swb-brand-active: var(--swb-purple-950);
  --swb-brand-soft: var(--swb-purple-100);
  --swb-brand-softer: var(--swb-purple-50);
  --swb-brand-faint: var(--swb-purple-25);

  --swb-accent: var(--swb-gold-500);
  --swb-accent-hover: var(--swb-gold-600);
  --swb-accent-soft: var(--swb-gold-100);

  /* Used sparingly - a hero wash, a single feature panel, never a whole page. */
  --swb-gradient-brand: linear-gradient(135deg, #0E333A 0%, #1B4E57 100%);
  --swb-gradient-brand-warm: linear-gradient(135deg, #123E46 0%, #285F69 100%);
  --swb-gradient-wash: linear-gradient(180deg, #F3F8F7 0%, #F7F8F6 100%);

  /* Scrims that sit between a photograph and white type. Two stops, both
     weighted to the bottom, so a face in the middle of the frame stays lit. */
  --swb-scrim-hero: linear-gradient(180deg, rgba(7, 26, 30,.62) 0%, rgba(7, 26, 30,.20) 38%, rgba(7, 26, 30,.72) 100%);
  --swb-scrim-banner: linear-gradient(180deg, rgba(7, 26, 30,.30) 0%, rgba(7, 26, 30,.78) 100%);
  --swb-scrim-card: linear-gradient(180deg, rgba(7, 26, 30,0) 42%, rgba(7, 26, 30,.80) 100%);

  /* ---------------------------------------------------------------------
   * Neutrals
   * ------------------------------------------------------------------ */
  --swb-white: #FFFFFF;
  --swb-ink: #222B2D;          /* primary text */
  --swb-ink-soft: #3B4749;
  --swb-ink-muted: #657579;    /* secondary text */
  --swb-ink-faint: #8B999C;
  --swb-ink-disabled: #B6C1C3;

  --swb-border: #E5EBE9;
  --swb-border-strong: #D2DCDA;
  --swb-border-focus: var(--swb-purple-600);

  --swb-surface: #FFFFFF;
  --swb-surface-raised: #FFFFFF;
  --swb-surface-sunken: #F7F8F6;
  --swb-surface-muted: #F1F4F2;

  /* ---------------------------------------------------------------------
   * Verification colours - MEANING, NOT BRANDING
   *
   * Do not remap these to purple. Do not "harmonise" them with the palette.
   * A guest reads blue as history, green as reviewed footage, gold as a
   * person from our team having stood in the room.
   * ------------------------------------------------------------------ */
  --swb-verify-blue: #1D74F5;
  --swb-verify-blue-soft: #E8F1FE;
  --swb-verify-blue-ink: #0B4EAE;

  --swb-verify-green: #12A150;
  --swb-verify-green-soft: #E6F6EC;
  --swb-verify-green-ink: #0A6B35;

  --swb-verify-gold: #C8981F;
  --swb-verify-gold-soft: #FBF3E0;
  --swb-verify-gold-ink: #8A6607;

  /* ---------------------------------------------------------------------
   * Status tones
   * ------------------------------------------------------------------ */
  --swb-success: #12A150;
  --swb-success-soft: #E6F6EC;
  --swb-success-ink: #0A6B35;

  --swb-info: #1D74F5;
  --swb-info-soft: #E8F1FE;
  --swb-info-ink: #0B4EAE;

  --swb-pending: #285F69;
  --swb-pending-soft: #E3EFEE;
  --swb-pending-ink: #123E46;

  --swb-warning: #D97706;
  --swb-warning-soft: #FEF3E2;
  --swb-warning-ink: #92500B;

  --swb-danger: #DC2626;
  --swb-danger-soft: #FEECEC;
  --swb-danger-ink: #991B1B;

  --swb-neutral: #657579;
  --swb-neutral-soft: #EEF2F1;
  --swb-neutral-ink: #3B4749;

  --swb-muted-tone: #8B999C;
  --swb-muted-soft: #F3F6F5;

  /* ---------------------------------------------------------------------
   * Typography
   *
   * Arabic is a first-class language, not a translation. It gets its own
   * family stack and its own line-height, because Arabic set at a Latin
   * line-height looks cramped and its diacritics collide.
   * ------------------------------------------------------------------ */
  --swb-font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --swb-font-en: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --swb-font-body: var(--swb-font-en);
  /* Alexandria carries both scripts. Named for the city, geometric enough to
     feel modern and open enough to feel like an invitation rather than a form. */
  --swb-font-display: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
  --swb-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --swb-text-2xs: 0.6875rem;   /* 11 */
  --swb-text-xs:  0.75rem;     /* 12 */
  --swb-text-sm:  0.875rem;    /* 14 */
  --swb-text-base: 1rem;       /* 16 */
  --swb-text-md:  1.0625rem;   /* 17 */
  --swb-text-lg:  1.25rem;     /* 20 */
  --swb-text-xl:  1.5rem;      /* 24 */
  --swb-text-2xl: 1.875rem;    /* 30 */
  --swb-text-3xl: 2.25rem;     /* 36 */
  --swb-text-4xl: 2.875rem;    /* 46 */
  --swb-text-5xl: 3.5rem;      /* 56 */

  --swb-leading-tight: 1.2;
  --swb-leading-snug: 1.35;
  --swb-leading-normal: 1.55;
  --swb-leading-relaxed: 1.75;

  --swb-weight-normal: 400;
  --swb-weight-medium: 500;
  --swb-weight-semibold: 600;
  --swb-weight-bold: 700;
  --swb-weight-extrabold: 800;

  --swb-tracking-tight: -0.02em;
  --swb-tracking-normal: 0;
  --swb-tracking-wide: 0.02em;

  /* ---------------------------------------------------------------------
   * Spacing - 4px base
   * ------------------------------------------------------------------ */
  --swb-space-0: 0;
  --swb-space-1: 0.25rem;
  --swb-space-2: 0.5rem;
  --swb-space-3: 0.75rem;
  --swb-space-4: 1rem;
  --swb-space-5: 1.25rem;
  --swb-space-6: 1.5rem;
  --swb-space-8: 2rem;
  --swb-space-10: 2.5rem;
  --swb-space-12: 3rem;
  --swb-space-16: 4rem;
  --swb-space-20: 5rem;
  --swb-space-24: 6rem;
  --swb-space-32: 8rem;

  /* Vertical rhythm between page sections. Generous on purpose - whitespace
     is what makes the marketplace feel premium rather than crowded. */
  --swb-section-y: clamp(3rem, 7vw, 6rem);
  --swb-section-y-tight: clamp(2rem, 4vw, 3.5rem);

  /* ---------------------------------------------------------------------
   * Radii - moderate. Not everything is a pill.
   * ------------------------------------------------------------------ */
  --swb-radius-xs: 6px;
  --swb-radius-sm: 8px;
  --swb-radius-md: 12px;
  --swb-radius-lg: 18px;
  --swb-radius-xl: 24px;
  --swb-radius-pill: 999px;
  --swb-radius-circle: 50%;

  /* ---------------------------------------------------------------------
   * Shadows - subtle. Hierarchy comes from borders and whitespace first.
   * ------------------------------------------------------------------ */
  --swb-shadow-xs: 0 1px 2px rgba(34, 43, 45, 0.04);
  --swb-shadow-sm: 0 1px 3px rgba(34, 43, 45, 0.05), 0 1px 2px rgba(34, 43, 45, 0.03);
  --swb-shadow-md: 0 4px 12px rgba(20, 36, 40, 0.06), 0 1px 3px rgba(34, 43, 45, 0.04);
  --swb-shadow-lg: 0 12px 28px rgba(20, 36, 40, 0.08), 0 2px 6px rgba(34, 43, 45, 0.04);
  --swb-shadow-focus: 0 0 0 3px rgba(18, 62, 70, 0.22);
  --swb-shadow-brand: 0 10px 28px rgba(18, 62, 70, 0.26);
  --swb-shadow-photo: 0 24px 60px -28px rgba(7, 26, 30, .55);

  /* ---------------------------------------------------------------------
   * Motion - 150-300ms, nothing showy.
   * ------------------------------------------------------------------ */
  --swb-ease-out: cubic-bezier(0.16, 1, 0.30, 1);      /* long, unhurried tail */
  --swb-ease-in-out: cubic-bezier(0.62, 0.02, 0.20, 1);
  --swb-duration-fast: 220ms;
  --swb-duration-base: 380ms;
  --swb-duration-slow: 620ms;
  --swb-duration-reveal: 1000ms;
  --swb-transition: var(--swb-duration-base) var(--swb-ease-out);
  --swb-transition-slow: var(--swb-duration-slow) var(--swb-ease-out);

  /* Every section reveals on the same curve, and later children start later.
     One rhythm for the whole site is what reads as "considered" rather than
     "animated". */
  --swb-stagger: 90ms;

  /* ---------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------ */
  --swb-container: 1240px;
  --swb-container-narrow: 880px;
  --swb-container-wide: 1440px;
  --swb-gutter: clamp(1rem, 4vw, 2rem);

  --swb-header-height: 84px;
  --swb-banner-height: clamp(300px, 34vw, 420px);
  --swb-mobile-nav-height: 64px;
  --swb-sidebar-width: 264px;

  --swb-z-dropdown: 100;
  --swb-z-sticky: 200;
  --swb-z-header: 300;
  --swb-z-drawer: 400;
  --swb-z-modal: 500;
  --swb-z-toast: 600;
}

/* Arabic swaps the family and loosens the line-height. */
[lang="ar"], [dir="rtl"]{
  --swb-font-body: var(--swb-font-ar);
  --swb-leading-normal: 1.75;
  --swb-leading-snug: 1.5;
  --swb-leading-tight: 1.35;
  --swb-tracking-tight: 0;   /* negative tracking damages Arabic letterforms */
  --swb-tracking-normal: 0;
}

@media (max-width: 640px) {
  :root{
    --swb-text-4xl: 2.125rem;
    --swb-text-5xl: 2.5rem;
    --swb-text-3xl: 1.75rem;
  }
}

/* Respect a stated preference for less movement. */
@media (prefers-reduced-motion: reduce) {
  :root{
    --swb-duration-fast: 0ms;
    --swb-duration-base: 0ms;
    --swb-duration-slow: 0ms;
    --swb-duration-reveal: 0ms;
    --swb-stagger: 0ms;
  }

  :where(.swb-w) *,
  :where(.swb-w) *::before,
  :where(.swb-w) *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*
 * Chalehat - base, layout and component library
 * ---------------------------------------------------------------------------
 * Written with CSS logical properties throughout (margin-inline, padding-block,
 * inset-inline, border-start-start-radius...) so the entire interface mirrors
 * correctly in Arabic without a single [dir="rtl"] override. Direction is set
 * once on <html> and everything follows.
 *
 * The few genuinely directional things - a chevron that must point "forward",
 * a decorative gradient angle - are handled explicitly at the bottom of the
 * relevant block.
 */

/* ===========================================================================
 * 1. Reset and base
 * ======================================================================== */

:where(.swb-w) *,
:where(.swb-w) *::before,
:where(.swb-w) *::after{
  box-sizing: border-box;
}

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--swb-header-height) + 1rem);
}

:where(.swb-w){
  margin: 0;
  font-family: var(--swb-font-body);
  font-size: var(--swb-text-base);
  line-height: var(--swb-leading-normal);
  color: var(--swb-ink);
  background: var(--swb-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nothing should ever scroll the page sideways. */
  overflow-x: hidden;
}

:where(.swb-w) h1, :where(.swb-w) h2, :where(.swb-w) h3, :where(.swb-w) h4, :where(.swb-w) h5, :where(.swb-w) h6{
  margin: 0;
  font-weight: var(--swb-weight-bold);
  line-height: var(--swb-leading-tight);
  letter-spacing: var(--swb-tracking-tight);
  color: var(--swb-ink);
}

:where(.swb-w) h1{ font-size: var(--swb-text-4xl); }
:where(.swb-w) h2{ font-size: var(--swb-text-3xl); }
:where(.swb-w) h3{ font-size: var(--swb-text-xl); }
:where(.swb-w) h4{ font-size: var(--swb-text-lg); }
:where(.swb-w) h5{ font-size: var(--swb-text-md); }
:where(.swb-w) h6{ font-size: var(--swb-text-base); }

:where(.swb-w) p{ margin: 0 0 var(--swb-space-4); }
:where(.swb-w) p:last-child{ margin-block-end: 0; }

:where(.swb-w) a{
  color: var(--swb-brand);
  text-decoration: none;
  transition: color var(--swb-transition);
}
:where(.swb-w) a:hover{ color: var(--swb-brand-hover); }

:where(.swb-w) img, :where(.swb-w) picture, :where(.swb-w) video, :where(.swb-w) svg{
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.swb-w) button, :where(.swb-w) input, :where(.swb-w) select, :where(.swb-w) textarea{
  font: inherit;
  color: inherit;
}

:where(.swb-w) ul, :where(.swb-w) ol{ margin: 0; padding-inline-start: 1.25rem; }
:where(.swb-w) ul.swb-plain, :where(.swb-w) ol.swb-plain{ list-style: none; padding-inline-start: 0; }

:where(.swb-w) hr{
  border: 0;
  border-block-start: 1px solid var(--swb-border);
  margin-block: var(--swb-space-8);
}

:where(.swb-w) small{ font-size: var(--swb-text-sm); }

/* Visible, consistent focus for keyboard users everywhere. */
:where(.swb-w) :focus-visible{
  outline: 2px solid var(--swb-purple-500);
  outline-offset: 2px;
  border-radius: var(--swb-radius-xs);
}

.swb-w .swb-visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.swb-w .swb-skip-link{
  position: absolute;
  inset-inline-start: var(--swb-space-4);
  inset-block-start: -100px;
  z-index: var(--swb-z-toast);
  background: var(--swb-brand);
  color: var(--swb-white);
  padding: var(--swb-space-3) var(--swb-space-5);
  border-radius: var(--swb-radius-sm);
  transition: inset-block-start var(--swb-transition);
}
.swb-w .swb-skip-link:focus{ inset-block-start: var(--swb-space-4); color: var(--swb-white); }

/* ===========================================================================
 * 2. Layout
 * ======================================================================== */

.swb-w .swb-container{
  width: 100%;
  max-width: var(--swb-container);
  margin-inline: auto;
  padding-inline: var(--swb-gutter);
}
.swb-w .swb-container--narrow{ max-width: var(--swb-container-narrow); }
.swb-w .swb-container--wide{ max-width: var(--swb-container-wide); }

.swb-w .swb-section{ padding-block: var(--swb-section-y); }
.swb-w .swb-section--tight{ padding-block: var(--swb-section-y-tight); }
.swb-w .swb-section--wash{ background: var(--swb-gradient-wash); }
.swb-w .swb-section--soft{ background: var(--swb-purple-25); }
.swb-w .swb-section--lavender{ background: var(--swb-purple-50); }

.swb-w .swb-stack > * + *{ margin-block-start: var(--swb-space-4); }
.swb-w .swb-stack-sm > * + *{ margin-block-start: var(--swb-space-2); }
.swb-w .swb-stack-lg > * + *{ margin-block-start: var(--swb-space-8); }

.swb-w .swb-row{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
}
.swb-w .swb-row--between{ justify-content: space-between; }
.swb-w .swb-row--end{ justify-content: flex-end; }
.swb-w .swb-row--center{ justify-content: center; }
.swb-w .swb-row--top{ align-items: flex-start; }
.swb-w .swb-row--wrap{ flex-wrap: wrap; }

.swb-w .swb-grid{ display: grid; gap: var(--swb-space-6); }
.swb-w .swb-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.swb-w .swb-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.swb-w .swb-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swb-w .swb-grid--auto{ grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.swb-w .swb-grid--auto-sm{ grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }

@media (max-width: 1024px) {
  .swb-w .swb-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swb-w .swb-grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .swb-w .swb-grid--2, .swb-w .swb-grid--3, .swb-w .swb-grid--4{ grid-template-columns: minmax(0, 1fr); }
}

.swb-w .swb-spacer{ flex: 1 1 auto; }

/* ===========================================================================
 * 3. Typography helpers
 * ======================================================================== */

.swb-w .swb-eyebrow{
  display: inline-block;
  font-size: var(--swb-text-xs);
  font-weight: var(--swb-weight-bold);
  letter-spacing: var(--swb-tracking-wide);
  text-transform: uppercase;
  color: var(--swb-brand);
  margin-block-end: var(--swb-space-3);
}
[dir="rtl"] .swb-w .swb-eyebrow, .swb-w[dir="rtl"] .swb-eyebrow{ text-transform: none; letter-spacing: 0; }

.swb-w .swb-lede{
  font-size: var(--swb-text-lg);
  line-height: var(--swb-leading-relaxed);
  color: var(--swb-ink-muted);
}

.swb-w .swb-muted{ color: var(--swb-ink-muted); }
.swb-w .swb-faint{ color: var(--swb-ink-faint); }
.swb-w .swb-strong{ font-weight: var(--swb-weight-semibold); }
.swb-w .swb-tabular{ font-variant-numeric: tabular-nums; }

.swb-w .swb-text-sm{ font-size: var(--swb-text-sm); }
.swb-w .swb-text-xs{ font-size: var(--swb-text-xs); }
.swb-w .swb-text-lg{ font-size: var(--swb-text-lg); }
.swb-w .swb-text-center{ text-align: center; }
.swb-w .swb-text-start{ text-align: start; }
.swb-w .swb-text-end{ text-align: end; }

.swb-w .swb-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--swb-space-6);
  margin-block-end: var(--swb-space-8);
  flex-wrap: wrap;
}
.swb-w .swb-section-head p{ margin-block-start: var(--swb-space-2); max-width: 60ch; }

.swb-w .swb-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swb-w .swb-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.swb-w .swb-clamp-3{ -webkit-line-clamp: 3; }

/* Prices read as numbers regardless of the surrounding text direction. */
.swb-w .swb-price{ font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }

/* ===========================================================================
 * 4. Buttons
 * ======================================================================== */

.swb-w .swb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--swb-space-2);
  padding: 0.6875rem var(--swb-space-5);
  border: 1px solid transparent;
  border-radius: var(--swb-radius-sm);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--swb-transition), border-color var(--swb-transition),
              color var(--swb-transition), box-shadow var(--swb-transition), transform var(--swb-duration-fast) var(--swb-ease-out);
}
.swb-w .swb-btn:active{ transform: translateY(1px); }
.swb-w .swb-btn:disabled, .swb-w .swb-btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.swb-w .swb-btn--primary{
  background: var(--swb-brand);
  color: var(--swb-white);
  box-shadow: var(--swb-shadow-xs);
}
.swb-w .swb-btn--primary:hover{ background: var(--swb-brand-hover); color: var(--swb-white); box-shadow: var(--swb-shadow-brand); }

.swb-w .swb-btn--secondary{
  background: var(--swb-white);
  color: var(--swb-ink);
  border-color: var(--swb-border-strong);
}
.swb-w .swb-btn--secondary:hover{ border-color: var(--swb-purple-300); color: var(--swb-brand); background: var(--swb-purple-25); }

.swb-w .swb-btn--soft{
  background: var(--swb-purple-100);
  color: var(--swb-purple-700);
}
.swb-w .swb-btn--soft:hover{ background: var(--swb-purple-200); color: var(--swb-purple-800); }

.swb-w .swb-btn--ghost{ background: transparent; color: var(--swb-ink-muted); }
.swb-w .swb-btn--ghost:hover{ background: var(--swb-surface-muted); color: var(--swb-ink); }

.swb-w .swb-btn--danger{ background: var(--swb-danger); color: var(--swb-white); }
.swb-w .swb-btn--danger:hover{ background: var(--swb-danger-ink); color: var(--swb-white); }

.swb-w .swb-btn--success{ background: var(--swb-success); color: var(--swb-white); }
.swb-w .swb-btn--success:hover{ background: var(--swb-success-ink); color: var(--swb-white); }

.swb-w .swb-btn--lg{ padding: 0.875rem var(--swb-space-8); font-size: var(--swb-text-base); border-radius: var(--swb-radius-md); }
.swb-w .swb-btn--sm{ padding: 0.4375rem var(--swb-space-3); font-size: var(--swb-text-xs); }
.swb-w .swb-btn--block{ width: 100%; }
.swb-w .swb-btn--icon{ padding: 0.5rem; width: 2.25rem; height: 2.25rem; }

.swb-w .swb-btn-group{ display: inline-flex; gap: var(--swb-space-2); flex-wrap: wrap; }

/* ===========================================================================
 * 5. Forms
 * ======================================================================== */

.swb-w .swb-field{ margin-block-end: var(--swb-space-5); }

.swb-w .swb-label{
  display: block;
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  margin-block-end: var(--swb-space-2);
  color: var(--swb-ink);
}
.swb-w .swb-label .swb-req{ color: var(--swb-danger); margin-inline-start: 2px; }
.swb-w .swb-label .swb-optional{ color: var(--swb-ink-faint); font-weight: var(--swb-weight-normal); font-size: var(--swb-text-xs); }

.swb-w .swb-input,
.swb-w .swb-select,
.swb-w .swb-textarea{
  display: block;
  width: 100%;
  padding: 0.6875rem var(--swb-space-4);
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-sm);
  background: var(--swb-white);
  font-size: var(--swb-text-base);
  line-height: 1.5;
  color: var(--swb-ink);
  transition: border-color var(--swb-transition), box-shadow var(--swb-transition);
}
.swb-w .swb-input::placeholder, .swb-w .swb-textarea::placeholder{ color: var(--swb-ink-faint); }
.swb-w .swb-input:focus, .swb-w .swb-select:focus, .swb-w .swb-textarea:focus{
  outline: none;
  border-color: var(--swb-purple-400);
  box-shadow: var(--swb-shadow-focus);
}
.swb-w .swb-input:disabled, .swb-w .swb-select:disabled, .swb-w .swb-textarea:disabled{
  background: var(--swb-surface-muted);
  color: var(--swb-ink-disabled);
  cursor: not-allowed;
}
.swb-w .swb-input.swb-is-invalid, .swb-w .swb-select.swb-is-invalid, .swb-w .swb-textarea.swb-is-invalid{ border-color: var(--swb-danger); }

.swb-w .swb-textarea{ min-height: 7rem; resize: vertical; }

.swb-w .swb-select{
  appearance: none;
  /* The chevron sits on the trailing edge in both directions. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23716A7C' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--swb-space-4) center;
  padding-inline-end: var(--swb-space-10);
}
[dir="rtl"] .swb-w .swb-select, .swb-w[dir="rtl"] .swb-select{
  background-position: left var(--swb-space-4) center;
  padding-inline-end: var(--swb-space-10);
  padding-inline-start: var(--swb-space-4);
}

.swb-w .swb-help{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); margin-block-start: var(--swb-space-2); }
.swb-w .swb-error-text{ font-size: var(--swb-text-xs); color: var(--swb-danger); margin-block-start: var(--swb-space-2); }

.swb-w .swb-checkbox, .swb-w .swb-radio{
  display: flex;
  align-items: flex-start;
  gap: var(--swb-space-3);
  cursor: pointer;
  font-size: var(--swb-text-sm);
  padding-block: var(--swb-space-1);
}
.swb-w .swb-checkbox input, .swb-w .swb-radio input{
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem 0 0;
  accent-color: var(--swb-brand);
  cursor: pointer;
}

/* Big tappable choice tiles - used throughout the owner wizard. */
.swb-w .swb-choice-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--swb-space-3);
}
.swb-w .swb-choice{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--swb-space-2);
  padding: var(--swb-space-6) var(--swb-space-4);
  border: 1.5px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-md);
  background: var(--swb-white);
  cursor: pointer;
  text-align: center;
  transition: all var(--swb-transition);
}
.swb-w .swb-choice:hover{ border-color: var(--swb-purple-300); background: var(--swb-purple-25); }
.swb-w .swb-choice input{ position: absolute; opacity: 0; pointer-events: none; }
.swb-w .swb-choice input:checked ~ .swb-choice__body,
.swb-w .swb-choice:has(input:checked){
  border-color: var(--swb-brand);
  background: var(--swb-purple-50);
  box-shadow: var(--swb-shadow-focus);
}
.swb-w .swb-choice__icon{ font-size: 1.75rem; line-height: 1; }
.swb-w .swb-choice__title{ font-weight: var(--swb-weight-semibold); font-size: var(--swb-text-sm); }
.swb-w .swb-choice__sub{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }

/* Guest / bedroom counters. */
.swb-w .swb-counter{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-4);
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-md);
  padding: var(--swb-space-2);
  background: var(--swb-white);
}
.swb-w .swb-counter__btn{
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-circle);
  background: var(--swb-white);
  font-size: var(--swb-text-lg);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink);
  cursor: pointer;
  transition: all var(--swb-transition);
  user-select: none;
}
.swb-w .swb-counter__btn:hover:not(:disabled){ border-color: var(--swb-brand); color: var(--swb-brand); }
.swb-w .swb-counter__btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.swb-w .swb-counter__value{
  min-width: 3ch;
  text-align: center;
  font-size: var(--swb-text-lg);
  font-weight: var(--swb-weight-bold);
  font-variant-numeric: tabular-nums;
}

.swb-w .swb-fieldset{ border: 0; padding: 0; margin: 0 0 var(--swb-space-6); }
.swb-w .swb-fieldset legend{ font-weight: var(--swb-weight-semibold); margin-block-end: var(--swb-space-3); padding: 0; }

/* ===========================================================================
 * 6. Cards and surfaces
 * ======================================================================== */

.swb-w .swb-card{
  background: var(--swb-surface);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  overflow: hidden;
  transition: border-color var(--swb-transition), box-shadow var(--swb-transition), transform var(--swb-transition);
}
.swb-w .swb-card--pad{ padding: var(--swb-space-6); }
.swb-w .swb-card--pad-sm{ padding: var(--swb-space-4); }
.swb-w .swb-card--feature{ border-radius: var(--swb-radius-xl); }
.swb-w .swb-card--hoverable:hover{
  border-color: var(--swb-purple-200);
  box-shadow: var(--swb-shadow-lg);
  transform: translateY(-2px);
}
.swb-w .swb-card--flat{ box-shadow: none; }
.swb-w .swb-card__header{
  padding: var(--swb-space-5) var(--swb-space-6);
  border-block-end: 1px solid var(--swb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--swb-space-4);
  flex-wrap: wrap;
}
.swb-w .swb-card__body{ padding: var(--swb-space-6); }
.swb-w .swb-card__footer{
  padding: var(--swb-space-4) var(--swb-space-6);
  border-block-start: 1px solid var(--swb-border);
  background: var(--swb-surface-sunken);
}

.swb-w .swb-panel{
  background: var(--swb-purple-25);
  border: 1px solid var(--swb-purple-100);
  border-radius: var(--swb-radius-lg);
  padding: var(--swb-space-6);
}

/* ===========================================================================
 * 7. Property card
 * ======================================================================== */

.swb-w .swb-property-card{
  display: flex;
  flex-direction: column;
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  overflow: hidden;
  height: 100%;
  transition: border-color var(--swb-transition), box-shadow var(--swb-transition), transform var(--swb-transition);
}
.swb-w .swb-property-card:hover{
  border-color: var(--swb-purple-200);
  box-shadow: var(--swb-shadow-lg);
  transform: translateY(-3px);
}

.swb-w .swb-property-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--swb-surface-muted);
  overflow: hidden;
}
.swb-w .swb-property-card__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--swb-duration-slow) var(--swb-ease-out);
}
.swb-w .swb-property-card:hover .swb-property-card__media img{ transform: scale(1.04); }

.swb-w .swb-property-card__badges{
  position: absolute;
  inset-block-start: var(--swb-space-3);
  inset-inline-start: var(--swb-space-3);
  display: flex;
  gap: var(--swb-space-1);
  z-index: 2;
}

.swb-w .swb-property-card__fav{
  position: absolute;
  inset-block-start: var(--swb-space-3);
  inset-inline-end: var(--swb-space-3);
  width: 2.125rem; height: 2.125rem;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--swb-radius-circle);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  cursor: pointer;
  color: var(--swb-ink-muted);
  transition: all var(--swb-transition);
  z-index: 2;
}
.swb-w .swb-property-card__fav:hover{ background: var(--swb-white); transform: scale(1.08); }
.swb-w .swb-property-card__fav.swb-is-active{ color: var(--swb-danger); }
.swb-w .swb-property-card__fav.swb-is-active svg{ fill: currentColor; }

.swb-w .swb-property-card__type{
  position: absolute;
  inset-block-end: var(--swb-space-3);
  inset-inline-start: var(--swb-space-3);
  padding: 0.25rem 0.625rem;
  border-radius: var(--swb-radius-pill);
  background: rgba(20, 36, 40, 0.72);
  backdrop-filter: blur(4px);
  color: var(--swb-white);
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-semibold);
}

.swb-w .swb-property-card__body{
  padding: var(--swb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--swb-space-2);
  flex: 1;
}
.swb-w .swb-property-card__title{
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-semibold);
  line-height: var(--swb-leading-snug);
  color: var(--swb-ink);
}
.swb-w .swb-property-card__location{ font-size: var(--swb-text-sm); color: var(--swb-ink-muted); }
.swb-w .swb-property-card__meta{
  font-size: var(--swb-text-sm);
  color: var(--swb-ink-muted);
  display: flex;
  align-items: center;
  gap: var(--swb-space-2);
  flex-wrap: wrap;
}
.swb-w .swb-property-card__meta .swb-dot{ color: var(--swb-ink-disabled); }
.swb-w .swb-property-card__footer{
  margin-block-start: auto;
  padding-block-start: var(--swb-space-3);
  border-block-start: 1px solid var(--swb-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--swb-space-2);
}
.swb-w .swb-property-card__price{ font-size: var(--swb-text-lg); font-weight: var(--swb-weight-bold); }
.swb-w .swb-property-card__price small{ font-size: var(--swb-text-xs); font-weight: var(--swb-weight-normal); color: var(--swb-ink-muted); }
.swb-w .swb-property-card__rating{ display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--swb-text-sm); font-weight: var(--swb-weight-semibold); }
.swb-w .swb-property-card__rating .swb-star{ color: var(--swb-verify-gold); }

/* ===========================================================================
 * 8. Verification badges - the three trust signals
 * ======================================================================== */

.swb-w .swb-vbadge{
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5625rem;
  border-radius: var(--swb-radius-pill);
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.swb-w .swb-vbadge__dot{ width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }

.swb-w .swb-vbadge--blue{ background: var(--swb-verify-blue-soft);  color: var(--swb-verify-blue-ink);  border-color: rgba(29, 116, 245, 0.22); }
.swb-w .swb-vbadge--green{ background: var(--swb-verify-green-soft); color: var(--swb-verify-green-ink); border-color: rgba(18, 161, 80, 0.22); }
.swb-w .swb-vbadge--gold{ background: var(--swb-verify-gold-soft);  color: var(--swb-verify-gold-ink);  border-color: rgba(200, 152, 31, 0.28); }

.swb-w .swb-vbadge--blue  .swb-vbadge__dot{ background: var(--swb-verify-blue); }
.swb-w .swb-vbadge--green .swb-vbadge__dot{ background: var(--swb-verify-green); }
.swb-w .swb-vbadge--gold  .swb-vbadge__dot{ background: var(--swb-verify-gold); }

/* Compact form on a photo. */
.swb-w .swb-vbadge--pill{
  padding: 0.1875rem;
  width: 1.375rem; height: 1.375rem;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  box-shadow: var(--swb-shadow-sm);
}
.swb-w .swb-vbadge--pill .swb-vbadge__dot{ width: 0.5rem; height: 0.5rem; }

/* Trust panel on the property page. */
.swb-w .swb-trust-panel{ border: 1px solid var(--swb-border); border-radius: var(--swb-radius-lg); overflow: hidden; }
.swb-w .swb-trust-panel__head{
  padding: var(--swb-space-5) var(--swb-space-6);
  background: var(--swb-purple-25);
  border-block-end: 1px solid var(--swb-border);
}
.swb-w .swb-trust-panel__list{ padding: var(--swb-space-2); }
.swb-w .swb-trust-item{
  display: flex;
  gap: var(--swb-space-4);
  padding: var(--swb-space-4);
  border-radius: var(--swb-radius-md);
  transition: background var(--swb-transition);
}
.swb-w .swb-trust-item:hover{ background: var(--swb-surface-sunken); }
.swb-w .swb-trust-item__icon{
  flex: none;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--swb-radius-circle);
  font-size: var(--swb-text-base);
}
.swb-w .swb-trust-item--blue  .swb-trust-item__icon{ background: var(--swb-verify-blue-soft);  color: var(--swb-verify-blue); }
.swb-w .swb-trust-item--green .swb-trust-item__icon{ background: var(--swb-verify-green-soft); color: var(--swb-verify-green); }
.swb-w .swb-trust-item--gold  .swb-trust-item__icon{ background: var(--swb-verify-gold-soft);  color: var(--swb-verify-gold); }
.swb-w .swb-trust-item__title{ font-weight: var(--swb-weight-semibold); font-size: var(--swb-text-sm); }
.swb-w .swb-trust-item__desc{ font-size: var(--swb-text-sm); color: var(--swb-ink-muted); margin-block-start: 2px; }

/* ===========================================================================
 * 9. Status badges
 * ======================================================================== */

.swb-w .swb-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--swb-radius-pill);
  font-size: var(--swb-text-xs);
  font-weight: var(--swb-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.swb-w .swb-badge--success{ background: var(--swb-success-soft); color: var(--swb-success-ink); }
.swb-w .swb-badge--info{ background: var(--swb-info-soft);    color: var(--swb-info-ink); }
.swb-w .swb-badge--pending{ background: var(--swb-pending-soft); color: var(--swb-pending-ink); }
.swb-w .swb-badge--warning{ background: var(--swb-warning-soft); color: var(--swb-warning-ink); }
.swb-w .swb-badge--danger{ background: var(--swb-danger-soft);  color: var(--swb-danger-ink); }
.swb-w .swb-badge--neutral{ background: var(--swb-neutral-soft); color: var(--swb-neutral-ink); }
.swb-w .swb-badge--muted{ background: var(--swb-muted-soft);   color: var(--swb-muted-tone); }
.swb-w .swb-badge--count{ background: var(--swb-brand); color: var(--swb-white); min-width: 1.25rem; justify-content: center; padding-inline: 0.375rem; }

/* ===========================================================================
 * 10. Booking timeline
 *
 * Four coarse steps for the customer. The platform has nineteen booking
 * statuses; the customer sees four, and never the machine names.
 * ======================================================================== */

.swb-w .swb-timeline{
  display: flex;
  gap: var(--swb-space-2);
  counter-reset: step;
}
.swb-w .swb-timeline__step{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--swb-space-2);
  position: relative;
  padding-block-start: var(--swb-space-6);
}
.swb-w .swb-timeline__step::before{
  content: '';
  position: absolute;
  inset-block-start: 0.6875rem;
  inset-inline: 0;
  height: 2px;
  background: var(--swb-border);
  border-radius: 2px;
}
.swb-w .swb-timeline__marker{
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--swb-white);
  border: 2px solid var(--swb-border-strong);
  display: grid; place-items: center;
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  color: var(--swb-ink-faint);
  z-index: 1;
}
.swb-w .swb-timeline__label{ font-size: var(--swb-text-sm); font-weight: var(--swb-weight-semibold); color: var(--swb-ink-muted); }
.swb-w .swb-timeline__hint{ font-size: var(--swb-text-xs); color: var(--swb-ink-faint); }

.swb-w .swb-timeline__step.swb-is-done::before{ background: var(--swb-success); }
.swb-w .swb-timeline__step.swb-is-done .swb-timeline__marker{ border-color: var(--swb-success); background: var(--swb-success); color: var(--swb-white); }
.swb-w .swb-timeline__step.swb-is-done .swb-timeline__label{ color: var(--swb-ink); }

.swb-w .swb-timeline__step.swb-is-current::before{ background: var(--swb-brand); }
.swb-w .swb-timeline__step.swb-is-current .swb-timeline__marker{
  border-color: var(--swb-brand);
  color: var(--swb-brand);
  box-shadow: var(--swb-shadow-focus);
}
.swb-w .swb-timeline__step.swb-is-current .swb-timeline__label{ color: var(--swb-brand); }

.swb-w .swb-timeline__step.swb-is-failed::before{ background: var(--swb-warning); }
.swb-w .swb-timeline__step.swb-is-failed .swb-timeline__marker{ border-color: var(--swb-warning); background: var(--swb-warning); color: var(--swb-white); }

@media (max-width: 640px) {
  .swb-w .swb-timeline{ flex-direction: column; gap: var(--swb-space-4); }
  .swb-w .swb-timeline__step{ padding-block-start: 0; padding-inline-start: var(--swb-space-8); }
  .swb-w .swb-timeline__step::before{
    inset-block: 1.75rem 0;
    inset-inline-start: 0.6875rem;
    inset-inline-end: auto;
    width: 2px; height: auto;
  }
  .swb-w .swb-timeline__step:last-child::before{ display: none; }
}

/* Vertical activity / audit timeline. */
.swb-w .swb-activity-timeline{ position: relative; padding-inline-start: var(--swb-space-8); }
.swb-w .swb-activity-timeline::before{
  content: '';
  position: absolute;
  inset-block: 0.5rem 0.5rem;
  inset-inline-start: 0.4375rem;
  width: 2px;
  background: var(--swb-border);
}
.swb-w .swb-activity-item{ position: relative; padding-block-end: var(--swb-space-5); }
.swb-w .swb-activity-item::before{
  content: '';
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-start: calc(var(--swb-space-8) * -1 + 0.125rem);
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--swb-white);
  border: 2px solid var(--swb-purple-300);
}
.swb-w .swb-activity-item__meta{ font-size: var(--swb-text-xs); color: var(--swb-ink-faint); }
.swb-w .swb-activity-item__body{ font-size: var(--swb-text-sm); }

/* ===========================================================================
 * 11. Header and navigation
 * ======================================================================== */

.swb-w .swb-site-header{
  position: sticky;
  inset-block-start: 0;
  z-index: var(--swb-z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.6) blur(12px);
  border-block-end: 1px solid var(--swb-border);
}
.swb-w .swb-site-header__inner{
  height: var(--swb-header-height);
  display: flex;
  align-items: center;
  gap: var(--swb-space-6);
}

.swb-w .swb-logo{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
  font-size: var(--swb-text-lg);
  font-weight: var(--swb-weight-extrabold);
  color: var(--swb-ink);
  letter-spacing: var(--swb-tracking-tight);
  flex: none;
}
.swb-w .swb-logo:hover{ color: var(--swb-ink); }
.swb-w .swb-logo__mark{
  width: 2rem; height: 2rem;
  border-radius: var(--swb-radius-sm);
  background: var(--swb-gradient-brand);
  display: grid; place-items: center;
  color: var(--swb-white);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-extrabold);
}

.swb-w .swb-nav{ display: flex; align-items: center; gap: var(--swb-space-1); }
.swb-w .swb-nav__link{
  padding: var(--swb-space-2) var(--swb-space-3);
  border-radius: var(--swb-radius-sm);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-medium);
  color: var(--swb-ink-soft);
  transition: all var(--swb-transition);
}
.swb-w .swb-nav__link:hover{ background: var(--swb-purple-50); color: var(--swb-brand); }
.swb-w .swb-nav__link.swb-is-active{ color: var(--swb-brand); background: var(--swb-purple-50); font-weight: var(--swb-weight-semibold); }

.swb-w .swb-lang-switch{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-1);
  padding: var(--swb-space-2) var(--swb-space-3);
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-sm);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink-soft);
}
.swb-w .swb-lang-switch:hover{ border-color: var(--swb-purple-300); color: var(--swb-brand); }

.swb-w .swb-avatar{
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-purple-100);
  color: var(--swb-purple-700);
  display: grid; place-items: center;
  font-size: var(--swb-text-xs);
  font-weight: var(--swb-weight-bold);
  flex: none;
  overflow: hidden;
}
.swb-w .swb-avatar--lg{ width: 3.5rem; height: 3.5rem; font-size: var(--swb-text-base); }
.swb-w .swb-avatar img{ width: 100%; height: 100%; object-fit: cover; }

.swb-w .swb-menu-toggle{ display: none; }

@media (max-width: 900px) {
  .swb-w .swb-nav--main{ display: none; }
  .swb-w .swb-menu-toggle{ display: inline-flex; }
}

/* Dropdown */
.swb-w .swb-dropdown{ position: relative; }
.swb-w .swb-dropdown__panel{
  position: absolute;
  inset-block-start: calc(100% + var(--swb-space-2));
  inset-inline-end: 0;
  min-width: 220px;
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  box-shadow: var(--swb-shadow-lg);
  padding: var(--swb-space-2);
  z-index: var(--swb-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--swb-transition), transform var(--swb-transition), visibility var(--swb-transition);
}
.swb-w .swb-dropdown.swb-is-open .swb-dropdown__panel{ opacity: 1; visibility: visible; transform: translateY(0); }
.swb-w .swb-dropdown__item{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  padding: var(--swb-space-2) var(--swb-space-3);
  border-radius: var(--swb-radius-xs);
  font-size: var(--swb-text-sm);
  color: var(--swb-ink-soft);
  width: 100%;
  border: 0; background: none; cursor: pointer;
  text-align: start;
}
.swb-w .swb-dropdown__item:hover{ background: var(--swb-purple-50); color: var(--swb-brand); }
.swb-w .swb-dropdown__divider{ height: 1px; background: var(--swb-border); margin: var(--swb-space-2) 0; }

/* Mobile bottom navigation */
.swb-w .swb-mobile-nav{
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--swb-z-sticky);
  background: var(--swb-white);
  border-block-start: 1px solid var(--swb-border);
  padding-block: var(--swb-space-2);
  padding-block-end: max(var(--swb-space-2), env(safe-area-inset-bottom));
}
.swb-w .swb-mobile-nav__list{ display: flex; justify-content: space-around; align-items: center; }
.swb-w .swb-mobile-nav__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-medium);
  color: var(--swb-ink-muted);
  padding: var(--swb-space-1) var(--swb-space-2);
  min-width: 3.5rem;
}
.swb-w .swb-mobile-nav__item.swb-is-active{ color: var(--swb-brand); }
.swb-w .swb-mobile-nav__icon{ font-size: 1.125rem; line-height: 1; }

@media (max-width: 900px) {
  .swb-w .swb-mobile-nav{ display: block; }
  body.swb-has-mobile-nav{ padding-block-end: var(--swb-mobile-nav-height); }
}

/* ===========================================================================
 * 12. Hero and search
 * ======================================================================== */

.swb-w .swb-hero{
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--swb-gradient-wash);
  overflow: hidden;
}
.swb-w .swb-hero::after{
  /* A single soft lavender wash, not a purple page. */
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(40, 95, 105, 0.14) 0%, rgba(40, 95, 105, 0) 68%);
  pointer-events: none;
}
.swb-w .swb-hero__inner{ position: relative; z-index: 1; }
.swb-w .swb-hero__title{
  font-size: var(--swb-text-5xl);
  line-height: var(--swb-leading-tight);
  max-width: 18ch;
}
.swb-w .swb-hero__sub{
  font-size: var(--swb-text-lg);
  color: var(--swb-ink-muted);
  max-width: 52ch;
  margin-block-start: var(--swb-space-5);
  line-height: var(--swb-leading-relaxed);
}
.swb-w .swb-hero__media{
  border-radius: var(--swb-radius-xl);
  overflow: hidden;
  box-shadow: var(--swb-shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--swb-purple-100);
}
.swb-w .swb-hero__media img{ width: 100%; height: 100%; object-fit: cover; }

.swb-w .swb-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .swb-w .swb-hero__grid{ grid-template-columns: 1fr; }
  .swb-w .swb-hero__media{ display: none; }
}

.swb-w .swb-searchbar{
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  box-shadow: var(--swb-shadow-lg);
  padding: var(--swb-space-2);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr auto;
  gap: var(--swb-space-1);
  align-items: stretch;
}
.swb-w .swb-searchbar__field{
  padding: var(--swb-space-3) var(--swb-space-4);
  border-radius: var(--swb-radius-md);
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  transition: background var(--swb-transition);
}
.swb-w .swb-searchbar__field:hover{ background: var(--swb-surface-sunken); }
.swb-w .swb-searchbar__field + .swb-searchbar__field{ border-inline-start: 1px solid var(--swb-border); }
.swb-w .swb-searchbar__label{
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  color: var(--swb-ink);
  letter-spacing: var(--swb-tracking-wide);
  text-transform: uppercase;
}
[dir="rtl"] .swb-w .swb-searchbar__label, .swb-w[dir="rtl"] .swb-searchbar__label{ text-transform: none; letter-spacing: 0; }
.swb-w .swb-searchbar__input{
  border: 0; padding: 0; background: none;
  font-size: var(--swb-text-sm);
  color: var(--swb-ink);
  width: 100%;
  min-width: 0;
}
.swb-w .swb-searchbar__input:focus{ outline: none; }
.swb-w .swb-searchbar__input::placeholder{ color: var(--swb-ink-faint); }
.swb-w .swb-searchbar__submit{ align-self: center; margin-inline: var(--swb-space-2); }

@media (max-width: 900px) {
  .swb-w .swb-searchbar{ grid-template-columns: 1fr 1fr; }
  .swb-w .swb-searchbar__field + .swb-searchbar__field{ border-inline-start: 0; }
  .swb-w .swb-searchbar__field:nth-child(1){ grid-column: 1 / -1; }
  .swb-w .swb-searchbar__submit{ grid-column: 1 / -1; margin: var(--swb-space-2); }
}

.swb-w .swb-autocomplete{
  position: absolute;
  inset-block-start: calc(100% + var(--swb-space-2));
  inset-inline: 0;
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  box-shadow: var(--swb-shadow-lg);
  z-index: var(--swb-z-dropdown);
  max-height: 20rem;
  overflow-y: auto;
  padding: var(--swb-space-2);
}
.swb-w .swb-autocomplete:empty{ display: none; }
.swb-w .swb-autocomplete__item{
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--swb-space-2) var(--swb-space-3);
  border-radius: var(--swb-radius-xs);
  cursor: pointer;
  font-size: var(--swb-text-sm);
}
.swb-w .swb-autocomplete__item:hover, .swb-w .swb-autocomplete__item.swb-is-highlighted{ background: var(--swb-purple-50); }
.swb-w .swb-autocomplete__sub{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }

/* ===========================================================================
 * 13. Dashboard shell
 * ======================================================================== */

.swb-w .swb-dash{
  display: grid;
  grid-template-columns: var(--swb-sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--swb-header-height));
  align-items: start;
}
.swb-w .swb-dash__sidebar{
  position: sticky;
  inset-block-start: var(--swb-header-height);
  height: calc(100vh - var(--swb-header-height));
  overflow-y: auto;
  border-inline-end: 1px solid var(--swb-border);
  background: var(--swb-surface-sunken);
  padding: var(--swb-space-6) var(--swb-space-4);
}
.swb-w .swb-dash__main{ padding: var(--swb-space-8) var(--swb-gutter); min-width: 0; }

.swb-w .swb-dash-nav__group + .swb-dash-nav__group{ margin-block-start: var(--swb-space-6); }
.swb-w .swb-dash-nav__title{
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  letter-spacing: var(--swb-tracking-wide);
  text-transform: uppercase;
  color: var(--swb-ink-faint);
  padding-inline: var(--swb-space-3);
  margin-block-end: var(--swb-space-2);
}
[dir="rtl"] .swb-w .swb-dash-nav__title, .swb-w[dir="rtl"] .swb-dash-nav__title{ text-transform: none; letter-spacing: 0; }
.swb-w .swb-dash-nav__link{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  padding: var(--swb-space-2) var(--swb-space-3);
  border-radius: var(--swb-radius-sm);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-medium);
  color: var(--swb-ink-soft);
  transition: all var(--swb-transition);
  margin-block-end: 2px;
}
.swb-w .swb-dash-nav__link:hover{ background: var(--swb-purple-50); color: var(--swb-brand); }
.swb-w .swb-dash-nav__link.swb-is-active{
  background: var(--swb-purple-100);
  color: var(--swb-purple-700);
  font-weight: var(--swb-weight-semibold);
}
.swb-w .swb-dash-nav__count{
  margin-inline-start: auto;
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  background: var(--swb-white);
  color: var(--swb-ink-muted);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--swb-radius-pill);
  border: 1px solid var(--swb-border);
}
.swb-w .swb-dash-nav__link.swb-is-active .swb-dash-nav__count{ background: var(--swb-white); color: var(--swb-brand); border-color: var(--swb-purple-200); }

.swb-w .swb-page-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--swb-space-6);
  margin-block-end: var(--swb-space-8);
  flex-wrap: wrap;
}
.swb-w .swb-page-head h1{ font-size: var(--swb-text-2xl); }
.swb-w .swb-page-head p{ color: var(--swb-ink-muted); margin-block-start: var(--swb-space-1); }

@media (max-width: 1024px) {
  .swb-w .swb-dash{ grid-template-columns: 1fr; }
  .swb-w .swb-dash__sidebar{
    position: static;
    height: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--swb-border);
    padding: var(--swb-space-4) var(--swb-gutter);
  }
  .swb-w .swb-dash-nav{ display: flex; gap: var(--swb-space-2); overflow-x: auto; padding-block-end: var(--swb-space-2); }
  .swb-w .swb-dash-nav__group{ display: flex; gap: var(--swb-space-2); }
  .swb-w .swb-dash-nav__group + .swb-dash-nav__group{ margin-block-start: 0; }
  .swb-w .swb-dash-nav__title{ display: none; }
  .swb-w .swb-dash-nav__link{ white-space: nowrap; margin: 0; }
}

/* Metric card */
.swb-w .swb-metric{
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  padding: var(--swb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--swb-space-1);
  transition: all var(--swb-transition);
}
.swb-w .swb-metric--link:hover{ border-color: var(--swb-purple-200); box-shadow: var(--swb-shadow-md); }
.swb-w .swb-metric__label{ font-size: var(--swb-text-sm); color: var(--swb-ink-muted); }
.swb-w .swb-metric__value{ font-size: var(--swb-text-2xl); font-weight: var(--swb-weight-bold); font-variant-numeric: tabular-nums; line-height: 1.15; }
.swb-w .swb-metric__hint{ font-size: var(--swb-text-xs); color: var(--swb-ink-faint); }
.swb-w .swb-metric--warning{ border-color: rgba(217, 119, 6, 0.3); background: var(--swb-warning-soft); }
.swb-w .swb-metric--warning .swb-metric__value{ color: var(--swb-warning-ink); }
.swb-w .swb-metric--danger{ border-color: rgba(220, 38, 38, 0.3); background: var(--swb-danger-soft); }
.swb-w .swb-metric--danger .swb-metric__value{ color: var(--swb-danger-ink); }
.swb-w .swb-metric--pending{ border-color: var(--swb-purple-200); background: var(--swb-purple-25); }

/* ===========================================================================
 * 14. Tables
 * ======================================================================== */

.swb-w .swb-table-wrap{
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  overflow-x: auto;
  background: var(--swb-white);
}
.swb-w .swb-table{ width: 100%; border-collapse: collapse; font-size: var(--swb-text-sm); }
.swb-w .swb-table th{
  text-align: start;
  padding: var(--swb-space-3) var(--swb-space-4);
  font-size: var(--swb-text-xs);
  font-weight: var(--swb-weight-bold);
  color: var(--swb-ink-muted);
  background: var(--swb-surface-sunken);
  border-block-end: 1px solid var(--swb-border);
  white-space: nowrap;
}
.swb-w .swb-table td{
  padding: var(--swb-space-4);
  border-block-end: 1px solid var(--swb-border);
  vertical-align: middle;
}
.swb-w .swb-table tbody tr:last-child td{ border-block-end: 0; }
.swb-w .swb-table tbody tr:hover{ background: var(--swb-surface-sunken); }
.swb-w .swb-table__actions{ display: flex; gap: var(--swb-space-2); justify-content: flex-end; }
.swb-w .swb-table--compact td, .swb-w .swb-table--compact th{ padding: var(--swb-space-2) var(--swb-space-3); }

.swb-w .swb-filters{
  display: flex;
  gap: var(--swb-space-3);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-block-end: var(--swb-space-5);
  padding: var(--swb-space-4);
  background: var(--swb-surface-sunken);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
}
.swb-w .swb-filters .swb-field{ margin: 0; min-width: 10rem; flex: 1 1 10rem; }

.swb-w .swb-tabs{
  display: flex;
  gap: var(--swb-space-1);
  border-block-end: 1px solid var(--swb-border);
  margin-block-end: var(--swb-space-6);
  overflow-x: auto;
}
.swb-w .swb-tab{
  padding: var(--swb-space-3) var(--swb-space-4);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-medium);
  color: var(--swb-ink-muted);
  border-block-end: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
}
.swb-w .swb-tab:hover{ color: var(--swb-ink); }
.swb-w .swb-tab.swb-is-active{ color: var(--swb-brand); border-block-end-color: var(--swb-brand); font-weight: var(--swb-weight-semibold); }
.swb-w .swb-tab__count{
  font-size: var(--swb-text-2xs);
  background: var(--swb-surface-muted);
  color: var(--swb-ink-muted);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--swb-radius-pill);
}
.swb-w .swb-tab.swb-is-active .swb-tab__count{ background: var(--swb-purple-100); color: var(--swb-purple-700); }

/* ===========================================================================
 * 15. Alerts, toasts, modals, drawers
 * ======================================================================== */

.swb-w .swb-alert{
  display: flex;
  gap: var(--swb-space-3);
  padding: var(--swb-space-4);
  border-radius: var(--swb-radius-md);
  border: 1px solid transparent;
  font-size: var(--swb-text-sm);
  margin-block-end: var(--swb-space-5);
}
.swb-w .swb-alert__icon{ flex: none; font-size: var(--swb-text-base); line-height: 1.4; }
.swb-w .swb-alert--success{ background: var(--swb-success-soft); border-color: rgba(18, 161, 80, 0.24); color: var(--swb-success-ink); }
.swb-w .swb-alert--info{ background: var(--swb-info-soft);    border-color: rgba(29, 116, 245, 0.24); color: var(--swb-info-ink); }
.swb-w .swb-alert--warning{ background: var(--swb-warning-soft); border-color: rgba(217, 119, 6, 0.28); color: var(--swb-warning-ink); }
.swb-w .swb-alert--danger{ background: var(--swb-danger-soft);  border-color: rgba(220, 38, 38, 0.24); color: var(--swb-danger-ink); }
.swb-w .swb-alert--brand{ background: var(--swb-purple-50);    border-color: var(--swb-purple-200); color: var(--swb-purple-800); }

.swb-w .swb-toast-stack{
  position: fixed;
  inset-block-end: var(--swb-space-6);
  inset-inline-end: var(--swb-space-6);
  z-index: var(--swb-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--swb-space-3);
  max-width: min(24rem, calc(100vw - 2rem));
}
.swb-w .swb-toast{
  background: var(--swb-ink);
  color: var(--swb-white);
  padding: var(--swb-space-4);
  border-radius: var(--swb-radius-md);
  box-shadow: var(--swb-shadow-lg);
  font-size: var(--swb-text-sm);
  animation: swb-toast-in var(--swb-duration-slow) var(--swb-ease-out);
}
@keyframes swb-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.swb-w .swb-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(20, 36, 40, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--swb-z-modal);
  display: grid;
  place-items: center;
  padding: var(--swb-space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--swb-transition), visibility var(--swb-transition);
}
.swb-w .swb-modal-backdrop.swb-is-open{ opacity: 1; visibility: visible; }
.swb-w .swb-modal{
  background: var(--swb-white);
  border-radius: var(--swb-radius-lg);
  box-shadow: var(--swb-shadow-lg);
  width: min(34rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  transform: scale(0.97);
  transition: transform var(--swb-transition);
}
.swb-w .swb-modal--wide{ width: min(52rem, 100%); }
.swb-w .swb-modal-backdrop.swb-is-open .swb-modal{ transform: scale(1); }
.swb-w .swb-modal__header{
  padding: var(--swb-space-5) var(--swb-space-6);
  border-block-end: 1px solid var(--swb-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--swb-space-4);
}
.swb-w .swb-modal__body{ padding: var(--swb-space-6); }
.swb-w .swb-modal__footer{
  padding: var(--swb-space-4) var(--swb-space-6);
  border-block-start: 1px solid var(--swb-border);
  display: flex; justify-content: flex-end; gap: var(--swb-space-3);
  background: var(--swb-surface-sunken);
}

.swb-w .swb-drawer{
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(24rem, 92vw);
  background: var(--swb-white);
  box-shadow: var(--swb-shadow-lg);
  z-index: var(--swb-z-drawer);
  transform: translateX(100%);
  transition: transform var(--swb-duration-slow) var(--swb-ease-out);
  overflow-y: auto;
}
[dir="rtl"] .swb-w .swb-drawer, .swb-w[dir="rtl"] .swb-drawer{ transform: translateX(-100%); }
.swb-w .swb-drawer.swb-is-open{ transform: translateX(0); }

/* ===========================================================================
 * 16. Empty, loading and error states
 * ======================================================================== */

.swb-w .swb-empty{
  text-align: center;
  padding: var(--swb-space-16) var(--swb-space-6);
  border: 1px dashed var(--swb-border-strong);
  border-radius: var(--swb-radius-lg);
  background: var(--swb-surface-sunken);
}
.swb-w .swb-empty__icon{ font-size: 2.5rem; margin-block-end: var(--swb-space-4); opacity: 0.5; }
.swb-w .swb-empty__title{ font-size: var(--swb-text-lg); font-weight: var(--swb-weight-semibold); margin-block-end: var(--swb-space-2); }
.swb-w .swb-empty__text{ color: var(--swb-ink-muted); max-width: 42ch; margin-inline: auto; margin-block-end: var(--swb-space-5); }

.swb-w .swb-spinner{
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--swb-purple-200);
  border-block-start-color: var(--swb-brand);
  border-radius: 50%;
  animation: swb-spin 700ms linear infinite;
  display: inline-block;
}
@keyframes swb-spin { to { transform: rotate(360deg); } }

.swb-w .swb-skeleton{
  background: linear-gradient(90deg, var(--swb-surface-muted) 25%, #E8EEEC 50%, var(--swb-surface-muted) 75%);
  background-size: 200% 100%;
  animation: swb-shimmer 1.4s infinite;
  border-radius: var(--swb-radius-sm);
}
@keyframes swb-shimmer { to { background-position: -200% 0; } }

.swb-w .swb-error-page{
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--swb-space-8);
}
.swb-w .swb-error-page__code{
  font-size: 5rem;
  font-weight: var(--swb-weight-extrabold);
  background: var(--swb-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

/* ===========================================================================
 * 17. Gallery
 * ======================================================================== */

.swb-w .swb-gallery{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--swb-space-2);
  border-radius: var(--swb-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
}
.swb-w .swb-gallery__item{ overflow: hidden; background: var(--swb-surface-muted); }
.swb-w .swb-gallery__item:first-child{ grid-row: span 2; }
.swb-w .swb-gallery__item img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--swb-duration-slow) var(--swb-ease-out); }
.swb-w .swb-gallery__item:hover img{ transform: scale(1.03); }
.swb-w .swb-gallery__more{
  position: absolute;
  inset-block-end: var(--swb-space-4);
  inset-inline-end: var(--swb-space-4);
}

@media (max-width: 768px) {
  .swb-w .swb-gallery{ grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 3; }
  .swb-w .swb-gallery__item:not(:first-child){ display: none; }
  .swb-w .swb-gallery__item:first-child{ grid-row: span 1; }
}

/* ===========================================================================
 * 18. Booking panel (sticky on desktop, bar on mobile)
 * ======================================================================== */

.swb-w .swb-booking-panel{
  position: sticky;
  inset-block-start: calc(var(--swb-header-height) + var(--swb-space-6));
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  box-shadow: var(--swb-shadow-md);
  padding: var(--swb-space-6);
}
.swb-w .swb-booking-panel__price{ display: flex; align-items: baseline; gap: var(--swb-space-2); margin-block-end: var(--swb-space-5); }
.swb-w .swb-booking-panel__price .swb-amount{ font-size: var(--swb-text-2xl); font-weight: var(--swb-weight-bold); }

.swb-w .swb-quote-lines{ border-block-start: 1px solid var(--swb-border); padding-block-start: var(--swb-space-4); margin-block-start: var(--swb-space-4); }
.swb-w .swb-quote-line{ display: flex; justify-content: space-between; gap: var(--swb-space-4); font-size: var(--swb-text-sm); margin-block-end: var(--swb-space-2); }
.swb-w .swb-quote-line--total{
  border-block-start: 1px solid var(--swb-border);
  padding-block-start: var(--swb-space-3);
  margin-block-start: var(--swb-space-3);
  font-weight: var(--swb-weight-bold);
  font-size: var(--swb-text-base);
}

.swb-w .swb-mobile-cta{
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--swb-z-sticky);
  background: var(--swb-white);
  border-block-start: 1px solid var(--swb-border);
  padding: var(--swb-space-3) var(--swb-gutter);
  padding-block-end: max(var(--swb-space-3), env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(20, 36, 40, 0.06);
}
@media (max-width: 900px) {
  .swb-w .swb-mobile-cta{ display: flex; align-items: center; gap: var(--swb-space-4); }
  .swb-w .swb-booking-panel{ position: static; }
}

/* ===========================================================================
 * 19. Calendar
 * ======================================================================== */

.swb-w .swb-calendar{ border: 1px solid var(--swb-border); border-radius: var(--swb-radius-md); overflow: hidden; }
.swb-w .swb-calendar__head{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--swb-surface-sunken);
  border-block-end: 1px solid var(--swb-border);
}
.swb-w .swb-calendar__dow{
  padding: var(--swb-space-2);
  text-align: center;
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  color: var(--swb-ink-muted);
}
.swb-w .swb-calendar__grid{ display: grid; grid-template-columns: repeat(7, 1fr); }
.swb-w .swb-calendar__day{
  aspect-ratio: 1;
  border: 0;
  border-inline-end: 1px solid var(--swb-border);
  border-block-end: 1px solid var(--swb-border);
  background: var(--swb-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  font-size: var(--swb-text-sm);
  transition: background var(--swb-transition);
  padding: var(--swb-space-1);
}
.swb-w .swb-calendar__day:hover:not(:disabled){ background: var(--swb-purple-50); }
.swb-w .swb-calendar__day:disabled{ background: var(--swb-surface-muted); color: var(--swb-ink-disabled); cursor: not-allowed; }
.swb-w .swb-calendar__day.swb-is-selected{ background: var(--swb-purple-100); color: var(--swb-purple-800); font-weight: var(--swb-weight-bold); }
.swb-w .swb-calendar__day.swb-is-blocked{ background: var(--swb-surface-muted); color: var(--swb-ink-faint); text-decoration: line-through; }
.swb-w .swb-calendar__day.swb-is-locked{ background: var(--swb-info-soft); color: var(--swb-info-ink); cursor: not-allowed; }
.swb-w .swb-calendar__price{ font-size: var(--swb-text-2xs); color: var(--swb-ink-muted); font-variant-numeric: tabular-nums; }

.swb-w .swb-calendar-legend{ display: flex; gap: var(--swb-space-4); flex-wrap: wrap; font-size: var(--swb-text-xs); color: var(--swb-ink-muted); margin-block-start: var(--swb-space-3); }
.swb-w .swb-calendar-legend__key{ display: inline-flex; align-items: center; gap: var(--swb-space-2); }
.swb-w .swb-calendar-legend__swatch{ width: 0.875rem; height: 0.875rem; border-radius: 3px; border: 1px solid var(--swb-border-strong); }

/* Portfolio grid calendar (broker) */
.swb-w .swb-grid-calendar{ overflow-x: auto; border: 1px solid var(--swb-border); border-radius: var(--swb-radius-md); }
.swb-w .swb-grid-calendar table{ border-collapse: collapse; font-size: var(--swb-text-xs); width: max-content; min-width: 100%; }
.swb-w .swb-grid-calendar th, .swb-w .swb-grid-calendar td{ border: 1px solid var(--swb-border); padding: var(--swb-space-1) var(--swb-space-2); text-align: center; }
.swb-w .swb-grid-calendar th:first-child, .swb-w .swb-grid-calendar td:first-child{
  position: sticky;
  inset-inline-start: 0;
  background: var(--swb-white);
  text-align: start;
  min-width: 12rem;
  z-index: 1;
}
.swb-w .swb-grid-calendar .swb-cell--booked{ background: var(--swb-purple-100); }
.swb-w .swb-grid-calendar .swb-cell--blocked{ background: var(--swb-surface-muted); }
.swb-w .swb-grid-calendar .swb-cell--free{ background: var(--swb-white); }

/* ===========================================================================
 * 20. Misc components
 * ======================================================================== */

.swb-w .swb-progress{ height: 0.5rem; background: var(--swb-surface-muted); border-radius: var(--swb-radius-pill); overflow: hidden; }
.swb-w .swb-progress__bar{ height: 100%; background: var(--swb-gradient-brand); border-radius: var(--swb-radius-pill); transition: width var(--swb-duration-slow) var(--swb-ease-out); }

.swb-w .swb-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-pill);
  font-size: var(--swb-text-sm);
  background: var(--swb-white);
  cursor: pointer;
  transition: all var(--swb-transition);
}
.swb-w .swb-chip:hover{ border-color: var(--swb-purple-300); color: var(--swb-brand); }
.swb-w .swb-chip.swb-is-active{ background: var(--swb-purple-100); border-color: var(--swb-purple-300); color: var(--swb-purple-800); font-weight: var(--swb-weight-semibold); }

.swb-w .swb-copy-field{
  display: flex;
  align-items: center;
  gap: var(--swb-space-2);
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-sm);
  padding: var(--swb-space-2) var(--swb-space-2) var(--swb-space-2) var(--swb-space-4);
  background: var(--swb-surface-sunken);
}
.swb-w .swb-copy-field input{
  flex: 1; border: 0; background: none; font-size: var(--swb-text-sm);
  color: var(--swb-ink-muted); min-width: 0;
  direction: ltr; text-align: start;
}
.swb-w .swb-copy-field input:focus{ outline: none; }

.swb-w .swb-pagination{ display: flex; gap: var(--swb-space-1); justify-content: center; margin-block-start: var(--swb-space-8); flex-wrap: wrap; }
.swb-w .swb-pagination a, .swb-w .swb-pagination span{
  min-width: 2.25rem;
  padding: var(--swb-space-2) var(--swb-space-3);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-sm);
  font-size: var(--swb-text-sm);
  text-align: center;
  color: var(--swb-ink-soft);
  background: var(--swb-white);
}
.swb-w .swb-pagination a:hover{ border-color: var(--swb-purple-300); color: var(--swb-brand); }
.swb-w .swb-pagination .swb-is-current{ background: var(--swb-brand); border-color: var(--swb-brand); color: var(--swb-white); font-weight: var(--swb-weight-semibold); }
.swb-w .swb-pagination .swb-is-disabled{ color: var(--swb-ink-disabled); background: var(--swb-surface-muted); }

.swb-w .swb-avatar-stack{ display: flex; }
.swb-w .swb-avatar-stack .swb-avatar + .swb-avatar{ margin-inline-start: -0.625rem; border: 2px solid var(--swb-white); }

.swb-w .swb-stat-row{ display: flex; gap: var(--swb-space-6); flex-wrap: wrap; }
.swb-w .swb-stat{ display: flex; flex-direction: column; gap: 2px; }
.swb-w .swb-stat__value{ font-size: var(--swb-text-xl); font-weight: var(--swb-weight-bold); font-variant-numeric: tabular-nums; }
.swb-w .swb-stat__label{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }

.swb-w .swb-divider-text{
  display: flex; align-items: center; gap: var(--swb-space-4);
  color: var(--swb-ink-faint); font-size: var(--swb-text-sm);
  margin-block: var(--swb-space-6);
}
.swb-w .swb-divider-text::before, .swb-w .swb-divider-text::after{
  content: ''; flex: 1; height: 1px; background: var(--swb-border);
}

.swb-w .swb-rating-bar{ display: flex; align-items: center; gap: var(--swb-space-3); font-size: var(--swb-text-sm); }
.swb-w .swb-rating-bar__track{ flex: 1; height: 0.4375rem; background: var(--swb-surface-muted); border-radius: var(--swb-radius-pill); overflow: hidden; }
.swb-w .swb-rating-bar__fill{ height: 100%; background: var(--swb-verify-gold); border-radius: var(--swb-radius-pill); }

.swb-w .swb-map-embed{
  aspect-ratio: 16 / 9;
  border-radius: var(--swb-radius-md);
  background: var(--swb-surface-muted);
  display: grid;
  place-items: center;
  color: var(--swb-ink-faint);
  border: 1px solid var(--swb-border);
  position: relative;
  overflow: hidden;
}
.swb-w .swb-map-pin{
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--swb-white);
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-pill);
  padding: 0.25rem 0.5rem;
  font-size: var(--swb-text-xs);
  font-weight: var(--swb-weight-bold);
  box-shadow: var(--swb-shadow-sm);
  white-space: nowrap;
}
.swb-w .swb-map-pin:hover{ background: var(--swb-brand); color: var(--swb-white); border-color: var(--swb-brand); z-index: 2; }

.swb-w .swb-steps-indicator{ display: flex; gap: var(--swb-space-2); align-items: center; margin-block-end: var(--swb-space-6); }
.swb-w .swb-steps-indicator__dot{
  height: 0.375rem;
  flex: 1;
  background: var(--swb-surface-muted);
  border-radius: var(--swb-radius-pill);
  transition: background var(--swb-transition);
}
.swb-w .swb-steps-indicator__dot.swb-is-done{ background: var(--swb-brand); }
.swb-w .swb-steps-indicator__dot.swb-is-current{ background: var(--swb-purple-300); }

.swb-w .swb-upload-zone{
  border: 2px dashed var(--swb-border-strong);
  border-radius: var(--swb-radius-lg);
  padding: var(--swb-space-10) var(--swb-space-6);
  text-align: center;
  background: var(--swb-surface-sunken);
  cursor: pointer;
  transition: all var(--swb-transition);
}
.swb-w .swb-upload-zone:hover, .swb-w .swb-upload-zone.swb-is-dragover{
  border-color: var(--swb-brand);
  background: var(--swb-purple-25);
}

.swb-w .swb-photo-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--swb-space-3); }
.swb-w .swb-photo-tile{ position: relative; aspect-ratio: 4 / 3; border-radius: var(--swb-radius-md); overflow: hidden; border: 1px solid var(--swb-border); }
.swb-w .swb-photo-tile img{ width: 100%; height: 100%; object-fit: cover; }
.swb-w .swb-photo-tile__actions{
  position: absolute;
  inset-block-start: var(--swb-space-2);
  inset-inline-end: var(--swb-space-2);
  display: flex; gap: var(--swb-space-1);
}
.swb-w .swb-photo-tile__cover{
  position: absolute;
  inset-block-end: var(--swb-space-2);
  inset-inline-start: var(--swb-space-2);
  background: var(--swb-brand);
  color: var(--swb-white);
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-bold);
  padding: 0.125rem 0.5rem;
  border-radius: var(--swb-radius-pill);
}

/* Site footer */
.swb-w .swb-site-footer{
  background: var(--swb-purple-25);
  border-block-start: 1px solid var(--swb-border);
  padding-block: var(--swb-space-16) var(--swb-space-8);
  margin-block-start: var(--swb-section-y);
}
.swb-w .swb-site-footer__grid{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--swb-space-8);
  margin-block-end: var(--swb-space-10);
}
.swb-w .swb-site-footer h4{ font-size: var(--swb-text-sm); margin-block-end: var(--swb-space-4); }
.swb-w .swb-site-footer a{ color: var(--swb-ink-muted); font-size: var(--swb-text-sm); display: block; padding-block: var(--swb-space-1); }
.swb-w .swb-site-footer a:hover{ color: var(--swb-brand); }
.swb-w .swb-site-footer__bottom{
  border-block-start: 1px solid var(--swb-border);
  padding-block-start: var(--swb-space-6);
  display: flex; justify-content: space-between; gap: var(--swb-space-4); flex-wrap: wrap;
  font-size: var(--swb-text-sm); color: var(--swb-ink-muted);
}
@media (max-width: 900px) { .swb-w .swb-site-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .swb-w .swb-site-footer__grid{ grid-template-columns: 1fr; } }

/* Utilities */
.swb-w .swb-hide{ display: none !important; }
@media (max-width: 900px) { .swb-w .swb-hide-mobile{ display: none !important; } }
@media (min-width: 901px) { .swb-w .swb-hide-desktop{ display: none !important; } }

.swb-w .swb-mt-0{ margin-block-start: 0; }
.swb-w .swb-mt-2{ margin-block-start: var(--swb-space-2); }
.swb-w .swb-mt-4{ margin-block-start: var(--swb-space-4); }
.swb-w .swb-mt-6{ margin-block-start: var(--swb-space-6); }
.swb-w .swb-mt-8{ margin-block-start: var(--swb-space-8); }
.swb-w .swb-mb-0{ margin-block-end: 0; }
.swb-w .swb-mb-2{ margin-block-end: var(--swb-space-2); }
.swb-w .swb-mb-4{ margin-block-end: var(--swb-space-4); }
.swb-w .swb-mb-6{ margin-block-end: var(--swb-space-6); }
.swb-w .swb-mb-8{ margin-block-end: var(--swb-space-8); }
.swb-w .swb-w-full{ width: 100%; }

@media print {
  .swb-w .swb-site-header, .swb-w .swb-site-footer, .swb-w .swb-mobile-nav, .swb-w .swb-mobile-cta, .swb-w .swb-btn{ display: none !important; }
  :where(.swb-w){ background: var(--swb-white); }
}

/* ===========================================================================
 * 24. THE DEEP IDENTITY
 *
 * Everything below is the aubergine rebuild: a transparent header floating on
 * a photograph, full-bleed heroes, photographic category cards, and a footer
 * that is a room of its own rather than a pale strip at the end of the page.
 *
 * It is appended rather than woven in so the change is legible in one place
 * and reversible in one deletion. Nothing here touches behaviour.
 * ======================================================================== */

/* --- Header: transparent over a photo, solid once you leave it ---------- */

.swb-w .swb-site-header{
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  background: transparent;
  backdrop-filter: none;
  border-block-end: 1px solid transparent;
  transition:
    background var(--swb-duration-slow) var(--swb-ease-out),
    border-color var(--swb-duration-slow) var(--swb-ease-out),
    backdrop-filter var(--swb-duration-slow) var(--swb-ease-out);
}

/* Pages that do not open on a photograph start solid, so type never lands on
   white. The class is set by the layout, not guessed by script. */
body.swb-has-hero-photo{ --swb-header-ink: var(--swb-white); }
body:not(.swb-has-hero-photo) .swb-w .swb-site-header,
.swb-w .swb-site-header.swb-is-stuck{
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.7) blur(16px);
  border-block-end-color: var(--swb-border);
}


/* While the header floats on the photograph, its type is white. The moment it
   sticks, everything returns to ink - one rule per property, no duplication. */
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-nav__link,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-logo,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-lang-switch,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-btn--ghost{
  color: var(--swb-white);
}
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-lang-switch,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-btn--ghost{
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-nav__link:hover,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-nav__link.swb-is-active{
  background: rgba(255, 255, 255, 0.14);
  color: var(--swb-white);
}
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-btn--primary{
  background: var(--swb-white);
  color: var(--swb-purple-800);
  box-shadow: none;
}
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-btn--primary:hover{
  background: var(--swb-gold-300);
  color: var(--swb-purple-950);
}

/* --- The wordmark ------------------------------------------------------- */

.swb-w .swb-logo{
  font-family: var(--swb-font-display);
  font-size: 1.35rem;
  font-weight: var(--swb-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  gap: 0;
  flex-direction: column;
  align-items: flex-start;
}
.swb-w .swb-logo__mark{ display: none; }          /* the wordmark IS the mark */
.swb-w .swb-logo__sub{
  font-size: 0.5625rem;
  font-weight: var(--swb-weight-medium);
  letter-spacing: 0.34em;
  color: var(--swb-gold-500);
  margin-block-start: 5px;
  text-transform: uppercase;
}
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-logo__sub{ color: var(--swb-gold-300); }

/* --- Home hero: the photograph is the page ----------------------------- */

.swb-w .swb-hero--photo{
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--swb-header-height) + 3rem) clamp(2.5rem, 6vw, 5rem);
  background: var(--swb-purple-950);
  overflow: hidden;
}
.swb-w .swb-hero--photo::after{ content: none; }

.swb-w .swb-hero__photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A very slow drift. It should be felt rather than noticed. */
  animation: swb-hero-drift 32s var(--swb-ease-in-out) infinite alternate;
}
@keyframes swb-hero-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(0, -1.2%, 0); }
}

.swb-w .swb-hero__scrim{
  position: absolute;
  inset: 0;
  background: var(--swb-scrim-hero);
}

.swb-w .swb-hero--photo .swb-hero__inner{ width: 100%; }
.swb-w .swb-hero--photo .swb-hero__title{
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  max-width: 20ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(7, 26, 30, .45);
}
.swb-w .swb-hero--photo .swb-hero__sub{
  color: rgba(255, 255, 255, 0.90);
  max-width: 54ch;
  font-size: var(--swb-text-lg);
}
.swb-w .swb-hero--photo .swb-eyebrow{ color: var(--swb-gold-300); }

.swb-w .swb-hero__stats{ display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin-block-start: var(--swb-space-8); }
.swb-w .swb-hero__stats .swb-stat__value{ color: var(--swb-white); }
.swb-w .swb-hero__stats .swb-stat__label{ color: rgba(255, 255, 255, 0.72); }

/* The search sits ON the photograph, half in the light and half in the dark. */
.swb-w .swb-hero--photo .swb-searchbar{
  margin-block-start: clamp(2rem, 4vw, 3rem);
  background: rgba(255, 255, 255, 0.97);
  border-color: transparent;
  box-shadow: var(--swb-shadow-photo);
  backdrop-filter: blur(10px);
}

.swb-w .swb-hero__scroll-cue{
  position: absolute;
  inset-block-end: 26px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--swb-white);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06);
  animation: swb-cue-breathe 3.2s var(--swb-ease-in-out) infinite;
}
@keyframes swb-cue-breathe {
  0%, 100% { transform: translateX(50%) translateY(0); opacity: .75; }
  50%      { transform: translateX(50%) translateY(7px); opacity: 1; }
}

/* --- Inner-page banner -------------------------------------------------- */

.swb-w .swb-page-banner{
  position: relative;
  min-height: var(--swb-banner-height);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--swb-header-height) + 2rem) clamp(1.75rem, 4vw, 3rem);
  background: var(--swb-purple-900);
  overflow: hidden;
}
.swb-w .swb-page-banner__photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.swb-w .swb-page-banner__scrim{ position: absolute; inset: 0; background: var(--swb-scrim-banner); }
.swb-w .swb-page-banner__inner{ position: relative; z-index: 1; width: 100%; }

.swb-w .swb-crumbs{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--swb-space-2);
  font-size: var(--swb-text-sm);
  color: rgba(255, 255, 255, 0.80);
  margin-block-end: var(--swb-space-4);
}
.swb-w .swb-crumbs a{ color: rgba(255, 255, 255, 0.80); }
.swb-w .swb-crumbs a:hover{ color: var(--swb-white); }
.swb-w .swb-crumbs span[aria-hidden]{ color: rgba(255, 255, 255, 0.45); }
.swb-w .swb-crumbs [aria-current]{ color: var(--swb-white); }

.swb-w .swb-page-banner__title{
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  margin: 0;
  text-wrap: balance;
}
.swb-w .swb-page-banner__sub{
  color: rgba(255, 255, 255, 0.85);
  margin: var(--swb-space-3) 0 0;
  max-width: 60ch;
  font-size: var(--swb-text-md);
}

/* --- Photographic category cards --------------------------------------- */

.swb-w .swb-type-card{
  position: relative;
  display: block;
  border-radius: var(--swb-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--swb-purple-900);
  text-decoration: none;
  isolation: isolate;
}
.swb-w .swb-type-card__photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--swb-duration-reveal) var(--swb-ease-out);
}
.swb-w .swb-type-card:hover .swb-type-card__photo{ transform: scale(1.07); }
.swb-w .swb-type-card__scrim{ position: absolute; inset: 0; background: var(--swb-scrim-card); }
.swb-w .swb-type-card__body{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--swb-space-6);
  color: var(--swb-white);
}
.swb-w .swb-type-card__body h3{
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: var(--swb-text-xl);
}
.swb-w .swb-type-card__body p{ color: rgba(255, 255, 255, 0.82); font-size: var(--swb-text-sm); margin: var(--swb-space-2) 0 0; }
.swb-w .swb-type-card__count{
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: var(--swb-space-3);
  font-size: var(--swb-text-xs);
  color: var(--swb-gold-300);
  letter-spacing: .06em;
}
.swb-w .swb-type-card::after{
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: inherit;
  pointer-events: none;
}

/* --- Sections on the deep ground --------------------------------------- */

.swb-w .swb-section--deep{
  background: var(--swb-purple-800);
  color: rgba(255, 255, 255, .88);
  position: relative;
  overflow: hidden;
}
.swb-w .swb-section--deep h2, .swb-w .swb-section--deep h3, .swb-w .swb-section--deep .swb-strong{ color: var(--swb-white); }
.swb-w .swb-section--deep .swb-muted{ color: rgba(255, 255, 255, .70); }
.swb-w .swb-section--deep .swb-eyebrow{ color: var(--swb-gold-300); }
.swb-w .swb-section--deep .swb-card{
  background: var(--swb-purple-700);
  border-color: rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .86);
}
.swb-w .swb-section--deep .swb-card h3{ color: var(--swb-white); }
.swb-w .swb-section--deep .swb-btn--secondary{
  background: transparent; color: var(--swb-white); border-color: rgba(255, 255, 255, .38);
}
.swb-w .swb-section--deep .swb-btn--secondary:hover{ background: rgba(255,255,255,.10); border-color: var(--swb-white); color: var(--swb-white); }

/* A section that carries a photograph behind the deep colour. */
.swb-w .swb-section--photo{ position: relative; background: var(--swb-purple-900); overflow: hidden; }
.swb-w .swb-section--photo > .swb-section__photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .30;
}
.swb-w .swb-section--photo > .swb-container{ position: relative; z-index: 1; }

/* --- The footer, as a room --------------------------------------------- */

.swb-w .swb-site-footer{
  background: var(--swb-purple-800);
  border-block-start: 0;
  color: rgba(255, 255, 255, .82);
  padding-block: clamp(3rem, 6vw, 5rem) var(--swb-space-8);
  margin-block-start: 0;
}
.swb-w .swb-site-footer h4{ color: var(--swb-white); font-size: var(--swb-text-base); }
.swb-w .swb-site-footer a{ color: rgba(255, 255, 255, .78); }
.swb-w .swb-site-footer a:hover{ color: var(--swb-gold-300); }

.swb-w .swb-footer-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--swb-space-6);
  flex-wrap: wrap;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
.swb-w .swb-footer-top .swb-logo{ color: var(--swb-white); font-size: 1.6rem; }
.swb-w .swb-footer-top .swb-logo:hover{ color: var(--swb-white); }

.swb-w .swb-to-top{
  display: inline-flex; align-items: center; gap: var(--swb-space-3);
  border: 1px solid rgba(255, 255, 255, .40);
  border-radius: var(--swb-radius-pill);
  padding: var(--swb-space-3) var(--swb-space-6);
  color: var(--swb-white);
  font-size: var(--swb-text-sm);
  transition: all var(--swb-transition);
}
.swb-w .swb-to-top:hover{ background: rgba(255,255,255,.10); border-color: var(--swb-white); color: var(--swb-white); }

/* Three panels, widest first, exactly as the reference reads. */
.swb-w .swb-footer-panels{
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: var(--swb-space-5);
  align-items: stretch;
}
.swb-w .swb-fpanel{
  background: var(--swb-purple-700);
  border-radius: var(--swb-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.swb-w .swb-fpanel--split{ display: grid; gap: var(--swb-space-5); align-content: start; background: none; padding: 0; }
.swb-w .swb-fpanel--split > *{
  background: var(--swb-purple-700);
  border-radius: var(--swb-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.swb-w .swb-fpanel h4{ font-size: var(--swb-text-xl); font-family: var(--swb-font-display); margin-block-end: var(--swb-space-4); }
.swb-w .swb-fpanel p{ color: rgba(255,255,255,.78); font-size: var(--swb-text-sm); line-height: var(--swb-leading-relaxed); }
.swb-w .swb-fpanel .swb-btn--support{
  margin-block-start: var(--swb-space-6);
  background: var(--swb-white);
  color: var(--swb-purple-800);
  border-radius: var(--swb-radius-pill);
  padding: var(--swb-space-4) var(--swb-space-8);
  font-weight: var(--swb-weight-semibold);
  display: inline-flex; align-items: center; gap: var(--swb-space-2);
}
.swb-w .swb-fpanel .swb-btn--support:hover{ background: var(--swb-gold-300); color: var(--swb-purple-950); }

.swb-w .swb-social-row{ display: flex; gap: var(--swb-space-3); flex-wrap: wrap; }
.swb-w .swb-social-row a{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: grid; place-items: center;
  color: var(--swb-white);
  transition: all var(--swb-transition);
}
.swb-w .swb-social-row a:hover{ background: var(--swb-white); color: var(--swb-purple-800); }

.swb-w .swb-site-footer__bottom{
  border-block-start: 1px solid rgba(255,255,255,.16);
  margin-block-start: clamp(2rem, 4vw, 3rem);
  color: rgba(255,255,255,.66);
}
.swb-w .swb-site-footer__bottom a{ color: rgba(255,255,255,.66); }

@media (max-width: 980px) { .swb-w .swb-footer-panels{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .swb-w .swb-footer-panels{ grid-template-columns: 1fr; } }

/* --- Motion: one curve for the whole site ------------------------------ */

.swb-w [data-swb-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--swb-duration-reveal) var(--swb-ease-out),
    transform var(--swb-duration-reveal) var(--swb-ease-out);
  transition-delay: calc(var(--swb-i, 0) * var(--swb-stagger));
  will-change: opacity, transform;
}
.swb-w [data-swb-reveal].swb-is-in{ opacity: 1; transform: none; }

/* Anything above the fold must be readable before script runs. A page that
   arrives with its hero at opacity 0 is a broken page, not an animated one. */
.swb-w .swb-hero--photo [data-swb-reveal],
.swb-w .swb-page-banner [data-swb-reveal]{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .swb-w [data-swb-reveal]{ opacity: 1 !important; transform: none !important; }
  .swb-w .swb-hero__photo{ animation: none; transform: scale(1.06); }
  .swb-w .swb-hero__scroll-cue{ animation: none; }
}

/* --- Small things that carry the price up ------------------------------ */

.swb-w .swb-price__amount{ font-family: var(--swb-font-display); letter-spacing: 0; }
.swb-w .swb-eyebrow{ color: var(--swb-brand); letter-spacing: .18em; font-size: var(--swb-text-2xs); }
.swb-w .swb-section-head h2{ font-family: var(--swb-font-display); }
:where(.swb-w) h1, :where(.swb-w) h2{ font-family: var(--swb-font-display); }

.swb-w .swb-rule-gold{
  width: 46px; height: 2px;
  background: var(--swb-gold-500);
  border: 0;
  margin: var(--swb-space-4) 0 0;
}
.swb-w .swb-section--deep .swb-rule-gold, .swb-w .swb-hero--photo .swb-rule-gold{ background: var(--swb-gold-400); }

/* ===========================================================================
 * 25. Corrections after the first look
 * ======================================================================== */

/* The home hero fills the screen. Every screen.
   svh, not vh: on a phone, 100vh is the viewport WITHOUT the browser chrome,
   so the picture is cropped by the address bar until you scroll. 100svh is the
   height you can actually see the moment the page opens. dvh last, because it
   resizes while you scroll, which drags a background-attachment repaint with
   it on some Android builds. */
.swb-w .swb-hero--photo{
  min-height: 100vh;
  min-height: 100svh;
}

/* The photograph is the background, edge to edge, always. It is placed before
   the scrim in the DOM and both are pinned to the section, so there is no
   state in which the section is a flat colour with type on it. */
.swb-w .swb-hero--photo .swb-hero__photo{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 45%;   /* horizon slightly above centre reads calmer */
}

/* Until a picture is in place the ground is a graded sky rather than a slab,
   so a missing file degrades to something composed instead of something flat. */
.swb-w .swb-hero--photo{
  background:
    radial-gradient(120% 90% at 72% 12%, var(--swb-purple-450) 0%, rgba(58, 116, 128,0) 62%),
    linear-gradient(196deg, var(--swb-purple-850) 0%, var(--swb-purple-950) 62%, #04100F 100%);
}

/* Menu: bigger, and it has to hold its own on a photograph. */
.swb-w .swb-nav--main{ gap: var(--swb-space-2); }
.swb-w .swb-nav--main .swb-nav__link{
  font-size: 1.0625rem;
  font-weight: var(--swb-weight-semibold);
  letter-spacing: 0;
  padding: var(--swb-space-3) var(--swb-space-4);
}
.swb-w .swb-site-header__inner{ gap: var(--swb-space-8); }
.swb-w .swb-site-header .swb-btn--sm{ font-size: var(--swb-text-base); padding: var(--swb-space-3) var(--swb-space-5); }
.swb-w .swb-lang-switch{ font-size: var(--swb-text-base); }

/* On a photograph, white type needs a shadow or it dissolves into a bright
   patch of sky. It is removed the moment the header turns solid. */
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-nav__link,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-logo,
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-lang-switch{
  text-shadow: 0 1px 12px rgba(5, 20, 23, .55);
}

@media (max-width: 1100px) {
  .swb-w .swb-nav--main .swb-nav__link{ font-size: var(--swb-text-base); padding-inline: var(--swb-space-3); }
  .swb-w .swb-site-header__inner{ gap: var(--swb-space-5); }
}

/* ===========================================================================
 * 26. The reference header and hero
 *
 * A slim utility strip, then the real header: wordmark, menu, and a row of
 * circular controls. Under it a full-screen photograph with the promise on
 * one side and a working panel on the other.
 * ======================================================================== */

.swb-w .swb-utility-bar{
  background: rgba(255, 255, 255, .10);
  border-block-end: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--swb-text-sm);
  transition: background var(--swb-duration-slow) var(--swb-ease-out),
              border-color var(--swb-duration-slow) var(--swb-ease-out);
}
.swb-w .swb-utility-bar__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--swb-space-6); flex-wrap: wrap;
  min-height: 40px; padding-block: var(--swb-space-2);
}
.swb-w .swb-utility-bar a, .swb-w .swb-utility-bar span{ color: rgba(255, 255, 255, .88); }
.swb-w .swb-utility-bar a:hover{ color: var(--swb-white); }
.swb-w .swb-utility-bar__group{ display: flex; align-items: center; gap: var(--swb-space-5); }

/* Off the photograph, the strip belongs to the page rather than the picture. */
body:not(.swb-has-hero-photo) .swb-w .swb-utility-bar,
.swb-w .swb-site-header.swb-is-stuck .swb-utility-bar{
  background: var(--swb-purple-800);
  border-block-end-color: rgba(255, 255, 255, .14);
}

/* The header holds two rows now, so it is as tall as both of them. */
:root{ --swb-header-height: 124px; }
@media (max-width: 900px) { :root{ --swb-header-height: 76px; } }
@media (max-width: 900px) { .swb-w .swb-utility-bar{ display: none; } }

.swb-w .swb-site-header__inner{ height: auto; padding-block: var(--swb-space-4); }

/* --- circular controls -------------------------------------------------- */

.swb-w .swb-icon-btn{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .10);
  color: var(--swb-white);
  display: grid; place-items: center;
  flex: none;
  transition: all var(--swb-transition);
}
.swb-w .swb-icon-btn svg{ width: 21px; height: 21px; display: block; }
.swb-w .swb-icon-btn:hover{ background: var(--swb-white); color: var(--swb-purple-800); border-color: var(--swb-white); }
.swb-w .swb-icon-btn:focus-visible{ outline: 2px solid var(--swb-gold-400); outline-offset: 3px; }

.swb-w .swb-icon-row{ display: flex; align-items: center; gap: var(--swb-space-3); }

.swb-w .swb-lang-pill{
  display: inline-flex; align-items: center; gap: var(--swb-space-2);
  height: 52px; padding-inline: var(--swb-space-6);
  border-radius: var(--swb-radius-pill);
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .10);
  color: var(--swb-white);
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-medium);
  transition: all var(--swb-transition);
}
.swb-w .swb-lang-pill svg{ width: 18px; height: 18px; }
.swb-w .swb-lang-pill:hover{ background: var(--swb-white); color: var(--swb-purple-800); border-color: var(--swb-white); }

/* Once the header is solid these all invert, in one place. */
body:not(.swb-has-hero-photo) .swb-w .swb-icon-btn,
body:not(.swb-has-hero-photo) .swb-w .swb-lang-pill,
.swb-w .swb-site-header.swb-is-stuck .swb-icon-btn,
.swb-w .swb-site-header.swb-is-stuck .swb-lang-pill{
  border-color: var(--swb-border-strong);
  background: transparent;
  color: var(--swb-ink);
}
body:not(.swb-has-hero-photo) .swb-w .swb-icon-btn:hover,
.swb-w .swb-site-header.swb-is-stuck .swb-icon-btn:hover,
body:not(.swb-has-hero-photo) .swb-w .swb-lang-pill:hover,
.swb-w .swb-site-header.swb-is-stuck .swb-lang-pill:hover{
  background: var(--swb-purple-800); color: var(--swb-white); border-color: var(--swb-purple-800);
}

@media (max-width: 1180px) { .swb-w .swb-icon-row .swb-icon-btn:nth-child(n+3){ display: none; } }
@media (max-width: 900px)  { .swb-w .swb-lang-pill span{ display: none; } .swb-w .swb-lang-pill{ padding-inline: var(--swb-space-4); } }

/* --- hero layout: promise on one side, panel on the other -------------- */

.swb-w .swb-hero--photo{ align-items: center; }

.swb-w .swb-hero__layout{
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

.swb-w .swb-hero__promise{ text-align: end; }
.swb-w .swb-hero--photo .swb-hero__promise .swb-hero__title{
  max-width: 14ch;
  margin-inline-start: auto;
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  line-height: 1.15;
}
.swb-w .swb-hero--photo .swb-hero__promise .swb-hero__sub{ margin-inline-start: auto; max-width: 40ch; }
.swb-w .swb-hero--photo .swb-hero__promise .swb-rule-gold{ margin-inline-start: auto; }

.swb-w .swb-hero__explore{
  display: inline-flex; align-items: center; gap: var(--swb-space-3);
  margin-block-start: var(--swb-space-8);
  color: var(--swb-white);
  font-size: var(--swb-text-lg);
  font-weight: var(--swb-weight-semibold);
  border-block-end: 1px solid rgba(255, 255, 255, .5);
  padding-block-end: var(--swb-space-2);
}
.swb-w .swb-hero__explore:hover{ color: var(--swb-gold-300); border-block-end-color: var(--swb-gold-300); }

/* The panel. Frosted rather than solid, so the photograph stays present. */
.swb-w .swb-hero__panel{
  display: grid;
  gap: var(--swb-space-3);
  padding: var(--swb-space-3);
  border-radius: var(--swb-radius-xl);
  background: rgba(7, 26, 30, .34);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(18px) saturate(1.3);
}

.swb-w .swb-hero__search-card{
  background: rgba(255, 255, 255, .97);
  border-radius: var(--swb-radius-lg);
  padding: var(--swb-space-5);
}
.swb-w .swb-hero__search-card h2{
  font-size: var(--swb-text-lg);
  margin-block-end: var(--swb-space-4);
  color: var(--swb-ink);
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar{
  grid-template-columns: 1fr 1fr;
  margin-block-start: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: var(--swb-space-2);
  backdrop-filter: none;
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__field{
  background: var(--swb-surface-muted);
  border-radius: var(--swb-radius-md);
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field{ border-inline-start: 0; }
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__field:nth-child(1){ grid-column: 1 / -1; }
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__submit{
  grid-column: 1 / -1; margin-inline: 0; width: 100%; justify-content: center;
}

.swb-w .swb-hero__tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--swb-space-3); }

.swb-w .swb-hero-tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--swb-radius-lg);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .16);
  min-height: 96px;
  display: flex;
  align-items: flex-end;
  padding: var(--swb-space-4);
  color: var(--swb-white);
  font-weight: var(--swb-weight-semibold);
  font-size: var(--swb-text-sm);
  transition: background var(--swb-transition), transform var(--swb-transition);
}
.swb-w .swb-hero-tile:hover{ background: rgba(255, 255, 255, .24); color: var(--swb-white); transform: translateY(-2px); }
.swb-w .swb-hero-tile--wide{ grid-column: 1 / -1; min-height: 68px; align-items: center; justify-content: space-between; }
.swb-w .swb-hero-tile__photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.swb-w .swb-hero-tile__label{ position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--swb-space-2); }
.swb-w .swb-hero-tile svg{ width: 18px; height: 18px; flex: none; }

@media (max-width: 1080px) {
  .swb-w .swb-hero__layout{ grid-template-columns: 1fr; gap: var(--swb-space-8); }
  .swb-w .swb-hero__promise{ text-align: start; }
  .swb-w .swb-hero--photo .swb-hero__promise .swb-hero__title,
  .swb-w .swb-hero--photo .swb-hero__promise .swb-hero__sub,
  .swb-w .swb-hero--photo .swb-hero__promise .swb-rule-gold{ margin-inline-start: 0; }
  .swb-w .swb-hero__panel{ max-width: 560px; }
}

@media (max-width: 620px) {
  .swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar{ grid-template-columns: 1fr; }
  .swb-w .swb-hero__tiles{ grid-template-columns: 1fr; }
}

/* The stats sit under the promise rather than over the panel. */
.swb-w .swb-hero--photo .swb-hero__stats{ justify-content: flex-end; }
@media (max-width: 1080px) { .swb-w .swb-hero--photo .swb-hero__stats{ justify-content: flex-start; } }

/* ===========================================================================
 * 27. Hero, second pass
 *
 * The promise takes the reading side, the panel the other. The panel stops
 * pretending to be a white card on a photograph and becomes glass.
 * ======================================================================== */

/* In Arabic the first column is the right-hand one, and the promise is now
   first in the source - so it reads first and sits where the eye starts. */
.swb-w .swb-hero__layout{ grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }

.swb-w .swb-hero__promise{ text-align: start; }
.swb-w .swb-hero--photo .swb-hero__promise .swb-hero__title,
.swb-w .swb-hero--photo .swb-hero__promise .swb-rule-gold{ margin-inline-start: 0; }
.swb-w .swb-hero--photo .swb-hero__promise .swb-hero__title{ max-width: 15ch; }

/* --- the panel, as glass ------------------------------------------------ */

.swb-w .swb-hero__panel{
  background: rgba(9, 30, 35, .30);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: var(--swb-space-4);
  gap: var(--swb-space-4);
  backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: 0 30px 70px -40px rgba(3, 12, 14, .9);
}

.swb-w .swb-hero__search-card{
  background: transparent;
  padding: var(--swb-space-2) var(--swb-space-2) 0;
}
.swb-w .swb-hero__search-card h2{
  color: var(--swb-white);
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-semibold);
  letter-spacing: .04em;
  margin-block-end: var(--swb-space-4);
}

/* Fields are outlined glass, not filled boxes. Placeholder and label sit in
   white at two different weights, which is all the hierarchy they need. */
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__field{
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--swb-radius-md);
  padding: var(--swb-space-3) var(--swb-space-4);
  transition: background var(--swb-transition), border-color var(--swb-transition);
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__field:hover,
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__field:focus-within{
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .55);
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__label{
  color: rgba(255, 255, 255, .72);
  font-weight: var(--swb-weight-medium);
  letter-spacing: .08em;
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__input{
  color: var(--swb-white);
  font-weight: var(--swb-weight-medium);
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__input::placeholder{ color: rgba(255, 255, 255, .55); }

/* A date input paints its own calendar glyph in black; on glass it vanishes. */
.swb-w .swb-hero--photo .swb-hero__search-card input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .7;
  cursor: pointer;
}

.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__submit{
  background: var(--swb-white);
  color: var(--swb-purple-800);
  border-radius: var(--swb-radius-md);
  box-shadow: none;
  font-weight: var(--swb-weight-bold);
}
.swb-w .swb-hero--photo .swb-hero__search-card .swb-searchbar__submit:hover{
  background: var(--swb-gold-300);
  color: var(--swb-purple-950);
}

.swb-w .swb-hero__tiles{ gap: var(--swb-space-2); }
.swb-w .swb-hero-tile{
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .20);
}

@media (max-width: 1080px) {
  .swb-w .swb-hero__layout{ grid-template-columns: 1fr; }
  .swb-w .swb-hero__panel{ max-width: 560px; }
}

/* ===========================================================================
 * 28. The category cards, sized for the photographs they hold
 *
 * These are wide architectural shots - a building, its garden, the sea beside
 * it. A 3:4 card kept about a third of that and cut the building in half, so
 * the cards are landscape now and there are two to a row rather than four.
 * Fewer, larger, and each one actually shows the place.
 * ======================================================================== */

.swb-w .swb-grid--types{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--swb-space-4), 2vw, var(--swb-space-6));
}

.swb-w .swb-grid--types .swb-type-card{ aspect-ratio: 16 / 10; }

.swb-w .swb-grid--types .swb-type-card__body{ padding: clamp(1.25rem, 2.5vw, 2rem); }
.swb-w .swb-grid--types .swb-type-card__body h3{ font-size: clamp(1.25rem, 2vw, 1.75rem); }
.swb-w .swb-grid--types .swb-type-card__body p{ max-width: 44ch; }

/* The scrim only needs to cover the lower third here, because the type sits
   there and the architecture above it should stay bright. */
.swb-w .swb-grid--types .swb-type-card__scrim{
  background: linear-gradient(180deg, rgba(7, 26, 30,0) 46%, rgba(7, 26, 30,.86) 100%);
}

@media (max-width: 760px) {
  .swb-w .swb-grid--types{ grid-template-columns: 1fr; }
  .swb-w .swb-grid--types .swb-type-card{ aspect-ratio: 4 / 3; }
}

/* ===========================================================================
 * 29. Photographs everywhere, not only at the top
 *
 * The first two sections set the register; the rest of the page has to keep
 * it. Every remaining band either carries a picture or sits on the deep
 * ground, and nothing is a bare white strip between two photographs.
 * ======================================================================== */

/* Inner banners are taller - a 300px strip reads as a header bar, and the
   point of these is that the place arrives before the words do. */
:root{ --swb-banner-height: clamp(420px, 46vw, 620px); }

.swb-w .swb-page-banner__title{ font-size: clamp(2.1rem, 4.8vw, 3.75rem); }
.swb-w .swb-page-banner__photo{ object-position: 50% 42%; }

/* --- a band that is mostly photograph ---------------------------------- */

.swb-w .swb-photo-band{
  position: relative;
  overflow: hidden;
  background: var(--swb-purple-950);
  color: var(--swb-white);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.swb-w .swb-photo-band__photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.swb-w .swb-photo-band__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 26, 30,.90) 0%, rgba(7, 26, 30,.55) 55%, rgba(7, 26, 30,.25) 100%);
}
[dir="rtl"] .swb-w .swb-photo-band__scrim, .swb-w[dir="rtl"] .swb-photo-band__scrim{
  background: linear-gradient(270deg, rgba(7, 26, 30,.90) 0%, rgba(7, 26, 30,.55) 55%, rgba(7, 26, 30,.25) 100%);
}
.swb-w .swb-photo-band > .swb-container{ position: relative; z-index: 1; }
.swb-w .swb-photo-band h2{ color: var(--swb-white); font-size: clamp(1.75rem, 3.4vw, 2.75rem); max-width: 18ch; }
.swb-w .swb-photo-band p{ color: rgba(255,255,255,.86); max-width: 52ch; }
.swb-w .swb-photo-band .swb-eyebrow{ color: var(--swb-gold-300); }
.swb-w .swb-photo-band .swb-btn--primary{ background: var(--swb-white); color: var(--swb-purple-800); }
.swb-w .swb-photo-band .swb-btn--primary:hover{ background: var(--swb-gold-300); color: var(--swb-purple-950); }
.swb-w .swb-photo-band .swb-btn--ghost{ color: var(--swb-white); border-color: rgba(255,255,255,.45); }
.swb-w .swb-photo-band .swb-btn--ghost:hover{ background: rgba(255,255,255,.12); color: var(--swb-white); }

/* --- destination cards, taller and photograph-led ---------------------- */

.swb-w .swb-dest-card{
  position: relative;
  display: block;
  border-radius: var(--swb-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--swb-purple-900);
  text-decoration: none;
  isolation: isolate;
}
.swb-w .swb-dest-card__photo{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--swb-duration-reveal) var(--swb-ease-out);
}
.swb-w .swb-dest-card:hover .swb-dest-card__photo{ transform: scale(1.06); }
.swb-w .swb-dest-card__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 30,0) 45%, rgba(7, 26, 30,.85) 100%);
}
.swb-w .swb-dest-card__body{
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--swb-space-5);
  color: var(--swb-white);
}
.swb-w .swb-dest-card__body h3{ color: var(--swb-white); font-family: var(--swb-font-display); font-size: var(--swb-text-lg); }
.swb-w .swb-dest-card__body p{ color: var(--swb-gold-300); font-size: var(--swb-text-xs); margin: var(--swb-space-1) 0 0; letter-spacing: .05em; }

/* --- a soft section that still has texture ------------------------------ */

.swb-w .swb-section--soft{
  background:
    radial-gradient(90% 60% at 100% 0%, var(--swb-purple-50) 0%, rgba(243, 248, 247,0) 70%),
    var(--swb-surface-sunken);
}

/* The verification band keeps its own light ground so the three badge colours
   stay readable - they carry meaning and must not be read on aubergine. */
.swb-w .swb-section--verify{ background: var(--swb-white); }

/* --- property cards on the deep ground --------------------------------- */

.swb-w .swb-section--deep .swb-property-card{
  background: var(--swb-purple-700);
  border-color: rgba(255,255,255,.14);
}
.swb-w .swb-section--deep .swb-property-card__title,
.swb-w .swb-section--deep .swb-property-card .swb-price__amount{ color: var(--swb-white); }
.swb-w .swb-section--deep .swb-property-card__meta,
.swb-w .swb-section--deep .swb-property-card .swb-muted{ color: rgba(255,255,255,.72); }

/* ===========================================================================
 * 30. Hero panel, trimmed
 *
 * The headline and one call to action own the reading side. The panel holds
 * the working parts - the supporting line, the search, the reassurance and
 * the second way in - and nothing else, so it reads as one object rather
 * than a stack of four.
 * ======================================================================== */

.swb-w .swb-hero__panel-lede{
  color: rgba(255, 255, 255, .88);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-relaxed);
  margin: 0 0 var(--swb-space-4);
  max-width: 42ch;
}

.swb-w .swb-hero__panel-trust{
  margin: var(--swb-space-4) 0 0;
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-gold-300);
  letter-spacing: .01em;
}

.swb-w .swb-hero__panel-second{
  display: inline-block;
  margin-block-start: var(--swb-space-3);
  font-size: var(--swb-text-sm);
  color: rgba(255, 255, 255, .86);
  border-block-end: 1px solid rgba(255, 255, 255, .38);
  padding-block-end: 2px;
}
.swb-w .swb-hero__panel-second:hover{ color: var(--swb-white); border-block-end-color: var(--swb-white); }

/* Two tiles sit side by side at any width the panel reaches. */
.swb-w .swb-hero__tiles{ grid-template-columns: 1fr 1fr; }
.swb-w .swb-hero-tile{ min-height: 84px; }

/* ===========================================================================
 * 31. THE HOMEPAGE, SECTIONS 3 TO 8
 *
 * Nothing new enters the palette here. Every colour below resolves to a token
 * already in tokens.css, and the three verification marks keep their own blue,
 * green and gold - those three carry meaning, not decoration, and repainting
 * them in the site colour would turn three different statements into one.
 *
 * The organising idea is that no two sections share a shape. A mosaic, a
 * split, a column beside a grid, a rail, a form beside a stack, a mosaic of a
 * different rhythm. A homepage where every section is a row of equal cards
 * reads as a database; varying the composition is most of what makes it read
 * as a place worth buying from.
 *
 * Written with logical properties throughout, so Arabic and English are the
 * same stylesheet and there is not one [dir="rtl"] override in this block.
 * ======================================================================== */

/* Sections meant to be read as one continuous run rather than as separate
   pages stacked. The deep ones keep their own edge. */
.swb-w .swb-section--flow{ padding-block: clamp(3.5rem, 8vw, 7rem); }
.swb-w .swb-section--flow + .swb-section--flow:not(.swb-section--deep){ padding-block-start: 0; }

.swb-w .swb-section-head--center{
  justify-content: center;
  text-align: center;
}
.swb-w .swb-section-head--center > div{ max-width: 46rem; }
.swb-w .swb-section-head--center h2{ max-inline-size: 20ch; margin-inline: auto; }
.swb-w .swb-section-head--center p{ margin-inline: auto; }


/* ---------------------------------------------------------------------------
 * SECTION 3 - the destination mosaic
 *
 * Twelve columns and a fixed row height, so the tiles can be given genuinely
 * different areas rather than the same square eight times. The first
 * destination gets roughly four times the area of the smallest: that is the
 * whole difference between an editorial page and a listing.
 * ------------------------------------------------------------------------ */

.swb-w .swb-dest-mosaic{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(76px, 7.6vw, 112px);
  gap: var(--swb-space-4);
}

.swb-w .swb-dest-tile{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--swb-radius-lg);
  text-decoration: none;
  isolation: isolate;
  /* The ground shows through wherever a photograph has not arrived yet, so a
     missing file is a deep aubergine card and never a broken box. */
  background: var(--swb-gradient-brand);
  grid-column: span 4;
  grid-row: span 2;
}

/* The rhythm. Read as three bands: one large with two beside it, then three,
   then two wide.
 *
 * Applied only when there are actually eight tiles to arrange. With fewer -
 * someone unfeatures a destination in the admin panel - the pattern would
 * leave a hole in the last band, so the even three-across base above stands
 * instead. The layout follows the data rather than assuming it. */
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--1{ grid-column: span 7; grid-row: span 4; }
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--2,
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--3{ grid-column: span 5; }
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--4,
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--5,
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--6{ grid-column: span 4; }
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--7,
.swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--8{ grid-column: span 6; }

.swb-w .swb-dest-tile__photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--swb-duration-reveal) var(--swb-ease-out);
}
.swb-w .swb-dest-tile:hover .swb-dest-tile__photo,
.swb-w .swb-dest-tile:focus-visible .swb-dest-tile__photo{ transform: scale(1.05); }

.swb-w .swb-dest-tile__scrim{
  position: absolute; inset: 0;
  background: var(--swb-scrim-card);
}

.swb-w .swb-dest-tile__body{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--swb-space-5);
  z-index: 1;
}
.swb-w .swb-dest-tile__name{
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: var(--swb-text-lg);
  line-height: var(--swb-leading-tight);
  margin: 0;
}
.swb-w .swb-dest-tile--1 .swb-dest-tile__name{ font-size: clamp(1.35rem, 2.4vw, 2rem); }

.swb-w .swb-dest-tile__meta{
  margin-block-start: var(--swb-space-1);
  color: rgba(255, 255, 255, .78);
  font-size: var(--swb-text-sm);
}

/* The chevron only appears on approach. A row of eight permanent arrows is
   noise; one that arrives under the cursor is an answer. */
.swb-w .swb-dest-tile__go{
  position: absolute;
  inset-block-start: var(--swb-space-4);
  inset-inline-end: var(--swb-space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 34px; block-size: 34px;
  border-radius: var(--swb-radius-circle);
  background: rgba(255, 255, 255, .16);
  color: var(--swb-white);
  font-size: var(--swb-text-lg);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--swb-transition), transform var(--swb-transition);
}
.swb-w .swb-dest-tile:hover .swb-dest-tile__go,
.swb-w .swb-dest-tile:focus-visible .swb-dest-tile__go{ opacity: 1; transform: none; }

/* A tablet cannot carry twelve columns of photography. Six, and a simpler
   two-size rhythm. */
@media (max-width: 1024px) {
  .swb-w .swb-dest-mosaic{ grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(88px, 12vw, 120px); }
  .swb-w .swb-dest-tile,
  .swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile{ grid-column: span 3; grid-row: span 2; }
  .swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--1{ grid-column: span 6; grid-row: span 3; }
}

/* On a phone the mosaic becomes the gesture people already use for
   photographs: one row, swiped, snapping. */
@media (max-width: 680px) {
  .swb-w .swb-dest-mosaic{
    display: flex;
    grid-auto-rows: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* The gutter, so the first and last tile are not glued to the screen. */
    padding-inline: var(--swb-gutter);
    margin-inline: calc(var(--swb-gutter) * -1);
    scroll-padding-inline-start: var(--swb-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .swb-w .swb-dest-mosaic::-webkit-scrollbar{ display: none; }

  .swb-w .swb-dest-tile,
  .swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile,
  .swb-w .swb-dest-mosaic:has(> :nth-child(8)) .swb-dest-tile--1{
    grid-column: auto;
    grid-row: auto;
    flex: 0 0 72%;
    max-inline-size: 300px;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
  }
  .swb-w .swb-dest-mosaic .swb-dest-tile--1{ flex-basis: 82%; }
  .swb-w .swb-dest-tile__go{ opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------------
 * SECTION 4 - the listing you saw, and the same place booked from here
 *
 * A journey read across the page. The post on the left is a DRAWING of a post:
 * no logo, no borrowed chrome, no third-party colour. It is kept grey, flat
 * and slightly small so the eye crosses the rule to the panel that has colour,
 * a gold line and an answer.
 * ------------------------------------------------------------------------ */

.swb-w .swb-social-journey{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: var(--swb-space-8);
}

.swb-w .swb-social-flow-label{
  font-size: var(--swb-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-block-end: var(--swb-space-3);
}
[dir="rtl"] .swb-w .swb-social-flow-label, .swb-w[dir="rtl"] .swb-social-flow-label{ text-transform: none; letter-spacing: 0; }
.swb-w .swb-social-flow-label--end{ text-align: end; }

/* --- the post ------------------------------------------------------------ */

.swb-w .swb-social-post{ margin: 0; }

.swb-w .swb-social-post__card{
  background: #F4F2F4;
  border-radius: var(--swb-radius-lg);
  overflow: hidden;
  box-shadow: var(--swb-shadow-lg);
  /* Tilted a degree away from the reader. It is the thing being left behind. */
  transform: rotate(-1.2deg);
  transition: transform var(--swb-transition);
}
.swb-w .swb-social-journey:hover .swb-social-post__card{ transform: rotate(-0.4deg); }

.swb-w .swb-social-post__head{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  padding: var(--swb-space-4);
}
.swb-w .swb-social-post__avatar{
  inline-size: 38px; block-size: 38px;
  border-radius: var(--swb-radius-circle);
  background: #DBD6DB;
  flex: none;
}
.swb-w .swb-social-post__lines{ display: grid; gap: 6px; flex: 1; }
.swb-w .swb-social-post__lines span{
  display: block;
  block-size: 8px;
  border-radius: var(--swb-radius-pill);
  background: #DBD6DB;
}
.swb-w .swb-social-post__lines span:first-child{ inline-size: 45%; }
.swb-w .swb-social-post__lines span:last-child{ inline-size: 26%; background: #E6E2E6; }

.swb-w .swb-social-post__photo{ position: relative; aspect-ratio: 4 / 3; background: #E6E2E6; }
.swb-w .swb-social-post__photo img{
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  /* Drained of colour on purpose: this is the version of the place nobody
     has checked. */
  filter: grayscale(.55) saturate(.7);
}

.swb-w .swb-social-post__body{ padding: var(--swb-space-4); }
.swb-w .swb-social-post__caption{
  color: var(--swb-ink);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  margin: 0;
}
.swb-w .swb-social-post__meta{
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-xs);
  margin-block-start: var(--swb-space-2);
}

/* The warning. Present and unmistakable, but a quiet strip at the foot of the
   card rather than a red shout across the section. */
.swb-w .swb-social-post__warning{
  margin: 0;
  padding: var(--swb-space-3) var(--swb-space-4);
  background: var(--swb-danger-soft);
  color: var(--swb-danger-ink);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  border-block-start: 1px solid rgba(220, 38, 38, .18);
}

/* --- the crossing -------------------------------------------------------- */

.swb-w .swb-social-bridge{
  display: grid;
  justify-items: center;
  gap: var(--swb-space-3);
  align-self: stretch;
  align-content: center;
}
.swb-w .swb-social-bridge__line{
  inline-size: 1px;
  block-size: clamp(36px, 6vw, 72px);
  background: linear-gradient(180deg, transparent, var(--swb-gold-400), transparent);
}
.swb-w .swb-social-bridge__mark{
  font-family: var(--swb-font-display);
  font-size: var(--swb-text-sm);
  color: var(--swb-gold-300);
  white-space: nowrap;
  padding: var(--swb-space-2) var(--swb-space-4);
  border: 1px solid rgba(213, 181, 143, .45);
  border-radius: var(--swb-radius-pill);
}

/* --- the safe side ------------------------------------------------------- */

.swb-w .swb-social-safe__card{
  background: var(--swb-purple-700);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--swb-radius-xl);
  padding: clamp(var(--swb-space-6), 3vw, var(--swb-space-10));
  box-shadow: var(--swb-shadow-photo);
}
.swb-w .swb-social-safe__title{
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: var(--swb-text-xl);
  margin: 0 0 var(--swb-space-5);
}
.swb-w .swb-social-safe__points{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--swb-space-4); }
.swb-w .swb-social-safe__points li{
  display: flex;
  align-items: flex-start;
  gap: var(--swb-space-3);
  color: rgba(255, 255, 255, .88);
  font-size: var(--swb-text-md);
  line-height: var(--swb-leading-snug);
}
.swb-w .swb-social-safe__tick{
  flex: none;
  display: grid; place-items: center;
  inline-size: 24px; block-size: 24px;
  border-radius: var(--swb-radius-circle);
  background: rgba(213, 181, 143, .18);
  color: var(--swb-gold-300);
  font-size: var(--swb-text-xs);
}
.swb-w .swb-social-safe__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--swb-space-3);
  margin-block-start: var(--swb-space-6);
}
.swb-w .swb-social-safe .swb-btn--ghost{ color: var(--swb-white); border-color: rgba(255,255,255,.4); }
.swb-w .swb-social-safe .swb-btn--ghost:hover{ background: rgba(255,255,255,.12); color: var(--swb-white); }

@media (max-width: 900px) {
  .swb-w .swb-social-journey{ grid-template-columns: 1fr; gap: var(--swb-space-6); }
  .swb-w .swb-social-post__card{ transform: none; max-inline-size: 420px; margin-inline: auto; }
  .swb-w .swb-social-flow-label--end{ text-align: start; }
  .swb-w .swb-social-bridge{ grid-auto-flow: column; align-content: center; }
  .swb-w .swb-social-bridge__line{ inline-size: clamp(24px, 12vw, 80px); block-size: 1px;
                         background: linear-gradient(90deg, transparent, var(--swb-gold-400), transparent); }
}


/* ---------------------------------------------------------------------------
 * SECTION 5 - what we actually checked
 *
 * A column of three marks beside a grid of real listings. The marks keep blue,
 * green and gold; each one is passed its own colour by the template through
 * --mark, so this stylesheet never names them and they cannot drift out of
 * step with the enum that owns them.
 * ------------------------------------------------------------------------ */

.swb-w .swb-verify-layout{
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: clamp(var(--swb-space-6), 3vw, var(--swb-space-12));
  align-items: start;
}

.swb-w .swb-verify-marks{ display: grid; gap: var(--swb-space-3); position: sticky; top: calc(var(--swb-header-height) + var(--swb-space-6)); }

.swb-w .swb-verify-mark{
  background: var(--swb-surface);
  border: 1px solid var(--swb-border);
  border-inline-start: 3px solid var(--swb-mark, var(--swb-brand));
  border-radius: var(--swb-radius-md);
  overflow: hidden;
  transition: box-shadow var(--swb-transition), border-color var(--swb-transition);
}
.swb-w .swb-verify-mark[open]{ box-shadow: var(--swb-shadow-md); }

.swb-w .swb-verify-mark > summary{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  padding: var(--swb-space-4) var(--swb-space-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink);
}
.swb-w .swb-verify-mark > summary::-webkit-details-marker{ display: none; }

.swb-w .swb-verify-mark__dot{
  flex: none;
  display: grid; place-items: center;
  inline-size: 30px; block-size: 30px;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-mark-soft, var(--swb-brand-soft));
  color: var(--swb-mark, var(--swb-brand));
  font-size: var(--swb-text-sm);
}
.swb-w .swb-verify-mark__name{ flex: 1; font-size: var(--swb-text-sm); line-height: var(--swb-leading-snug); }
.swb-w .swb-verify-mark__more{
  flex: none;
  color: var(--swb-ink-faint);
  font-size: var(--swb-text-lg);
  transition: transform var(--swb-transition);
}
.swb-w .swb-verify-mark[open] .swb-verify-mark__more{ transform: rotate(45deg); }

.swb-w .swb-verify-mark__body{
  margin: 0;
  padding: 0 var(--swb-space-5) var(--swb-space-5);
  padding-inline-start: calc(var(--swb-space-5) + 30px + var(--swb-space-3));
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
}

.swb-w .swb-verify-note{
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
  margin-block-start: var(--swb-space-2);
}

.swb-w .swb-verify-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--swb-space-5);
}
.swb-w .swb-verify-proof__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--swb-space-4);
  margin-block-start: var(--swb-space-6);
  padding-block-start: var(--swb-space-5);
  border-block-start: 1px solid var(--swb-border);
}

@media (max-width: 900px) {
  .swb-w .swb-verify-layout{ grid-template-columns: 1fr; }
  .swb-w .swb-verify-marks{ position: static; }
}
@media (max-width: 560px) {
  .swb-w .swb-verify-grid{ grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
 * SECTION 6 - the booking journey
 *
 * One run, not four cards. The connecting line is DASHED through the first
 * three steps and solid only under the last, because that is the entire
 * claim of the product: a request is not a booking, and nothing is solid
 * until a person has confirmed the place is free and the money has landed.
 *
 * Step three is drawn larger and ringed in gold. It is the step every other
 * platform hides.
 * ------------------------------------------------------------------------ */

.swb-w .swb-journey-states{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--swb-space-4);
  margin-block-end: var(--swb-space-10);
  flex-wrap: wrap;
}
.swb-w .swb-journey-state{
  padding: var(--swb-space-2) var(--swb-space-5);
  border-radius: var(--swb-radius-pill);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
}
.swb-w .swb-journey-state--open{
  background: rgba(255, 255, 255, .08);
  border: 1px dashed rgba(255, 255, 255, .45);
  color: rgba(255, 255, 255, .78);
}
.swb-w .swb-journey-state--done{
  background: var(--swb-gold-500);
  border: 1px solid var(--swb-gold-500);
  color: var(--swb-purple-950);
}
.swb-w .swb-journey-state__not{
  font-size: var(--swb-text-xl);
  color: var(--swb-gold-300);
  line-height: 1;
}

.swb-w .swb-journey{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--swb-space-5);
  align-items: start;
}

.swb-w .swb-journey__step{ position: relative; padding-block-start: var(--swb-space-10); }

/* The connector. Drawn from each node towards the next one, which is why the
   last step has none. */
.swb-w .swb-journey__step::before{
  content: "";
  position: absolute;
  inset-block-start: 21px;
  inset-inline-start: 50%;
  inline-size: calc(100% + var(--swb-space-5));
  border-block-start: 2px dashed rgba(255, 255, 255, .28);
}
.swb-w .swb-journey__step:last-child::before{ content: none; }

/* The segment AFTER the human check. A person has now confirmed the place is
   free, so the line stops being provisional - drawn by step three, because a
   connector belongs to the step it leaves. */
.swb-w .swb-journey__step:nth-last-child(2)::before{
  border-block-start-style: solid;
  border-block-start-color: var(--swb-gold-500);
}

.swb-w .swb-journey__node{
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% - 22px);
  display: grid;
  place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-purple-700);
  border: 2px solid rgba(255, 255, 255, .28);
  z-index: 1;
}
.swb-w .swb-journey__number{
  font-family: var(--swb-font-display);
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-bold);
  color: var(--swb-white);
}

/* The human step. */
.swb-w .swb-journey__step.swb-is-key .swb-journey__node{
  inline-size: 56px; block-size: 56px;
  inset-inline-start: calc(50% - 28px);
  inset-block-start: -6px;
  background: var(--swb-gold-500);
  border-color: var(--swb-gold-300);
  box-shadow: 0 0 0 8px rgba(184, 149, 107, .16);
}
.swb-w .swb-journey__step.swb-is-key .swb-journey__number{ color: var(--swb-purple-950); font-size: var(--swb-text-lg); }

.swb-w .swb-journey__card{
  background: var(--swb-purple-700);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--swb-radius-lg);
  padding: var(--swb-space-5);
  text-align: center;
  block-size: 100%;
}
.swb-w .swb-journey__step.swb-is-key .swb-journey__card{
  border-color: rgba(213, 181, 143, .55);
  background: linear-gradient(180deg, rgba(213, 181, 143,.12) 0%, var(--swb-purple-700) 60%);
}
.swb-w .swb-journey__title{
  color: var(--swb-white);
  font-size: var(--swb-text-base);
  font-family: var(--swb-font-display);
  margin: 0 0 var(--swb-space-2);
}
.swb-w .swb-journey__body{
  color: rgba(255, 255, 255, .74);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
  margin: 0;
}

.swb-w .swb-journey-foot{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--swb-space-5);
  margin-block-start: var(--swb-space-10);
  text-align: center;
}
.swb-w .swb-journey-foot__line{
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--swb-text-md);
  max-inline-size: 52ch;
}

/* Below the fold of a laptop the run turns vertical. The dashes then read
   downwards, which is if anything clearer. */
@media (max-width: 860px) {
  .swb-w .swb-journey{ grid-template-columns: 1fr; gap: var(--swb-space-6); }
  .swb-w .swb-journey__step{ padding-block-start: 0; padding-inline-start: 72px; }
  .swb-w .swb-journey__step::before{
    inset-block-start: 44px;
    inset-inline-start: 21px;
    inline-size: 0;
    block-size: calc(100% + var(--swb-space-6) - 44px);
    border-block-start: 0;
    border-inline-start: 2px dashed rgba(255, 255, 255, .28);
  }
  .swb-w .swb-journey__step:nth-last-child(2)::before{
    border-block-start: 0;
    border-inline-start-style: solid;
    border-inline-start-color: var(--swb-gold-500);
  }
  .swb-w .swb-journey__node{ inset-inline-start: 0; }
  .swb-w .swb-journey__step.swb-is-key .swb-journey__node{ inset-inline-start: -6px; inset-block-start: -6px; }
  .swb-w .swb-journey__card{ text-align: start; }
}


/* ---------------------------------------------------------------------------
 * SECTION 7 - tell us your budget
 *
 * A working form beside real listings. The stack on the right is fanned
 * slightly so it reads as "a set of answers" rather than three more cards in
 * a grid - the page already has two grids by this point.
 * ------------------------------------------------------------------------ */

.swb-w .swb-recommend-panel{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(var(--swb-space-8), 4vw, var(--swb-space-16));
  /* Top-aligned, not centred. The form is short and the preview is three
     cards tall; centring them left a hand's width of empty panel under the
     form and made the whole block look unfinished. */
  align-items: start;
  background: var(--swb-surface-muted);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-xl);
  padding: clamp(var(--swb-space-6), 4vw, var(--swb-space-12));
}

.swb-w .swb-recommend-ask__title{
  font-family: var(--swb-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: var(--swb-leading-tight);
  margin: var(--swb-space-3) 0 0;
}
.swb-w .swb-recommend-ask__headline{
  font-size: var(--swb-text-lg);
  color: var(--swb-brand);
  font-weight: var(--swb-weight-semibold);
  margin-block-start: var(--swb-space-2);
}

.swb-w .swb-recommend-form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--swb-space-4);
  margin-block-start: var(--swb-space-8);
}
.swb-w .swb-recommend-field--wide{ grid-column: 1 / -1; }
.swb-w .swb-recommend-field__label{
  display: block;
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink-soft);
  margin-block-end: var(--swb-space-2);
}
.swb-w .swb-recommend-form__submit{ grid-column: 1 / -1; }

.swb-w .swb-recommend-tagline{
  margin-block-start: var(--swb-space-5);
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
  font-style: italic;
}

.swb-w .swb-recommend-preview__label{
  font-size: var(--swb-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--swb-ink-faint);
  margin-block-end: var(--swb-space-4);
}
[dir="rtl"] .swb-w .swb-recommend-preview__label, .swb-w[dir="rtl"] .swb-recommend-preview__label{ text-transform: none; letter-spacing: 0; }

/* The preview is an illustration of the answer, not the answer itself. Three
   compact rows, because the page has already shown two grids of property
   cards and a third would read as more of the same - and because three full
   cards stand a head taller than the form they are meant to sit beside. */
.swb-w .swb-recommend-preview__stack{ display: grid; gap: var(--swb-space-3); }

.swb-w .swb-recommend-preview__item{
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--swb-space-4);
  padding: var(--swb-space-3);
  background: var(--swb-surface);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  text-decoration: none;
  /* The fan. margin rather than translate, so it leans the correct way in
     Arabic without a single direction override. */
  margin-inline-start: calc(var(--swb-i) * 12px);
  transition: margin-inline-start var(--swb-transition), box-shadow var(--swb-transition),
              border-color var(--swb-transition);
}
.swb-w .swb-recommend-preview:hover .swb-recommend-preview__item{ margin-inline-start: 0; }
.swb-w .swb-recommend-preview__item:hover{ box-shadow: var(--swb-shadow-md); border-color: var(--swb-border-strong); }

.swb-w .swb-recommend-preview__thumb{
  display: block;
  inline-size: 96px;
  aspect-ratio: 4 / 3;
  border-radius: var(--swb-radius-sm);
  overflow: hidden;
  background: var(--swb-surface-muted);
}
.swb-w .swb-recommend-preview__thumb img{ inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.swb-w .swb-recommend-preview__text{ display: grid; gap: 2px; min-inline-size: 0; }
.swb-w .swb-recommend-preview__name{
  color: var(--swb-ink);
  font-weight: var(--swb-weight-semibold);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swb-w .swb-recommend-preview__where{ color: var(--swb-ink-muted); font-size: var(--swb-text-xs); }
.swb-w .swb-recommend-preview__price{
  color: var(--swb-brand);
  font-weight: var(--swb-weight-bold);
  font-size: var(--swb-text-sm);
  white-space: nowrap;
}
.swb-w .swb-recommend-preview__price small{ color: var(--swb-ink-muted); font-weight: var(--swb-weight-normal); }

/* The fan is a flourish, and a flourish that moves the layout on a phone is
   just a bug. */
@media (max-width: 980px) {
  .swb-w .swb-recommend-panel{ grid-template-columns: 1fr; }
  .swb-w .swb-recommend-preview__item{ margin-inline-start: 0; }
  .swb-w .swb-recommend-preview__stack{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 560px) {
  .swb-w .swb-recommend-form{ grid-template-columns: 1fr; }
}

/* --- budget brackets, shared with the full wizard ----------------------- */

.swb-w .swb-budget-presets{ display: flex; flex-wrap: wrap; gap: var(--swb-space-2); }
.swb-w .swb-budget-preset{
  appearance: none;
  border: 1px solid var(--swb-border-strong);
  background: var(--swb-surface);
  color: var(--swb-ink-soft);
  border-radius: var(--swb-radius-pill);
  padding: var(--swb-space-2) var(--swb-space-4);
  font: inherit;
  font-size: var(--swb-text-sm);
  cursor: pointer;
  transition: background var(--swb-transition), border-color var(--swb-transition), color var(--swb-transition);
}
.swb-w .swb-budget-preset:hover{ border-color: var(--swb-brand); color: var(--swb-brand); }
.swb-w .swb-budget-preset.swb-is-active{
  background: var(--swb-brand);
  border-color: var(--swb-brand);
  color: var(--swb-white);
}


/* ---------------------------------------------------------------------------
 * SECTION 8 - collections
 *
 * A mosaic again, but a different one: two wide tiles leading, then a run of
 * three, then a run of three. Reusing the destination rhythm here would make
 * the two sections read as the same thing twice.
 * ------------------------------------------------------------------------ */

.swb-w .swb-collection-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--swb-space-4);
}

.swb-w .swb-collection-tile{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--swb-radius-lg);
  text-decoration: none;
  isolation: isolate;
  background: var(--swb-gradient-brand-warm);
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}
.swb-w .swb-collection-tile--1,
.swb-w .swb-collection-tile--2{ grid-column: span 3; aspect-ratio: 16 / 9; }

.swb-w .swb-collection-tile__photo{
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform var(--swb-duration-reveal) var(--swb-ease-out);
}
.swb-w .swb-collection-tile:hover .swb-collection-tile__photo,
.swb-w .swb-collection-tile:focus-visible .swb-collection-tile__photo{ transform: scale(1.06); }

.swb-w .swb-collection-tile__scrim{
  position: absolute; inset: 0;
  background: var(--swb-scrim-banner);
}

.swb-w .swb-collection-tile__body{
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--swb-space-5);
  z-index: 1;
}
.swb-w .swb-collection-tile__name{
  margin: 0;
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: var(--swb-text-base);
  line-height: var(--swb-leading-snug);
}
.swb-w .swb-collection-tile--1 .swb-collection-tile__name,
.swb-w .swb-collection-tile--2 .swb-collection-tile__name{ font-size: var(--swb-text-xl); }

.swb-w .swb-collection-tile__go{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
  margin-block-start: var(--swb-space-2);
  color: var(--swb-gold-300);
  font-size: var(--swb-text-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--swb-transition), transform var(--swb-transition);
}
.swb-w .swb-collection-tile:hover .swb-collection-tile__go,
.swb-w .swb-collection-tile:focus-visible .swb-collection-tile__go{ opacity: 1; transform: none; }

@media (max-width: 900px) {
  .swb-w .swb-collection-grid{ grid-template-columns: repeat(4, 1fr); }
  .swb-w .swb-collection-tile{ grid-column: span 2; }
  .swb-w .swb-collection-tile--1, .swb-w .swb-collection-tile--2{ grid-column: span 4; }
}
@media (max-width: 560px) {
  .swb-w .swb-collection-grid{ grid-template-columns: 1fr; }
  .swb-w .swb-collection-tile,
  .swb-w .swb-collection-tile--1,
  .swb-w .swb-collection-tile--2{ grid-column: span 1; aspect-ratio: 16 / 10; }
  .swb-w .swb-collection-tile__go{ opacity: 1; transform: none; }
}


/* ---------------------------------------------------------------------------
 * Smaller pieces this work introduced
 * ------------------------------------------------------------------------ */

/* Why a place was recommended. */
.swb-w .swb-reason-chip{
  display: inline-block;
  padding: var(--swb-space-1) var(--swb-space-3);
  border-radius: var(--swb-radius-pill);
  background: var(--swb-brand-softer);
  color: var(--swb-brand);
  font-size: var(--swb-text-xs);
  font-weight: var(--swb-weight-medium);
}
.swb-w .swb-reason-chip--warn{ background: var(--swb-warning-soft); color: var(--swb-warning-ink); }

/* Said plainly when we had to look above the stated budget. */
.swb-w .swb-notice--budget{
  padding: var(--swb-space-4) var(--swb-space-5);
  border-radius: var(--swb-radius-md);
  background: var(--swb-warning-soft);
  border: 1px solid rgba(217, 119, 6, .22);
  color: var(--swb-warning-ink);
}
.swb-w .swb-notice--budget p{ margin: 0; }
.swb-w .swb-notice--budget .swb-muted{ color: var(--swb-warning-ink); opacity: .8; }

/* أول صف بحر, on the listing page. */
.swb-w .swb-beach-flag{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
  padding: var(--swb-space-2) var(--swb-space-4);
  border-radius: var(--swb-radius-pill);
  background: var(--swb-brand-softer);
  border: 1px solid var(--swb-brand-soft);
  color: var(--swb-brand);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
}

/* Reduced motion: the compositions stay, the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .swb-w .swb-dest-tile__photo,
  .swb-w .swb-collection-tile__photo,
  .swb-w .swb-social-post__card{ transition: none; transform: none; }
  .swb-w .swb-recommend-preview__item{ transition: none; margin-inline-start: 0; }
  .swb-w .swb-dest-tile:hover .swb-dest-tile__photo,
  .swb-w .swb-collection-tile:hover .swb-collection-tile__photo{ transform: none; }
  .swb-w .swb-dest-tile__go,
  .swb-w .swb-collection-tile__go{ opacity: 1; transform: none; }
}

/* ===========================================================================
 * 32. THE FOUR JOURNEYS
 *
 * Navigation for the new menu, the phone drawer, and the Verified Stays page.
 * No new colour enters here: the badge chips are handed their blue, green and
 * gold by the template from the enum that owns them, through --mark, so this
 * stylesheet never names those three and cannot drift out of step with them.
 *
 * The header sits on a photograph on most pages and turns solid on scroll, so
 * everything below has to read in both states. That inversion is handled once,
 * at the end of this block, rather than per component.
 * ======================================================================== */

/* --- Explore's submenu --------------------------------------------------- */

.swb-w .swb-nav__group{ position: relative; }

.swb-w .swb-nav__caret{
  font-size: .7em;
  margin-inline-start: var(--swb-space-1);
  opacity: .75;
  transition: transform var(--swb-transition);
}
.swb-w .swb-nav__group:hover .swb-nav__caret,
.swb-w .swb-nav__group:focus-within .swb-nav__caret{ transform: translateY(2px); }

.swb-w .swb-nav__menu{
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-inline-size: 12rem;
  padding: var(--swb-space-2);
  background: var(--swb-white);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  box-shadow: var(--swb-shadow-lg);
  display: grid;
  gap: 2px;
  z-index: var(--swb-z-dropdown);

  /* Hidden without display:none, so the links stay in the tab order only
     while the menu is actually open - and so it can fade rather than blink. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--swb-transition), transform var(--swb-transition), visibility var(--swb-transition);
}
.swb-w .swb-nav__group:hover .swb-nav__menu,
.swb-w .swb-nav__group:focus-within .swb-nav__menu{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.swb-w .swb-nav__menu a{
  display: block;
  padding: var(--swb-space-3) var(--swb-space-4);
  border-radius: var(--swb-radius-sm);
  color: var(--swb-ink);
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-medium);
  text-decoration: none;
  /* The header's photograph shadow must not leak into a white panel. */
  text-shadow: none;
}
.swb-w .swb-nav__menu a:hover{ background: var(--swb-brand-softer); color: var(--swb-brand); }

/* --- Log in and Sign up -------------------------------------------------- */

.swb-w .swb-header-login{
  color: var(--swb-white);
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-semibold);
  padding-inline: var(--swb-space-2);
  white-space: nowrap;
}
.swb-w .swb-header-login:hover{ color: var(--swb-gold-300); }

.swb-w .swb-header-account{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
  height: 52px;
  padding-inline: var(--swb-space-5);
  border-radius: var(--swb-radius-pill);
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .10);
  color: var(--swb-white);
  font-size: var(--swb-text-base);
  font-weight: var(--swb-weight-medium);
  transition: all var(--swb-transition);
}
.swb-w .swb-header-account:hover{ background: var(--swb-white); color: var(--swb-purple-800); border-color: var(--swb-white); }
.swb-w .swb-header-account__mark svg{ width: 20px; height: 20px; display: block; }
.swb-w .swb-header-account__name{ max-inline-size: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- The phone's one button ---------------------------------------------- */

.swb-w .swb-menu-btn{
  display: grid;
  align-content: center;
  gap: 5px;
  inline-size: 48px; block-size: 48px;
  padding-inline: 11px;
  border-radius: var(--swb-radius-pill);
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .10);
  cursor: pointer;
}
.swb-w .swb-menu-btn span{
  display: block;
  block-size: 2px;
  border-radius: 2px;
  background: var(--swb-white);
}

/* --- The drawer ---------------------------------------------------------- */

.swb-w .swb-drawer--menu .swb-card__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--swb-space-4);
  padding: var(--swb-space-5);
  border-block-end: 1px solid var(--swb-border);
}
.swb-w .swb-drawer--menu .swb-card__header .swb-logo{ color: var(--swb-ink); }
.swb-w .swb-drawer--menu .swb-card__body{ padding: var(--swb-space-5); }

.swb-w .swb-menu-list{ display: grid; gap: var(--swb-space-2); }

.swb-w .swb-menu-list__item{
  display: block;
  padding: var(--swb-space-4);
  border-radius: var(--swb-radius-md);
  border: 1px solid var(--swb-border);
  text-decoration: none;
  transition: border-color var(--swb-transition), background var(--swb-transition);
}
.swb-w .swb-menu-list__item:hover,
.swb-w .swb-menu-list__item.swb-is-active{ border-color: var(--swb-brand); background: var(--swb-brand-faint); }

.swb-w .swb-menu-list__label{
  display: block;
  color: var(--swb-ink);
  font-size: var(--swb-text-md);
  font-weight: var(--swb-weight-semibold);
}
/* The line that says which situation this is for. On a phone it is doing more
   work than the label above it: "لقيت مكان؟" only makes sense once you have
   read "لقيت مكان على السوشيال؟ ابعتهولنا". */
.swb-w .swb-menu-list__sub{
  display: block;
  margin-block-start: 2px;
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-xs);
  line-height: var(--swb-leading-snug);
}

.swb-w .swb-menu-types{
  display: flex;
  flex-wrap: wrap;
  gap: var(--swb-space-2);
  margin-block-start: var(--swb-space-4);
}

.swb-w .swb-menu-foot{ display: flex; flex-wrap: wrap; gap: var(--swb-space-2); }

/* --- Verified Stays: the marks as filters -------------------------------- */

.swb-w .swb-verify-filter{
  padding: clamp(var(--swb-space-5), 3vw, var(--swb-space-8));
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  background: var(--swb-surface-sunken);
  margin-block-end: var(--swb-space-8);
}
.swb-w .swb-verify-filter__title{
  margin: 0 0 var(--swb-space-4);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink-soft);
}
.swb-w .swb-verify-filter__chips{ display: flex; flex-wrap: wrap; gap: var(--swb-space-3); }
.swb-w .swb-verify-filter__note{
  margin-block-start: var(--swb-space-5);
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
}

.swb-w .swb-verify-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--swb-space-2);
  padding: var(--swb-space-3) var(--swb-space-5);
  border-radius: var(--swb-radius-pill);
  border: 1px solid var(--swb-border-strong);
  background: var(--swb-surface);
  color: var(--swb-ink-soft);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-medium);
  text-decoration: none;
  transition: all var(--swb-transition);
}
.swb-w .swb-verify-chip:hover{ border-color: var(--swb-ink-faint); }

/* Active plain chip - "all verified stays" - takes the site colour, because
   it is not one of the three marks and must not borrow one of their colours. */
.swb-w .swb-verify-chip.swb-is-active{ background: var(--swb-brand); border-color: var(--swb-brand); color: var(--swb-white); }

/* A mark's chip wears its own colour, on and off. */
.swb-w .swb-verify-chip--mark{ border-color: var(--swb-mark); color: var(--swb-mark); }
.swb-w .swb-verify-chip--mark:hover{ background: var(--swb-mark-soft); border-color: var(--swb-mark); }
.swb-w .swb-verify-chip--mark.swb-is-active{ background: var(--swb-mark); border-color: var(--swb-mark); color: var(--swb-white); }

.swb-w .swb-verify-chip__dot{
  display: grid;
  place-items: center;
  inline-size: 22px; block-size: 22px;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-mark-soft);
  color: var(--swb-mark);
  font-size: var(--swb-text-xs);
}
.swb-w .swb-verify-chip--mark.swb-is-active .swb-verify-chip__dot{ background: rgba(255, 255, 255, .22); color: var(--swb-white); }

.swb-w .swb-verify-chip__count{
  font-size: var(--swb-text-xs);
  opacity: .8;
  font-variant-numeric: tabular-nums;
}

/* One line each, for the phone, where there is no hover to reveal a tooltip. */
.swb-w .swb-verify-legend{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--swb-space-4);
  margin: var(--swb-space-6) 0 0;
}
.swb-w .swb-verify-legend > div{
  padding-inline-start: var(--swb-space-4);
  border-inline-start: 3px solid var(--swb-mark);
}
.swb-w .swb-verify-legend dt{
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink);
}
.swb-w .swb-verify-legend dd{
  margin: var(--swb-space-1) 0 0;
  font-size: var(--swb-text-xs);
  line-height: var(--swb-leading-normal);
  color: var(--swb-ink-muted);
}

.swb-w .swb-verify-narrow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--swb-space-4);
  align-items: end;
  margin-block-end: var(--swb-space-8);
}
.swb-w .swb-verify-narrow .swb-field{ margin: 0; }

.swb-w .swb-verify-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--swb-space-4);
  margin-block-start: var(--swb-space-10);
  padding-block-start: var(--swb-space-6);
  border-block-start: 1px solid var(--swb-border);
}
.swb-w .swb-verify-foot p{ margin: 0; }

/* --- The solid header ----------------------------------------------------
 * Everything above is drawn for white type on a photograph. These are the
 * same components once the header is a solid white bar - on an inner page, or
 * after the home hero has scrolled past. One place, so a new control cannot
 * be added and then found to be invisible on half the site.
 * --------------------------------------------------------------------- */

body:not(.swb-has-hero-photo) .swb-w .swb-header-login,
.swb-w .swb-site-header.swb-is-stuck .swb-header-login{ color: var(--swb-ink); }
body:not(.swb-has-hero-photo) .swb-w .swb-header-login:hover,
.swb-w .swb-site-header.swb-is-stuck .swb-header-login:hover{ color: var(--swb-brand); }

body:not(.swb-has-hero-photo) .swb-w .swb-header-account,
.swb-w .swb-site-header.swb-is-stuck .swb-header-account{
  border-color: var(--swb-border-strong);
  background: transparent;
  color: var(--swb-ink);
}
body:not(.swb-has-hero-photo) .swb-w .swb-header-account:hover,
.swb-w .swb-site-header.swb-is-stuck .swb-header-account:hover{
  background: var(--swb-purple-800); color: var(--swb-white); border-color: var(--swb-purple-800);
}

body:not(.swb-has-hero-photo) .swb-w .swb-menu-btn,
.swb-w .swb-site-header.swb-is-stuck .swb-menu-btn{
  border-color: var(--swb-border-strong);
  background: transparent;
}
body:not(.swb-has-hero-photo) .swb-w .swb-menu-btn span,
.swb-w .swb-site-header.swb-is-stuck .swb-menu-btn span{ background: var(--swb-ink); }

/* Narrow desktops: the account name goes before anything structural does. */
@media (max-width: 1180px) {
  .swb-w .swb-header-account__name{ display: none; }
  .swb-w .swb-header-account{ padding-inline: var(--swb-space-4); }
}

/* Below the menu's breakpoint the whole right-hand group steps aside for the
   one button - the drawer carries language, log in and sign up instead. */
@media (max-width: 900px) {
  .swb-w .swb-icon-row{ display: none; }
  .swb-w .swb-site-header__inner{ gap: var(--swb-space-4); }
  .swb-w .swb-verify-foot{ flex-direction: column; align-items: stretch; }
}

/* --- "لقيت مكان؟" -------------------------------------------------------
 * Reassurance beside the form, not under it. What happens after you send
 * this is what decides whether anyone sends it at all, so it cannot be
 * below the fold on a desktop.
 * --------------------------------------------------------------------- */

.swb-w .swb-found-layout{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(var(--swb-space-6), 4vw, var(--swb-space-12));
  align-items: start;
}

.swb-w .swb-found-warning{
  margin: 0 0 var(--swb-space-6);
  padding: var(--swb-space-4) var(--swb-space-5);
  border-radius: var(--swb-radius-md);
  background: var(--swb-danger-soft);
  border: 1px solid rgba(220, 38, 38, .18);
  color: var(--swb-danger-ink);
  font-weight: var(--swb-weight-semibold);
}

.swb-w .swb-found-aside__title{ font-size: var(--swb-text-xl); margin: 0 0 var(--swb-space-5); }

.swb-w .swb-found-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--swb-space-5); }
.swb-w .swb-found-steps li{ display: flex; gap: var(--swb-space-4); align-items: flex-start; }
.swb-w .swb-found-steps__n{
  flex: none;
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-brand-soft);
  color: var(--swb-brand);
  font-weight: var(--swb-weight-bold);
  font-size: var(--swb-text-sm);
}
.swb-w .swb-found-steps h3{ font-size: var(--swb-text-base); margin: 0 0 var(--swb-space-1); }
.swb-w .swb-found-steps p{ margin: 0; color: var(--swb-ink-muted); font-size: var(--swb-text-sm); line-height: var(--swb-leading-normal); }

.swb-w .swb-found-aside__honest{
  margin-block-start: var(--swb-space-6);
  padding-block-start: var(--swb-space-5);
  border-block-start: 1px solid var(--swb-border);
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
}

/* The only way out of this page, and it names the other journey rather than
   pretending one page can serve both. */
.swb-w .swb-found-elsewhere{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--swb-space-5);
  margin-block-start: var(--swb-space-12);
  padding: var(--swb-space-6);
  border: 1px dashed var(--swb-border-strong);
  border-radius: var(--swb-radius-lg);
}
.swb-w .swb-found-elsewhere p{ margin: 0; }

@media (max-width: 900px) {
  .swb-w .swb-found-layout{ grid-template-columns: 1fr; }
  .swb-w .swb-found-elsewhere{ flex-direction: column; align-items: stretch; }
}

/* --- "اعرض وحدتك" ------------------------------------------------------- */

.swb-w .swb-owner-benefits{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--swb-space-5);
}

.swb-w .swb-owner-benefit{
  padding: clamp(var(--swb-space-5), 2.5vw, var(--swb-space-8));
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  background: var(--swb-surface);
  transition: border-color var(--swb-transition), box-shadow var(--swb-transition);
}
.swb-w .swb-owner-benefit:hover{ border-color: var(--swb-border-strong); box-shadow: var(--swb-shadow-md); }

/* The Safe Booking Link is the whole pitch, so it is given the width of two
   and the gold edge. Everything else on this page supports it. */
.swb-w .swb-owner-benefit.swb-is-lead{
  grid-column: span 2;
  background: var(--swb-brand-faint);
  border-color: rgba(184, 149, 107, .45);
}

.swb-w .swb-owner-benefit__n{
  display: inline-grid;
  place-items: center;
  inline-size: 34px; block-size: 34px;
  margin-block-end: var(--swb-space-4);
  border-radius: var(--swb-radius-circle);
  background: var(--swb-brand-soft);
  color: var(--swb-brand);
  font-weight: var(--swb-weight-bold);
  font-size: var(--swb-text-sm);
}
.swb-w .swb-owner-benefit.swb-is-lead .swb-owner-benefit__n{ background: var(--swb-gold-500); color: var(--swb-purple-950); }

.swb-w .swb-owner-benefit h3{ font-size: var(--swb-text-base); margin: 0 0 var(--swb-space-2); }
.swb-w .swb-owner-benefit p{ margin: 0; color: var(--swb-ink-muted); font-size: var(--swb-text-sm); line-height: var(--swb-leading-normal); }

@media (max-width: 900px) {
  .swb-w .swb-owner-benefits{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swb-w .swb-owner-benefit.swb-is-lead{ grid-column: span 2; }
}
@media (max-width: 560px) {
  .swb-w .swb-owner-benefits{ grid-template-columns: 1fr; }
  .swb-w .swb-owner-benefit.swb-is-lead{ grid-column: span 1; }
}

/* The Sign up button, on a photograph.
 *
 * Caught in a rendered header rather than in the markup: .btn--primary paints
 * itself in the brand purple, and the transparent header's ground IS the brand
 * purple, so the button disappeared completely and read as plain text next to
 * "log in". Inverted while the header floats, and handed straight back the
 * moment it turns solid. */
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-icon-row .swb-btn--primary{
  background: var(--swb-white);
  color: var(--swb-purple-800);
  border-color: var(--swb-white);
}
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-icon-row .swb-btn--primary:hover{
  background: var(--swb-gold-300);
  color: var(--swb-purple-950);
  border-color: var(--swb-gold-300);
}

/* Four menu items, a language pill and two account actions is a lot for one
 * row, and Arabic sets wider than English. Rather than let a label break
 * across two lines - which reads as a mistake - the items stay whole and the
 * row gives up its softer parts in order: the pill's word first, then padding,
 * then the pill's shape. */
.swb-w .swb-nav--main .swb-nav__link{ white-space: nowrap; }

@media (max-width: 1340px) {
  .swb-w .swb-lang-pill span{ display: none; }
  .swb-w .swb-lang-pill{ padding-inline: var(--swb-space-4); }
  .swb-w .swb-nav--main .swb-nav__link{ font-size: var(--swb-text-base); padding-inline: var(--swb-space-3); }
  .swb-w .swb-site-header__inner{ gap: var(--swb-space-4); }
}

/* The banner, used inside the dashboard rather than under a floating header.
 * Shorter, rounded, and without the top padding that exists only to clear a
 * transparent header - there is a solid one above it here. */
.swb-w .swb-page-banner--inset{
  min-height: clamp(180px, 22vw, 260px);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--swb-radius-lg);
  margin-block-end: var(--swb-space-8);
}

/* Sign in and sign up: one narrow column, centred under a full-width banner. */
.swb-w .swb-auth-card{ max-inline-size: 32rem; margin-inline: auto; }

/* ===========================================================================
 * 33. FORMS, EVERYWHERE
 *
 * These are the shared field components, so every form on the site inherits
 * this - the owner wizard, search filters, the contact page, checkout, the
 * operations panel. That is the point: a product where the sign-up form is
 * beautiful and the next form is not has not been designed, it has been
 * decorated.
 *
 * No new colour. The whole change is height, radius, weight of border, and a
 * focus state that says "you are here" with a ring instead of a hard outline.
 * ======================================================================== */

.swb-w .swb-field{ margin-block-end: var(--swb-space-5); }

.swb-w .swb-label{
  display: block;
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink);
  margin-block-end: var(--swb-space-2);
}

/* Taller, softer, and on a ground a shade off the card behind it - which is
   what makes a field read as somewhere to type rather than as a drawn box. */
.swb-w .swb-input,
.swb-w .swb-select,
.swb-w .swb-textarea{
  padding: 0.8125rem var(--swb-space-4);
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  background: var(--swb-surface-sunken);
  font-family: inherit;
  transition: border-color var(--swb-transition), box-shadow var(--swb-transition), background var(--swb-transition);
}

.swb-w .swb-input:hover:not(:disabled),
.swb-w .swb-select:hover:not(:disabled),
.swb-w .swb-textarea:hover:not(:disabled){ border-color: var(--swb-border-strong); }

/* A ring, not an outline. Two pixels of brand at low opacity reads as focus
   without shouting, and it is the same ring on every field in the product. */
.swb-w .swb-input:focus,
.swb-w .swb-select:focus,
.swb-w .swb-textarea:focus{
  background: var(--swb-white);
  border-color: var(--swb-purple-400);
  box-shadow: 0 0 0 3px rgba(18, 62, 70, .10);
}

/* Chrome paints autofilled fields a hard yellow that ignores every rule
   above. This is the only way to keep a remembered email looking like the
   field next to it. */
.swb-w .swb-input:-webkit-autofill,
.swb-w .swb-input:-webkit-autofill:hover,
.swb-w .swb-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--swb-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--swb-surface-sunken) inset;
  caret-color: var(--swb-ink);
  transition: background-color 9999s ease-out;
}

.swb-w .swb-input.swb-is-invalid,
.swb-w .swb-select.swb-is-invalid,
.swb-w .swb-textarea.swb-is-invalid{
  border-color: var(--swb-danger);
  background: var(--swb-danger-soft);
}
.swb-w .swb-input.swb-is-invalid:focus{ box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

.swb-w .swb-input.swb-is-valid{ border-color: var(--swb-success); }

/* --- The checkbox ------------------------------------------------------- */
/* Drawn rather than left to the browser: the default control is a different
   shape, size and colour on every platform, and it was the one piece of the
   sign-up form that always looked unfinished. */

.swb-w .swb-checkbox input[type="checkbox"],
.swb-w .swb-radio input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.125rem 0 0;
  border: 1.5px solid var(--swb-border-strong);
  background: var(--swb-white);
  cursor: pointer;
  transition: background var(--swb-transition), border-color var(--swb-transition);
}
.swb-w .swb-checkbox input[type="checkbox"]{ border-radius: var(--swb-radius-xs); }
.swb-w .swb-radio input[type="radio"]{ border-radius: var(--swb-radius-circle); }

.swb-w .swb-checkbox input[type="checkbox"]:hover,
.swb-w .swb-radio input[type="radio"]:hover{ border-color: var(--swb-purple-400); }

.swb-w .swb-checkbox input[type="checkbox"]:checked,
.swb-w .swb-radio input[type="radio"]:checked{ background: var(--swb-brand); border-color: var(--swb-brand); }

.swb-w .swb-checkbox input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 6px;
  inline-size: 5px;
  block-size: 10px;
  border: solid var(--swb-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.swb-w .swb-radio input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-white);
}

.swb-w .swb-checkbox input[type="checkbox"]:focus-visible,
.swb-w .swb-radio input[type="radio"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 62, 70, .16);
}

/* --- Two fields on one line -------------------------------------------- */

.swb-w .swb-field-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--swb-space-4);
}
@media (max-width: 520px) {
  .swb-w .swb-field-row{ grid-template-columns: 1fr; gap: 0; }
}

/* --- A field with something attached to its front ----------------------- */
/* The phone number, today. Built as a group rather than a prefix inside the
   text, so the country code cannot be deleted by someone editing the number
   and the value posted is always the number itself. */

.swb-w .swb-input-group{
  display: flex;
  align-items: stretch;
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-md);
  background: var(--swb-surface-sunken);
  overflow: hidden;
  transition: border-color var(--swb-transition), box-shadow var(--swb-transition), background var(--swb-transition);
}
.swb-w .swb-input-group:hover{ border-color: var(--swb-border-strong); }
.swb-w .swb-input-group:focus-within{
  background: var(--swb-white);
  border-color: var(--swb-purple-400);
  box-shadow: 0 0 0 3px rgba(18, 62, 70, .10);
}
.swb-w .swb-input-group.swb-is-invalid{ border-color: var(--swb-danger); background: var(--swb-danger-soft); }

.swb-w .swb-input-group__prefix{
  display: flex;
  align-items: center;
  gap: var(--swb-space-2);
  padding-inline: var(--swb-space-4);
  background: var(--swb-surface-muted);
  border-inline-end: 1px solid var(--swb-border);
  color: var(--swb-ink-soft);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  white-space: nowrap;
  /* The dialling code is a number: it reads left-to-right in Arabic too. */
  direction: ltr;
}
.swb-w .swb-input-group__flag{ font-size: var(--swb-text-base); line-height: 1; }

/* The field inside gives up its own chrome - the group is the field now. */
.swb-w .swb-input-group .swb-input{
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 1;
  min-inline-size: 0;
}
.swb-w .swb-input-group .swb-input:focus{ box-shadow: none; background: transparent; }

/* --- Password ------------------------------------------------------------ */

.swb-w .swb-password-field{ position: relative; }
.swb-w .swb-password-field .swb-input{ padding-inline-end: 3.25rem; }

.swb-w .swb-password-toggle{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--swb-space-2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 0;
  border-radius: var(--swb-radius-sm);
  background: transparent;
  color: var(--swb-ink-muted);
  cursor: pointer;
  transition: color var(--swb-transition), background var(--swb-transition);
}
.swb-w .swb-password-toggle:hover{ color: var(--swb-brand); background: var(--swb-brand-softer); }
.swb-w .swb-password-toggle svg{ inline-size: 20px; block-size: 20px; display: block; }
.swb-w .swb-password-toggle .swb-icon-hide{ display: none; }
.swb-w .swb-password-toggle.swb-is-showing .swb-icon-show{ display: none; }
.swb-w .swb-password-toggle.swb-is-showing .swb-icon-hide{ display: block; }

/* Strength, as one quiet line. Not a box of rules nobody reads. */
.swb-w .swb-strength{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  margin-block-start: var(--swb-space-2);
}
.swb-w .swb-strength__track{
  flex: 1;
  block-size: 3px;
  border-radius: var(--swb-radius-pill);
  background: var(--swb-border);
  overflow: hidden;
}
.swb-w .swb-strength__bar{
  display: block;
  block-size: 100%;
  inline-size: 0;
  border-radius: var(--swb-radius-pill);
  background: var(--swb-ink-faint);
  transition: inline-size var(--swb-transition), background var(--swb-transition);
}
.swb-w .swb-strength__label{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); white-space: nowrap; }

.swb-w .swb-strength[data-swb-level="1"] .swb-strength__bar{ inline-size: 33%; background: var(--swb-danger); }
.swb-w .swb-strength[data-swb-level="2"] .swb-strength__bar{ inline-size: 66%; background: var(--swb-warning); }
.swb-w .swb-strength[data-swb-level="3"] .swb-strength__bar{ inline-size: 100%; background: var(--swb-success); }

/* --- Selection tiles ---------------------------------------------------- */
/* The old selected state was a heavy border plus the focus ring, which read
   as an error more than a choice. A tint, a one-pixel-stronger edge and a
   tick is enough. */

.swb-w .swb-choice{ border-width: 1px; border-radius: var(--swb-radius-md); }
.swb-w .swb-choice:has(input:checked){
  border-color: var(--swb-brand);
  background: var(--swb-brand-faint);
  box-shadow: none;
}
.swb-w .swb-choice:has(input:focus-visible){ box-shadow: 0 0 0 3px rgba(18, 62, 70, .16); }

/* ===========================================================================
 * 34. SIGN-UP
 *
 * The split, the role cards and the three steps. Same palette, same tokens,
 * same buttons - what makes this feel different from the old form is the
 * composition and how little is on screen at once, not new colour.
 * ======================================================================== */

/* --- The split ---------------------------------------------------------- */

.swb-w .swb-auth-split{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  min-block-size: calc(100vh - var(--swb-header-height));
}

.swb-w .swb-auth-visual{
  position: relative;
  overflow: hidden;
  background: var(--swb-gradient-brand);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.swb-w .swb-auth-visual__photo{
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
}
.swb-w .swb-auth-visual__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 30,.35) 0%, rgba(7, 26, 30,.82) 100%);
}
.swb-w .swb-auth-visual__body{
  position: relative;
  z-index: 1;
  padding: clamp(var(--swb-space-8), 4vw, var(--swb-space-16));
  max-inline-size: 30rem;
}
.swb-w .swb-auth-visual__headline{
  margin: 0;
  color: var(--swb-white);
  font-family: var(--swb-font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: var(--swb-leading-tight);
}
.swb-w .swb-auth-visual__line{
  margin: var(--swb-space-5) 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--swb-text-md);
  line-height: var(--swb-leading-normal);
}

.swb-w .swb-auth-panel{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(var(--swb-space-8), 5vw, var(--swb-space-16)) var(--swb-gutter);
  background: var(--swb-surface);
}
.swb-w .swb-auth-panel__inner{ inline-size: 100%; max-inline-size: 30rem; }
.swb-w .swb-auth-panel__lang{ margin-block-start: var(--swb-space-8); text-align: center; font-size: var(--swb-text-sm); }
.swb-w .swb-auth-panel__lang a{ color: var(--swb-ink-muted); }
.swb-w .swb-auth-panel__lang a:hover{ color: var(--swb-brand); }

/* The photograph is the first thing to go. On a phone it is a screen of
   scrolling between the header and the first field. */
@media (max-width: 900px) {
  .swb-w .swb-auth-split{ grid-template-columns: 1fr; min-block-size: 0; }
  .swb-w .swb-auth-visual{ display: none; }
  .swb-w .swb-auth-panel{ padding-block: var(--swb-space-8); }
}

/* --- The head ----------------------------------------------------------- */

.swb-w .swb-onboard__head{ margin-block-end: var(--swb-space-8); }
.swb-w .swb-onboard__title{
  margin: 0;
  font-family: var(--swb-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: var(--swb-leading-tight);
}
/* Calm and small. Two large lines is two headlines, which is none. */
.swb-w .swb-onboard__lede{
  margin: var(--swb-space-2) 0 0;
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
}

/* --- Progress ------------------------------------------------------------
 * Three words over three rules. The current one darkens; the finished ones
 * fill. No numbers, no chevrons, no "step 1 of 3".
 * --------------------------------------------------------------------- */

.swb-w .swb-onboard__progress{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--swb-space-3);
  list-style: none;
  margin: 0 0 var(--swb-space-8);
  padding: 0;
}
.swb-w .swb-onboard__tick-bar{
  display: block;
  block-size: 3px;
  border-radius: var(--swb-radius-pill);
  background: var(--swb-border);
  transition: background var(--swb-transition);
}
.swb-w .swb-onboard__tick-label{
  display: block;
  margin-block-start: var(--swb-space-2);
  font-size: var(--swb-text-xs);
  color: var(--swb-ink-faint);
  transition: color var(--swb-transition);
}
.swb-w .swb-onboard__tick.swb-is-done .swb-onboard__tick-bar{ background: var(--swb-purple-300); }
.swb-w .swb-onboard__tick.swb-is-done .swb-onboard__tick-label{ color: var(--swb-ink-muted); }
.swb-w .swb-onboard__tick.swb-is-current .swb-onboard__tick-bar{ background: var(--swb-brand); }
.swb-w .swb-onboard__tick.swb-is-current .swb-onboard__tick-label{ color: var(--swb-ink); font-weight: var(--swb-weight-semibold); }

/* Without JavaScript every step is on the page and the progress rail would be
   a decoration that never changes, so it is not shown at all. */
.swb-w .swb-onboard:not(.swb-is-stepped) .swb-onboard__progress{ display: none; }

/* --- Steps ---------------------------------------------------------------
 * The default is every step visible: that is the no-JavaScript form, and it
 * has to be the default rather than the fallback, or turning the script off
 * leaves a blank page.
 * --------------------------------------------------------------------- */

.swb-w .swb-onboard__step + .swb-onboard__step{ margin-block-start: var(--swb-space-10); }

.swb-w .swb-onboard.swb-is-stepped .swb-onboard__step + .swb-onboard__step{ margin-block-start: 0; }
.swb-w .swb-onboard.swb-is-stepped .swb-onboard__step.swb-is-current{
  animation: swb-onboard-in var(--swb-duration-fast) var(--swb-ease-out) both;
}

@keyframes swb-onboard-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.swb-w .swb-onboard__step-title{
  margin: 0 0 var(--swb-space-5);
  font-size: var(--swb-text-lg);
  font-family: var(--swb-font-display);
}
/* With JS the step title is the heading you are looking at; the page title
   above it already said the rest. */
.swb-w .swb-onboard:not(.swb-is-stepped) .swb-onboard__step-title{ margin-block-start: var(--swb-space-6); }

.swb-w .swb-onboard__actions{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  margin-block-start: var(--swb-space-8);
}
/* The primary action takes the room; back is a quiet word beside it. */
.swb-w .swb-onboard__actions .swb-btn--primary{ flex: 1; }

.swb-w .swb-onboard__terms{ margin-block-start: var(--swb-space-6); }
.swb-w .swb-onboard__terms a{ color: var(--swb-brand); text-decoration: underline; text-underline-offset: 2px; }

.swb-w .swb-onboard__foot{
  margin-block-start: var(--swb-space-8);
  padding-block-start: var(--swb-space-6);
  border-block-start: 1px solid var(--swb-border);
  text-align: center;
  font-size: var(--swb-text-sm);
}

/* --- Role cards ----------------------------------------------------------
 * A row on a laptop, a stack on a phone, and the selected state is a tint and
 * a tick rather than a heavy border. The icons are from the same inline-SVG
 * set the header uses - no emoji, and nothing to load.
 * --------------------------------------------------------------------- */

.swb-w .swb-role-cards{ display: grid; gap: var(--swb-space-3); }

.swb-w .swb-role-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--swb-space-4);
  padding: var(--swb-space-4) var(--swb-space-5);
  border: 1px solid var(--swb-border-strong);
  border-radius: var(--swb-radius-md);
  background: var(--swb-surface);
  cursor: pointer;
  transition: border-color var(--swb-transition), background var(--swb-transition);
}
.swb-w .swb-role-card:hover{ border-color: var(--swb-purple-300); background: var(--swb-brand-faint); }
.swb-w .swb-role-card input{ position: absolute; opacity: 0; pointer-events: none; }

.swb-w .swb-role-card__icon{
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--swb-radius-md);
  background: var(--swb-brand-softer);
  color: var(--swb-brand);
  transition: background var(--swb-transition), color var(--swb-transition);
}
.swb-w .swb-role-card__icon svg{ inline-size: 22px; block-size: 22px; display: block; }

.swb-w .swb-role-card__text{ display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.swb-w .swb-role-card__name{ font-weight: var(--swb-weight-semibold); font-size: var(--swb-text-md); color: var(--swb-ink); }
.swb-w .swb-role-card__sub{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }

.swb-w .swb-role-card__tick{
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 22px; block-size: 22px;
  border-radius: var(--swb-radius-circle);
  border: 1px solid var(--swb-border-strong);
  color: transparent;
  transition: all var(--swb-transition);
}
.swb-w .swb-role-card__tick svg{ inline-size: 13px; block-size: 13px; display: block; }

.swb-w .swb-role-card:has(input:checked){
  border-color: var(--swb-brand);
  background: var(--swb-brand-faint);
}
.swb-w .swb-role-card:has(input:checked) .swb-role-card__icon{ background: var(--swb-brand); color: var(--swb-white); }
.swb-w .swb-role-card:has(input:checked) .swb-role-card__tick{
  background: var(--swb-brand);
  border-color: var(--swb-brand);
  color: var(--swb-white);
}
.swb-w .swb-role-card:has(input:focus-visible){ box-shadow: 0 0 0 3px rgba(18, 62, 70, .16); }

/* --- A field that arrives with an answer -------------------------------- */

.swb-w .swb-field--conditional{
  display: none;
  animation: swb-field-in var(--swb-duration-fast) var(--swb-ease-out) both;
}
.swb-w .swb-field--conditional.swb-is-shown{ display: block; }

@keyframes swb-field-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* The line under the confirm field. Quiet, and only there once it has
   something true to say. */
.swb-w .swb-field-note{
  margin: var(--swb-space-2) 0 0;
  font-size: var(--swb-text-xs);
  min-block-size: 1em;
  color: var(--swb-ink-muted);
}
.swb-w .swb-field-note.swb-is-good{ color: var(--swb-success-ink); }
.swb-w .swb-field-note.swb-is-bad{ color: var(--swb-danger); }

@media (prefers-reduced-motion: reduce) {
  .swb-w .swb-onboard.swb-is-stepped .swb-onboard__step.swb-is-current,
  .swb-w .swb-field--conditional{ animation: none; }
}

/* Two steps rather than three - the owner page has already answered the
   first one, so the rail is two. */
.swb-w .swb-onboard__progress--2{ grid-template-columns: repeat(2, 1fr); }

/* --- "اعرض وحدتك": the argument, then the form ------------------------- */

.swb-w .swb-owner-start{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(var(--swb-space-8), 5vw, var(--swb-space-16));
  align-items: start;
}

.swb-w .swb-owner-start__title{
  font-family: var(--swb-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: var(--swb-leading-tight);
  margin: var(--swb-space-3) 0 0;
}

.swb-w .swb-owner-start__points{
  list-style: none;
  margin: var(--swb-space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--swb-space-4);
}
.swb-w .swb-owner-start__points li{
  display: flex;
  align-items: center;
  gap: var(--swb-space-3);
  font-size: var(--swb-text-md);
  font-weight: var(--swb-weight-medium);
  color: var(--swb-ink);
}
.swb-w .swb-owner-start__tick{
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 24px; block-size: 24px;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-brand-soft);
  color: var(--swb-brand);
}
.swb-w .swb-owner-start__tick svg{ inline-size: 13px; block-size: 13px; display: block; }

.swb-w .swb-owner-start__note{
  margin-block-start: var(--swb-space-8);
  padding-block-start: var(--swb-space-5);
  border-block-start: 1px solid var(--swb-border);
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
}

/* The form keeps its own card and its own width; the pitch gives way first. */
.swb-w .swb-owner-start__form{ position: sticky; top: calc(var(--swb-header-height) + var(--swb-space-6)); }
.swb-w .swb-owner-start__form .swb-onboard__head{ margin-block-end: var(--swb-space-6); }

@media (max-width: 980px) {
  .swb-w .swb-owner-start{ grid-template-columns: 1fr; }
  .swb-w .swb-owner-start__form{ position: static; }
}

/* ===========================================================================
 * 35. FEES, ON THE HOST'S SCREENS
 *
 * The discount progress, the broker prompt and the price parity note. Same
 * palette, same tokens. The discount widget is rendered identically for owners
 * and brokers because it is the same rule - if these ever looked different,
 * somebody would reasonably assume the rates were different too.
 * ======================================================================== */

.swb-w .swb-fee-progress{
  padding: clamp(var(--swb-space-5), 3vw, var(--swb-space-8));
  border: 1px solid var(--swb-border);
  border-radius: var(--swb-radius-lg);
  background: var(--swb-surface);
  margin-block-end: var(--swb-space-8);
}

.swb-w .swb-fee-progress__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--swb-space-4);
  flex-wrap: wrap;
}
.swb-w .swb-fee-progress__title{ margin: 0; font-size: var(--swb-text-base); }

/* The rate itself. A discount with no rate beside it is a number with no
   units - "10% off" of what? */
.swb-w .swb-fee-progress__rate{ font-size: var(--swb-text-lg); color: var(--swb-ink); }
.swb-w .swb-fee-progress__rate s{ color: var(--swb-ink-faint); font-size: var(--swb-text-base); margin-inline-end: var(--swb-space-2); }
.swb-w .swb-fee-progress__rate strong{ color: var(--swb-brand); }

.swb-w .swb-fee-progress__active{
  margin: var(--swb-space-4) 0 0;
  padding: var(--swb-space-3) var(--swb-space-4);
  border-radius: var(--swb-radius-md);
  background: var(--swb-success-soft);
  color: var(--swb-success-ink);
  font-weight: var(--swb-weight-semibold);
  font-size: var(--swb-text-sm);
}
.swb-w .swb-fee-progress__earned{ margin: var(--swb-space-2) 0 0; color: var(--swb-ink-muted); font-size: var(--swb-text-xs); }

.swb-w .swb-fee-progress__promise{
  margin: var(--swb-space-5) 0 var(--swb-space-4);
  color: var(--swb-ink-soft);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
}

.swb-w .swb-fee-progress__bar{
  block-size: 8px;
  border-radius: var(--swb-radius-pill);
  background: var(--swb-border);
  overflow: hidden;
}
.swb-w .swb-fee-progress__bar span{
  display: block;
  block-size: 100%;
  border-radius: var(--swb-radius-pill);
  background: var(--swb-brand);
  transition: inline-size var(--swb-transition-slow);
}

.swb-w .swb-fee-progress__numbers{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--swb-space-4);
  flex-wrap: wrap;
  margin-block-start: var(--swb-space-3);
}
.swb-w .swb-fee-progress__count{ font-weight: var(--swb-weight-bold); font-variant-numeric: tabular-nums; }
.swb-w .swb-fee-progress__remaining{ color: var(--swb-ink-muted); font-size: var(--swb-text-sm); }

.swb-w .swb-fee-progress__note{
  margin: var(--swb-space-4) 0 0;
  padding-block-start: var(--swb-space-4);
  border-block-start: 1px solid var(--swb-border);
  color: var(--swb-ink-faint);
  font-size: var(--swb-text-xs);
  line-height: var(--swb-leading-normal);
}

/* --- "Are you a broker?" ------------------------------------------------ */

.swb-w .swb-broker-prompt{
  display: flex;
  gap: var(--swb-space-5);
  padding: clamp(var(--swb-space-5), 3vw, var(--swb-space-6));
  border: 1px solid var(--swb-purple-200);
  border-radius: var(--swb-radius-lg);
  background: var(--swb-brand-faint);
  margin-block-end: var(--swb-space-8);
}

.swb-w .swb-broker-prompt__icon{
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--swb-radius-md);
  background: var(--swb-brand);
  color: var(--swb-white);
}
.swb-w .swb-broker-prompt__icon svg{ inline-size: 22px; block-size: 22px; display: block; }

.swb-w .swb-broker-prompt__title{ margin: 0; font-size: var(--swb-text-md); }
.swb-w .swb-broker-prompt__text{
  margin: var(--swb-space-2) 0 0;
  color: var(--swb-ink-soft);
  font-size: var(--swb-text-sm);
  line-height: var(--swb-leading-normal);
}
/* The line that stops this reading as "we want to charge you more". */
.swb-w .swb-broker-prompt__note{
  margin: var(--swb-space-3) 0 0;
  padding-inline-start: var(--swb-space-3);
  border-inline-start: 2px solid var(--swb-gold-500);
  color: var(--swb-ink-muted);
  font-size: var(--swb-text-xs);
  line-height: var(--swb-leading-normal);
}
.swb-w .swb-broker-prompt__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--swb-space-2);
  margin-block-start: var(--swb-space-5);
}

@media (max-width: 560px) {
  .swb-w .swb-broker-prompt{ flex-direction: column; gap: var(--swb-space-4); }
}

/* --- Price parity -------------------------------------------------------
 * Sits directly under the price field. Gold rather than red: it is a request
 * that protects the host's own guests, not a warning about a rule break.
 * --------------------------------------------------------------------- */

.swb-w .swb-parity-note{
  margin-block-end: var(--swb-space-5);
  padding: var(--swb-space-4) var(--swb-space-5);
  border: 1px solid rgba(184, 149, 107, .40);
  border-inline-start: 3px solid var(--swb-gold-500);
  border-radius: var(--swb-radius-md);
  background: var(--swb-gold-100);
}
.swb-w .swb-parity-note__title{
  margin: 0;
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-gold-600);
}
.swb-w .swb-parity-note__text{
  margin: var(--swb-space-2) 0 0;
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-medium);
  color: var(--swb-ink);
  line-height: var(--swb-leading-normal);
}
.swb-w .swb-parity-note__why{
  margin: var(--swb-space-2) 0 0;
  font-size: var(--swb-text-xs);
  color: var(--swb-ink-muted);
  line-height: var(--swb-leading-normal);
}

/* ===========================================================================
 * 36. CATALOGUE LISTINGS
 *
 * A listing that can be looked at but not booked. The styling job here is
 * honesty at a glance: the chip has to be readable on top of a photograph of
 * any brightness, and it must not look like a discount or an award. Amber on
 * near-black, in the same corner as the type chip, reads as "note", which is
 * exactly what it is.
 * ======================================================================== */

.swb-w .swb-property-card__unbookable{
  position: absolute;
  inset-block-start: var(--swb-space-3);
  inset-inline-start: var(--swb-space-3);
  max-inline-size: calc(100% - var(--swb-space-6));
  padding: 0.25rem 0.625rem;
  border-radius: var(--swb-radius-pill);
  background: rgba(20, 36, 40, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid var(--swb-gold-500);
  color: var(--swb-gold-200, #EFD9A3);
  font-size: var(--swb-text-2xs);
  font-weight: var(--swb-weight-semibold);
  line-height: 1.4;
  z-index: 2;
}


/* ===== 20-header-footer.css ===== */
/* ===========================================================================
 * 20 — Header & footer pieces the Laravel layout did not need
 * ======================================================================== */

/* Image logo: the light version on the photograph, the dark one once solid. */
.swb-w .swb-logo__img { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.swb-w .swb-logo__img--dark { display: none; }
body:not(.swb-has-hero-photo) .swb-w .swb-logo__img--light,
.swb-w .swb-site-header.swb-is-stuck .swb-logo__img--light { display: none; }
body:not(.swb-has-hero-photo) .swb-w .swb-logo__img--dark,
.swb-w .swb-site-header.swb-is-stuck .swb-logo__img--dark { display: block; }
.swb-w .swb-drawer .swb-logo__img--light { display: none; }
.swb-w .swb-drawer .swb-logo__img--dark { display: block; }
.swb-w .swb-site-footer .swb-logo__img--dark { display: none; }
.swb-w .swb-site-footer .swb-logo__img--light { display: block; }

/* The drawer sits above the fixed header; a scrim closes it on tap. */
.swb-w .swb-drawer { z-index: calc(var(--swb-z-drawer) + 10); }
.swb-w .swb-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 26, 30, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--swb-duration-base) var(--swb-ease-out);
  z-index: var(--swb-z-drawer);
}
.swb-w .swb-drawer.swb-is-open + .swb-drawer-scrim { opacity: 1; pointer-events: auto; }
body.swb-drawer-open { overflow: hidden; }

/* Bottom bar icons are SVG here (the Laravel build used glyphs). */
.swb-w .swb-mobile-nav__icon svg { width: 22px; height: 22px; display: block; margin-inline: auto; }

/* Footer social icons. */
.swb-w .swb-social-row a svg { width: 18px; height: 18px; display: block; }
.swb-w .swb-agency-credit { opacity: .75; }
.swb-w .swb-agency-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.swb-w .swb-agency-credit a:hover { opacity: 1; color: var(--swb-gold-300); }
.swb-w .swb-agency-link { font-weight: var(--swb-weight-semibold); }

/* Section heads: the helper adds a class to the heading the Laravel CSS
 * styles by element (.swb-section-head h2); this only balances long lines. */
.swb-w .swb-section-title { text-wrap: balance; }

/* ===== 30-home.css ===== */
/* ===========================================================================
 * 30 — Home widgets (stay-types, destinations, social-safe, verification,
 *      journey, recommend, collections, owner-band, listings)
 *
 * Almost everything comes from the converted Laravel design (10). Only what
 * Laravel did inline or never defined lives here. Tokens only.
 * ======================================================================== */

/* The three marks. Laravel passed each colour inline (style="--mark: ...")
   from the enum; here the modifier class does it, still from the meaning
   tokens - never from the brand palette. */
.swb-w .swb-verify-mark--blue{ --swb-mark: var(--swb-verify-blue); --swb-mark-soft: var(--swb-verify-blue-soft); }
.swb-w .swb-verify-mark--green{ --swb-mark: var(--swb-verify-green); --swb-mark-soft: var(--swb-verify-green-soft); }
.swb-w .swb-verify-mark--gold{ --swb-mark: var(--swb-verify-gold); --swb-mark-soft: var(--swb-verify-gold-soft); }

/* Owner band: the closing line Laravel styled inline, and the body hook. */
.swb-w .swb-photo-band__body{ max-width: 52ch; }
.swb-w .swb-photo-band .swb-photo-band__note{ color: rgba(255, 255, 255, .78); max-width: 46ch; }

/* The budget box sits one step under the brackets (Laravel's .mt-3). */
.swb-w .swb-mt-3{ margin-block-start: var(--swb-space-3); }

/* The last step of the run: a hook for styling, no change to the design. */
.swb-w .swb-journey__step.swb-is-final{ position: relative; }

/* Grid children Laravel left unstyled: let them shrink inside their track
   so a long listing title or a date input never pushes the column wider. */
.swb-w .swb-recommend-ask,
.swb-w .swb-recommend-field,
.swb-w .swb-verify-proof{ min-inline-size: 0; }

/* ===== 40-pages.css ===== */
/* ===========================================================================
 * 40 — Inner pages: page banner, rich text, feature cards, FAQ, contact,
 *      "لقيت مكان؟". Only what the Laravel stylesheet did not already have:
 *      the inline font sizes of the Blade views become classes, and the
 *      section spacing a page builder needs when two sections stack.
 * ======================================================================== */

/* --- Page banner: the plain (no photograph) band ------------------------- */
/* The header is solid on these pages and its spacer already clears it, so
   the band needs none of the top padding a floating header asks for. */
.swb-w .swb-page-banner--plain{
  min-height: 0;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--swb-purple-900);
}

/* --- Section spacing when two page sections stack ----------------------- */
/* Laravel kept the about text, its cards and the trust cards in one
   container with mt-8 / mb-8 between them. Two widgets reproduce that: the
   first drops its bottom padding, the second keeps only that 2rem on top. */
.swb-w .swb-section--no-top{ padding-block-start: var(--swb-space-8); }
.swb-w .swb-section--no-bottom{ padding-block-end: 0; }
.swb-w .swb-section--flush{ padding-block: 0; }

/* --- Headings the Blade views sized inline ------------------------------ */
/* <h2 style="font-size: var(--text-base)"> and friends. */
.swb-w .swb-pg-h{ font-size: var(--swb-text-base); margin: 0; }
.swb-w .swb-pg-h--lg{ font-size: var(--swb-text-lg); }
.swb-w .swb-pg-h--xl{ font-size: var(--swb-text-xl); }

/* --- Rich text: headings + paragraphs from the editor ------------------- */
.swb-w .swb-prose:first-child > h2:first-child,
.swb-w .swb-prose:first-child > h3:first-child,
.swb-w .swb-prose:first-child > h4:first-child{ margin-block-start: 0; }
.swb-w .swb-prose h2,
.swb-w .swb-prose h3,
.swb-w .swb-prose h4{
  font-size: var(--swb-text-lg);
  margin-block: var(--swb-space-8) 0;
}
.swb-w .swb-prose--h-xl h2{ font-size: var(--swb-text-xl); }
.swb-w .swb-prose h2 + p,
.swb-w .swb-prose h3 + p,
.swb-w .swb-prose h4 + p{ margin-block-start: var(--swb-space-2); }
.swb-w .swb-prose--muted p,
.swb-w .swb-prose--muted li{ color: var(--swb-ink-muted); }
.swb-w .swb-prose ul,
.swb-w .swb-prose ol{
  margin: var(--swb-space-2) 0 var(--swb-space-4);
  padding-inline-start: var(--swb-space-6);
}
.swb-w .swb-prose li + li{ margin-block-start: var(--swb-space-1); }
.swb-w .swb-prose a{ color: var(--swb-brand); text-decoration: underline; text-underline-offset: 3px; }
.swb-w .swb-prose a:hover{ color: var(--swb-brand-hover); }
.swb-w .swb-prose strong{ font-weight: var(--swb-weight-semibold); }

/* --- Feature cards ------------------------------------------------------ */
.swb-w .swb-fcard{ height: 100%; }
.swb-w .swb-fcard__title{ font-size: var(--swb-text-lg); margin-block-end: 0; }
.swb-w .swb-fcard__body{ margin-block-end: 0; }
.swb-w .swb-fcard__note{ margin-block-end: 0; }
.swb-w .swb-fcard__icon--brand{ background: var(--swb-brand-soft); color: var(--swb-brand); }
.swb-w .swb-fcard__more{
  display: inline-flex;
  gap: var(--swb-space-1);
  margin-block-start: var(--swb-space-4);
  color: var(--swb-brand);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
}
.swb-w .swb-fcard__stat{
  padding-block-start: var(--swb-space-4);
  border-block-start: 1px solid var(--swb-border);
}

/* --- FAQ ---------------------------------------------------------------- */
.swb-w .swb-faq__group{ margin-block-end: var(--swb-space-10); }
.swb-w .swb-faq__group-title{ font-size: var(--swb-text-xl); }
.swb-w .swb-faq__q{ cursor: pointer; }
.swb-w .swb-faq__a{ margin-block-end: 0; }
.swb-w .swb-faq__item[open]{ border-color: var(--swb-purple-200); }

/* --- Contact ------------------------------------------------------------ */
.swb-w .swb-contact__solo{ display: grid; gap: var(--swb-space-6); }
.swb-w .swb-contact__card p{ margin-block-end: 0; }
.swb-w .swb-contact__card a:not(.swb-btn){ color: inherit; }
.swb-w .swb-contact__form .swb-pg-h{ margin-block-end: var(--swb-space-2); }

/* --- "لقيت مكان؟" ------------------------------------------------------- */
.swb-w .swb-found-aside,
.swb-w .swb-found-form{ min-width: 0; }
.swb-w .swb-found-form__you{
  margin-block: var(--swb-space-2) var(--swb-space-5);
  padding-block-start: var(--swb-space-5);
  border-block-start: 1px solid var(--swb-border);
}

/* ===== 1.4.2 — "لقيت مكان؟": three fields, each with its icon ===== */
.swb-w .swb-found-form__title{ margin: 0 0 var(--swb-space-1); font-size: var(--swb-text-xl); font-weight: var(--swb-weight-bold); color: var(--swb-ink); line-height: 1.35; }
.swb-w .swb-found-form__sub{ margin: 0 0 var(--swb-space-6); font-size: var(--swb-text-sm); color: var(--swb-ink-muted); }
.swb-w .swb-found-field{ display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--swb-space-3); align-items: start; }
.swb-w .swb-found-field__icon{
  display: grid; place-items: center;
  inline-size: 40px; block-size: 40px;
  margin-block-start: 26px;
  border-radius: 12px;
  background: var(--swb-brand-soft, var(--swb-surface-sunken));
  color: var(--swb-brand);
}
.swb-w .swb-found-field__body{ min-width: 0; }
.swb-w .swb-found-field + .swb-found-field{ margin-block-start: var(--swb-space-5); }
.swb-w .swb-found-wa{ display: inline-flex; align-items: center; gap: var(--swb-space-2); margin-block-start: var(--swb-space-2); font-size: var(--swb-text-sm); color: var(--swb-ink-soft); cursor: pointer; }
.swb-w .swb-found-wa input{ inline-size: 18px; block-size: 18px; accent-color: var(--swb-verify-green, #12A150); margin: 0; }
.swb-w .swb-found-form .swb-btn--block{ margin-block-start: var(--swb-space-6); }
.swb-w .swb-found-form__privacy{ display: flex; align-items: center; justify-content: center; gap: var(--swb-space-2); margin: var(--swb-space-3) 0 0; font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }
@media (max-width: 560px){
  .swb-w .swb-found-field{ grid-template-columns: minmax(0, 1fr); }
  .swb-w .swb-found-field__icon{ display: none; }
}

/* ===== 1.4.2 — FAQ: every question, two columns on a computer ===== */
.swb-w .swb-faq__grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--swb-space-4); align-items: start; }
.swb-w .swb-faq__grid > .swb-faq__item{ margin: 0; min-width: 0; }
@media (max-width: 900px){ .swb-w .swb-faq__grid{ grid-template-columns: minmax(0, 1fr); gap: var(--swb-space-3); } }

/* ===== 1.4.2 — FAQ: a plus that turns into a cross, answers that slide open ===== */
.swb-w .swb-faq__item > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--swb-space-4); }
.swb-w .swb-faq__item > summary::-webkit-details-marker { display: none; }
.swb-w .swb-faq__item > summary::marker { content: ""; }
.swb-w .swb-faq__item > summary::after {
  content: "";
  flex: none;
  inline-size: 28px; block-size: 28px;
  border-radius: 50%;
  background: var(--swb-brand-soft, #E7F1F2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314464C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform 380ms cubic-bezier(.22, .8, .2, 1), background-color 200ms;
}
.swb-w .swb-faq__item[open]:not(.swb-is-closing) > summary::after { transform: rotate(135deg); }
.swb-w .swb-faq__item > summary:hover { color: var(--swb-brand); }
@media (prefers-reduced-motion: reduce) { .swb-w .swb-faq__item > summary::after { transition: none; } }

/* ===== 50-market.css ===== */
/* ===========================================================================
 * 50 — Marketplace: search, verified stays, destinations, the listing page
 *
 * Only what the Laravel stylesheet left to inline style="" attributes (which
 * the widgets may not print) or never needed. Tokens only; logical
 * properties, so RTL just works.
 * ======================================================================== */

/* --- The three marks as a colour variable (chips, legend, dots) ----------
   Their colours carry meaning and are never brand colours. */
.swb-w .swb-market-mark--blue{ --swb-mark: var(--swb-verify-blue); --swb-mark-soft: var(--swb-verify-blue-soft); }
.swb-w .swb-market-mark--green{ --swb-mark: var(--swb-verify-green); --swb-mark-soft: var(--swb-verify-green-soft); }
.swb-w .swb-market-mark--gold{ --swb-mark: var(--swb-verify-gold); --swb-mark-soft: var(--swb-verify-gold-soft); }

/* --- Search ---------------------------------------------------------------- */
.swb-w .swb-market-search{ padding-block-start: var(--swb-space-8); }
.swb-w .swb-market-chips{ align-items: center; }
.swb-w .swb-market-chips .swb-chip{ text-decoration: none; color: var(--swb-ink); }
.swb-w .swb-market-chips .swb-chip.swb-is-active{ color: var(--swb-purple-800); }
.swb-w .swb-market-chipdot{
  display: inline-block;
  inline-size: 0.5rem; block-size: 0.5rem;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-mark);
}

.swb-w .swb-market-layout{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--swb-space-8);
  align-items: start;
}
.swb-w .swb-market-layout--full{ grid-template-columns: minmax(0, 1fr); }
.swb-w .swb-market-results{ min-inline-size: 0; }
@media (max-width: 900px) {
  .swb-w .swb-market-layout{ grid-template-columns: minmax(0, 1fr); }
}

.swb-w .swb-market-filters__title{ font-size: var(--swb-text-base); font-weight: var(--swb-weight-semibold); }
.swb-w .swb-market-filters .swb-fieldset legend{ color: var(--swb-ink); }
.swb-w .swb-market-filters .swb-btn{ text-decoration: none; }
.swb-w .swb-market-pair{ gap: var(--swb-space-3); }
.swb-w .swb-market-count{ margin: 0; }
.swb-w .swb-market-drawer-btn{ display: inline-flex; align-items: center; gap: var(--swb-space-2); }
.swb-w .swb-market-sort .swb-select{ min-inline-size: 12rem; }
.swb-w .swb-market-drawer .swb-card__header{ position: sticky; inset-block-start: 0; background: var(--swb-white); z-index: 1; }
.swb-w .swb-market-drawer .swb-card__body{ padding: var(--swb-space-5); }

/* --- Verified stays ------------------------------------------------------- */
.swb-w .swb-market-verified .swb-verify-chip{ text-decoration: none; }
.swb-w .swb-market-verified .swb-verify-filter{ margin-block-end: var(--swb-space-8); }

/* --- Destinations grid ----------------------------------------------------- */
.swb-w .swb-market-dests .swb-grid{ align-items: stretch; }
.swb-w .swb-market-dest{ display: block; text-decoration: none; color: inherit; overflow: hidden; }
.swb-w .swb-market-dest__media{
  aspect-ratio: 16 / 10;
  background: var(--swb-purple-100);
  overflow: hidden;
}
.swb-w .swb-market-dest__media img{
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--swb-duration-slow) var(--swb-ease-out);
}
.swb-w .swb-market-dest:hover .swb-market-dest__media img{ transform: scale(1.03); }
.swb-w .swb-market-dest__name{ font-size: var(--swb-text-lg); margin: 0; }
.swb-w .swb-market-dest__region{ margin-block-start: var(--swb-space-1); }
.swb-w .swb-market-dest__desc{ margin-block-start: var(--swb-space-3); }
.swb-w .swb-market-dest__count{ color: var(--swb-ink); }

/* --- Listing page: gallery ------------------------------------------------- */
.swb-w .swb-market-top{ padding-block-start: var(--swb-space-6); }
/* Fewer than five photos: no empty cells in the mosaic. */
.swb-w .swb-gallery--1{ grid-template-columns: 1fr; grid-template-rows: 1fr; }
.swb-w .swb-gallery--1 .swb-gallery__item:first-child{ grid-row: span 1; }
.swb-w .swb-gallery--2{ grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
.swb-w .swb-gallery--2 .swb-gallery__item:first-child{ grid-row: span 1; }
.swb-w .swb-gallery--3{ grid-template-columns: 2fr 1fr; }
.swb-w .swb-gallery--4 .swb-gallery__item:last-child{ grid-column: span 2; }
@media (max-width: 768px) {
  .swb-w .swb-gallery--2, .swb-w .swb-gallery--3{ grid-template-columns: 1fr; }
  .swb-w .swb-gallery--4 .swb-gallery__item:last-child{ grid-column: auto; }
}
.swb-w .swb-gallery__item{ display: block; }
.swb-w .swb-gallery__more{ display: inline-flex; align-items: center; gap: var(--swb-space-2); }

.swb-w .swb-market-nophotos{ padding-block: var(--swb-space-10); }
.swb-w .swb-market-nophotos__img{ display: block; margin: 0 auto var(--swb-space-4); opacity: .7; }

.swb-w .swb-market-lightbox .swb-modal{ background: transparent; box-shadow: none; overflow: visible; }
.swb-w .swb-market-lightbox__modal{ max-height: none; }
.swb-w .swb-market-lightbox__img{
  display: block;
  inline-size: 100%;
  max-block-size: 76vh;
  object-fit: contain;
  border-radius: var(--swb-radius-lg);
  background: rgba(0, 0, 0, .25);
  touch-action: pan-y;
  user-select: none;
}
.swb-w .swb-market-lightbox .swb-btn{ display: inline-flex; align-items: center; justify-content: center; }

/* --- Listing page: name and facts ----------------------------------------- */
.swb-w .swb-market-head{ margin-block-end: var(--swb-space-6); }
.swb-w .swb-market-title{ font-size: var(--swb-text-2xl); line-height: var(--swb-leading-snug); margin: 0; }
.swb-w .swb-market-meta{ margin-block-start: var(--swb-space-3); }
.swb-w .swb-market-facts{ margin-block-start: var(--swb-space-2); }

/* Two columns: the story and the booking panel (Laravel 1.6fr / 0.9fr). */
.swb-w .swb-market-details{ padding-block: var(--swb-space-8) var(--swb-space-16); }
.swb-w .swb-market-property{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: var(--swb-space-10);
  align-items: start;
}
.swb-w .swb-market-property--solo{ grid-template-columns: minmax(0, 1fr); }
.swb-w .swb-market-property__main{ min-inline-size: 0; }
.swb-w .swb-market-property__side{ min-inline-size: 0; align-self: stretch; }
@media (max-width: 900px) {
  .swb-w .swb-market-property{ grid-template-columns: minmax(0, 1fr); gap: var(--swb-space-8); }
}

.swb-w .swb-market-sep{
  border: 0;
  border-block-start: 1px solid var(--swb-border);
  margin-block: var(--swb-space-8);
}
.swb-w .swb-market-h2{ font-size: var(--swb-text-xl); margin: 0 0 var(--swb-space-4); }
.swb-w .swb-market-h2--tight{ margin-block-end: var(--swb-space-2); }
.swb-w .swb-market-h3{
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink-muted);
  margin: var(--swb-space-5) 0 var(--swb-space-3);
}
.swb-w .swb-market-h2 + .swb-market-h3{ margin-block-start: 0; }
.swb-w .swb-market-prose{ line-height: var(--swb-leading-relaxed); }
.swb-w .swb-market-prose p{ margin: 0 0 var(--swb-space-4); }
.swb-w .swb-market-prose p:last-child{ margin-block-end: 0; }
.swb-w .swb-market-amenities{ gap: var(--swb-space-3); }
.swb-w .swb-market-tick{ color: var(--swb-brand); font-weight: var(--swb-weight-bold); }
.swb-w .swb-market-times .swb-badge{ display: inline-flex; align-items: center; gap: var(--swb-space-2); }
.swb-w .swb-market-rules{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--swb-space-2);
  line-height: var(--swb-leading-normal);
}
.swb-w .swb-market-rules li{ position: relative; padding-inline-start: var(--swb-space-5); }
.swb-w .swb-market-rules li::before{
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  inline-size: 0.375rem; block-size: 0.375rem;
  border-radius: var(--swb-radius-circle);
  background: var(--swb-brand);
}
.swb-w .swb-market-map-line{ display: inline-flex; align-items: center; gap: var(--swb-space-2); padding: var(--swb-space-4); text-align: center; }
.swb-w .swb-market-steps .swb-found-steps{ margin-block-start: var(--swb-space-2); }

/* --- Booking panel ---------------------------------------------------------- */
.swb-w .swb-market-bookwrap{ block-size: 100%; }
.swb-w .swb-market-per{ white-space: nowrap; }
.swb-w .swb-market-book-form .swb-field{ margin-block-end: var(--swb-space-4); }
.swb-w .swb-market-dates{ gap: var(--swb-space-3); }
.swb-w .swb-market-dates .swb-field{ margin-block-end: 0; }
.swb-w .swb-market-book-form .swb-market-dates{ margin-block-end: var(--swb-space-4); }
.swb-w .swb-market-submit{ text-decoration: none; text-align: center; }
.swb-w .swb-market-submit:disabled{ opacity: .55; cursor: not-allowed; }
.swb-w .swb-market-ask__body{ margin: 0 0 var(--swb-space-4); line-height: var(--swb-leading-normal); }
.swb-w .swb-market-ask__btn,
.swb-w .swb-market-cta-btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--swb-space-2); text-decoration: none; }
.swb-w .swb-market-ask{ margin-block-start: var(--swb-space-2); }
.swb-w .swb-market-protected{ display: flex; align-items: center; justify-content: center; gap: var(--swb-space-1); }
.swb-w .swb-booking-panel [data-swb-quote-out] .swb-alert{ margin-block-start: var(--swb-space-3); }

/* The phone bar: out of the way while the panel itself is on screen, and
   above the bottom navigation when the header shows one. */
.swb-w .swb-mobile-cta{ transition: transform var(--swb-duration-base) var(--swb-ease-out), opacity var(--swb-duration-base) var(--swb-ease-out), visibility var(--swb-duration-base); }
.swb-w .swb-mobile-cta .swb-market-cta-btn{ margin-inline-start: auto; }
.swb-w .swb-mobile-cta.swb-is-hidden{ transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; }
body.swb-has-mobile-nav .swb-w .swb-mobile-cta{ inset-block-end: var(--swb-mobile-nav-height); }

/* ===== 1.4.2 — trust marks read by their icon, never by a coloured dot ===== */
.swb-w .swb-market-mark--blue{ --swb-mark-ink: var(--swb-verify-blue-ink); }
.swb-w .swb-market-mark--green{ --swb-mark-ink: var(--swb-verify-green-ink); }
.swb-w .swb-market-mark--gold{ --swb-mark-ink: var(--swb-verify-gold-ink); }

/* Badge on cards and lists: icon + words; on a photo: a white disc with the icon. */
.swb-w .swb-vbadge__icon{ display: inline-flex; flex: none; }
.swb-w .swb-vbadge__icon svg{ inline-size: 14px; block-size: 14px; stroke-width: 2.1; }
.swb-w .swb-vbadge--blue  .swb-vbadge__icon{ color: var(--swb-verify-blue); }
.swb-w .swb-vbadge--green .swb-vbadge__icon{ color: var(--swb-verify-green); }
.swb-w .swb-vbadge--gold  .swb-vbadge__icon{ color: var(--swb-verify-gold); }
.swb-w .swb-vbadge--pill{ inline-size: 1.75rem; block-size: 1.75rem; padding: 0; }
.swb-w .swb-vbadge--pill .swb-vbadge__icon svg{ inline-size: 15px; block-size: 15px; }

/* Search chips and the other places that used to show a glyph. */
.swb-w .swb-market-chipdot{ display: inline-flex; inline-size: auto; block-size: auto; background: none; color: var(--swb-mark); }
.swb-w .swb-market-chipdot svg{ inline-size: 15px; block-size: 15px; stroke-width: 2.1; }
.swb-w .swb-trust-item__icon svg{ stroke-width: 2; }
.swb-w .swb-verify-mark__dot svg{ stroke-width: 2.1; }

/* Verified stays — the filter as icon tiles. */
.swb-w .swb-verify-filter{ background: var(--swb-surface-sunken); }
.swb-w .swb-verify-filter__head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--swb-space-2) var(--swb-space-4); margin-block-end: var(--swb-space-4); }
.swb-w .swb-verify-filter__title{ display: inline-flex; align-items: center; gap: var(--swb-space-2); margin: 0; font-size: var(--swb-text-base); font-weight: var(--swb-weight-bold); color: var(--swb-ink); }
.swb-w .swb-verify-filter__title svg{ color: var(--swb-ink-muted); }
.swb-w .swb-verify-filter__hint{ margin: 0; font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }
.swb-w .swb-verify-filter__note{ display: flex; align-items: flex-start; gap: var(--swb-space-2); margin: var(--swb-space-5) 0 0; }
.swb-w .swb-verify-filter__note svg{ flex: none; margin-block-start: 3px; color: var(--swb-ink-faint); }

.swb-w .swb-vf-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--swb-space-3); }
.swb-w .swb-vf-tile--all{ --swb-mark: var(--swb-brand); --swb-mark-soft: var(--swb-brand-soft, var(--swb-surface-sunken)); --swb-mark-ink: var(--swb-brand); }
.swb-w .swb-vf-tile{
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--swb-space-3);
  min-width: 0;
  padding: var(--swb-space-4); padding-inline-end: calc(var(--swb-space-4) + 22px);
  border: 1.5px solid var(--swb-border);
  border-radius: var(--swb-radius-md, 14px);
  background: var(--swb-surface, #fff);
  color: var(--swb-ink);
  text-decoration: none;
  transition: border-color var(--swb-transition), background var(--swb-transition), box-shadow var(--swb-transition), transform var(--swb-transition);
}
.swb-w .swb-vf-tile:hover{ border-color: var(--swb-mark); box-shadow: var(--swb-shadow-sm); transform: translateY(-1px); }
.swb-w .swb-vf-tile:focus-visible{ outline: 2px solid var(--swb-mark); outline-offset: 2px; }
.swb-w .swb-vf-tile__icon{
  grid-row: span 2;
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: 12px;
  background: var(--swb-mark-soft);
  color: var(--swb-mark);
}
.swb-w .swb-vf-tile__icon svg{ stroke-width: 2; }
.swb-w .swb-vf-tile__text{ display: grid; gap: 4px; min-width: 0; }
.swb-w .swb-vf-tile__name{ font-size: var(--swb-text-sm); font-weight: var(--swb-weight-bold); line-height: 1.45; color: var(--swb-ink); }
.swb-w .swb-vf-tile__desc{ font-size: var(--swb-text-xs); line-height: 1.6; color: var(--swb-ink-muted); }
.swb-w .swb-vf-tile__count{
  grid-column: 2;
  justify-self: start;
  margin-block-start: var(--swb-space-2);
  padding: 2px 10px;
  border-radius: var(--swb-radius-pill);
  background: var(--swb-surface-sunken);
  font-size: var(--swb-text-2xs, 11px); font-weight: var(--swb-weight-semibold);
  color: var(--swb-ink-soft);
}
.swb-w .swb-vf-tile__count::after{ content: " مكان"; }
.swb-w .swb-vf-tile__tick{
  position: absolute; inset-block-start: var(--swb-space-3); inset-inline-end: var(--swb-space-3);
  display: grid; place-items: center;
  inline-size: 22px; block-size: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--swb-border-strong);
  background: var(--swb-surface, #fff);
  color: transparent;
}
.swb-w .swb-vf-tile__tick svg{ inline-size: 13px; block-size: 13px; stroke-width: 3; }
.swb-w .swb-vf-tile.swb-is-active{ border-color: var(--swb-mark); background: var(--swb-mark-soft); box-shadow: 0 0 0 1px var(--swb-mark) inset; }
.swb-w .swb-vf-tile.swb-is-active .swb-vf-tile__icon{ background: var(--swb-mark); color: #fff; }
.swb-w .swb-vf-tile.swb-is-active .swb-vf-tile__name{ color: var(--swb-mark-ink); }
.swb-w .swb-vf-tile.swb-is-active .swb-vf-tile__count{ background: #fff; color: var(--swb-mark-ink); }
.swb-w .swb-vf-tile.swb-is-active .swb-vf-tile__tick{ background: var(--swb-mark); border-color: var(--swb-mark); color: #fff; }

@media (max-width: 1100px){ .swb-w .swb-vf-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){
  .swb-w .swb-vf-grid{ grid-template-columns: minmax(0, 1fr); gap: var(--swb-space-2); }
  .swb-w .swb-vf-tile{ padding: var(--swb-space-3); padding-inline-end: calc(var(--swb-space-3) + 24px); }
  .swb-w .swb-vf-tile__icon{ inline-size: 40px; block-size: 40px; }
}

/* ===== 1.5.0 — dates: "متاحة من …" on cards, the booking panel and the search ===== */
.swb-w .swb-property-card__avail {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  background: #FFF4E5; color: #8A4B00; font-size: .75rem; font-weight: 700; line-height: 1.5;
}
.swb-w .swb-property-card__avail svg { flex: none; }
.swb-w .swb-booking-panel__avail {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 12px;
  border-radius: 12px; background: #FFF4E5; color: #8A4B00; font-weight: 700; font-size: .875rem;
}
.swb-w .swb-market-later { margin-top: 48px; padding-top: 32px; border-top: 1px dashed var(--swb-border-strong, rgba(20,36,40,.18)); }
.swb-w .swb-market-later__head { margin-bottom: 20px; }
.swb-w .swb-market-later__head h2 { margin: 0 0 6px; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: 1.375rem; font-weight: 700; color: var(--swb-ink); }
.swb-w .swb-market-later__head p { margin: 0; color: var(--swb-ink-muted, #5E7276); font-size: .9375rem; line-height: 1.8; }

/* ===== 52-datepicker.css ===== */
/* ===========================================================================
 * 52 — The date picker (1.4.2): one Arabic calendar for every date field.
 * ======================================================================== */

/* The browser's field stays in the form, out of sight. */
.swb-w .swb-dp-native {
  position: absolute !important;
  inline-size: 1px !important; block-size: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
  clip: rect(0 0 0 0); overflow: hidden;
}

/* The button that takes its place — it wears the field's own classes. */
.swb-w .swb-dp-trigger {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  inline-size: 100%;
  font: inherit;
  text-align: start;
  cursor: pointer;
  white-space: nowrap;
}
.swb-w .swb-dp-trigger__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.swb-w .swb-dp-trigger__icon { display: inline-flex; flex: none; opacity: .7; }
.swb-w .swb-dp-trigger.swb-is-empty .swb-dp-trigger__text { opacity: .62; }
.swb-w .swb-dp-trigger.swb-is-invalid { box-shadow: 0 0 0 2px var(--swb-danger, #C62828) inset; border-radius: 10px; }
.swb-w .swb-input.swb-dp-trigger.swb-is-active { border-color: var(--swb-brand); box-shadow: 0 0 0 3px var(--swb-brand-soft, rgba(20, 70, 76, .14)); }
/* in the hero's glass bar the field is bare text */
.swb-w .swb-searchbar__input.swb-dp-trigger { background: transparent; border: 0; padding: 0; color: inherit; min-block-size: 1.6em; }

/* --- The calendar -------------------------------------------------------- */
.swb-dp-layer.swb-w { position: absolute; inset: 0 auto auto 0; z-index: 100000; inline-size: 0; block-size: 0; background: none; overflow: visible !important; contain: none; }
.swb-dp-layer .swb-dp-scrim { display: none; }
.swb-dp-layer .swb-dp {
  position: absolute;
  display: none;
  inline-size: 336px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: #FFFFFF;
  color: var(--swb-ink, #142428);
  border: 1px solid rgba(20, 36, 40, .08);
  box-shadow: 0 24px 60px -18px rgba(5, 20, 23, .38), 0 4px 14px rgba(5, 20, 23, .08);
  font-family: var(--swb-font-ar, inherit);
  transform-origin: top right;
}
.swb-dp-layer.swb-is-open .swb-dp { display: block; animation: swb-dp-in 180ms cubic-bezier(.2, .8, .2, 1); }
@keyframes swb-dp-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.swb-dp-layer .swb-dp__grab { display: none; }
.swb-dp-layer .swb-dp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 10px; }
.swb-dp-layer .swb-dp__title { font-family: var(--swb-font-heading, inherit); font-weight: 700; font-size: 1.0625rem; }
.swb-dp-layer .swb-dp__nav {
  appearance: none; border: 1px solid rgba(20, 36, 40, .10); background: #FFFFFF; color: var(--swb-ink, #142428);
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 12px; cursor: pointer;
  transition: background-color 160ms, border-color 160ms, color 160ms;
}
.swb-dp-layer .swb-dp__nav:hover:not(:disabled) { background: var(--swb-brand-soft, #E7F1F2); border-color: transparent; color: var(--swb-brand, #14464C); }
.swb-dp-layer .swb-dp__nav:disabled { opacity: .3; cursor: default; }

.swb-dp-layer .swb-dp__week,
.swb-dp-layer .swb-dp__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.swb-dp-layer .swb-dp__week { margin-block-end: 4px; }
.swb-dp-layer .swb-dp__week span { text-align: center; font-size: .6875rem; font-weight: 600; color: var(--swb-ink-muted, #5E7276); padding-block: 4px; }
.swb-dp-layer .swb-dp__grid { row-gap: 2px; }
.swb-dp-layer .swb-dp__pad { block-size: 42px; }
.swb-dp-layer .swb-dp__day {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  position: relative; block-size: 42px; inline-size: 100%;
  font: inherit; font-size: .9375rem; font-weight: 500; color: var(--swb-ink, #142428);
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
  transition: background-color 120ms, color 120ms;
}
.swb-dp-layer .swb-dp__day:hover:not(:disabled) { background: var(--swb-brand-soft, #E7F1F2); color: var(--swb-brand, #14464C); }
.swb-dp-layer .swb-dp__day:focus-visible { outline: 2px solid var(--swb-brand, #14464C); outline-offset: -2px; }
.swb-dp-layer .swb-dp__day:disabled { color: rgba(20, 36, 40, .26); cursor: default; }
.swb-dp-layer .swb-dp__day.swb-is-taken { text-decoration: line-through; color: rgba(150, 40, 40, .45); }
.swb-dp-layer .swb-dp__day.swb-is-today::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline-start: 50%; transform: translateX(50%);
  inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--swb-gold-500, #B8956B);
}
.swb-dp-layer .swb-dp__day.swb-is-between { background: var(--swb-brand-soft, #E7F1F2); border-radius: 0; color: var(--swb-brand, #14464C); }
.swb-dp-layer .swb-dp__day.swb-is-start,
.swb-dp-layer .swb-dp__day.swb-is-end,
.swb-dp-layer .swb-dp__day.swb-is-picked { background: var(--swb-brand, #14464C); color: #FFFFFF; font-weight: 700; }
.swb-dp-layer .swb-dp__day.swb-is-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.swb-dp-layer .swb-dp__day.swb-is-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.swb-dp-layer .swb-dp__day.swb-is-start.swb-is-end { border-radius: 12px; }
.swb-dp-layer .swb-dp__day.swb-is-start.swb-is-solo { border-radius: 12px; }
.swb-dp-layer .swb-dp__day.swb-is-today.swb-is-picked::after,
.swb-dp-layer .swb-dp__day.swb-is-today.swb-is-start::after { background: #FFFFFF; }

.swb-dp-layer .swb-dp__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid rgba(20, 36, 40, .08); }
.swb-dp-layer .swb-dp__hint { font-size: .8125rem; font-weight: 600; color: var(--swb-ink-muted, #5E7276); }
.swb-dp-layer .swb-dp__actions { display: inline-flex; align-items: center; gap: 6px; }
.swb-dp-layer .swb-dp__link,
.swb-dp-layer .swb-dp__done { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 700; border-radius: 10px; padding: 8px 14px; }
.swb-dp-layer .swb-dp__link { background: transparent; color: var(--swb-ink-muted, #5E7276); }
.swb-dp-layer .swb-dp__link:hover { color: var(--swb-danger, #B42318); }
.swb-dp-layer .swb-dp__done { background: var(--swb-brand, #14464C); color: #FFFFFF; }

/* A sheet from the bottom on a phone. */
@media (max-width: 600px) {
  .swb-dp-layer.swb-w { position: fixed; inset: 0; inline-size: auto; block-size: auto; pointer-events: none; }
  .swb-dp-layer.swb-is-open { pointer-events: auto; }
  .swb-dp-layer.swb-is-open .swb-dp-scrim { display: block; position: absolute; inset: 0; background: rgba(5, 20, 23, .45); animation: swb-dp-fade 200ms ease; }
  .swb-dp-layer .swb-dp {
    position: absolute; inset: auto 0 0 0 !important; inline-size: auto;
    padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; border: 0;
  }
  .swb-dp-layer.swb-is-open .swb-dp { animation: swb-dp-up 240ms cubic-bezier(.2, .8, .2, 1); }
  .swb-dp-layer .swb-dp__grab { display: block; inline-size: 44px; block-size: 5px; border-radius: 99px; background: rgba(20, 36, 40, .16); margin: 2px auto 12px; }
  .swb-dp-layer .swb-dp__day, .swb-dp-layer .swb-dp__pad { block-size: 46px; }
  .swb-dp-layer .swb-dp__done { padding: 10px 22px; }
  html.swb-dp-sheet-open, html.swb-dp-sheet-open body { overflow: hidden; }
}
@keyframes swb-dp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes swb-dp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .swb-dp-layer .swb-dp, .swb-dp-layer.swb-is-open .swb-dp, .swb-dp-layer .swb-dp-scrim { animation: none !important; }
}
.swb-dp-layer .swb-dp__day.swb-is-between.swb-is-picked { background: var(--swb-brand-soft, #E7F1F2); color: var(--swb-brand, #14464C); }

/* ===== 60-account.css ===== */
/* ===========================================================================
 * 60 — Account pages: what the Laravel views did with inline styles
 *
 * Laravel's account screens set a few sizes inline (style="..."); the widgets
 * may not, so those few lines live here as classes. Tokens only.
 * ======================================================================== */

/* "اعرض وحدتك": the pitch column gives way before the form does. */
.swb-w .swb-owner-start__pitch { min-inline-size: 0; }

/* The auth split without its photograph: the form on its own, centred. */
.swb-w .swb-auth-split--solo { grid-template-columns: minmax(0, 1fr); }

/* Steps hidden by the script stay hidden whatever a theme says about <section>. */
.swb-w .swb-onboard__step[hidden] { display: none; }

/* The dashboard shell without its side menu. */
.swb-w .swb-dash--bare { grid-template-columns: minmax(0, 1fr); }
.swb-w .swb-dash--bare .swb-dash__main { inline-size: 100%; max-inline-size: var(--swb-container); margin-inline: auto; }

/* Headings inside cards and sections (Laravel: font-size var(--text-base|lg) inline). */
.swb-w .swb-acc-card-title { font-size: var(--swb-text-base); }
.swb-w .swb-acc-h2 { font-size: var(--swb-text-lg); }
.swb-w .swb-acc-section-head { margin-block-end: var(--swb-space-4); }

/* The property thumbnail on a booking row (72 × 72, radius-sm, cover). */
.swb-w .swb-acc-thumb {
  flex: none;
  inline-size: 72px;
  block-size: 72px;
  border-radius: var(--swb-radius-sm);
  object-fit: cover;
  background: var(--swb-surface-muted);
}

/* One booking. */
.swb-w .swb-acc-booking { position: relative; }
.swb-w .swb-acc-booking__title { color: var(--swb-ink); }
.swb-w .swb-acc-booking__title:hover { color: var(--swb-brand); }
.swb-w .swb-acc-booking__meta { color: var(--swb-ink-soft); }
.swb-w .swb-acc-booking__total { font-size: var(--swb-text-base); }
.swb-w .swb-acc-booking__timeline {
  margin-block-start: var(--swb-space-6);
  padding-block-start: var(--swb-space-6);
  border-block-start: 1px solid var(--swb-border);
}
.swb-w .swb-acc-due { border-color: var(--swb-purple-300); }
.swb-w .swb-acc-due__title { font-size: var(--swb-text-lg); }
.swb-w .swb-acc-pay-btn { flex: none; }

/* The host's listing cards (Laravel: aspect-ratio 16/10 inline, body padding space-4). */
.swb-w .swb-acc-prop__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--swb-surface-muted);
}
.swb-w .swb-acc-prop__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.swb-w .swb-acc-prop__body { padding: var(--swb-space-4); }
.swb-w .swb-acc-prop__badges { gap: 2px; }
.swb-w .swb-acc-prop__title { color: var(--swb-ink); }
.swb-w .swb-acc-prop__title:hover { color: var(--swb-brand); }

/* The pay page: form on the reading side, summary beside it (1.3fr / 1fr). */
.swb-w .swb-acc-pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--swb-space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .swb-w .swb-acc-pay-grid { grid-template-columns: minmax(0, 1fr); }
}
.swb-w .swb-acc-summary__title { color: var(--swb-ink); }
.swb-w .swb-acc-methods { gap: var(--swb-space-2); }

/* "Protected payment" — the line that answers the worry before the button. */
.swb-w .swb-acc-protected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--swb-space-2);
  margin-block-start: var(--swb-space-4);
  font-size: var(--swb-text-sm);
  font-weight: var(--swb-weight-semibold);
  color: var(--swb-success-ink);
}
.swb-w .swb-acc-protected svg { flex: none; }

/* The Fawry / Aman code: big, copyable, unmistakably the thing to write down. */
.swb-w .swb-acc-voucher {
  margin-block: var(--swb-space-5);
  padding: var(--swb-space-4);
  border: 1px dashed var(--swb-purple-300);
  border-radius: var(--swb-radius-md);
  background: var(--swb-purple-25);
  color: var(--swb-brand);
  font-size: var(--swb-text-2xl);
  font-weight: var(--swb-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  user-select: all;
}

/* ===== 1.4.2 — the account side menu: brand on top, who is signed in, bold links with icons ===== */
.swb-w .swb-dash-brand{ display: grid; gap: 2px; padding: 0 var(--swb-space-3) var(--swb-space-5); margin-block-end: var(--swb-space-5); border-block-end: 1px solid var(--swb-border); text-decoration: none; }
.swb-w .swb-dash-brand__name{ font-family: var(--swb-font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--swb-brand); }
.swb-w .swb-dash-brand__tag{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }
.swb-w .swb-dash-who{ display: flex; align-items: center; gap: var(--swb-space-3); padding: var(--swb-space-3); margin-block-end: var(--swb-space-5); border-radius: 14px; background: var(--swb-surface, #fff); border: 1px solid var(--swb-border); }
.swb-w .swb-dash-who__avatar{ flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--swb-brand); color: #fff; font-weight: 800; font-size: 1.05rem; }
.swb-w .swb-dash-who__text{ display: grid; min-width: 0; }
.swb-w .swb-dash-who__text b{ font-size: var(--swb-text-base); color: var(--swb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swb-w .swb-dash-who__text small{ font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }

.swb-w .swb-dash-nav__title{ font-size: var(--swb-text-xs); font-weight: 800; color: var(--swb-ink-muted); }
.swb-w .swb-dash-nav__link{ font-size: 1.0625rem; font-weight: 700; color: var(--swb-ink); padding: .7rem var(--swb-space-3); border-radius: 12px; margin-block-end: 4px; text-decoration: none; }
.swb-w .swb-dash-nav__icon{ display: inline-grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; border-radius: 10px; background: var(--swb-surface, #fff); color: var(--swb-ink-soft); border: 1px solid var(--swb-border); transition: inherit; }
.swb-w .swb-dash-nav__icon svg{ inline-size: 18px; block-size: 18px; stroke-width: 2; }
.swb-w .swb-dash-nav__link:hover .swb-dash-nav__icon{ color: var(--swb-brand); border-color: currentColor; }
.swb-w .swb-dash-nav__link.swb-is-active{ background: var(--swb-brand); color: #fff; font-weight: 800; }
.swb-w .swb-dash-nav__link.swb-is-active .swb-dash-nav__icon{ background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }

@media (max-width: 1024px){
  .swb-w .swb-dash-brand{ display: none; }
  .swb-w .swb-dash-who{ margin-block-end: var(--swb-space-3); }
  .swb-w .swb-dash-nav__link{ font-size: var(--swb-text-sm); padding: .5rem .75rem; }
  .swb-w .swb-dash-nav__icon{ inline-size: 28px; block-size: 28px; }
}

/* ===== 1.5.0 — the owner's calendar in حسابي ===== */
.swb-w .swb-acc-calnote {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 24px; padding: 16px 18px; border-radius: 16px;
  background: var(--swb-brand-soft, #E7F1F2); color: var(--swb-ink);
}
.swb-w .swb-acc-calnote.is-stale { background: #FFF4E5; }
.swb-w .swb-acc-calnote__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--swb-brand); flex: none; }
.swb-w .swb-acc-calnote.is-stale .swb-acc-calnote__icon { color: #8A4B00; }
.swb-w .swb-acc-calnote__text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.swb-w .swb-acc-calnote__text b { font-weight: 700; font-size: 1rem; }
.swb-w .swb-acc-calnote__text span { color: var(--swb-ink-muted, #5E7276); font-size: .875rem; line-height: 1.7; }
.swb-w .swb-acc-prop__cal { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .75rem; font-weight: 700; color: var(--swb-ink-muted, #5E7276); }
.swb-w .swb-acc-prop__cal.is-stale { color: #8A4B00; }
.swb-w .swb-cal { margin-bottom: 32px; }

/* ===== 65-app.css ===== */
/* ===========================================================================
 * 65 — The customer app: sign in / sign up / codes, the listing form,
 * ratings, the cancellation policy, and the host dashboard additions.
 * Same tokens as everything else; logical properties for right-to-left.
 * ======================================================================== */

/* --- Shared ------------------------------------------------------------------ */
/* hidden means hidden, whatever display a component sets. */
.swb-w [hidden] { display: none !important; }
.swb-w .swb-app-link {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--swb-brand); font: inherit; font-size: .875rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--swb-purple-200); text-underline-offset: 3px;
}
.swb-w .swb-app-link:hover { color: var(--swb-brand-hover); text-decoration-color: currentColor; }
.swb-w .swb-btn.swb-is-busy { position: relative; color: transparent !important; pointer-events: none; }
.swb-w .swb-btn.swb-is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%;
  animation: swb-spin .7s linear infinite;
}
.swb-w .swb-btn--secondary.swb-is-busy::after, .swb-w .swb-btn--soft.swb-is-busy::after, .swb-w .swb-btn--ghost.swb-is-busy::after { border-color: var(--swb-purple-200); border-top-color: var(--swb-brand); }
@keyframes swb-spin { to { transform: rotate(360deg); } }
.swb-w .swb-app-solo { max-width: 520px; }

/* --- Sign in / sign up -------------------------------------------------------- */
.swb-w .swb-auth-app { display: grid; gap: 1rem; }
.swb-w .swb-app-head { margin-bottom: .25rem; }
.swb-w .swb-app-title { margin: 0 0 .375rem; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.3; color: var(--swb-ink); }
.swb-w .swb-app-sub { margin: 0; color: var(--swb-ink-muted); line-height: 1.8; }
.swb-w .swb-app-form { display: grid; gap: 1rem; }
.swb-w .swb-app-row { margin-block: -.25rem .25rem; }
.swb-w .swb-app-foot { margin: .5rem 0 0; text-align: center; font-size: .9375rem; }
.swb-w .swb-app-terms { line-height: 1.7; font-size: .875rem; }
.swb-w .swb-app-chosen { display: flex; gap: .5rem; align-items: center; margin: 0; padding: .625rem .875rem; border-radius: 12px; background: var(--swb-purple-25); color: var(--swb-brand); font-weight: 600; }
.swb-w .swb-app-alert { margin: 0; }
.swb-w .swb-app-resend { justify-self: center; }

.swb-w .swb-google-btn {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 52px; padding: 0 1.25rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--swb-border-strong); color: var(--swb-ink);
  font-weight: 600; text-decoration: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.swb-w .swb-google-btn:hover { border-color: var(--swb-purple-300); box-shadow: 0 8px 22px -14px rgba(18, 62, 70, .45); color: var(--swb-ink); }
.swb-w .swb-google-btn svg { flex: none; }
.swb-w .swb-app-or { display: flex; align-items: center; gap: .75rem; color: var(--swb-ink-faint); font-size: .8125rem; margin-block: .25rem; }
.swb-w .swb-app-or::before, .swb-w .swb-app-or::after { content: ""; flex: 1; height: 1px; background: var(--swb-border); }

.swb-w .swb-app-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.swb-w .swb-app-steps li { display: grid; gap: .375rem; font-size: .75rem; color: var(--swb-ink-faint); font-weight: 600; }
.swb-w .swb-app-steps li span { height: 4px; border-radius: 4px; background: var(--swb-border); transition: background-color .3s; }
.swb-w .swb-app-steps li.swb-is-current { color: var(--swb-brand); }
.swb-w .swb-app-steps li.swb-is-current span, .swb-w .swb-app-steps li.swb-is-done span { background: var(--swb-brand); }
.swb-w .swb-app-step { display: grid; gap: 1rem; animation: swb-rise .35s var(--swb-ease-out, ease-out); }
.swb-w .swb-app-step__title { margin: 0; font-size: 1.125rem; color: var(--swb-ink); }
@keyframes swb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .swb-w .swb-app-step, .swb-w .swb-lf__step { animation: none !important; } }

.swb-w .swb-role-card:has(input:checked) { border-color: var(--swb-brand); background: var(--swb-purple-25); box-shadow: 0 0 0 1px var(--swb-brand) inset; }
.swb-w .swb-role-card:has(input:checked) .swb-role-card__tick { background: var(--swb-brand); border-color: var(--swb-brand); color: #fff; }
.swb-w .swb-role-card:has(input:focus-visible) { box-shadow: var(--swb-shadow-focus); }

/* --- One-time code ------------------------------------------------------------- */
.swb-w .swb-otp {
  width: 100%; max-width: 15rem; min-height: 56px; padding: 0 1rem; text-align: center;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1.625rem; letter-spacing: .5em;
  border: 1.5px solid var(--swb-border-strong); border-radius: 14px; background: #fff; color: var(--swb-purple-900);
  transition: border-color .2s, box-shadow .2s;
}
.swb-w .swb-otp:focus { outline: none; border-color: var(--swb-brand); box-shadow: var(--swb-shadow-focus); }
.swb-w .swb-otp::placeholder { color: var(--swb-purple-200); letter-spacing: .35em; }
.swb-w .swb-otp--full { border-color: var(--swb-success, #12A150); }

/* --- Verification block --------------------------------------------------------- */
.swb-w .swb-verify { display: grid; gap: .875rem; }
.swb-w .swb-verify__title { margin: 0; font-size: 1.125rem; color: var(--swb-ink); }
.swb-w .swb-verify__sub { margin: -.375rem 0 0; color: var(--swb-ink-muted); font-size: .9375rem; line-height: 1.7; }
.swb-w .swb-verify__item { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--swb-border); border-radius: 16px; background: #fff; transition: border-color .25s, background-color .25s; }
.swb-w .swb-verify__item.swb-is-done { background: var(--swb-success-soft, #E6F6EC); border-color: transparent; }
.swb-w .swb-verify__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--swb-purple-50); color: var(--swb-brand); }
.swb-w .swb-verify__item.swb-is-done .swb-verify__icon { background: #fff; color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-verify__body { flex: 1; min-width: 0; display: grid; gap: .5rem; }
.swb-w .swb-verify__name { margin: 0; font-weight: 700; color: var(--swb-ink); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.swb-w .swb-verify__ok { display: inline-flex; align-items: center; gap: .25rem; color: var(--swb-success-ink, #0A6B35); font-size: .8125rem; }
.swb-w .swb-verify__hint { margin: 0; color: var(--swb-ink-muted); font-size: .875rem; line-height: 1.7; }
.swb-w .swb-verify__form { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.swb-w .swb-verify__form .swb-input-group { flex: 1 1 14rem; }
.swb-w .swb-verify__form .swb-otp { flex: 0 1 13rem; }
.swb-w .swb-verify__done { text-align: center; display: grid; gap: .5rem; justify-items: center; padding: .5rem 0; }
.swb-w .swb-verify__done p { margin: 0; }
.swb-w .swb-verify__done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--swb-success-soft, #E6F6EC); color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-verify__done-icon svg { width: 28px; height: 28px; }
.swb-w .swb-verify-card { border-inline-start: 4px solid var(--swb-gold-400); }

/* --- Bottom sheet ---------------------------------------------------------------- */
.swb-w .swb-sheet { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: flex-end; justify-content: center; }
.swb-w .swb-sheet__scrim { position: absolute; inset: 0; background: rgba(7, 26, 30, .5); opacity: 0; transition: opacity .22s; }
.swb-w .swb-sheet__panel {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 22px 22px 0 0; padding: 1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s var(--swb-ease-out, ease-out); box-shadow: 0 -20px 50px -20px rgba(7, 26, 30, .4);
}
.swb-w .swb-sheet.swb-is-open .swb-sheet__scrim { opacity: 1; }
.swb-w .swb-sheet.swb-is-open .swb-sheet__panel { transform: none; }
.swb-w .swb-sheet__close { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--swb-surface-muted); font-size: 1.375rem; line-height: 1; cursor: pointer; color: var(--swb-ink-soft); }
@media (min-width: 720px) {
  .swb-w .swb-sheet { align-items: center; }
  .swb-w .swb-sheet__panel { border-radius: 22px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .22s, opacity .22s; }
  .swb-w .swb-sheet.swb-is-open .swb-sheet__panel { opacity: 1; }
}
body.swb-sheet-open { overflow: hidden; }

/* --- Chips (radio/checkbox inside a label) ---------------------------------------- */
.swb-w .swb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.swb-w .swb-chips--sm .swb-chip { padding: .3125rem .75rem; font-size: .8125rem; }
.swb-w label.swb-chip { position: relative; min-height: 40px; padding: .4375rem .9375rem; user-select: none; }
.swb-w label.swb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.swb-w label.swb-chip:has(input:checked) { background: var(--swb-purple-100); border-color: var(--swb-brand); color: var(--swb-purple-900); font-weight: 600; }
.swb-w label.swb-chip:has(input:checked)::before { content: "✓"; font-size: .75rem; color: var(--swb-brand); }
.swb-w label.swb-chip:has(input:focus-visible) { box-shadow: var(--swb-shadow-focus); }
.swb-w .swb-chip--policy:has(input:checked) { background: var(--swb-gold-100); border-color: var(--swb-gold-500); color: var(--swb-gold-600); }
.swb-w .swb-chip--policy:has(input:checked)::before { color: var(--swb-gold-600); }
.swb-w button.swb-chip--add { border-style: dashed; background: transparent; font: inherit; font-size: .8125rem; }
.swb-w button.swb-chip--add.swb-is-used { opacity: .45; }

/* ===========================================================================
 * The listing form
 * ======================================================================== */
.swb-w .swb-section--lf { padding-block: clamp(1rem, 3vw, 2rem) 6rem; background: var(--swb-page-bg, #F7F8F6); }
.swb-w .swb-lf { display: grid; gap: 1.25rem; }
.swb-w .swb-lf__top { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; }
.swb-w .swb-lf__back { display: inline-flex; gap: .375rem; align-items: center; padding: .5rem .75rem; border-radius: 12px; background: #fff; border: 1px solid var(--swb-border); color: var(--swb-ink-soft); text-decoration: none; font-weight: 600; font-size: .875rem; }
.swb-w .swb-lf__back:hover { color: var(--swb-brand); border-color: var(--swb-purple-200); }
.swb-w .swb-lf__title { margin: 0; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); color: var(--swb-ink); }
.swb-w .swb-lf__sub, .swb-w .swb-lf__note, .swb-w .swb-lf__reason { margin: .25rem 0 0; color: var(--swb-ink-muted); line-height: 1.8; }
.swb-w .swb-lf__note { color: var(--swb-info-ink, #123E46); background: var(--swb-purple-25); padding: .5rem .875rem; border-radius: 12px; }
.swb-w .swb-lf__reason { color: var(--swb-danger-ink, #991B1B); background: var(--swb-danger-soft, #FEECEC); padding: .5rem .875rem; border-radius: 12px; }
.swb-w .swb-lf__save { font-size: .8125rem; color: var(--swb-ink-faint); white-space: nowrap; padding-top: .625rem; }
.swb-w .swb-lf__save.swb-is-saved { color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-lf__save.swb-is-error { color: var(--swb-danger-ink, #991B1B); }

.swb-w .swb-lf__progress { display: grid; gap: .75rem; }
.swb-w .swb-lf__bar { height: 6px; border-radius: 6px; background: var(--swb-purple-50); overflow: hidden; }
.swb-w .swb-lf__bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--swb-purple-600, #285F69), var(--swb-brand)); transition: width .45s var(--swb-ease-out, ease-out); }
.swb-w .swb-lf__dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.swb-w .swb-lf__dot { width: 100%; display: grid; justify-items: center; gap: .25rem; background: none; border: 0; padding: .25rem; cursor: pointer; color: var(--swb-ink-faint); font: inherit; }
.swb-w .swb-lf__dot-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--swb-border-strong); background: #fff; font-weight: 700; font-size: .8125rem; transition: all .25s; }
.swb-w .swb-lf__dot-label { font-size: .75rem; font-weight: 600; }
.swb-w .swb-lf__dot.swb-is-done .swb-lf__dot-n { background: var(--swb-purple-100); border-color: var(--swb-purple-300); color: var(--swb-brand); }
.swb-w .swb-lf__dot.swb-is-current { color: var(--swb-brand); }
.swb-w .swb-lf__dot.swb-is-current .swb-lf__dot-n { background: var(--swb-brand); border-color: var(--swb-brand); color: #fff; box-shadow: 0 6px 16px -8px rgba(18, 62, 70, .7); }

.swb-w .swb-lf__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.swb-w .swb-lf__main { background: #fff; border: 1px solid var(--swb-border); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 1px 2px rgba(20, 36, 40, .04), 0 20px 40px -30px rgba(20, 36, 40, .25); }
.swb-w .swb-lf__step { display: grid; gap: 1.5rem; animation: swb-rise .35s var(--swb-ease-out, ease-out); }
.swb-w .swb-lf__h { margin: 0; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); color: var(--swb-ink); }
.swb-w .swb-lf__h3 { margin: .5rem 0 0; font-size: 1.0625rem; color: var(--swb-ink); }
.swb-w .swb-lf__step > .swb-lf__sub { margin-top: -1rem; }
.swb-w .swb-lf__group { border: 0; margin: 0; padding: 0; display: grid; gap: .75rem; min-width: 0; }
.swb-w .swb-lf__group legend { padding: 0; margin-bottom: .75rem; font-weight: 700; color: var(--swb-ink); font-size: 1rem; }
.swb-w .swb-lf__group--tight legend { font-size: .875rem; color: var(--swb-ink-soft); margin-bottom: .5rem; }
.swb-w .swb-lf__row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.swb-w .swb-lf__row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.swb-w .swb-lf__alert { margin: 0; }

.swb-w .swb-lf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.swb-w .swb-lf-tile { position: relative; display: grid; justify-items: center; gap: .5rem; padding: 1.25rem .5rem 1rem; border: 1.5px solid var(--swb-border); border-radius: 18px; background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s, transform .15s, box-shadow .2s; }
.swb-w .swb-lf-tile:hover { border-color: var(--swb-purple-300); transform: translateY(-2px); }
.swb-w .swb-lf-tile input { position: absolute; opacity: 0; pointer-events: none; }
.swb-w .swb-lf-tile__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--swb-purple-25); color: var(--swb-brand); transition: all .2s; }
.swb-w .swb-lf-tile__name { font-weight: 700; color: var(--swb-ink); }
.swb-w .swb-lf-tile:has(input:checked) { border-color: var(--swb-brand); background: var(--swb-purple-25); box-shadow: 0 12px 24px -18px rgba(18, 62, 70, .7); }
.swb-w .swb-lf-tile:has(input:checked) .swb-lf-tile__icon { background: var(--swb-brand); color: #fff; }
.swb-w .swb-lf-tile:has(input:focus-visible) { box-shadow: var(--swb-shadow-focus); }

.swb-w .swb-lf-choice2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.swb-w .swb-lf-big { position: relative; display: flex; gap: .875rem; align-items: center; padding: 1rem 1.125rem; border: 1.5px solid var(--swb-border); border-radius: 18px; cursor: pointer; transition: all .2s; }
.swb-w .swb-lf-big input { position: absolute; opacity: 0; pointer-events: none; }
.swb-w .swb-lf-big__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--swb-purple-25); color: var(--swb-brand); }
.swb-w .swb-lf-big b { display: block; color: var(--swb-ink); }
.swb-w .swb-lf-big small { display: block; color: var(--swb-ink-muted); font-size: .8125rem; margin-top: 2px; }
.swb-w .swb-lf-big:hover { border-color: var(--swb-purple-300); }
.swb-w .swb-lf-big:has(input:checked) { border-color: var(--swb-brand); background: var(--swb-purple-25); }
.swb-w .swb-lf-big:has(input:checked) .swb-lf-big__icon { background: var(--swb-brand); color: #fff; }
.swb-w .swb-lf-big:has(input:focus-visible) { box-shadow: var(--swb-shadow-focus); }

.swb-w .swb-lf-counter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--swb-border); }
.swb-w .swb-lf-counter:last-child { border-bottom: 0; }
.swb-w .swb-lf-counter__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--swb-purple-25); color: var(--swb-brand); }
.swb-w .swb-lf-counter__label b { display: block; color: var(--swb-ink); }
.swb-w .swb-lf-counter__label small { color: var(--swb-ink-muted); font-size: .8125rem; }
.swb-w .swb-lf-counter__ctl { display: inline-flex; align-items: center; gap: .75rem; }
.swb-w .swb-lf-counter__ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--swb-border-strong); background: #fff; font-size: 1.375rem; line-height: 1; color: var(--swb-brand); cursor: pointer; transition: all .15s; }
.swb-w .swb-lf-counter__ctl button:hover { border-color: var(--swb-brand); background: var(--swb-purple-25); }
.swb-w .swb-lf-counter__ctl button:active { transform: scale(.92); }
.swb-w .swb-lf-counter__ctl output { min-width: 2ch; text-align: center; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: 1.375rem; font-weight: 700; color: var(--swb-ink); font-variant-numeric: tabular-nums; }
.swb-w .swb-bump { animation: swb-bump .25s ease-out; }
@keyframes swb-bump { 50% { transform: scale(1.25); color: var(--swb-brand); } }

/* Photos */
.swb-w .swb-lf-drop { position: relative; display: grid; justify-items: center; gap: .375rem; padding: 2rem 1rem; border: 2px dashed var(--swb-purple-200); border-radius: 20px; background: var(--swb-purple-25); text-align: center; cursor: pointer; transition: all .2s; }
.swb-w .swb-lf-drop:hover, .swb-w .swb-lf-drop.swb-is-over { border-color: var(--swb-brand); background: var(--swb-purple-50); }
.swb-w .swb-lf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swb-w .swb-lf-drop__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--swb-brand); box-shadow: 0 8px 20px -12px rgba(18, 62, 70, .5); margin-bottom: .25rem; }
.swb-w .swb-lf-drop b { color: var(--swb-ink); }
.swb-w .swb-lf-drop small { color: var(--swb-ink-muted); }
.swb-w .swb-lf-meter { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--swb-ink-muted); }
.swb-w .swb-lf-meter__bar { flex: 0 0 120px; height: 6px; border-radius: 6px; background: var(--swb-surface-muted); overflow: hidden; }
.swb-w .swb-lf-meter__bar span { display: block; height: 100%; background: var(--swb-gold-500); border-radius: 6px; transition: width .3s; }
.swb-w .swb-lf-meter.swb-is-ok .swb-lf-meter__bar span { background: var(--swb-success, #12A150); }
.swb-w .swb-lf-meter.swb-is-ok { color: var(--swb-success-ink, #0A6B35); font-weight: 600; }
.swb-w .swb-lf-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.swb-w .swb-lf-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--swb-surface-muted); box-shadow: 0 1px 2px rgba(20, 36, 40, .08); transition: transform .15s, box-shadow .2s, opacity .2s; }
.swb-w .swb-lf-photo:first-child { grid-column: span 2; grid-row: span 2; }
.swb-w .swb-lf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swb-w .swb-lf-photo.swb-is-uploading img { opacity: .55; filter: saturate(.6); }
.swb-w .swb-lf-photo.swb-is-failed { outline: 2px solid var(--swb-danger, #D63638); }
.swb-w .swb-lf-photo.swb-is-dragging { transform: scale(1.04); box-shadow: 0 18px 36px -16px rgba(7, 26, 30, .6); z-index: 2; opacity: .92; }
.swb-w .swb-lf-photos.swb-is-sorting .swb-lf-photo:not(.swb-is-dragging) { transition: transform .2s; }
.swb-w .swb-lf-photo__cover { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; padding: .25rem .625rem; border-radius: 999px; background: var(--swb-gold-400); color: var(--swb-purple-950, #071A1E); font-size: .75rem; font-weight: 700; }
.swb-w .swb-lf-photo__progress { position: absolute; inset-inline: .75rem; inset-block-end: .75rem; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .6); overflow: hidden; }
.swb-w .swb-lf-photo__progress span { display: block; height: 100%; background: var(--swb-brand); transition: width .2s; }
.swb-w .swb-lf-photo__err { position: absolute; inset-inline: .5rem; inset-block-end: .5rem; padding: .25rem .5rem; border-radius: 8px; background: var(--swb-danger, #D63638); color: #fff; font-size: .75rem; }
.swb-w .swb-lf-photo__tools { position: absolute; inset-inline: 0; inset-block-end: 0; display: flex; gap: .375rem; align-items: center; padding: .5rem; background: linear-gradient(to top, rgba(7, 26, 30, .7), rgba(7, 26, 30, 0)); }
.swb-w .swb-lf-photo__handle { touch-action: none; cursor: grab; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .92); color: var(--swb-ink); font-size: 1.125rem; line-height: 1; }
.swb-w .swb-lf-photo__handle:active { cursor: grabbing; }
.swb-w .swb-lf-photo__btn { height: 32px; padding: 0 .625rem; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .92); color: var(--swb-ink); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.swb-w .swb-lf-photo__x { margin-inline-start: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(7, 26, 30, .65); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.swb-w .swb-lf-photo__x:hover { background: var(--swb-danger, #D63638); }

/* Map */
.swb-w .swb-lf-maptools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.swb-w .swb-lf-paste { flex: 1 1 18rem; display: flex; gap: .5rem; }
.swb-w .swb-lf-paste .swb-input { flex: 1; }
.swb-w .swb-lf-map { position: relative; height: 340px; border-radius: 18px; overflow: hidden; border: 1px solid var(--swb-border); background: var(--swb-purple-25); z-index: 0; }
.swb-w .swb-lf-map__hint { position: absolute; inset-block-start: .75rem; inset-inline-start: 50%; transform: translateX(50%); z-index: 500; padding: .375rem .875rem; border-radius: 999px; background: rgba(7, 26, 30, .78); color: #fff; font-size: .8125rem; pointer-events: none; }
.swb-w .swb-lf-map.swb-is-off { display: grid; place-items: center; height: auto; padding: 2rem 1rem; }
.swb-w .swb-lf-map__off { margin: 0; color: var(--swb-ink-muted); text-align: center; }
.swb-w .swb-lf-pin { margin: -.75rem 0 0; color: var(--swb-success-ink, #0A6B35); font-size: .875rem; }
.swb-w .swb-lf-pin span { color: var(--swb-ink-faint); font-size: .75rem; }
.swb-w .swb-lf-owner { padding: 1rem; border-radius: 16px; background: var(--swb-gold-100); }

/* Price */
.swb-w .swb-lf-price { display: grid; gap: .5rem; }
.swb-w .swb-lf-price__box { display: flex; align-items: baseline; gap: .75rem; padding: .75rem 1.125rem; border: 1.5px solid var(--swb-border-strong); border-radius: 18px; background: #fff; max-width: 26rem; transition: border-color .2s, box-shadow .2s; }
.swb-w .swb-lf-price__box:focus-within { border-color: var(--swb-brand); box-shadow: var(--swb-shadow-focus); }
.swb-w .swb-lf-price__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: 2.25rem; font-weight: 700; color: var(--swb-ink); font-variant-numeric: tabular-nums; }
.swb-w .swb-lf-price__box span { color: var(--swb-ink-muted); white-space: nowrap; }
.swb-w .swb-lf-earn { margin: 0; color: var(--swb-success-ink, #0A6B35); font-size: .875rem; line-height: 1.7; }
.swb-w .swb-lf-title { display: flex; gap: .5rem; }
.swb-w .swb-lf-title .swb-input { flex: 1; }

/* Review */
.swb-w .swb-lf-summary dl { margin: 0; display: grid; }
.swb-w .swb-lf-summary__row { display: grid; grid-template-columns: 7rem 1fr auto; gap: .75rem; align-items: start; padding: .75rem 0; border-bottom: 1px dashed var(--swb-border); }
.swb-w .swb-lf-summary__row dt { color: var(--swb-ink-muted); font-size: .875rem; }
.swb-w .swb-lf-summary__row dd { margin: 0; color: var(--swb-ink); font-weight: 600; line-height: 1.7; }
.swb-w .swb-lf-summary__row.swb-is-missing dd { color: var(--swb-danger-ink, #991B1B); }
.swb-w .swb-lf-missing { padding: .875rem 1rem; border-radius: 14px; background: var(--swb-warning-soft, #FFF4E0); color: var(--swb-warning-ink, #7A4A0E); }
.swb-w .swb-lf-missing p { margin: 0 0 .25rem; }
.swb-w .swb-lf-missing ul { margin: 0; padding-inline-start: 1.125rem; display: grid; gap: .25rem; }
.swb-w .swb-lf-promise { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.125rem; border-radius: 16px; background: var(--swb-purple-25); color: var(--swb-purple-900); }
.swb-w .swb-lf-promise p { margin: 0; line-height: 1.7; }
.swb-w .swb-lf-verify { padding: 1rem; border-radius: 18px; border: 1px solid var(--swb-gold-300); background: var(--swb-gold-100); }

/* Sent */
.swb-w .swb-lf-done { text-align: center; justify-items: center; padding-block: 1.5rem; }
.swb-w .swb-lf-done__icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--swb-success-soft, #E6F6EC); color: var(--swb-success-ink, #0A6B35); animation: swb-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.swb-w .swb-lf-done__icon svg { width: 42px; height: 42px; }
.swb-w .swb-lf-done__lede { max-width: 32rem; margin: 0; color: var(--swb-ink-soft); line-height: 1.9; font-size: 1.0625rem; }
.swb-w .swb-lf-done__actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
@keyframes swb-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.swb-w .swb-lf--done .swb-lf__layout { grid-template-columns: minmax(0, 1fr); }

/* Preview */
.swb-w .swb-lf__preview { position: sticky; top: 96px; display: grid; gap: .75rem; }
.swb-w .swb-lf__preview-label { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--swb-ink-muted); }
.swb-w .swb-lf-card .swb-property-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--swb-purple-25); }
.swb-w .swb-lf-card .swb-property-card__media img { width: 100%; height: 100%; object-fit: cover; }
.swb-w .swb-lf-card__noimg { color: var(--swb-purple-300); }
.swb-w .swb-lf-checks { list-style: none; margin: 0; padding: .875rem 1rem; display: grid; gap: .375rem; border-radius: 16px; background: #fff; border: 1px solid var(--swb-border); font-size: .875rem; color: var(--swb-ink-muted); }
.swb-w .swb-lf-checks li { display: flex; gap: .5rem; align-items: center; }
.swb-w .swb-lf-checks li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--swb-surface-muted); font-size: .75rem; }
.swb-w .swb-lf-checks li.swb-is-ok { color: var(--swb-ink); }
.swb-w .swb-lf-checks li.swb-is-ok span { background: var(--swb-success-soft, #E6F6EC); color: var(--swb-success-ink, #0A6B35); }

/* The bar at the bottom */
.swb-w .swb-lf__nav { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(.75rem, 3vw, 1.25rem) calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--swb-border); border-radius: 18px; box-shadow: 0 -10px 30px -22px rgba(7, 26, 30, .45); }
.swb-w .swb-lf__nav .swb-btn { min-height: 48px; padding-inline: 1.375rem; }
.swb-w .swb-lf__nav [data-swb-next] { min-width: 9rem; justify-content: center; }
.swb-w .swb-lf__count { color: var(--swb-ink-faint); font-size: .8125rem; font-weight: 600; }

@media (max-width: 1024px) {
  .swb-w .swb-lf__layout { grid-template-columns: minmax(0, 1fr); }
  .swb-w .swb-lf__preview { display: none; }
}
@media (max-width: 720px) {
  .swb-w .swb-lf__top { grid-template-columns: 1fr auto; }
  .swb-w .swb-lf__back span { display: none; }
  .swb-w .swb-lf__heading { grid-column: 1 / -1; grid-row: 2; }
  .swb-w .swb-lf__dot-label { display: none; }
  .swb-w .swb-lf__dot-n { width: 26px; height: 26px; font-size: .75rem; }
  .swb-w .swb-lf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swb-w .swb-lf-choice2, .swb-w .swb-lf__row2, .swb-w .swb-lf__row3 { grid-template-columns: minmax(0, 1fr); }
  .swb-w .swb-lf-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swb-w .swb-lf-map { height: 300px; }
  .swb-w .swb-lf__main { border-radius: 18px; padding: 1.125rem; }
  .swb-w .swb-lf__nav { border-radius: 16px 16px 0 0; margin-inline: calc(-1 * var(--swb-gutter, 1rem)); }
  .swb-w .swb-lf-summary__row { grid-template-columns: 1fr auto; }
  .swb-w .swb-lf-summary__row dt { grid-column: 1 / -1; }
  .swb-w .swb-lf-title { flex-direction: column; }
}

/* ===========================================================================
 * Host dashboard additions
 * ======================================================================== */
.swb-w .swb-acc-prop__note { margin-top: .75rem; padding: .5rem .75rem; border-radius: 10px; font-size: .8125rem; line-height: 1.7; background: var(--swb-purple-25); color: var(--swb-purple-900); }
.swb-w .swb-acc-prop__note--rejected { background: var(--swb-danger-soft, #FEECEC); color: var(--swb-danger-ink, #991B1B); }
.swb-w .swb-acc-prop__note--review { background: var(--swb-pending-soft, #F6EEE3); color: var(--swb-pending-ink, #7A5427); }
.swb-w .swb-acc-prop--rejected { box-shadow: 0 0 0 1px var(--swb-danger-soft, #FEECEC); }
.swb-w .swb-acc-prop__price { margin-top: .75rem; }
.swb-w .swb-acc-prop__price summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--swb-brand); }
.swb-w .swb-qp { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.swb-w .swb-qp .swb-input { width: 8rem; min-height: 38px; }
.swb-w .swb-qp-msg { font-size: .8125rem; }
.swb-w .swb-qp-msg.swb-is-ok { color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-qp-msg.swb-is-err { color: var(--swb-danger-ink, #991B1B); }
.swb-w .swb-acc-prop__del { color: var(--swb-danger-ink, #991B1B); }
.swb-w .swb-payout { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.swb-w .swb-payout--paid { background: var(--swb-success-soft, #E6F6EC); color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-payout--due { background: var(--swb-pending-soft, #F6EEE3); color: var(--swb-pending-ink, #7A5427); }
.swb-w .swb-payout--upcoming { background: var(--swb-purple-25); color: var(--swb-brand); }
.swb-w .swb-payout__detail { display: block; margin-top: .25rem; color: var(--swb-ink-faint); font-size: .6875rem; }
.swb-w .swb-host-profile { display: grid; gap: 1rem; }

/* ===========================================================================
 * Ratings
 * ======================================================================== */
.swb-w .swb-stars { color: #C9971E; letter-spacing: 1px; white-space: nowrap; }
.swb-w .swb-stars__off { color: var(--swb-border-strong); }
.swb-w .swb-stars--lg { font-size: 1.25rem; }
.swb-w .swb-rating-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--swb-ink); white-space: nowrap; }
.swb-w .swb-rating-chip > span:first-child { color: #C9971E; }
.swb-w .swb-rating-chip__n { color: var(--swb-ink-muted); }
.swb-w .swb-property-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.swb-w .swb-rate > summary { list-style: none; width: fit-content; }
.swb-w .swb-rate > summary::-webkit-details-marker { display: none; }
.swb-w .swb-rate[open] > summary { display: none; }
.swb-w .swb-rate__form { display: grid; gap: .875rem; padding: 1.25rem; border-radius: 18px; background: var(--swb-purple-25); border: 1px solid var(--swb-purple-50); }
.swb-w .swb-rate__q { margin: 0; font-weight: 700; color: var(--swb-ink); font-size: 1.0625rem; }
.swb-w .swb-rate__subs { display: grid; gap: .375rem; }
.swb-w .swb-rate__sub { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .875rem; color: var(--swb-ink-soft); }
.swb-w .swb-rate--done { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.swb-w .swb-star-input { display: inline-flex; gap: .125rem; }
.swb-w .swb-star-input label { position: relative; cursor: pointer; font-size: 1.375rem; line-height: 1; color: var(--swb-border-strong); padding: .125rem; transition: color .12s, transform .12s; }
.swb-w .swb-star-input--big label { font-size: 2.25rem; }
.swb-w .swb-star-input input { position: absolute; opacity: 0; pointer-events: none; }
.swb-w .swb-star-input label.swb-is-on { color: #E0A82E; }
.swb-w .swb-star-input:hover label { color: #E0A82E; }
.swb-w .swb-star-input label:hover ~ label { color: var(--swb-border-strong); }
.swb-w .swb-star-input label:active { transform: scale(.9); }
.swb-w .swb-star-input label:has(input:focus-visible) { outline: 2px solid var(--swb-brand); border-radius: 6px; }

.swb-w .swb-reviews__summary { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.swb-w .swb-reviews__avg { font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: 2.25rem; font-weight: 700; color: var(--swb-ink); line-height: 1; }
.swb-w .swb-reviews__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.swb-w .swb-review { padding: 1.125rem; border-radius: 18px; background: #fff; border: 1px solid var(--swb-border); }
.swb-w .swb-review__head { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; }
.swb-w .swb-review__head > div { display: grid; }
.swb-w .swb-review__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--swb-purple-100); color: var(--swb-brand); font-weight: 700; }
.swb-w .swb-review__text { margin: .75rem 0 0; color: var(--swb-ink-soft); line-height: 1.8; }
@media (max-width: 720px) { .swb-w .swb-reviews__list { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
 * Cancellation & refund policy
 * ======================================================================== */
.swb-w .swb-policy-box { padding: 1.25rem; border-radius: 18px; background: var(--swb-purple-25); border: 1px solid var(--swb-purple-50); }
.swb-w .swb-policy-box .swb-market-h2 { margin-top: 0; }
.swb-w .swb-policy-box__list { margin: 0 0 .75rem; padding-inline-start: 1.125rem; display: grid; gap: .375rem; color: var(--swb-ink-soft); line-height: 1.8; }
.swb-w .swb-market-policy a { font-weight: 600; }
.swb-w .swb-pay-policy { margin-top: 1rem; padding: 1rem; border-radius: 14px; background: var(--swb-purple-25); }
.swb-w .swb-pay-policy__title { margin: 0 0 .5rem; font-weight: 700; color: var(--swb-ink); }
.swb-w .swb-pay-policy ul { margin: 0 0 .75rem; padding-inline-start: 1.125rem; display: grid; gap: .25rem; font-size: .875rem; color: var(--swb-ink-soft); line-height: 1.7; }
.swb-w .swb-pay-policy__agree { font-size: .875rem; line-height: 1.7; }

.swb-w .swb-policy-page { padding-block: clamp(2.5rem, 6vw, 5rem); }
.swb-w .swb-policy-page__head { margin-bottom: 2rem; }
.swb-w .swb-policy-page__title { margin: .5rem 0; font-family: var(--swb-font-display, 'Alexandria', sans-serif); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); color: var(--swb-ink); }
.swb-w .swb-policy-glance { padding: 1.25rem 1.5rem; border-radius: 20px; background: var(--swb-purple-900, #0B2A30); color: #fff; margin-bottom: 2rem; }
.swb-w .swb-policy-glance h2 { margin: 0 0 .75rem; color: var(--swb-gold-400); font-size: 1rem; }
.swb-w .swb-policy-glance ul { margin: 0; padding-inline-start: 1.125rem; display: grid; gap: .5rem; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.swb-w .swb-policy__section { padding: 1.5rem 0; border-bottom: 1px solid var(--swb-border); }
.swb-w .swb-policy__section:last-child { border-bottom: 0; }
.swb-w .swb-policy__title { display: flex; align-items: center; gap: .75rem; margin: 0 0 .875rem; font-size: 1.25rem; color: var(--swb-ink); }
.swb-w .swb-policy__num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--swb-purple-100); color: var(--swb-brand); font-size: .9375rem; }
.swb-w .swb-policy__list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .625rem; color: var(--swb-ink-soft); line-height: 1.9; }
.swb-w .swb-policy__list strong { color: var(--swb-ink); }
.swb-w .swb-policy-contact { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: 20px; background: var(--swb-gold-100); display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.swb-w .swb-policy-contact p { margin: 0; font-weight: 600; color: var(--swb-ink); }

/* The site's phone tab bar sits at the very bottom: the form's bar rides above it. */
@media (max-width: 900px) {
  body.swb-has-mobile-nav .swb-w .swb-lf__nav { bottom: var(--swb-mobile-nav-height, 64px); }
}

/* Grid tracks never grow past the screen because of a wide input. */
.swb-w .swb-lf__step, .swb-w .swb-lf__group, .swb-w .swb-lf-price, .swb-w .swb-app-form, .swb-w .swb-app-step, .swb-w .swb-verify, .swb-w .swb-verify__body { grid-template-columns: minmax(0, 1fr); }
.swb-w .swb-lf__step > *, .swb-w .swb-lf__group > * { min-width: 0; }
.swb-w .swb-lf-price__box input, .swb-w .swb-lf-paste .swb-input, .swb-w .swb-lf-title .swb-input { width: 100%; min-width: 0; }
@media (max-width: 720px) {
  .swb-w .swb-lf__top { grid-template-columns: auto 1fr auto; }
  .swb-w .swb-lf__back { grid-column: 1; grid-row: 1; justify-self: start; }
  .swb-w .swb-lf__save { grid-column: 3; grid-row: 1; }
  .swb-w .swb-lf__heading { grid-column: 1 / -1; grid-row: 2; }
  .swb-w .swb-lf-price__box input { font-size: 1.875rem; }
}

/* Hooks (one rule each, so every class in the markup has a home). */
.swb-w .swb-app { position: relative; }
.swb-w .swb-app-view { display: grid; gap: 1rem; }
.swb-w .swb-acc-prop { position: relative; }
.swb-w .swb-acc-booking__policy a { font-weight: 600; }
.swb-w .swb-lf-count { font-weight: 700; color: var(--swb-ink-muted); }
.swb-w .swb-lf-count.swb-is-ok { color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-policy { color: var(--swb-ink-soft); }
.swb-w .swb-reviews { scroll-margin-top: 100px; }
.swb-w .swb-verify__error { margin: 0; }
.swb-w.swb-w--listing-form, .swb-w.swb-w--policy { background: var(--swb-page-bg, #F7F8F6); }

/* What the nightly price covers (listing page, booking panel, listing form). */
.swb-w .swb-price-terms { list-style: none; margin: .25rem 0 .75rem; padding: 0; display: grid; gap: .25rem; font-size: .8125rem; color: var(--swb-ink-muted); line-height: 1.6; }
.swb-w .swb-price-terms li::before { content: "• "; color: var(--swb-gold-500); }
.swb-w .swb-price-facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.swb-w .swb-price-fact { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; background: var(--swb-purple-25); color: var(--swb-ink-soft); font-size: .8125rem; line-height: 1.5; }
.swb-w .swb-price-fact--yes { background: var(--swb-success-soft, #E6F6EC); color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-price-fact--no { background: var(--swb-warning-soft, #FFF4E0); color: var(--swb-warning-ink, #7A4A0E); }
.swb-w .swb-lf-gate { display: grid; gap: .5rem; margin-top: .25rem; }
.swb-w .swb-lf-inline-money { display: flex; align-items: center; gap: .625rem; max-width: 18rem; }
.swb-w .swb-lf-inline-money .swb-input { flex: 1; min-width: 0; }
.swb-w .swb-lf-inline-money span { color: var(--swb-ink-muted); white-space: nowrap; font-size: .875rem; }

/* ===== 1.4.2 — "اعرض وحدتك": one panel, always ending at the listing form ===== */
.swb-w .swb-owner-start__form{ position: static; }
@media (max-width: 980px){ .swb-w .swb-owner-start__form{ order: -1; } }

.swb-w .swb-hs{ display: grid; gap: var(--swb-space-6); }
.swb-w .swb-hs__head{ display: grid; gap: var(--swb-space-2); }
.swb-w .swb-hs__title{ margin: 0; font-family: var(--swb-font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--swb-ink); }
.swb-w .swb-hs__sub{ margin: 0; color: var(--swb-ink-muted); font-size: var(--swb-text-sm); }

.swb-w .swb-hs__steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--swb-space-2); counter-reset: none; }
.swb-w .swb-hs__steps li{
  position: relative;
  display: grid; justify-items: center; text-align: center; gap: var(--swb-space-2);
  padding: var(--swb-space-3) var(--swb-space-2);
  border-radius: 14px;
  background: var(--swb-surface-sunken);
  color: var(--swb-ink-muted);
  min-width: 0;
}
.swb-w .swb-hs__dot{ display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--swb-surface, #fff); border: 1.5px solid var(--swb-border); color: var(--swb-ink-muted); }
.swb-w .swb-hs__step{ display: grid; gap: 2px; min-width: 0; }
.swb-w .swb-hs__step b{ font-size: var(--swb-text-sm); color: var(--swb-ink); }
.swb-w .swb-hs__step small{ font-size: var(--swb-text-2xs, 11px); line-height: 1.5; }
.swb-w .swb-hs__steps li.swb-is-current{ background: var(--swb-brand-soft); box-shadow: 0 0 0 1.5px var(--swb-brand) inset; }
.swb-w .swb-hs__steps li.swb-is-current .swb-hs__dot{ background: var(--swb-brand); border-color: var(--swb-brand); color: #fff; }
.swb-w .swb-hs__steps li.swb-is-current .swb-hs__step b{ color: var(--swb-brand); }
.swb-w .swb-hs__steps li.swb-is-done .swb-hs__dot{ background: var(--swb-verify-green, #12A150); border-color: var(--swb-verify-green, #12A150); color: #fff; }

.swb-w .swb-hs__go{ display: grid; gap: var(--swb-space-3); }
.swb-w .swb-hs__add{ display: inline-flex; align-items: center; justify-content: center; gap: var(--swb-space-2); }
.swb-w .swb-hs__hint{ margin: 0; text-align: center; font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }

.swb-w .swb-hs__tabs{ min-width: 0; }
.swb-w .swb-hs__tablist{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--swb-surface-sunken); margin-block-end: var(--swb-space-5); }
.swb-w .swb-hs__tab{
  appearance: none; border: 0; cursor: pointer;
  padding: var(--swb-space-3); border-radius: 10px;
  background: transparent; color: var(--swb-ink-muted);
  font: inherit; font-size: var(--swb-text-sm); font-weight: var(--swb-weight-semibold);
  transition: background var(--swb-transition), color var(--swb-transition), box-shadow var(--swb-transition);
}
.swb-w .swb-hs__tab:hover{ color: var(--swb-ink); }
.swb-w .swb-hs__tab.swb-is-active{ background: var(--swb-surface, #fff); color: var(--swb-ink); box-shadow: var(--swb-shadow-sm); }
.swb-w .swb-hs__tab:focus-visible{ outline: 2px solid var(--swb-brand); outline-offset: 2px; }
/* Inside the tabs, the "have an account? / no account?" links are the tabs themselves. */
.swb-w .swb-hs__panel [data-swb-view="login"] > .swb-app-foot,
.swb-w .swb-hs__panel [data-swb-view="register"] > .swb-app-foot{ display: none; }
.swb-w .swb-hs__panel .swb-app-title{ font-size: var(--swb-text-lg); }
/* The panel already shows the steps on top — one row of steps is enough. */
.swb-w .swb-hs__panel .swb-app-steps{ display: none; }

.swb-w .swb-hs__upgrade{ display: grid; gap: var(--swb-space-4); }
.swb-w .swb-hs__who{ display: flex; gap: var(--swb-space-3); align-items: flex-start; padding: var(--swb-space-4); border-radius: 14px; background: var(--swb-surface-sunken); }
.swb-w .swb-hs__who p{ margin: 0; font-size: var(--swb-text-sm); line-height: 1.7; color: var(--swb-ink-soft); }
.swb-w .swb-hs__who b{ color: var(--swb-ink); }
.swb-w .swb-hs__avatar{ flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--swb-brand-soft); color: var(--swb-brand); }
.swb-w .swb-hs__q{ margin: 0; font-weight: var(--swb-weight-bold); color: var(--swb-ink); }

/* The listing-form page, when it has to ask first. */
.swb-w .swb-hs-wrap{ max-inline-size: 560px; margin: var(--swb-space-10, 40px) auto; padding: var(--swb-space-6); border: 1px solid var(--swb-border); border-radius: var(--swb-radius-lg); background: var(--swb-surface, #fff); }

@media (max-width: 420px){
  .swb-w .swb-hs__steps li{ padding: var(--swb-space-2) 4px; }
  .swb-w .swb-hs__dot{ inline-size: 32px; block-size: 32px; }
  .swb-w .swb-hs__step small{ display: none; }
  .swb-w .swb-hs-wrap{ padding: var(--swb-space-4); margin-block: var(--swb-space-6); }
}

/* ===== 1.4.2 — "وحداتي": compact cards (small photo beside the details) ===== */
.swb-w .swb-acc-props{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--swb-space-4); align-items: start; }
.swb-w .swb-acc-props .swb-acc-prop{ display: grid; grid-template-columns: 120px minmax(0, 1fr); overflow: hidden; }
.swb-w .swb-acc-props .swb-acc-prop__media{ aspect-ratio: auto; block-size: 100%; min-block-size: 120px; max-block-size: 220px; }
.swb-w .swb-acc-props .swb-acc-prop__body{ padding: var(--swb-space-3) var(--swb-space-4); min-width: 0; }
.swb-w .swb-acc-props .swb-acc-prop__title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }
.swb-w .swb-acc-props .swb-acc-prop .swb-mt-4{ margin-block-start: var(--swb-space-3); }
.swb-w .swb-acc-props .swb-acc-prop__price{ margin-top: .5rem; }
@media (max-width: 480px){
  .swb-w .swb-acc-props .swb-acc-prop{ grid-template-columns: 92px minmax(0, 1fr); }
  .swb-w .swb-acc-props .swb-acc-prop__media{ min-block-size: 100px; }
}

/* ===== 1.4.0 — the village / compound picker in the add-a-unit form ===== */
.swb-w .swb-lf-village { display: grid; gap: var(--swb-space-3); padding: var(--swb-space-4); border: 1px solid var(--swb-border); border-radius: 16px; background: var(--swb-surface-sunken); }
.swb-w .swb-lf-village__q { margin: 0; font-weight: var(--swb-weight-bold); color: var(--swb-ink); }
.swb-w .swb-lf-village__pick { display: grid; gap: var(--swb-space-2); }
.swb-w .swb-lf-village__search { position: relative; }
.swb-w .swb-lf-village__search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--swb-ink-muted); pointer-events: none; }
.swb-w .swb-lf-village__search .swb-input { padding-inline-start: 40px; background: #fff; }
.swb-w .swb-lf-village__list { max-block-size: 300px; overflow-y: auto; padding: 4px 2px; overscroll-behavior: contain; }
.swb-w .swb-lf-village__head { margin: var(--swb-space-3) 0 var(--swb-space-2); font-size: var(--swb-text-xs); font-weight: var(--swb-weight-bold); color: var(--swb-ink-muted); }
.swb-w .swb-lf-village__head:first-child { margin-top: 0; }
.swb-w .swb-lf-village__list .swb-chip { cursor: pointer; background: #fff; font: inherit; }
.swb-w .swb-lf-village__list .swb-chip.swb-is-active { background: var(--swb-brand); border-color: var(--swb-brand); color: #fff; }
.swb-w .swb-lf-village__empty { margin: 0; font-size: var(--swb-text-sm); color: var(--swb-ink-muted); }
.swb-w .swb-lf-village__alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--swb-space-2); }
.swb-w .swb-lf-alt { appearance: none; display: flex; align-items: flex-start; gap: var(--swb-space-2); padding: var(--swb-space-3); border: 1.5px dashed var(--swb-border-strong); border-radius: 12px; background: #fff; color: var(--swb-ink); text-align: start; cursor: pointer; font: inherit; }
.swb-w .swb-lf-alt svg { flex: none; margin-top: 2px; color: var(--swb-brand); }
.swb-w .swb-lf-alt span { display: grid; gap: 2px; }
.swb-w .swb-lf-alt b { font-size: var(--swb-text-sm); }
.swb-w .swb-lf-alt small { font-size: var(--swb-text-xs); color: var(--swb-ink-muted); }
.swb-w .swb-lf-alt:hover { border-color: var(--swb-brand); }
.swb-w .swb-lf-alt.swb-is-on { border-style: solid; border-color: var(--swb-brand); background: var(--swb-brand-soft); }
.swb-w .swb-lf-village__chosen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--swb-space-2); padding: var(--swb-space-3) var(--swb-space-4); border-radius: 12px; background: #fff; border: 1.5px solid var(--swb-brand); }
.swb-w .swb-lf-village__chosen .swb-app-link { margin-inline-start: auto; }
.swb-w .swb-lf-village__pin { display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--swb-brand); color: #fff; font-size: 13px; font-weight: 700; }
.swb-w .swb-lf-basics { margin-block-end: var(--swb-space-4); padding-block-end: var(--swb-space-4); border-block-end: 1px solid var(--swb-border); }
@media (max-width: 560px) { .swb-w .swb-lf-village__alt { grid-template-columns: minmax(0, 1fr); } .swb-w .swb-lf-village { padding: var(--swb-space-3); } }
.swb-w .swb-lf-fees { margin-top: .5rem; font-size: var(--swb-text-sm); }
.swb-w .swb-lf-fees summary { cursor: pointer; font-weight: 600; color: var(--swb-brand); }
.swb-w .swb-lf-fees ul { margin: .5rem 0 0; padding-inline-start: 1.25rem; color: var(--swb-ink-soft); }

/* ===== 1.5.0 — detailed guest ratings ===== */
.swb-w .swb-rate__part { display: grid; gap: .5rem; padding-block-end: .875rem; border-block-end: 1px solid var(--swb-purple-50, rgba(20,36,40,.08)); }
.swb-w .swb-rate__part:last-of-type { border: 0; }
.swb-w .swb-rate__sub { padding: .375rem .5rem; border-radius: 10px; background: #fff; }
.swb-w .swb-rate__issues .swb-chip { background: #fff; cursor: pointer; }
.swb-w .swb-rate__issues .swb-chip--ok { border-style: dashed; }
.swb-w .swb-rate__rec { display: flex; gap: .5rem; flex-wrap: wrap; }
.swb-w .swb-rate__rec .swb-chip { cursor: pointer; background: #fff; }
.swb-w .swb-reviews__rec { padding: 4px 12px; border-radius: 999px; background: var(--swb-verify-green-soft, #E6F6EC); color: var(--swb-verify-green-ink, #0A6B35); font-size: var(--swb-text-sm); font-weight: 700; }
.swb-w .swb-reviews__bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; margin: 0 0 1.5rem; }
.swb-w .swb-reviews__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.swb-w .swb-reviews__bar dt { font-size: var(--swb-text-sm); color: var(--swb-ink-soft); }
.swb-w .swb-reviews__bar dd { margin: 0; display: flex; align-items: center; gap: .5rem; }
.swb-w .swb-reviews__track { position: relative; display: block; inline-size: 110px; block-size: 6px; border-radius: 99px; background: var(--swb-border); overflow: hidden; }
.swb-w .swb-reviews__track span { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--swb-brand); border-radius: inherit; }
.swb-w .swb-reviews__bar b { font-size: var(--swb-text-sm); min-inline-size: 2ch; }
.swb-w .swb-review__text--improve { color: var(--swb-ink-muted); font-size: var(--swb-text-sm); }
@media (max-width: 720px) { .swb-w .swb-reviews__bars { grid-template-columns: minmax(0, 1fr); } .swb-w .swb-reviews__track { inline-size: 90px; } }

/* ===== 1.5.1 — +/− steppers: the sign is an icon, centred by the box, never by the font ===== */
.swb-w .swb-counter__btn,
.swb-w .swb-lf-counter__ctl button {
  display: inline-grid !important; place-items: center; padding: 0 !important;
  line-height: 0 !important; font-size: 0 !important; flex: none;
}
.swb-w .swb-counter__btn svg,
.swb-w .swb-lf-counter__ctl button svg { display: block; width: 18px; height: 18px; stroke-width: 2.25; margin: 0; }
.swb-w .swb-counter__btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 480px) {
  .swb-w .swb-lf-counter__ctl { gap: .5rem; }
  .swb-w .swb-lf-counter__ctl button { width: 38px; height: 38px; }
  .swb-w .swb-lf-counter__ctl output { font-size: 1.2rem; }
}

/* ===== 1.6.0 — the map: pin in the middle, search, full screen on phones ===== */
.swb-w .swb-lf-mapwrap { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--swb-border); background: var(--swb-purple-25); }
.swb-w .swb-lf-mapwrap .swb-lf-map { border: 0; border-radius: 0; height: 420px; direction: ltr; }
.swb-w .swb-lf-map .leaflet-container, .swb-w .swb-lf-map.leaflet-container { font: inherit; background: #e9f0ef; }
.swb-w .swb-lf-map img, .swb-w .swb-lf-map .leaflet-tile, .swb-w .swb-lf-map .leaflet-marker-icon { max-width: none !important; max-height: none !important; width: auto; height: auto; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0; }
.swb-w .swb-lf-map .leaflet-tile { width: 256px; height: 256px; }
.swb-w .swb-lf-map .leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 36px !important; font-size: 20px !important; color: var(--swb-ink) !important; text-decoration: none !important; }
.swb-w .swb-lf-map .leaflet-control-attribution { font-size: 10px; }
.swb-w .swb-lf-map__center { position: absolute; left: 50%; top: 50%; z-index: 600; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); transition: transform .15s; }
.swb-w .swb-lf-mapwrap:not(.swb-is-pinned) .swb-lf-map__center { animation: swb-pin-bob 1.6s ease-in-out infinite; }
@keyframes swb-pin-bob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -112%); } }
.swb-w .swb-lf-map__center::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 10px; height: 4px; margin-left: -5px; border-radius: 50%; background: rgba(0,0,0,.3); }
.swb-w .swb-lf-mapwrap .swb-lf-map__hint { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 600; white-space: nowrap; }
.swb-w .swb-lf-map__confirm { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 600; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); white-space: nowrap; max-width: calc(100% - 24px); }
.swb-w .swb-lf-map__confirm.swb-is-done { background: #fff !important; color: var(--swb-success-ink, #0A6B35) !important; border: 1px solid rgba(10,107,53,.25); }
.swb-w .swb-lf-map__full { position: absolute; top: 64px; right: 10px; z-index: 600; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: #fff; color: var(--swb-ink); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.swb-w .swb-lf-mapsearch { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 700; }
.swb-w .swb-lf-mapsearch > svg { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--swb-ink-muted); pointer-events: none; }
.swb-w .swb-lf-mapsearch .swb-input { width: 100%; padding-right: 40px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.14); border-radius: 12px; }
.swb-w .swb-lf-mapsearch__list { list-style: none; margin: 6px 0 0; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); max-height: 240px; overflow: auto; }
.swb-w .swb-lf-mapsearch__list button { display: block; width: 100%; text-align: right; padding: 9px 10px; border: 0; background: none; border-radius: 9px; font: inherit; font-size: .875rem; color: var(--swb-ink); cursor: pointer; line-height: 1.5; }
.swb-w .swb-lf-mapsearch__list button:hover { background: var(--swb-purple-25); }
.swb-w .swb-lf-mapsearch__list .swb-is-empty { padding: 9px 10px; color: var(--swb-ink-muted); font-size: .875rem; }
.swb-w .swb-lf-mapwrap.swb-is-full { position: fixed; inset: 0; z-index: 100000; border-radius: 0; border: 0; }
.swb-w .swb-lf-mapwrap.swb-is-full .swb-lf-map { height: 100vh; height: 100dvh; }
html.swb-map-open, html.swb-map-open body { overflow: hidden; }
@media (max-width: 600px) { .swb-w .swb-lf-mapwrap .swb-lf-map { height: 62vh; min-height: 360px; } }

/* ===== 1.6.0 — sea distance, weekend price, deposit, video ===== */
.swb-w .swb-lf-sea__row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.swb-w .swb-lf-sea__row .swb-lf-inline-money { max-width: 11rem; }
.swb-w .swb-lf-weekend { margin-top: .5rem; display: grid; gap: .5rem; }
.swb-w .swb-lf-price__box--weekend { border-color: var(--swb-gold-500, #B8956B) !important; }
.swb-w .swb-lf-video { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed var(--swb-border); display: grid; gap: .75rem; }
.swb-w .swb-lf-video .swb-lf__h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.swb-w .swb-lf-video__preview { display: grid; gap: .5rem; justify-items: start; }
.swb-w .swb-lf-video__preview video, .swb-w .swb-lf-video__preview iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #000; }
.swb-w .swb-lf-video__link { word-break: break-all; font-weight: 600; }
.swb-w .swb-lf-video__bar { position: relative; height: 34px; border-radius: 10px; background: var(--swb-purple-25); overflow: hidden; }
.swb-w .swb-lf-video__bar span { position: absolute; inset: 0 0 0 auto; width: 0; background: var(--swb-brand-soft, #D6E8E7); transition: width .2s; }
.swb-w .swb-lf-video__bar em { position: relative; display: block; line-height: 34px; padding: 0 12px; font-style: normal; font-weight: 600; font-size: .8125rem; }
.swb-w .swb-lf-drop--video { padding-block: 1.25rem; }

/* ===== 70-coastal.css ===== */
/* ===========================================================================
 * 70 — Modern Coastal Premium (1.1.0)
 *
 * The palette itself lives in the tokens (tools/laravel-source.css): petrol
 * #123E46 for intent, #F7F8F6 for the page, white for cards, #D6E8E7 for
 * quiet surfaces and sand #D5B58F for the odd warm accent. This layer only
 * refines components: calmer type scale, lighter scrims, softer cards, a
 * wide search bar in the hero and a clean footer. Same specificity as the
 * design (.swb-w + class), so every Elementor style control still wins.
 * ======================================================================== */

:root {
  --swb-page-bg: #F7F8F6;
  --swb-brand-disabled: #B6C1C3;
  --swb-sand: #D5B58F;
  --swb-sand-ink: #8F6E47;          /* sand dark enough to read on white */
  --swb-shadow-card: 0 1px 2px rgba(20, 36, 40, .04), 0 8px 24px -12px rgba(20, 36, 40, .10);
  --swb-shadow-card-hover: 0 2px 4px rgba(20, 36, 40, .05), 0 18px 40px -18px rgba(18, 62, 70, .26);
  --swb-shadow-focus: 0 0 0 3px rgba(40, 95, 105, .30);
  --swb-radius-card: 16px;
  --swb-radius-photo: 20px;
  --swb-font-heading: 'Alexandria', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* A calmer type scale: big where it matters, never shouting. */
  --swb-text-5xl: 3.25rem;
  --swb-text-4xl: 2.625rem;
  --swb-text-3xl: 2.125rem;
  --swb-text-2xl: 1.75rem;

  /* Scrims: light, and only as dark as the type needs. */
  --swb-scrim-hero: linear-gradient(180deg, rgba(7, 26, 30, .50) 0%, rgba(7, 26, 30, .08) 34%, rgba(7, 26, 30, .18) 62%, rgba(7, 26, 30, .62) 100%);
  --swb-scrim-banner: linear-gradient(180deg, rgba(7, 26, 30, .32) 0%, rgba(7, 26, 30, .70) 100%);
  --swb-scrim-card: linear-gradient(180deg, rgba(7, 26, 30, 0) 45%, rgba(7, 26, 30, .72) 100%);
}
@media (max-width: 640px) {
  :root {
    --swb-text-5xl: 2.25rem;
    --swb-text-4xl: 2rem;
    --swb-text-3xl: 1.625rem;
    --swb-text-2xl: 1.5rem;
  }
}

/* --- Page ground ---------------------------------------------------------- */
body:has(.swb-w) { background-color: var(--swb-page-bg); }
:where(.swb-w) { font-family: var(--swb-font-body); color: var(--swb-ink); }
.swb-w :where(input, select, textarea, button) { font-family: var(--swb-font-ar); }
.swb-w :where(h1, h2, h3, h4) { font-family: var(--swb-font-heading); }
.swb-w :where(h1, h2) { font-weight: 700; }
.swb-w :where(h3, h4) { font-weight: 600; }
.swb-w :where(p) { color: inherit; }
.swb-w :where(.swb-tabular, [class*="price"], [class*="amount"]) { font-variant-numeric: tabular-nums; }

/* One focus ring everywhere, keyboard only. */
.swb-w :focus-visible {
  outline: 2px solid var(--swb-purple-600);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Section heads -------------------------------------------------------- */
.swb-w .swb-eyebrow {
  color: var(--swb-sand-ink);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.swb-w .swb-eyebrow::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--swb-sand);
}
.swb-w .swb-section-head h2,
.swb-w .swb-section-title {
  font-size: clamp(1.625rem, 2.4vw + .6rem, 2.25rem);
  line-height: 1.35;
  color: var(--swb-ink);
}
.swb-w .swb-section-head p,
.swb-w .swb-section-head .swb-muted { color: var(--swb-ink-muted); font-size: 1rem; line-height: 1.8; max-width: 60ch; }
.swb-w .swb-section--deep .swb-eyebrow { color: var(--swb-gold-300); }
.swb-w .swb-section--deep .swb-eyebrow::before { background: var(--swb-gold-300); }
.swb-w .swb-section--deep .swb-section-head h2 { color: #FFFFFF; }
.swb-w .swb-section--deep .swb-section-head p { color: rgba(255, 255, 255, .78); }
.swb-w .swb-rule-gold { border-color: var(--swb-sand); }

/* --- Buttons -------------------------------------------------------------- */
.swb-w .swb-btn {
  border-radius: 12px;
  font-weight: 600;
  min-height: 44px;
  padding-inline: 1.25rem;
  transition: background-color 220ms var(--swb-ease-out), border-color 220ms var(--swb-ease-out),
              color 220ms var(--swb-ease-out), box-shadow 220ms var(--swb-ease-out), transform 160ms var(--swb-ease-out);
}
.swb-w .swb-btn--lg { min-height: 52px; padding-inline: 1.75rem; font-size: 1rem; border-radius: 14px; }
.swb-w .swb-btn--sm { min-height: 36px; border-radius: 10px; }
.swb-w .swb-btn--primary { background: var(--swb-brand); color: #FFFFFF; box-shadow: 0 1px 2px rgba(7, 26, 30, .12); }
.swb-w .swb-btn--primary:hover { background: var(--swb-brand-hover); color: #FFFFFF; box-shadow: 0 10px 24px -12px rgba(18, 62, 70, .55); }
.swb-w .swb-btn--primary:active { background: var(--swb-brand-active); transform: translateY(1px); box-shadow: none; }
.swb-w .swb-btn--secondary { background: #FFFFFF; border-color: var(--swb-border-strong); color: var(--swb-ink); }
.swb-w .swb-btn--secondary:hover { background: var(--swb-purple-25); border-color: var(--swb-purple-300); color: var(--swb-brand); }
.swb-w .swb-btn--soft { background: var(--swb-purple-100); color: var(--swb-brand); }
.swb-w .swb-btn--soft:hover { background: var(--swb-purple-200); color: var(--swb-brand-hover); }
.swb-w .swb-btn:focus-visible { outline: none; box-shadow: var(--swb-shadow-focus); }
.swb-w .swb-btn:disabled,
.swb-w .swb-btn[aria-disabled="true"] {
  background: var(--swb-brand-disabled);
  border-color: transparent;
  color: #FFFFFF;
  opacity: 1;
  box-shadow: none;
}
.swb-w .swb-btn--secondary:disabled { background: var(--swb-surface-muted); color: var(--swb-ink-disabled); }

/* --- Form fields ---------------------------------------------------------- */
.swb-w .swb-input,
.swb-w .swb-select,
.swb-w .swb-textarea {
  border-color: var(--swb-border-strong);
  border-radius: 12px;
  min-height: 48px;
  padding-inline: 1rem;
  font-size: 1rem;
  background-color: #FFFFFF;
  transition: border-color 200ms var(--swb-ease-out), box-shadow 200ms var(--swb-ease-out), background-color 200ms;
}
.swb-w .swb-textarea { min-height: 7rem; padding-block: .75rem; }
.swb-w .swb-input:hover,
.swb-w .swb-select:hover,
.swb-w .swb-textarea:hover { border-color: var(--swb-purple-300); }
.swb-w .swb-input:focus,
.swb-w .swb-select:focus,
.swb-w .swb-textarea:focus { border-color: var(--swb-purple-600); box-shadow: var(--swb-shadow-focus); outline: none; }
.swb-w .swb-label { font-weight: 600; color: var(--swb-ink); font-size: .9375rem; }
.swb-w .swb-checkbox input,
.swb-w .swb-radio input,
.swb-w input[type="checkbox"],
.swb-w input[type="radio"] { accent-color: var(--swb-brand); }

/* --- Cards ---------------------------------------------------------------- */
.swb-w .swb-card {
  border-color: var(--swb-border);
  border-radius: var(--swb-radius-card);
  box-shadow: var(--swb-shadow-card);
}
.swb-w .swb-card--hoverable:hover {
  border-color: var(--swb-purple-200);
  box-shadow: var(--swb-shadow-card-hover);
  transform: translateY(-3px);
}
.swb-w .swb-card--flat { box-shadow: none; }

/* ===========================================================================
 * Header
 * ======================================================================== */
.swb-w .swb-utility-bar { font-size: .8125rem; }
.swb-w .swb-utility-bar__inner { min-height: 36px; padding-block: .375rem; }
body:not(.swb-has-hero-photo) .swb-w .swb-utility-bar,
.swb-w .swb-site-header.swb-is-stuck .swb-utility-bar {
  background: var(--swb-purple-900);
  border-block-end-color: transparent;
}
.swb-w .swb-site-header__inner { padding-block: .875rem; }
body:not(.swb-has-hero-photo) .swb-w .swb-site-header,
.swb-w .swb-site-header.swb-is-stuck {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-block-end-color: var(--swb-border);
  box-shadow: 0 6px 24px -18px rgba(20, 36, 40, .35);
}
.swb-w .swb-nav--main .swb-nav__link {
  font-size: 1rem;
  font-weight: 500;
  padding: .625rem .875rem;
  border-radius: 10px;
  transition: background-color 200ms var(--swb-ease-out), color 200ms var(--swb-ease-out);
}
body:not(.swb-has-hero-photo) .swb-w .swb-nav--main .swb-nav__link:hover,
.swb-w .swb-site-header.swb-is-stuck .swb-nav--main .swb-nav__link:hover { background: var(--swb-purple-50); color: var(--swb-brand); }
.swb-w .swb-nav__link.swb-is-active { position: relative; }
.swb-w .swb-nav__link.swb-is-active::after {
  content: "";
  position: absolute;
  inset-inline: .875rem;
  inset-block-end: .25rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--swb-sand);
}
.swb-w .swb-site-header .swb-btn--sm { font-size: .9375rem; min-height: 42px; padding-inline: 1.125rem; border-radius: 12px; }
.swb-w .swb-logo { font-family: var(--swb-font-heading); }
.swb-w .swb-logo__sub { color: var(--swb-sand-ink); }
body.swb-has-hero-photo .swb-w .swb-site-header:not(.swb-is-stuck) .swb-logo__sub { color: var(--swb-gold-300); }

/* Drawer + bottom bar */
.swb-w .swb-drawer { background: #FFFFFF; }
.swb-w .swb-mobile-nav {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--swb-border);
}

/* Dropdowns open softly. */
.swb-w .swb-dropdown__menu,
.swb-w .swb-menu-list {
  border-radius: 14px;
  border-color: var(--swb-border);
  box-shadow: 0 18px 40px -20px rgba(20, 36, 40, .35);
}

/* ===========================================================================
 * Hero — "bar" layout: the promise on top, one wide search bar under it
 * ======================================================================== */
.swb-w .swb-hero--photo { background: var(--swb-purple-950); }
.swb-w .swb-hero__photo { animation-duration: 40s; }
@keyframes swb-hero-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(0, -1%, 0); }
}
.swb-w .swb-hero__scrim { background: var(--swb-scrim-hero); }

.swb-w .swb-hero--bar { min-height: min(90vh, 820px); align-items: flex-end; }
.swb-w .swb-hero--bar .swb-hero__scrim {
  background:
    linear-gradient(270deg, rgba(7, 26, 30, .46) 0%, rgba(7, 26, 30, 0) 58%),
    var(--swb-scrim-hero);
}
[dir="ltr"] .swb-w .swb-hero--bar .swb-hero__scrim,
.swb-w[dir="ltr"] .swb-hero--bar .swb-hero__scrim {
  background: linear-gradient(90deg, rgba(7, 26, 30, .46) 0%, rgba(7, 26, 30, 0) 58%), var(--swb-scrim-hero);
}
.swb-w .swb-hero--bar .swb-hero__inner { padding-block-end: clamp(1rem, 3vw, 2.5rem); }
.swb-w .swb-hero--bar .swb-hero__layout {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2rem);
  align-items: end;
}
.swb-w .swb-hero--bar .swb-hero__promise { max-width: 760px; }
.swb-w .swb-hero--bar .swb-hero__promise .swb-hero__title {
  font-size: clamp(2.125rem, 4.2vw + .5rem, 3.5rem);
  line-height: 1.3;
  max-width: 17ch;
  font-weight: 700;
  text-shadow: 0 2px 24px rgba(5, 20, 23, .35);
}
.swb-w .swb-hero--bar .swb-rule-gold { margin-block: 1.25rem 0; inline-size: 56px; border-block-start-width: 2px; }
.swb-w .swb-hero--bar .swb-hero__explore { margin-block-start: 1.25rem; font-size: 1rem; font-weight: 500; }

.swb-w .swb-hero--bar .swb-hero__panel {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 0;
}
.swb-w .swb-hero--bar .swb-hero__tiles { display: none; }
.swb-w .swb-hero--bar .swb-hero__panel { max-width: none; width: 100%; }
.swb-w .swb-hero--bar .swb-hero__search-card {
  background: none;
  padding: 0;
  border-radius: 0;
  display: grid;
  gap: .875rem;
}
.swb-w .swb-hero--bar .swb-hero__panel-lede {
  order: -1;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, .4vw + .9rem, 1.1875rem);
  line-height: 1.8;
  max-width: 58ch;
  margin: 0 0 .5rem;
  text-shadow: 0 1px 14px rgba(5, 20, 23, .4);
}

/* The bar */
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) auto;
  gap: 0;
  align-items: stretch;
  background: #FFFFFF;
  border-radius: 20px;
  padding: .5rem;
  box-shadow: 0 30px 60px -30px rgba(5, 20, 23, .55), 0 2px 6px rgba(5, 20, 23, .08);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field {
  background: transparent;
  border-radius: 14px;
  padding: .625rem 1.125rem;
  gap: .25rem;
  justify-content: center;
  transition: background-color 200ms var(--swb-ease-out);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:nth-child(1) { grid-column: auto; }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field {
  border-inline-start: 1px solid var(--swb-border);
  border-radius: 0;
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:hover,
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:focus-within {
  background: var(--swb-page-bg);
  border-radius: 14px;
}
/* (one class stronger than the glass-panel rules of the classic layout) */
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field { border: 0; }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__label {
  font-size: .8125rem; font-weight: 600; color: var(--swb-ink); letter-spacing: 0;
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__input {
  font-size: .9375rem;
  font-weight: 400;
  color: var(--swb-ink);
  min-height: 28px;
  font-family: var(--swb-font-ar);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__input::placeholder { color: var(--swb-ink-faint); }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .55; }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit { background: var(--swb-brand); color: #FFFFFF; }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit:hover { background: var(--swb-purple-900); color: #FFFFFF; }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit {
  grid-column: auto;
  width: auto;
  min-width: 132px;
  margin: 0;
  margin-inline-start: .375rem;
  border-radius: 14px;
  min-height: 60px;
  align-self: stretch;
  font-size: 1rem;
}
.swb-w .swb-hero--bar .swb-hero__panel-trust,
.swb-w .swb-hero--bar .swb-hero__panel-second {
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
  margin: 0;
}
.swb-w .swb-hero--bar .swb-hero__panel-trust { display: inline-flex; align-items: center; gap: .5rem; }
.swb-w .swb-hero--bar .swb-hero__panel-trust::before {
  content: "";
  inline-size: 18px; block-size: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-3 7.6-7 9-4-1.4-7-4.8-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.2-3 7.6-7 9-4-1.4-7-4.8-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.swb-w .swb-hero--bar .swb-hero__search-card > .swb-hero__panel-trust,
.swb-w .swb-hero--bar .swb-hero__search-card > .swb-hero__panel-second { justify-self: start; }
.swb-w .swb-hero--bar .swb-hero__panel-second { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .45); }
.swb-w .swb-hero--bar .swb-hero__panel-second:hover { color: #FFFFFF; text-decoration-color: var(--swb-sand); }
.swb-w .swb-hero--bar .swb-hero__scroll-cue { display: none; }

@media (min-width: 901px) {
  /* trust line and second link share one row under the bar */
  .swb-w .swb-hero--bar .swb-hero__search-card { grid-template-columns: auto 1fr; column-gap: 1.75rem; }
  .swb-w .swb-hero--bar .swb-hero__panel-lede,
  .swb-w .swb-hero--bar .swb-searchbar { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .swb-w .swb-hero--bar { min-height: 0; padding-block-end: 2rem; }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem;
    padding: .75rem;
    border-radius: 18px;
  }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field,
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field {
    border: 1px solid var(--swb-border);
    border-radius: 12px;
    background: var(--swb-page-bg);
    padding: .625rem .875rem;
  }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:nth-child(1) { grid-column: 1 / -1; }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:nth-child(4) { grid-column: 1 / -1; }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit {
    grid-column: 1 / -1;
    margin: .25rem 0 0;
    min-height: 52px;
    width: 100%;
  }
}

/* The classic side panel keeps its glass, retinted. */
.swb-w .swb-hero--panel .swb-hero__panel { background: rgba(7, 26, 30, .30); }

/* ===========================================================================
 * Home sections
 * ======================================================================== */

/* Stay types: photo cards, gentle zoom. */
.swb-w .swb-type-card { border-radius: var(--swb-radius-photo); box-shadow: var(--swb-shadow-card); }
.swb-w .swb-type-card__photo { transition: transform 900ms var(--swb-ease-out); }
.swb-w .swb-type-card:hover .swb-type-card__photo { transform: scale(1.045); }
.swb-w .swb-type-card__scrim { background: var(--swb-scrim-card); }
.swb-w .swb-type-card__body h3 { font-size: clamp(1.25rem, 1vw + .9rem, 1.625rem); font-weight: 700; }
.swb-w .swb-type-card__count {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Property cards: same image ratio everywhere, quiet chrome. */
.swb-w .swb-property-card {
  border-radius: var(--swb-radius-card);
  border-color: var(--swb-border);
  background: #FFFFFF;
  box-shadow: var(--swb-shadow-card);
}
.swb-w .swb-property-card:hover { box-shadow: var(--swb-shadow-card-hover); border-color: var(--swb-purple-200); transform: translateY(-3px); }
.swb-w .swb-property-card__media { aspect-ratio: 4 / 3; border-radius: 0; background: var(--swb-purple-50); }
.swb-w .swb-property-card__media img { transition: transform 900ms var(--swb-ease-out); }
.swb-w .swb-property-card:hover .swb-property-card__media img { transform: scale(1.04); }
.swb-w .swb-property-card__body { padding: 1rem 1.125rem 1.125rem; gap: .375rem; }
.swb-w .swb-property-card__title { font-family: var(--swb-font-heading); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--swb-ink); }
.swb-w .swb-property-card__location { color: var(--swb-ink-muted); font-size: .875rem; }
.swb-w .swb-property-card__meta { color: var(--swb-ink-muted); font-size: .875rem; gap: .5rem; }
.swb-w .swb-property-card__footer { border-block-start-color: var(--swb-border); padding-block-start: .875rem; margin-block-start: .5rem; }
.swb-w .swb-property-card__price { color: var(--swb-brand); font-family: var(--swb-font-heading); font-size: 1.1875rem; font-weight: 700; }
.swb-w .swb-property-card__price small { color: var(--swb-ink-muted); font-family: var(--swb-font-ar); font-weight: 400; }
.swb-w .swb-property-card__type {
  background: rgba(255, 255, 255, .94);
  color: var(--swb-ink);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(7, 26, 30, .12);
}

/* Destinations mosaic */
.swb-w .swb-dest-tile { border-radius: var(--swb-radius-photo); }
.swb-w .swb-dest-tile__photo { transition: transform 900ms var(--swb-ease-out); }
.swb-w .swb-dest-tile:hover .swb-dest-tile__photo { transform: scale(1.045); }
/* A destination with no photograph of its own shows a calm placeholder, never another place. */
.swb-w img[src*="destination-placeholder"] { object-fit: cover; background: var(--swb-purple-800); }

/* Collections */
.swb-w .swb-collection-tile { border-radius: var(--swb-radius-photo); }
.swb-w .swb-collection-tile__photo { transition: transform 900ms var(--swb-ease-out); }
.swb-w .swb-collection-tile:hover .swb-collection-tile__photo { transform: scale(1.045); }

/* Verification marks: outline icons, soft tones. */
.swb-w .swb-trust-item { border-radius: 14px; background: #FFFFFF; border-color: var(--swb-border); }
.swb-w .swb-verify-mark,
.swb-w .swb-verify-chip { border-radius: 14px; }

/* The booking journey reads on the light ground (tone = light). */
.swb-w .swb-section--journey-light { background: var(--swb-purple-25); border-block: 1px solid var(--swb-border); }
.swb-w .swb-section--journey-light .swb-section-head h2 { color: var(--swb-ink); }
.swb-w .swb-section--journey-light .swb-section-head p,
.swb-w .swb-section--journey-light .swb-muted { color: var(--swb-ink-muted); }
.swb-w .swb-section--journey-light .swb-eyebrow { color: var(--swb-sand-ink); }
.swb-w .swb-section--journey-light .swb-journey-state--open {
  background: #FFFFFF;
  border: 1px dashed var(--swb-purple-300);
  color: var(--swb-ink-muted);
}
.swb-w .swb-section--journey-light .swb-journey-state--done { background: var(--swb-brand); border-color: var(--swb-brand); color: #FFFFFF; }
.swb-w .swb-section--journey-light .swb-journey-state__not { color: var(--swb-sand-ink); }
.swb-w .swb-section--journey-light .swb-journey__step::before { border-block-start-color: var(--swb-purple-200); }
.swb-w .swb-section--journey-light .swb-journey__step:nth-last-child(2)::before { border-block-start-color: var(--swb-sand); }
.swb-w .swb-section--journey-light .swb-journey__node { background: #FFFFFF; border-color: var(--swb-purple-200); }
.swb-w .swb-section--journey-light .swb-journey__number { color: var(--swb-brand); }
.swb-w .swb-section--journey-light .swb-journey__step.swb-is-key .swb-journey__node { background: var(--swb-brand); border-color: var(--swb-sand); box-shadow: 0 0 0 8px rgba(213, 181, 143, .22); }
.swb-w .swb-section--journey-light .swb-journey__step.swb-is-key .swb-journey__number { color: #FFFFFF; }
.swb-w .swb-section--journey-light .swb-journey__card {
  background: #FFFFFF;
  border: 1px solid var(--swb-border);
  box-shadow: var(--swb-shadow-card);
  border-radius: var(--swb-radius-card);
}
.swb-w .swb-section--journey-light .swb-journey__step.swb-is-key .swb-journey__card {
  border-color: var(--swb-sand);
  background: linear-gradient(180deg, var(--swb-gold-100) 0%, #FFFFFF 70%);
}
.swb-w .swb-section--journey-light .swb-journey__title { color: var(--swb-ink); }
.swb-w .swb-section--journey-light .swb-journey__body { color: var(--swb-ink-muted); }
.swb-w .swb-section--journey-light .swb-journey-foot__line { color: var(--swb-ink-soft); }
.swb-w .swb-section--journey-light .swb-btn--secondary { background: #FFFFFF; color: var(--swb-brand); border-color: var(--swb-purple-300); }
.swb-w .swb-section--journey-light .swb-btn--secondary:hover { background: var(--swb-purple-50); color: var(--swb-brand-hover); border-color: var(--swb-brand); }

/* The one deep brand moment left on the home page. */
.swb-w .swb-section--deep { background: var(--swb-purple-800); }

/* Photo band ("عندك وحدة؟") */
.swb-w .swb-photo-band { border-radius: 0; }
.swb-w .swb-photo-band__scrim,
.swb-w .swb-photo-band::after { background: linear-gradient(270deg, rgba(7, 26, 30, .78) 0%, rgba(7, 26, 30, .35) 60%, rgba(7, 26, 30, .15) 100%); }

/* FAQ */
.swb-w .swb-faq details,
.swb-w details.swb-faq__item {
  background: #FFFFFF;
  border: 1px solid var(--swb-border);
  border-radius: 14px;
  transition: border-color 200ms, box-shadow 200ms;
}
.swb-w .swb-faq details[open],
.swb-w details.swb-faq__item[open] { border-color: var(--swb-purple-200); box-shadow: var(--swb-shadow-card); }
.swb-w .swb-faq summary,
.swb-w .swb-faq__item summary { font-family: var(--swb-font-heading); font-weight: 600; }

/* Page banners */
.swb-w .swb-page-banner__scrim,
.swb-w .swb-page-banner::after { background: var(--swb-scrim-banner); }
.swb-w .swb-page-banner h1,
.swb-w .swb-page-banner__title { font-size: clamp(2rem, 3.2vw + .6rem, 3rem); line-height: 1.3; }
.swb-w .swb-page-banner--plain { background: var(--swb-purple-25); border-block-end: 1px solid var(--swb-border); }

/* ===========================================================================
 * Footer — dark petrol, clean columns, clear contrast
 * ======================================================================== */
.swb-w .swb-site-footer { background: var(--swb-purple-900); color: rgba(255, 255, 255, .80); }
.swb-w .swb-footer-top { padding-block-end: clamp(1.5rem, 3vw, 2.25rem); border-block-end: 1px solid rgba(255, 255, 255, .12); }
.swb-w .swb-footer-panels { gap: clamp(1.5rem, 4vw, 3.5rem); }
.swb-w .swb-fpanel,
.swb-w .swb-fpanel--split > * {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.swb-w .swb-fpanel--split { gap: 2rem; }
.swb-w .swb-fpanel h4 {
  font-family: var(--swb-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-block-end: 1rem;
}
.swb-w .swb-fpanel p { color: rgba(255, 255, 255, .74); font-size: .9375rem; line-height: 1.85; }
.swb-w .swb-site-footer a { color: rgba(255, 255, 255, .78); transition: color 200ms; }
.swb-w .swb-site-footer a:hover { color: var(--swb-sand); }
.swb-w .swb-fpanel .swb-btn--support {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 12px;
  padding: .75rem 1.25rem;
  font-weight: 600;
  margin-block-start: 1.25rem;
}
.swb-w .swb-fpanel .swb-btn--support:hover { background: #FFFFFF; color: var(--swb-purple-900); border-color: #FFFFFF; }
.swb-w .swb-social-row a {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  inline-size: 42px; block-size: 42px;
}
.swb-w .swb-social-row a:hover { background: #FFFFFF; color: var(--swb-purple-900); border-color: #FFFFFF; }
.swb-w .swb-to-top { border-color: rgba(255, 255, 255, .28); }
.swb-w .swb-site-footer__bottom { border-block-start-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .62); font-size: .875rem; }
.swb-w .swb-site-footer__bottom a { color: rgba(255, 255, 255, .70); }

/* ===========================================================================
 * Search, filters, results
 * ======================================================================== */
.swb-w .swb-searchbar {
  border-radius: 18px;
  border-color: var(--swb-border);
  box-shadow: var(--swb-shadow-card);
}
.swb-w .swb-searchbar__field:hover { background: var(--swb-page-bg); }
.swb-w .swb-searchbar__label { color: var(--swb-ink); font-weight: 600; font-size: .8125rem; }
.swb-w .swb-chip {
  border-radius: 999px;
  border-color: var(--swb-border-strong);
  background: #FFFFFF;
  color: var(--swb-ink-soft);
  font-weight: 500;
  transition: background-color 200ms, border-color 200ms, color 200ms, transform 160ms;
}
.swb-w .swb-chip:hover { border-color: var(--swb-purple-300); color: var(--swb-brand); }
.swb-w .swb-chip:active { transform: scale(.97); }
.swb-w .swb-chip.swb-is-active,
.swb-w .swb-chip[aria-pressed="true"],
.swb-w .swb-chip[aria-current] { background: var(--swb-purple-100); border-color: var(--swb-brand); color: var(--swb-brand); font-weight: 600; }
.swb-w .swb-filters { background: #FFFFFF; border-radius: var(--swb-radius-card); box-shadow: var(--swb-shadow-card); }

/* Skeleton: a soft shimmer, off when motion is reduced. */
.swb-w .swb-skeleton {
  background: linear-gradient(90deg, var(--swb-surface-muted) 25%, #E8EEEC 50%, var(--swb-surface-muted) 75%);
  background-size: 200% 100%;
  border-radius: 12px;
}
.swb-w .swb-skel-card { border-radius: var(--swb-radius-card); background: #FFFFFF; border: 1px solid var(--swb-border); overflow: hidden; }
.swb-w .swb-skel-card__media { aspect-ratio: 4 / 3; border-radius: 0; }
.swb-w .swb-skel-card__line { block-size: 14px; margin: .75rem 1rem 0; }
.swb-w .swb-skel-card__line--short { inline-size: 55%; margin-block-end: 1rem; }



/* Empty / error states */
.swb-w .swb-empty {
  background: #FFFFFF;
  border: 1px dashed var(--swb-border-strong);
  border-radius: var(--swb-radius-card);
}
.swb-w .swb-empty__icon { background: var(--swb-purple-50); color: var(--swb-brand); }
.swb-w .swb-alert { border-radius: 14px; }

/* ===========================================================================
 * Property page
 * ======================================================================== */
.swb-w .swb-gallery,
.swb-w .swb-photo-grid { border-radius: var(--swb-radius-photo); overflow: hidden; }
.swb-w .swb-gallery img,
.swb-w .swb-photo-grid img { transition: transform 900ms var(--swb-ease-out), filter 300ms; }
.swb-w .swb-photo-grid a:hover img,
.swb-w .swb-gallery a:hover img { transform: scale(1.03); filter: brightness(.96); }

.swb-w .swb-booking-panel {
  border-radius: 20px;
  border-color: var(--swb-border);
  box-shadow: 0 2px 6px rgba(20, 36, 40, .04), 0 24px 48px -28px rgba(18, 62, 70, .35);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
@media (min-width: 901px) {
  .swb-w .swb-booking-panel { position: sticky; inset-block-start: calc(var(--swb-header-height) + 1.5rem); }
}
.swb-w .swb-booking-panel__price .swb-amount,
.swb-w .swb-booking-panel__price .amount { font-family: var(--swb-font-heading); color: var(--swb-ink); }
.swb-w .swb-quote-lines { border-block-start-color: var(--swb-border); }
.swb-w .swb-quote-line { color: var(--swb-ink-soft); }
.swb-w .swb-quote-line--total { color: var(--swb-ink); font-size: 1.0625rem; border-block-start-color: var(--swb-border-strong); }
.swb-w .swb-quote-line--total span:last-child { color: var(--swb-brand); }
.swb-w .swb-trust-panel { border-radius: var(--swb-radius-card); border-color: var(--swb-border); background: #FFFFFF; }
.swb-w .swb-mobile-cta {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -10px 30px -18px rgba(20, 36, 40, .35);
}
.swb-w .swb-mobile-cta .swb-btn { min-height: 48px; }

/* ===========================================================================
 * Accounts (sign in, sign up, payment)
 * ======================================================================== */
.swb-w .swb-auth-panel { border-radius: 20px; }
.swb-w .swb-role-card,
.swb-w .swb-choice { border-radius: 16px; border-color: var(--swb-border); transition: border-color 200ms, box-shadow 200ms, background-color 200ms; }
.swb-w .swb-role-card:hover,
.swb-w .swb-choice:hover { border-color: var(--swb-purple-300); }
.swb-w .swb-role-card:has(input:checked),
.swb-w .swb-choice:has(input:checked) { border-color: var(--swb-brand); background: var(--swb-purple-25); box-shadow: 0 0 0 1px var(--swb-brand) inset; }

/* ===========================================================================
 * Motion — soft fade-in, no showy effects
 * ======================================================================== */
.swb-w [data-swb-reveal] {
  transform: translateY(18px);
  transition: opacity 760ms var(--swb-ease-out), transform 760ms var(--swb-ease-out);
  transition-delay: calc(var(--swb-i, 0) * 80ms);
}
.swb-w [data-swb-reveal].swb-is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .swb-w .swb-hero__photo { animation: none; transform: none; }
  .swb-w .swb-skeleton { animation: none; }
  .swb-w *,
  .swb-w *::before,
  .swb-w *::after { transition-duration: .01ms !important; }
}

/* Skeleton layer over the old results while the next page loads (55-loading.js). */
.swb-w [data-swb-dynamic].swb-is-loading { position: relative; min-height: 320px; }
.swb-w [data-swb-dynamic].swb-is-loading > :not(.swb-skel-layer) { visibility: hidden; }
.swb-w .swb-skel-layer { position: absolute; inset: 0; align-content: start; }
@keyframes swb-coastal-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.swb-w .swb-skel-layer .swb-skeleton { animation: swb-coastal-shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .swb-w .swb-skel-layer .swb-skeleton { animation: none; } }

/* ===========================================================================
 * Home v2 (1.2.0)
 * ======================================================================== */

/* --- Hero: full screen, the photograph stays, a floating frosted-glass bar - */
.swb-w .swb-hero--bar {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  padding-block: calc(var(--swb-header-height) + 1.5rem) clamp(2.5rem, 7vh, 4.5rem);
}
.swb-w .swb-hero--bar .swb-hero__scrim {
  background:
    linear-gradient(270deg, rgba(7, 26, 30, .52) 0%, rgba(7, 26, 30, .12) 55%, rgba(7, 26, 30, 0) 75%),
    linear-gradient(180deg, rgba(7, 26, 30, .45) 0%, rgba(7, 26, 30, .05) 30%, rgba(7, 26, 30, .25) 62%, rgba(7, 26, 30, .70) 100%);
}
.swb-w .swb-hero--bar .swb-hero__promise .swb-hero__title {
  font-size: clamp(2rem, 3.4vw + .7rem, 3.5rem);
  line-height: 1.3;
  max-width: 18ch;
}
.swb-w .swb-hero__subtitle {
  margin: .75rem 0 0;
  color: var(--swb-gold-300);
  font-family: var(--swb-font-heading);
  font-weight: 600;
  font-size: clamp(1.125rem, .8vw + .9rem, 1.5rem);
  line-height: 1.5;
  text-shadow: 0 1px 16px rgba(5, 20, 23, .45);
}
.swb-w .swb-hero--bar .swb-hero__panel-lede { font-size: clamp(1rem, .4vw + .9rem, 1.125rem); max-width: 60ch; }

/* The glass */
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar {
  position: relative;
  isolation: isolate;
  padding: .625rem;
  gap: 0;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(135deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .10) 55%, rgba(255, 255, 255, .16) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
          backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 30px 70px -30px rgba(3, 12, 14, .75),
    0 2px 10px rgba(3, 12, 14, .12);
}
/* a thin light edge, brighter at the top corner and warm at the far one */
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .15) 38%, rgba(255, 255, 255, .08) 62%, rgba(213, 181, 143, .65) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: -1;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar { background: rgba(7, 26, 30, .62); }
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field,
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field {
  background: transparent;
  border: 0;
  border-radius: 18px;
  padding: .75rem 1.25rem;
  transition: background-color 220ms var(--swb-ease-out), box-shadow 220ms var(--swb-ease-out);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .22);
}
[dir="ltr"] .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22); }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:hover {
  background: rgba(255, 255, 255, .10);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field:focus-within {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__label {
  color: rgba(255, 255, 255, .78);
  font-weight: 500;
  font-size: .8125rem;
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__input {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 1rem;
  color-scheme: dark;
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__input::placeholder { color: rgba(255, 255, 255, .62); }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .75; }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit {
  position: relative;
  gap: .5rem;
  min-height: 62px;
  min-width: 150px;
  border-radius: 18px;
  background: var(--swb-brand);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 28px -16px rgba(3, 12, 14, .9);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit::before {
  content: "";
  inline-size: 18px; block-size: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit:hover { background: var(--swb-purple-900); color: #FFFFFF; transform: translateY(-1px); }

@media (max-width: 900px) {
  .swb-w .swb-hero--bar {
    align-items: flex-end;
    padding-block: calc(var(--swb-header-height) + 1rem) 1.75rem;
  }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar {
    padding: .75rem;
    gap: .5rem;
    border-radius: 22px;
  }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field,
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__field + .swb-searchbar__field {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20);
    border-radius: 14px;
    padding: .625rem .875rem;
  }
  .swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__submit { min-height: 54px; border-radius: 14px; }
  .swb-w .swb-hero__subtitle { margin-top: .5rem; }
}

/* --- Stay types: one compact row of four ----------------------------------- */
.swb-w--stay-types .swb-section { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.swb-w .swb-grid--types {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
.swb-w .swb-grid--types .swb-type-card { aspect-ratio: 5 / 4; border-radius: 18px; }
.swb-w .swb-grid--types .swb-type-card__body { padding: 1rem 1.125rem; }
.swb-w .swb-grid--types .swb-type-card__body h3 { font-size: clamp(1.0625rem, .6vw + .85rem, 1.3125rem); margin: 0; }
.swb-w .swb-grid--types .swb-type-card__body p { font-size: .8125rem; margin-top: .25rem; line-height: 1.6; }
.swb-w .swb-grid--types .swb-type-card__count { font-size: .6875rem; padding: .125rem .5rem; margin-top: .5rem; }
@media (max-width: 1024px) {
  .swb-w .swb-grid--types .swb-type-card { aspect-ratio: 1 / 1; }
}
@media (max-width: 760px) {
  .swb-w .swb-grid--types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swb-w .swb-grid--types .swb-type-card { aspect-ratio: 4 / 3.6; }
}

/* --- Units carousel ------------------------------------------------------- */
.swb-w .swb-carousel-sec { padding-block: clamp(2.5rem, 5vw, 4rem); }
.swb-w .swb-carousel-sec + .swb-carousel-sec { padding-top: 0; }
.swb-w .swb-carousel-sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}
.swb-w .swb-carousel-sec__head .swb-section-head { margin: 0; flex: 1 1 420px; }
.swb-w .swb-carousel-sec__tools { display: flex; align-items: center; gap: .75rem; }
.swb-w .swb-carousel__arrows { display: flex; gap: .5rem; }
.swb-w .swb-carousel__arrows[hidden] { display: none; }
.swb-w .swb-carousel__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  border: 1px solid var(--swb-border-strong);
  background: #FFFFFF;
  color: var(--swb-brand);
  box-shadow: 0 6px 16px -10px rgba(20, 36, 40, .35);
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms, opacity 200ms, transform 160ms;
}
.swb-w .swb-carousel__arrow svg { width: 18px; height: 18px; }
.swb-w .swb-carousel__arrow:hover { background: var(--swb-brand); color: #FFFFFF; border-color: var(--swb-brand); }
.swb-w .swb-carousel__arrow:active { transform: scale(.95); }
.swb-w .swb-carousel__arrow:disabled { opacity: .35; cursor: default; background: #FFFFFF; color: var(--swb-brand); border-color: var(--swb-border); }
.swb-w .swb-carousel-sec__all { white-space: nowrap; }

.swb-w .swb-carousel { position: relative; }
.swb-w .swb-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 4px 22px;
  margin-inline: -4px;
}
.swb-w .swb-carousel__track::-webkit-scrollbar { display: none; }
.swb-w .swb-carousel__track:focus-visible { outline: 2px solid var(--swb-purple-600); outline-offset: 4px; border-radius: 14px; }
.swb-w .swb-carousel__item { scroll-snap-align: start; min-width: 0; display: flex; }
.swb-w .swb-carousel__item > * { width: 100%; }
@media (max-width: 1100px) {
  .swb-w .swb-carousel__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; }
}
@media (max-width: 820px) {
  .swb-w .swb-carousel__track { grid-auto-columns: calc((100% - 16px) / 2.2); gap: 16px; }
}
@media (max-width: 560px) {
  .swb-w .swb-carousel__track { grid-auto-columns: 78%; gap: 14px; }
  .swb-w .swb-carousel-sec__head { align-items: flex-start; }
  .swb-w .swb-carousel-sec__tools { width: 100%; justify-content: space-between; }
  .swb-w .swb-carousel__arrow { inline-size: 42px; block-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { .swb-w .swb-carousel__track { scroll-behavior: auto; } }

/* --- Section grounds (control "خلفية السكشن") ----------------------------- *
 * A rhythm instead of one long white page: white, a soft teal tint, warm
 * sand, the page ground, and deep petrol for one or two moments.
 * ------------------------------------------------------------------------ */
.swb-w.swb-bg--white > section { background: #FFFFFF; }
.swb-w.swb-bg--soft > section {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(214, 232, 231, .9) 0%, rgba(214, 232, 231, 0) 60%),
    #EEF5F4;
}
.swb-w.swb-bg--sand > section {
  background:
    radial-gradient(55% 70% at 0% 100%, rgba(230, 211, 186, .55) 0%, rgba(230, 211, 186, 0) 60%),
    #FAF5EE;
}
.swb-w.swb-bg--deep > section {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(58, 116, 128, .45) 0%, rgba(58, 116, 128, 0) 55%),
    var(--swb-purple-800);
  color: rgba(255, 255, 255, .86);
}
.swb-w.swb-bg--white > section,
.swb-w.swb-bg--soft > section,
.swb-w.swb-bg--sand > section,
.swb-w.swb-bg--deep > section { border-block: 0; }

/* Type and controls on the deep ground */
.swb-w.swb-bg--deep .swb-section-head h2,
.swb-w.swb-bg--deep .swb-section-title,
.swb-w.swb-bg--deep .swb-journey__title { color: #FFFFFF; }
.swb-w.swb-bg--deep .swb-section-head p,
.swb-w.swb-bg--deep .swb-section-head .swb-muted { color: rgba(255, 255, 255, .78); }
.swb-w.swb-bg--deep .swb-eyebrow { color: var(--swb-gold-300); }
.swb-w.swb-bg--deep .swb-btn--secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); }
.swb-w.swb-bg--deep .swb-btn--secondary:hover { background: #FFFFFF; color: var(--swb-purple-900); border-color: #FFFFFF; }
.swb-w.swb-bg--deep .swb-carousel__arrow { background: rgba(255, 255, 255, .08); color: #FFFFFF; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.swb-w.swb-bg--deep .swb-carousel__arrow:hover { background: #FFFFFF; color: var(--swb-purple-900); border-color: #FFFFFF; }
.swb-w.swb-bg--deep .swb-carousel__arrow:disabled { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .2); }
.swb-w.swb-bg--deep .swb-property-card { border-color: transparent; box-shadow: 0 20px 40px -26px rgba(3, 12, 14, .8); }

/* Cards and panels lift off a tinted ground */
.swb-w.swb-bg--soft .swb-recommend-panel,
.swb-w.swb-bg--sand .swb-recommend-panel { background: #FFFFFF; }
.swb-w.swb-bg--soft .swb-faq details,
.swb-w.swb-bg--sand .swb-faq details { background: #FFFFFF; }

/* Carousels keep a steady rhythm when two different grounds meet */
.swb-w.swb-bg--white > .swb-carousel-sec,
.swb-w.swb-bg--soft > .swb-carousel-sec,
.swb-w.swb-bg--sand > .swb-carousel-sec,
.swb-w.swb-bg--deep > .swb-carousel-sec { padding-block: clamp(3rem, 6vw, 4.75rem); }

/* ===== 1.4.2 — on a phone, every list of units shows two cards side by side ===== */
@media (max-width: 640px) {
  .swb-w .swb-grid--units,
  .swb-w .swb-verify-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .swb-w .swb-carousel__track { grid-auto-columns: calc((100% - 10px) / 2.15); gap: 10px; }

  /* The card itself, made for half a phone screen. */
  .swb-w .swb-property-card { border-radius: 14px; }
  .swb-w .swb-property-card:hover { transform: none; }
  .swb-w .swb-property-card__badges { inset-block-start: 6px; inset-inline-start: 6px; gap: 3px; }
  .swb-w .swb-property-card__badges .swb-vbadge--pill { inline-size: 1.45rem; block-size: 1.45rem; }
  .swb-w .swb-property-card__badges .swb-vbadge--pill svg { inline-size: 12px; block-size: 12px; }
  .swb-w .swb-property-card__type { inset-block-end: 6px; inset-inline-start: 6px; padding: 2px 8px; font-size: 10px; }
  .swb-w .swb-property-card__body { padding: .55rem .6rem .65rem; gap: .2rem; }
  .swb-w .swb-property-card__title { font-size: .84rem; line-height: 1.45; }
  .swb-w .swb-property-card__location { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .swb-w .swb-property-card__meta { display: none; }
  .swb-w .swb-property-card__footer { flex-wrap: wrap; gap: .25rem; padding-block-start: .45rem; margin-block-start: .25rem; }
  .swb-w .swb-property-card__price { font-size: .95rem; line-height: 1.3; }
  .swb-w .swb-property-card__price small { display: block; font-size: .65rem; }
  .swb-w .swb-property-card .swb-rating-chip { font-size: .7rem; }
  .swb-w .swb-property-card__unbookable { font-size: 10px; }
}


/* ===== 1.4.2 — the hero search bar: clear glass, not tinted by the photo ===== */
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar {
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(14px) saturate(60%) brightness(.9);
          backdrop-filter: blur(14px) saturate(60%) brightness(.9);
  border-color: rgba(255, 255, 255, .34);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar::before {
  background: linear-gradient(120deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .18) 40%, rgba(255, 255, 255, .1) 70%, rgba(255, 255, 255, .45) 100%);
}
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__label { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 8px rgba(5, 20, 23, .35); }
.swb-w .swb-hero--bar.swb-hero--photo .swb-hero__search-card .swb-searchbar__input { text-shadow: 0 1px 8px rgba(5, 20, 23, .35); }

/* ===== 75-v160.css ===== */
/* 1.6.0 — owner contact card, unit video, gallery video button, owner request actions, unified dashboard intent cards. */

/* ---------- WhatsApp button ---------- */
.swb-w .swb-btn--wa { background: #1FA855; border-color: #1FA855; color: #FFFFFF; }
.swb-w .swb-btn--wa:hover { background: #178F47; border-color: #178F47; color: #FFFFFF; }
.swb-w .swb-btn--wa:active { transform: translateY(1px); }
.swb-w .swb-btn--wa svg { flex: none; }

/* ---------- Owner contact card (booking panel) ---------- */
.swb-w .swb-owner-contact { display: grid; gap: .75rem; margin-block: 1rem; padding: 1rem; border: 1px solid var(--swb-border); border-radius: 14px; background: var(--swb-surface-muted, #F7F8F6); }
.swb-w .swb-owner-contact__who { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.swb-w .swb-owner-contact__who > span:last-child { display: grid; gap: .125rem; min-width: 0; }
.swb-w .swb-owner-contact__who b { font-weight: 700; color: var(--swb-ink); font-size: .9375rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swb-w .swb-owner-contact__who small { color: var(--swb-ink-muted); font-size: .8125rem; line-height: 1.4; }
.swb-w .swb-owner-contact__av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--swb-brand); color: #FFFFFF; font-weight: 700; font-size: 1.0625rem; line-height: 1; }
.swb-w .swb-owner-contact__acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.swb-w .swb-owner-contact__acts .swb-btn { justify-content: center; gap: .375rem; min-width: 0; }
.swb-w .swb-owner-contact__acts .swb-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swb-w .swb-owner-contact .swb-btn--block { width: 100%; justify-content: center; gap: .375rem; white-space: normal; text-align: center; line-height: 1.45; padding-block: .5rem; }
.swb-w .swb-owner-contact__wait { margin: 0; color: var(--swb-ink-soft); font-size: .875rem; line-height: 1.6; }
.swb-w .swb-owner-contact__note { display: flex; align-items: flex-start; gap: .375rem; margin: 0; color: var(--swb-success-ink, #0A6B35); font-size: .8125rem; line-height: 1.6; }
.swb-w .swb-owner-contact__note svg { flex: none; margin-block-start: .2rem; }

/* ---------- Unit video section (near the top of the unit page) ---------- */
.swb-w .swb-unit-video { display: grid; gap: .75rem; margin-block: 1.25rem 1.75rem; scroll-margin-block-start: calc(var(--swb-header-height, 72px) + 1rem); }
.swb-w .swb-unit-video__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--swb-font-heading, inherit); font-size: 1.25rem; line-height: 1.4; color: var(--swb-ink); }
.swb-w .swb-unit-video__title svg { color: var(--swb-brand); }
.swb-w .swb-unit-video__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--swb-radius-photo, 20px); background: #0B1416; box-shadow: var(--swb-shadow-card); }
.swb-w .swb-unit-video__frame video,
.swb-w .swb-unit-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #0B1416; }
.swb-w .swb-unit-video__link { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .75rem; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--swb-radius-photo, 20px); background: var(--swb-brand); color: #FFFFFF; text-decoration: none; box-shadow: var(--swb-shadow-card); }
.swb-w .swb-unit-video__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swb-w .swb-unit-video__link::after { content: ""; position: absolute; inset: 0; background: rgba(7, 26, 30, .42); transition: background .2s ease; }
.swb-w .swb-unit-video__link:hover::after { background: rgba(7, 26, 30, .3); }
.swb-w .swb-unit-video__play { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #FFFFFF; color: var(--swb-brand); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); transition: transform .2s ease; }
.swb-w .swb-unit-video__link:hover .swb-unit-video__play { transform: scale(1.06); }
.swb-w .swb-unit-video__cta { position: relative; z-index: 1; font-weight: 700; font-size: 1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }

/* ---------- Gallery "watch the video" button ---------- */
.swb-w .swb-gallery__video { position: absolute; z-index: 3; inset-block-end: 1rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; gap: .375rem; box-shadow: 0 8px 24px -10px rgba(7, 26, 30, .6); }
.swb-w .swb-gallery__video svg { flex: none; }

/* ---------- Owner actions on a booking request (حسابي) ---------- */
.swb-w .swb-req-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .5rem; }
.swb-w .swb-req-acts .swb-btn { gap: .375rem; }
.swb-w .swb-req-acts textarea { width: 100%; min-height: 64px; padding: .5rem .75rem; border: 1px solid var(--swb-border-strong); border-radius: 10px; font: inherit; font-size: .875rem; resize: vertical; }
.swb-w .swb-req-acts [data-swb-req-why][hidden] { display: none; }
.swb-w .swb-req-acts__msg { width: 100%; margin: 0; font-size: .8125rem; line-height: 1.5; }
.swb-w .swb-req-acts__msg.is-ok { color: var(--swb-success-ink, #0A6B35); }
.swb-w .swb-req-acts__msg.is-err { color: var(--swb-danger-ink, #A12A2A); }

/* ---------- Contact chips inside booking rows ---------- */
.swb-w .swb-contact-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-block-start: .375rem; }
.swb-w .swb-contact-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .625rem; border-radius: 999px; border: 1px solid var(--swb-border); background: #FFFFFF; color: var(--swb-ink); font-size: .8125rem; line-height: 1.5; text-decoration: none; }
.swb-w .swb-contact-chip:hover { border-color: var(--swb-brand); color: var(--swb-brand); }
.swb-w .swb-contact-chip--wa { border-color: #BFE8CF; background: #EAF8F0; color: #0E7A3B; }
.swb-w .swb-contact-chip--wa:hover { border-color: #1FA855; color: #0E7A3B; }

/* ---------- One account: "what do you want to do" cards ---------- */
.swb-w .swb-intent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.swb-w .swb-intent__card { display: grid; gap: .5rem; align-content: start; padding: 1.25rem; border: 1px solid var(--swb-border); border-radius: var(--swb-radius-card, 16px); background: #FFFFFF; color: var(--swb-ink); text-decoration: none; box-shadow: var(--swb-shadow-card); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.swb-w .swb-intent__card:hover { border-color: var(--swb-purple-300, #9CC3C9); box-shadow: var(--swb-shadow-card-hover); transform: translateY(-2px); color: var(--swb-ink); }
.swb-w .swb-intent__ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--swb-purple-25, #EEF5F6); color: var(--swb-brand); }
.swb-w .swb-intent__card b { font-size: 1.0625rem; line-height: 1.45; }
.swb-w .swb-intent__card span { color: var(--swb-ink-muted); font-size: .875rem; line-height: 1.6; }
.swb-w .swb-intent__go { margin-block-start: .25rem; color: var(--swb-brand) !important; font-weight: 700; }

@media (max-width: 640px) {
  .swb-w .swb-intent { grid-template-columns: 1fr; }
  .swb-w .swb-unit-video__play { width: 60px; height: 60px; }
  .swb-w .swb-gallery__video { inset-block-end: .75rem; inset-inline-start: .75rem; }
}
.swb-w .swb-req-acts__why { width: 100%; }
.swb-w .swb-req-guest { display: block; margin-block-start: .375rem; color: var(--swb-ink-muted); font-size: .8125rem; }
.swb-w .swb-acc-trips { text-decoration: none; color: inherit; }
.swb-w .swb-acc-trips:hover { border-color: var(--swb-purple-300, #9CC3C9); }
.swb-w .swb-acc-contact { display: grid; gap: .25rem; }

/* Listing form: sea fieldset + video picker row */
.swb-w .swb-lf-sea { display: grid; gap: .75rem; }
.swb-w .swb-lf-video__pick { display: grid; gap: .75rem; }

/* ===========================================================================
 * 90 — Guarantees that hold on every page, whatever the theme does.
 * ======================================================================== */

/* --- The wrapper never scrolls sideways, and never breaks sticky ---------- */
:where(.swb-w) { overflow-x: clip; max-width: 100%; }
.swb-w [class*="-grid"] > *,
.swb-w [class*="-row"] > *,
.swb-w [class*="-cols"] > *,
.swb-w .swb-form-row > *,
.swb-w .swb-field { min-width: 0; }
.swb-w img, .swb-w iframe, .swb-w video { max-width: 100%; }
.swb-w input:not([type="checkbox"]):not([type="radio"]),
.swb-w select,
.swb-w textarea { max-width: 100%; }
.swb-w p, .swb-w li, .swb-w td, .swb-w dd,
.swb-w [class*="email"], .swb-w [class*="phone"] { overflow-wrap: anywhere; }
.swb-w .swb-honeypot {
  position: absolute !important;
  inset-inline-start: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.swb-w .swb-form-row { display: grid; gap: var(--swb-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .swb-w .swb-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.elementor-widget-swb-contact,
.elementor-widget-swb-found-place,
.elementor-widget-swb-register,
.elementor-widget-swb-list-property,
.elementor-widget-swb-login,
.elementor-widget-swb-property-booking { max-width: 100%; overflow-x: clip; }

/* --- Reveal: the editor and reduced-motion always see the final state ---- */
.elementor-editor-active .swb-w [data-swb-reveal],
body.elementor-editor-preview .swb-w [data-swb-reveal],
.swb-w [data-swb-dynamic] [data-swb-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .swb-w [data-swb-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Arabic line-height floor (typography-fidelity) ----------------------- */
html[lang^="ar"] :where(.swb-w),
body.rtl :where(.swb-w) { line-height: var(--swb-leading-normal); }