/* 7 AROMA — WhatsApp chat widget (js/wa-widget.js). Self-contained: its own colours and type, with the site's own tokens used when the page has them. */
.sa-wa {
  --wa-ink: var(--ink, #161513); --wa-ink2: var(--ink-2, #4A4237); --wa-paper: var(--stock, #FAF6EE);
  --wa-green: #343C2F; --wa-gold: var(--gold, #B8913F); --wa-gold-ink: var(--gold-ink, #6F531C);
  --wa-serif: var(--serif, 'Cormorant Garamond', 'Cormorant', Georgia, serif);
  --wa-sans: var(--sans, 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --wa-ar: var(--ar-body, 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
  --wa-ease: cubic-bezier(.2, .7, .2, 1);
  --wa-edge: max(12px, env(safe-area-inset-right, 0px));
  position: fixed; z-index: 64; width: 48px; height: 48px; box-sizing: border-box;
  bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--sa-wa-lift, 0px));
  right: var(--wa-edge); left: auto;
  pointer-events: none; font-family: var(--wa-sans); font-size: 15px; line-height: 1.45; color: var(--wa-ink);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  transition: bottom .25s var(--wa-ease), opacity .3s;
}
.sa-wa[dir="rtl"] { --wa-edge: max(12px, env(safe-area-inset-left, 0px)); right: auto; left: var(--wa-edge); font-family: var(--wa-ar); }
.sa-wa *, .sa-wa *::before, .sa-wa *::after { box-sizing: border-box; }
.sa-wa[data-ready="0"], .sa-wa[data-hidden="true"] { visibility: hidden; opacity: 0; }
.sa-wa [hidden] { display: none !important; }

/* the button: the brand's deep green, a gold hairline, the WhatsApp mark */
.sa-wa-btn {
  pointer-events: auto; position: absolute; inset: 0; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--wa-paper); background: var(--wa-green);
  border: 1px solid var(--wa-gold); box-shadow: 0 0 0 3px rgba(250, 246, 238, .92), 0 10px 20px -8px rgba(22, 21, 19, .55);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .3s var(--wa-ease), box-shadow .2s;
}
.sa-wa-btn svg { width: 25px; height: 25px; display: block; }
.sa-wa-btn:hover { box-shadow: 0 0 0 3px rgba(250, 246, 238, .92), 0 12px 22px -8px rgba(22, 21, 19, .65); }
.sa-wa-btn:focus-visible, .sa-wa-x:focus-visible, .sa-wa-opt:focus-visible { outline: 2px solid var(--wa-gold-ink); outline-offset: 3px; }
.sa-wa-btn:focus-visible { outline-color: var(--wa-green); box-shadow: 0 0 0 3px var(--wa-paper), 0 0 0 5px var(--wa-gold-ink); }

/* tucked: only a 16px tab stays, inside the page margin, so nothing readable or tappable is ever covered */
.sa-wa[data-state="tuck"] .sa-wa-btn { transform: translateX(calc(100% - 16px + var(--wa-edge) - env(safe-area-inset-right, 0px))); box-shadow: 0 6px 12px -8px rgba(22, 21, 19, .5); }
.sa-wa[dir="rtl"][data-state="tuck"] .sa-wa-btn { transform: translateX(calc(-100% + 16px - var(--wa-edge) + env(safe-area-inset-left, 0px))); }
.sa-wa[data-state="tuck"][data-open="true"] .sa-wa-btn { transform: none; }

/* the panel: a small postcard above the button */
.sa-wa-panel {
  pointer-events: auto; position: absolute; bottom: calc(100% + 12px); right: 0; left: auto;
  width: min(344px, calc(100vw - 24px)); max-height: calc(100vh - 96px - var(--sa-wa-lift, 0px)); max-height: calc(100dvh - 96px - var(--sa-wa-lift, 0px)); overflow: auto;
  padding: 0 18px 14px; background: var(--wa-paper); color: var(--wa-ink); border: 1px solid rgba(22, 21, 19, .78);
  box-shadow: 0 26px 44px -22px rgba(22, 21, 19, .6), 0 2px 4px rgba(22, 21, 19, .08); outline: none; overscroll-behavior: contain;
  animation: sa-wa-in .22s var(--wa-ease);
}
.sa-wa[dir="rtl"] .sa-wa-panel { right: auto; left: 0; }
.sa-wa-air { height: 6px; margin: 0 -18px 16px; background: repeating-linear-gradient(-45deg, #C5753C 0 10px, #FAF6EE 10px 16px, #79A0A3 16px 26px, #FAF6EE 26px 32px); }
.sa-wa-x { position: absolute; top: 6px; inset-inline-end: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--wa-ink); font: 400 26px/1 var(--wa-sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sa-wa-x:hover { color: var(--wa-gold-ink); }
.sa-wa-kick { margin: 0 44px 2px 0; font: 500 10.5px/1.5 var(--wa-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--wa-gold-ink); }
.sa-wa[dir="rtl"] .sa-wa-kick { margin: 0 0 2px 44px; font: 500 12.5px/1.6 var(--wa-ar); letter-spacing: 0; text-transform: none; }
.sa-wa-title { margin: 0 0 8px; font: italic 400 28px/1.15 var(--wa-serif); color: var(--wa-ink); }
.sa-wa[dir="rtl"] .sa-wa-title { font: 400 26px/1.4 var(--ar-serif, 'Amiri', 'Aref Ruqaa', serif); }
.sa-wa-hello { margin: 0 0 8px; font: 400 17.5px/1.5 var(--wa-serif); color: var(--wa-ink2); }
.sa-wa[dir="rtl"] .sa-wa-hello { font: 300 16px/1.8 var(--wa-ar); }
.sa-wa-opts { list-style: none; margin: 0; padding: 0; }
.sa-wa-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 2px;
  border-top: 1px dotted var(--wa-gold); color: var(--wa-ink); text-decoration: none; font: 500 15px/1.3 var(--wa-sans); letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s;
}
.sa-wa-opts li:last-child .sa-wa-opt { border-bottom: 1px dotted var(--wa-gold); }
.sa-wa[dir="rtl"] .sa-wa-opt { font: 500 15px/1.5 var(--wa-ar); letter-spacing: 0; }
.sa-wa-opt-i { flex: none; width: 18px; height: 18px; display: block; color: var(--wa-gold-ink); transition: transform .25s var(--wa-ease); }
.sa-wa-opt-i svg { width: 100%; height: 100%; display: block; }
.sa-wa[dir="rtl"] .sa-wa-opt-i { transform: scaleX(-1); }
.sa-wa-opt:hover { background: rgba(184, 145, 63, .1); }
.sa-wa-opt:hover .sa-wa-opt-i { transform: translateX(3px); }
.sa-wa[dir="rtl"] .sa-wa-opt:hover .sa-wa-opt-i { transform: scaleX(-1) translateX(3px); }
.sa-wa-foot bdi { white-space: nowrap; }
.sa-wa-foot { margin: 10px 0 0; font: 300 12.5px/1.5 var(--wa-sans); color: var(--wa-ink2); }
.sa-wa[dir="rtl"] .sa-wa-foot { font: 300 13px/1.7 var(--wa-ar); }
@keyframes sa-wa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sa-wa, .sa-wa *, .sa-wa *::before, .sa-wa *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) { .sa-wa-btn, .sa-wa-panel { border: 2px solid CanvasText; } }
@media print { .sa-wa { display: none !important; } }