/* Monasabaty brand layer — shared across all static pages. Loaded AFTER each
   page's inline <style>, so these refinements win by source order without
   touching every file's CSS. Edit the look here, once. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Playfair+Display:wght@600;700&family=Tajawal:wght@400;500;700&family=Cairo:wght@400;600;700&family=Mulish:wght@400;500;600;700&display=swap");

:root {
  /* Refined premium palette — porcelain base, deep berry, soft gold */
  --bg: #fbf7f3;
  --ink: #26201d;
  --muted: #7a6a70;
  --brand: #a5184f;
  --brand-2: #6e1f7a;
  --gold: #c19a4d;
  --line: #efe6dd;
  --shadow: 0 10px 34px rgba(60, 30, 40, 0.10);
  --serif: "Fraunces", "Playfair Display", "Tajawal", Georgia, serif;
  --sans: "Mulish", "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mobile: kill the phantom horizontal scroll (sub-pixel / carousel overflow).
   overflow-x:clip clips without making body a scroll container, so the sticky
   header and the featured row's own horizontal scrolling keep working. */
html, body { overflow-x: clip; max-width: 100%; }

h1, h2, h3, .logo, .footbrand, .section-title, .brand {
  font-family: var(--serif);
  letter-spacing: 0.2px;
}

/* Arabic: serve the calligraphic-friendly webfonts for RTL */
[dir="rtl"] body,
[dir="rtl"] { font-family: "Tajawal", "Cairo", "Segoe UI", Tahoma, sans-serif; }
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .logo,
[dir="rtl"] .section-title { font-family: "Tajawal", "Cairo", serif; font-weight: 700; }

