/* BUILD 1.0.1 — 2026-10-13 */
/* ===========================================================================
 * Shams w Bahr — 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) ===== */
/*
 * Shams w Bahr - 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: #24041F;
  --swb-purple-900: #340730;
  --swb-purple-850: #3F0939;
  --swb-purple-800: #4C0C47;   /* the signature - deep aubergine */
  --swb-purple-700: #5E255A;   /* raised surface on the deep ground */
  --swb-purple-600: #6E3268;
  --swb-purple-500: #4C0C47;   /* primary */
  --swb-purple-450: #7E3F78;
  --swb-purple-400: #96538F;
  --swb-purple-350: #A9679F;
  --swb-purple-300: #C48FBB;
  --swb-purple-200: #E0BFD9;
  --swb-purple-100: #F1DFEC;
  --swb-purple-50:  #FAF1F7;
  --swb-purple-25:  #FDF8FC;

  /* 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: #A67C1E;
  --swb-gold-500: #C9992F;
  --swb-gold-400: #DDB255;
  --swb-gold-300: #EBCE8E;
  --swb-gold-100: #F8EFD9;

  --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, #3F0939 0%, #6E3268 100%);
  --swb-gradient-brand-warm: linear-gradient(135deg, #4C0C47 0%, #8A3F82 100%);
  --swb-gradient-wash: linear-gradient(180deg, #FAF1F7 0%, #FFFFFF 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(36,4,31,.62) 0%, rgba(36,4,31,.20) 38%, rgba(36,4,31,.72) 100%);
  --swb-scrim-banner: linear-gradient(180deg, rgba(36,4,31,.30) 0%, rgba(36,4,31,.78) 100%);
  --swb-scrim-card: linear-gradient(180deg, rgba(36,4,31,0) 42%, rgba(36,4,31,.80) 100%);

  /* ---------------------------------------------------------------------
   * Neutrals
   * ------------------------------------------------------------------ */
  --swb-white: #FFFFFF;
  --swb-ink: #1C1019;          /* primary text */
  --swb-ink-soft: #4A3B46;
  --swb-ink-muted: #756A72;    /* secondary text */
  --swb-ink-faint: #9E939A;
  --swb-ink-disabled: #BDB4BA;

  --swb-border: #EDE6EB;
  --swb-border-strong: #DDD2DA;
  --swb-border-focus: var(--swb-purple-600);

  --swb-surface: #FFFFFF;
  --swb-surface-raised: #FFFFFF;
  --swb-surface-sunken: #FCFAFB;
  --swb-surface-muted: #F8F4F7;

  /* ---------------------------------------------------------------------
   * 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: #7C4DFF;
  --swb-pending-soft: #EEE8FF;
  --swb-pending-ink: #4B20B8;

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

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

  --swb-neutral: #716A7C;
  --swb-neutral-soft: #F2F0F6;
  --swb-neutral-ink: #453D52;

  --swb-muted-tone: #9A93A5;
  --swb-muted-soft: #F6F4FA;

  /* ---------------------------------------------------------------------
   * 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: 'Alexandria', 'Segoe UI', system-ui, sans-serif;
  --swb-font-en: 'Alexandria', '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(28, 16, 25, 0.04);
  --swb-shadow-sm: 0 1px 3px rgba(28, 16, 25, 0.05), 0 1px 2px rgba(28, 16, 25, 0.03);
  --swb-shadow-md: 0 4px 12px rgba(23, 19, 31, 0.06), 0 1px 3px rgba(28, 16, 25, 0.04);
  --swb-shadow-lg: 0 12px 28px rgba(23, 19, 31, 0.08), 0 2px 6px rgba(28, 16, 25, 0.04);
  --swb-shadow-focus: 0 0 0 3px rgba(76, 12, 71, 0.22);
  --swb-shadow-brand: 0 10px 28px rgba(76, 12, 71, 0.26);
  --swb-shadow-photo: 0 24px 60px -28px rgba(36, 4, 31, .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;
  }
}
/*
 * Shams w Bahr - 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(23, 19, 31, 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(139, 92, 246, 0.14) 0%, rgba(139, 92, 246, 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(23, 19, 31, 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%, #EFECF5 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(23, 19, 31, 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(36, 4, 31, .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(126,63,120,0) 62%),
    linear-gradient(196deg, var(--swb-purple-850) 0%, var(--swb-purple-950) 62%, #16030F 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(20, 2, 16, .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(36, 4, 31, .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(28, 8, 26, .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(10, 0, 8, .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(36,4,31,0) 46%, rgba(36,4,31,.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(36,4,31,.90) 0%, rgba(36,4,31,.55) 55%, rgba(36,4,31,.25) 100%);
}
[dir="rtl"] .swb-w .swb-photo-band__scrim, .swb-w[dir="rtl"] .swb-photo-band__scrim{
  background: linear-gradient(270deg, rgba(36,4,31,.90) 0%, rgba(36,4,31,.55) 55%, rgba(36,4,31,.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(36,4,31,0) 45%, rgba(36,4,31,.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(250,241,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(221, 178, 85, .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(221, 178, 85, .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(201, 153, 47, .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(221, 178, 85, .55);
  background: linear-gradient(180deg, rgba(221,178,85,.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(201, 153, 47, .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(76, 12, 71, .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(76, 12, 71, .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(76, 12, 71, .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(76, 12, 71, .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(36,4,31,.35) 0%, rgba(36,4,31,.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(76, 12, 71, .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(201, 153, 47, .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(23, 19, 31, 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(36, 4, 31, .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);
}

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

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

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