/* HOS 2027 — production layer on top of the page styles (toast, newsletter popup, a11y helpers). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper)}
img{max-width:100%}
.hos-toast{position:fixed;left:50%;bottom:24px;z-index:2000;transform:translate(-50%,24px);opacity:0;pointer-events:none;max-width:min(560px,calc(100% - 32px));
  background:#231F20;color:#F6F1E7;padding:14px 20px;border-radius:16px;font:600 15px/1.45 var(--font-sans);box-shadow:0 12px 40px rgba(0,0,0,.3);transition:opacity .25s,transform .25s}
.hos-toast.on{opacity:1;transform:translate(-50%,0)}
.hos-toast.err{background:#8A2A12}
[dir=rtl] .hos-toast,[lang=ar] .hos-toast{font-family:var(--font-arabic)}

/* Newsletter popup: the designed 820px card, fixed over the page; a bottom sheet on phones */
html.nl-open{overflow:hidden}
.nl-root{position:fixed;inset:0;z-index:1000;font-family:var(--font-sans);color:var(--ink)}
.nl-root[lang=ar]{font-family:var(--font-arabic)}
.nl-root .nl-shade{cursor:pointer}
.nl-root .nl-box{max-height:calc(100vh - 32px);overflow:auto}
@media (max-width:860px){
  .nl-root .nl-box{left:0!important;right:0;top:auto!important;bottom:0;width:auto!important;transform:none!important;grid-template-columns:1fr!important;border-radius:28px 28px 0 0!important;
    max-height:92vh;animation:nlup .45s cubic-bezier(.2,.8,.2,1) both!important}
  .nl-root .nl-box > div:first-child{display:none!important}
  .nl-root .nl-box > div:last-child{padding:36px 20px 28px!important}
  .nl-root h2{font-size:32px!important}
}
@media (prefers-reduced-motion:reduce){.nl-root .nl-box{animation:none!important}}

/* Pre-render: keep the page visible before the runtime takes over */
#app:empty{min-height:100vh}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* WhatsApp contact button */
.hos-wa{position:fixed;inset-inline-end:20px;bottom:20px;z-index:900;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px 0 14px;border-radius:999px;
  background:#25D366;color:#0B3D20;font:700 15px/1 var(--font-sans);text-decoration:none;box-shadow:0 10px 30px rgba(35,31,32,.28);transition:transform .2s}
.hos-wa:hover{transform:translateY(-2px);color:#0B3D20}
.hos-wa:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
html[lang=ar] .hos-wa{font-family:var(--font-arabic)}
.hos-wa.up{bottom:108px}
html.nl-open .hos-wa{display:none}
@media (max-width:860px){.hos-wa{width:56px;height:56px;padding:0;justify-content:center;bottom:16px;inset-inline-end:16px}.hos-wa span{display:none}.hos-wa.up{bottom:104px}}
@media print{.hos-wa{display:none}}