/*
 * YallaWeb barber pack: shared utilities.
 * Every rule is scoped to .yw-site so nothing leaks into the platform or another template.
 * Templates supply the --yw-* tokens (generated from meta.ts) and may restyle any .yw-* class under their own scope.
 */
.yw-site,
.yw-site *,
.yw-site *::before,
.yw-site *::after { box-sizing: border-box; }

html:has(> .yw-site) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 1rem; }
@media (prefers-reduced-motion: no-preference) { html:has(> .yw-site) { scroll-behavior: smooth; } }

.yw-site {
  margin: 0;
  min-block-size: 100vh;
  background: var(--yw-bg);
  color: var(--yw-fg);
  font-family: var(--yw-font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}
.yw-site:lang(ar) { line-height: 1.8; }
.yw-site :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.yw-site :where(ul, ol) { padding: 0; list-style: none; }
.yw-site :where(img, svg) { display: block; max-inline-size: 100%; }
.yw-site :where(img) { block-size: auto; }
.yw-site :where(a) { color: inherit; }
.yw-site :where(button) { font: inherit; color: inherit; }
/* Arabic is never letter-spaced. */
.yw-site :lang(ar),
.yw-site:lang(ar) * { letter-spacing: 0 !important; }

/* Focus: always visible, never removed. Templates may recolour via --yw-focus. */
.yw-site :focus-visible { outline: 3px solid var(--yw-focus); outline-offset: 3px; border-radius: 2px; }
.yw-site [tabindex="-1"]:focus { outline: none; }

.yw-sr-only {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.yw-skip {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -100vh; z-index: 100;
  padding: .75rem 1rem; background: var(--yw-fg); color: var(--yw-bg); text-decoration: none; font-weight: 600;
}
.yw-skip:focus { inset-block-start: 1rem; }

.yw-icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.yw-site[dir="rtl"] .yw-flip-rtl,
[dir="rtl"] .yw-site .yw-flip-rtl,
[dir="rtl"] .yw-flip-rtl { transform: scaleX(-1); }

/* Language switch: semantics shared, look owned by templates. */
.yw-lang { display: inline-flex; align-items: center; gap: .35rem; }
.yw-lang a, .yw-lang-current {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: .25rem;
}
.yw-lang a:lang(ar), .yw-lang-current:lang(ar) { font-family: var(--yw-font-body-ar, var(--yw-font-body)); }
.yw-lang-current { font-weight: 700; }
.yw-lang-sep { opacity: .5; }

/* Media wrapper and placeholder disclosure. */
.yw-media { position: relative; overflow: hidden; background: var(--yw-surface); }
.yw-media > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.yw-pending {
  position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem;
  padding: .2rem .55rem; border-radius: 3px;
  background: rgb(0 0 0 / .72); color: #fff;
  font: 600 .72rem/1.4 var(--yw-font-body); letter-spacing: .02em;
}

/* Bidirectional helpers. */
.yw-site bdi[dir="ltr"] { unicode-bidi: isolate; direction: ltr; }

/* Demo banner, notice and dialog. */
.yw-demo-banner {
  margin: 0; padding: .1rem 1rem; text-align: center;
  background: var(--yw-demo-bg, #fff4c2); color: var(--yw-demo-fg, #3a2f00);
  font-size: .85rem; line-height: 1.45;
}
.yw-demo-banner a { font-weight: 600; text-underline-offset: .2em; display: inline-flex; align-items: center; min-block-size: 44px; }
.yw-demo-notice {
  margin-inline: auto; max-inline-size: 72rem; padding: 1.25rem clamp(1rem, 4vw, 2rem);
  border: 1px dashed currentColor; border-radius: 4px; font-size: .9rem;
  display: grid; gap: .5rem;
}
.yw-demo-notice-title { font-size: 1rem; font-family: var(--yw-font-body); font-weight: 700; }
.yw-dialog {
  max-inline-size: min(30rem, calc(100vw - 2rem)); padding: 1.5rem; border: 0; border-radius: 6px;
  background: var(--yw-dialog-bg, #fff); color: var(--yw-dialog-fg, #111); font-family: var(--yw-font-body);
  box-shadow: 0 20px 60px rgb(0 0 0 / .35);
}
.yw-dialog::backdrop { background: rgb(10 10 10 / .6); }
.yw-dialog h2 { font-size: 1.25rem; margin-block-end: .75rem; }
.yw-dialog p + p { margin-block-start: .75rem; padding-block-start: .75rem; border-block-start: 1px solid rgb(0 0 0 / .12); }
.yw-dialog form { margin-block-start: 1.25rem; }
.yw-dialog-close {
  min-block-size: 44px; padding: .6rem 1.4rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--yw-accent); color: var(--yw-accent-fg); font-weight: 700;
}

/* Fixed mobile contact bar. Layout here, colours in the template. */
.yw-mobilebar { display: none; }
@media (max-width: 767.98px) {
  .yw-has-bar { padding-block-end: calc(var(--yw-bar-h, 4.25rem) + env(safe-area-inset-bottom, 0px)); }
  .yw-mobilebar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem;
    padding: .5rem max(.75rem, env(safe-area-inset-left, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--yw-bar-bg, var(--yw-bg)); border-block-start: 1px solid var(--yw-line);
  }
  .yw-mobilebar-action {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    min-block-size: 48px; padding-inline: .5rem; text-decoration: none; font-weight: 600; font-size: .95rem;
    white-space: nowrap;
  }
}

/* Autonomy plan of 9 November 2026: a framed preview sits under the preview page's own bar, so the site's bar is hidden,
   and every outside link scrolls to the note below, which says what the button does on the live website. */
.yw-framed .yw-mobilebar { display: none; }
.yw-preview-note {
  margin: 1.5rem clamp(1rem, 5vw, 3rem) 2rem; padding: 1rem 1.25rem; border-radius: 12px;
  background: #fff8e1; color: #1d1a12; border: 1px solid #e8d48a; font-family: var(--yw-font-body); line-height: 1.5;
  scroll-margin-block: 1.5rem;
}
.yw-preview-note:target { outline: 3px solid #e0a800; outline-offset: 2px; }
.yw-preview-note-title { font-weight: 700; margin-block-end: .4rem; }
.yw-preview-note bdi { white-space: nowrap; }
.yw-preview-note ul { display: grid; gap: .3rem; }
.yw-preview-note li { padding-inline-start: 1.1rem; position: relative; }
.yw-preview-note li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .65em; inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: #b8860b; }

/* Opening hours: a range never breaks inside, a split shift is two lines, a day without hours is quieter. */
.yw-range { display: block; white-space: nowrap; }
.yw-hours-ask { opacity: .7; font-style: italic; }
/* Arabic fonts have no italic: the browser would slant the glyphs. */
[dir=rtl] .yw-hours-ask, :lang(ar) .yw-hours-ask { font-style: normal; }

/* Footer credit. */
.yw-footer-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.yw-footer-meta a { display: inline-flex; align-items: center; min-block-size: 44px; }
.yw-footer-social { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.yw-footer-social a { display: inline-flex; align-items: center; min-block-size: 44px; text-underline-offset: .25em; }
.yw-made { opacity: .75; font-size: .85em; }

/* Privacy page, styled by the template's tokens. */
.yw-privacy-page { display: flex; flex-direction: column; }
.yw-privacy-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 5vw, 3rem); border-block-end: 1px solid var(--yw-line);
}
.yw-privacy-brand { font-family: var(--yw-font-display); font-size: 1.35rem; text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.yw-privacy {
  flex: 1; inline-size: 100%; max-inline-size: 42rem; margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 2rem); display: grid; gap: 1rem; align-content: start;
}
.yw-privacy h1 { font-family: var(--yw-font-display); font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; margin-block-end: .5rem; }
.yw-privacy-demo { padding: .75rem 1rem; background: var(--yw-surface); border-inline-start: 3px solid var(--yw-accent); }
.yw-privacy-back { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
.yw-privacy-page .yw-footer { padding: 1.5rem clamp(1rem, 5vw, 3rem); border-block-start: 1px solid var(--yw-line); }

@media (prefers-reduced-motion: reduce) {
  .yw-site *, .yw-site *::before, .yw-site *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .yw-mobilebar, .yw-skip, .yw-dialog { display: none !important; }
  .yw-has-bar { padding: 0; }
}