/* ---- Vendor trust / promotion badges ---- */
.vbadge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px; margin:2px 6px 2px 0; line-height:1.5; white-space:nowrap; }
.vbadge-verified { background:#e7f1ff; color:#0a66c2; border:1px solid #b9d6ff; }
.vbadge-rec { background:#fff4d6; color:#9a6b00; border:1px solid #f0d68a; }
.vbadge-feat { background:#fdecf3; color:var(--brand,#a5184f); border:1px solid #f3c6da; }
.vbadge-founding { background:#eef8f1; color:#1a7f4b; border:1px solid #b6e6c8; }

/* Sticky WhatsApp help (mobile-first soft CTA) */
.mb-wa-sticky{
  position:fixed; z-index:40; bottom:18px; inset-inline-end:16px;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:999px; font-weight:800; font-size:14px;
  color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#25d366,#128c7e);
  box-shadow:0 10px 28px rgba(18,140,126,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mb-wa-sticky:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(18,140,126,.4); color:#fff; }
@media (max-width:600px){
  .mb-wa-sticky{ bottom:14px; inset-inline-end:12px; font-size:13px; padding:11px 14px; }
  .mb-wa-sticky .mb-wa-label{ max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.namemark { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:11px; font-weight:900; line-height:1; margin-inline-start:6px; vertical-align:middle; color:#fff; }
.namemark.verified { background:#0a66c2; }
.namemark.rec { background:var(--gold,#c19a4d); }
.perk-tag { display:inline-block; font-size:11px; font-weight:800; color:#1a7f4b; background:#e3f7ea; border:1px solid #b6e6c8; border-radius:999px; padding:2px 8px; margin:0 0 6px; }

/* ---- "Featured this month" sponsored slot (top of the directory list) ---- */
.sponsor-slot { display:flex; gap:14px; align-items:center; background:linear-gradient(135deg,#fff8ec,#fdeef4); border:1.5px solid var(--gold,#c19a4d); border-radius:18px; padding:14px; margin:0 0 16px; box-shadow:var(--shadow,0 10px 34px rgba(60,30,40,.10)); }
.sponsor-slot .ss-thumb { width:96px; height:72px; border-radius:12px; object-fit:cover; flex:none; background:#f0e2e6; }
.sponsor-slot .ss-body { flex:1; min-width:0; }
.sponsor-slot .ss-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#9a6b00; background:#ffefc2; border-radius:999px; padding:2px 8px; margin-bottom:4px; }
.sponsor-slot .ss-name { font-weight:800; font-size:16px; color:var(--ink,#26201d); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sponsor-slot .ss-meta { color:var(--muted,#7a6a70); font-size:13px; }
.sponsor-slot .ss-cta { flex:none; }
@media (max-width:560px){ .sponsor-slot{ flex-wrap:wrap } .sponsor-slot .ss-cta{ width:100% } }

/* ---- "Why list with us" vendor perks (list-business page) ---- */
.perks { margin:8px 0 26px; }
.perks-title { text-align:center; font-size:24px; margin:0 0 4px; }
.perks-sub { text-align:center; color:var(--muted,#7a6a70); margin:0 0 18px; }
.perks-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.perk { background:#fff; border:1px solid var(--line,#efe6dd); border-radius:16px; padding:18px; box-shadow:var(--shadow,0 10px 34px rgba(60,30,40,.08)); }
.perk-ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; background:linear-gradient(135deg,#fdeef4,#fff7ec); border:1px solid var(--line,#efe6dd); margin-bottom:10px; }
.perk h3 { margin:0 0 6px; font-size:16px; }
.perk p { margin:0; color:var(--muted,#7a6a70); font-size:14px; }

/* ---- "Claim your listing" CTA (vendor page) ---- */
.claim-cta { display:block; text-align:center; margin:6px 0 14px; padding:11px 14px; border:1px dashed var(--gold,#c19a4d); border-radius:12px; background:#fffaf0; color:#8a6d12; font-weight:700; font-size:14px; transition:.15s; }
.claim-cta:hover { background:#fff4d6; }

/* ---- Vendor comparison (directory) ---- */
.cmpbtn { margin-inline-start:6px; border:1px solid var(--line,#efe6dd); background:#fff; color:var(--muted,#7a6a70); border-radius:8px; min-width:30px; height:26px; cursor:pointer; font-weight:800; font-size:13px; line-height:1; vertical-align:middle; }
.cmpbtn.on { background:var(--brand,#a5184f); color:#fff; border-color:var(--brand,#a5184f); }
#compareBar { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:50; background:var(--ink,#26201d); color:#fff; border-radius:999px; padding:9px 10px 9px 18px; display:none; align-items:center; gap:12px; box-shadow:0 10px 30px rgba(0,0,0,.3); font-weight:700; max-width:92vw; }
#compareBar a.cmp-go { color:#fff; background:var(--brand,#a5184f); padding:8px 16px; border-radius:999px; font-size:14px; white-space:nowrap; }
#compareBar .cmp-clr { cursor:pointer; opacity:.7; font-size:13px; white-space:nowrap; }
#compareBar .cmp-clr:hover { opacity:1; }

/* ---- Accessibility (applies everywhere via this shared layer) ---- */
/* Visible keyboard focus — was missing site-wide; mouse users are unaffected (:focus-visible). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, [onclick]:focus-visible {
  outline: 3px solid var(--brand, #a5184f);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Respect users who prefer reduced motion (the hero video-poster bob, hovers, etc.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
/* WCAG-AA contrast: gold rating/price TEXT on light backgrounds needs a darker shade.
   Decorative gold (gradients, badges, borders) keeps the brighter --gold. */
.rating, .featrating, .rev-big, .price, .ptier, .vc .rt, .featmeta .ptier { color: #8a6d12 !important; }

/* ---- Mobile polish (real-device fixes — Chromium preview hides these) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 768px) {
  /* iOS Safari ZOOMS the whole page when you focus a field smaller than 16px. Forcing 16px
     stops every input/select/textarea from janking the page on tap. Biggest mobile win. */
  input, select, textarea, .lang-toggle, .lang-btn { font-size: 16px !important; }
  /* Comfortable 44px tap targets for the main controls. */
  .btn, select, .chip, .gchip, .tpl-chip, .langswitch, .gstatus { min-height: 44px; }
  a.btn, button.btn, .btn { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- Touch-target safety net for CUSTOM controls (found via full mobile audit) ----
     These interactive elements carry their own one-off classes and so fall outside the
     .btn/.chip family above. Give each a finger-sized (>=44px) hit area WITHOUT changing
     its visual size — line-height keeps the glyph/text compact inside the bigger box.
     Only safely-scoped class names live here; generic names (.rm, .t-rm, .lnk) are fixed
     per-page to avoid collateral. New pages inherit this automatically. */
  /* Standalone glyph/icon buttons — center the glyph in a 44px box. */
  .savebtn, .cmpbtn, .grm, .cal-nav, .look .heart, .star-input .star {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .star-input { display: flex; gap: 6px; }
  /* Primary text-link CTAs — keep the text, guarantee a 44px tap height. */
  .credit, .pal .pa a, .suggest .s, .ai-fallback a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* Centered secondary link. */
  .seehotels { min-height: 40px; display: flex; align-items: center; justify-content: center; }
  /* Compact inline remove control inside a chip — 32px is enough, won't balloon the chip. */
  .afchip button {
    min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Colour-theme swatches (invitations) — 40px hit area + a touch more breathing room. */
  .tdot { width: 40px; height: 40px; }
  .themes { gap: 12px; }
}
/* Respect the iOS home-indicator / notch for fixed bottom bars. */
#compareBar { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }