/* ==========================================================================================
   Al Hayat Solutions | /assets/site/business-samples-demos.css
   Styles for the six mini-sites inside the device frames (prefix .ms-). The frame (.bs-screen) is a size container named "site",
   so layouts follow the width of the frame (phone or desktop), not the width of the browser. Logical properties only.
   ========================================================================================== */
.bs-site{--a:#0F4C5C;--as:#E4F1F3;background:#fff;color:var(--ink);font-size:16px;line-height:1.5;min-block-size:100%}
.bs-site[data-demo="restaurant"]{--a:#8F3A1B;--as:#FBEBDD}
.bs-site[data-demo="tax"]{--a:#1E5B4E;--as:#E3F1EC}
.bs-site[data-demo="contractor"]{--a:#A8420A;--as:#FCEBDD}
.bs-site[data-demo="grocery"]{--a:#2C6A38;--as:#E5F2E3}
.bs-site[data-demo="clinic"]{--a:#0B6E7F;--as:#E1F1F4}
.bs-site[lang="ar"]{--font-sans:"Noto Kufi Arabic","Source Sans 3","Segoe UI",system-ui,sans-serif;--font-serif:"Noto Kufi Arabic","Source Serif 4",serif;line-height:1.75}
.bs-site [hidden]{display:none!important}
.bs-site .ltr{direction:ltr;unicode-bidi:isolate}
.bs-site :focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.bs-site h4{font:var(--fw-semibold) 22px/1.2 var(--font-serif);margin:0 0 6px;color:var(--ink)}
.bs-site p{margin:0}

/* top bar */
.ms-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 16px;background:#fff;border-block-end:1px solid var(--border);z-index:5}
@container site (min-width:700px){.ms-top{position:sticky;inset-block-start:0}}
.ms-brand{display:inline-flex;align-items:center;gap:8px;color:var(--a);font:700 18px/1.1 var(--font-serif)}
.ms-brand .icon{inline-size:26px;block-size:26px}
.ms-nav{display:flex;gap:2px;order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none}
.ms-nav::-webkit-scrollbar{display:none}
@container site (min-width:700px){.ms-nav{order:0;flex:0 1 auto;margin-inline-start:auto;overflow:visible}}
.ms-nav button{flex:0 0 auto;min-block-size:36px;padding:0 12px;border-radius:999px;font:var(--fw-semibold) 14px/1 var(--font-sans);color:var(--ink-2);background:transparent;border:0;cursor:pointer}
.ms-nav button:hover{background:var(--as);color:var(--a)}
.ms-top>.ms-langs,.ms-top>.ms-langsel{margin-inline-start:auto}
@container site (min-width:700px){.ms-top>.ms-langs,.ms-top>.ms-langsel{margin-inline-start:0}}
.ms-langs{display:inline-flex;gap:2px;background:var(--card-2);border:1px solid var(--border);border-radius:999px;padding:3px}
.ms-langs button{min-block-size:34px;min-inline-size:36px;padding:0 8px;border-radius:999px;font:var(--fw-semibold) 13px/1 var(--font-sans);color:var(--ink-2);background:transparent;border:0;cursor:pointer}
.ms-langs button[aria-pressed="true"]{background:var(--a);color:#fff}
.ms-langsel .select{min-block-size:38px;padding-block:4px;inline-size:auto}

/* hero */
.ms-hero{padding:28px 16px;background:var(--as);display:flex;flex-direction:column;gap:10px}
.bs-site .ms-title{font:var(--fw-semibold) clamp(26px,5.5cqi,38px)/1.12 var(--font-serif);color:var(--a);margin:0;max-inline-size:20ch}
.ms-hero p{max-inline-size:56ch;color:var(--ink-2)}
.ms-hero-media{position:relative;min-block-size:260px;justify-content:flex-end;padding:0;background:#0F2A33;isolation:isolate;overflow:hidden}
.ms-video{position:absolute;inset:0;z-index:0}
.ms-hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,42,51,.1) 0%,rgba(15,42,51,.8) 100%)}
.ms-hero-in{position:relative;z-index:2;padding:24px 16px 52px;display:flex;flex-direction:column;gap:8px}
.ms-hero-media .ms-title,.ms-hero-media p{color:#fff}
.bs-site .ms-hero-media .ms-title{color:#fff}
.ms-credit{position:absolute;z-index:2;inset-inline-start:12px;inset-block-end:10px;margin:0;font-size:13px;line-height:1.3;background:rgba(16,42,67,.92);color:#fff;border-radius:999px;padding:3px 10px;max-inline-size:calc(100% - 24px)}
.ms-hero .ms-seg{align-self:flex-start}

/* sections and cards */
.ms-sec{padding:24px 16px;border-block-start:1px solid var(--border);scroll-margin-block-start:64px;outline:none}
.ms-sec.is-hl{box-shadow:inset 0 0 0 3px var(--a)}
.ms-owner{background:var(--card-2)}
.ms-sub{color:var(--muted);margin:0 0 14px!important;font-size:15px}
.ms-two{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@container site (min-width:700px){.ms-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ms-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:12px;min-inline-size:0}
.ms-card-soft{background:var(--card-2);box-shadow:none}
.ms-card-t{font:var(--fw-semibold) 17px/1.3 var(--font-sans);color:var(--ink)}
.ms-rh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ms-rh h4{margin:0}
.ms-note{font-size:14px;color:var(--muted)}
.ms-honest{color:var(--warn-ink)}
.ms-err{color:var(--danger-ink);font-weight:var(--fw-semibold)}
.ms-ok{color:var(--ok-ink);font-weight:var(--fw-semibold)}
.ms-warn{color:var(--warn-ink);font-weight:var(--fw-semibold)}
.ms-guide{font-size:15px;color:var(--ink-2)}
.ms-empty{color:var(--muted);text-align:center;padding:12px;border:1px dashed var(--border-strong);border-radius:12px;list-style:none;font-size:15px}
.ms-form{gap:14px}
.ms-form .form-grid{gap:14px}
.ms-mode{margin-block-end:14px}
.ms-seg{max-inline-size:100%;flex-wrap:wrap;border-radius:18px}
.field .ms-seg{align-self:flex-start;inline-size:max-content}
.ms-lockrow{display:flex;gap:10px;align-items:flex-start}
.ms-lockrow .icon{flex:none;color:var(--a);margin-block-start:3px}
.ms-rates{margin-block-start:14px;border:1px solid var(--border);border-radius:12px;padding:6px 14px 12px;background:var(--card-2)}
.ms-rates summary{min-block-size:40px;display:flex;align-items:center;cursor:pointer;font-weight:var(--fw-semibold)}

/* buttons */
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;padding:0 18px;border-radius:999px;font:var(--fw-semibold) 15px/1.2 var(--font-sans);border:1px solid var(--a);background:var(--a);color:#fff;cursor:pointer;text-decoration:none;text-align:center}
.ms-btn:hover{filter:brightness(.92);text-decoration:none}
.ms-btn .icon{inline-size:18px;block-size:18px;flex:none}
.ms-btn-2{background:#fff;color:var(--a)}
.ms-btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.ms-btn-sm{min-block-size:38px;padding:0 12px;font-size:14px}
.ms-btn.is-off{background:var(--muted);border-color:var(--muted);color:#fff}
.ms-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ms-row{display:flex;gap:10px;margin-block-start:4px}
.ms-link{background:none;border:0;padding:2px 6px;color:var(--a);text-decoration:underline;font:var(--fw-semibold) 14px/1.4 var(--font-sans);cursor:pointer;min-block-size:32px}
.ms-inline{display:flex;gap:10px;flex-wrap:wrap}
.ms-inline .input{flex:1 1 140px}

/* results */
.ms-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ms-lines li{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding-block:6px;border-block-end:1px dashed var(--border)}
.ms-lines .ms-muted{color:var(--muted);font-size:14px}
.ms-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-block-start:8px;border-block-start:2px solid var(--border);font-weight:var(--fw-semibold)}
.ms-total strong{font:var(--fw-semibold) 26px/1.1 var(--font-serif);color:var(--a);font-variant-numeric:tabular-nums}
.ms-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ms-stages li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding-block:8px;border-block-end:1px dashed var(--border)}
.ms-dot{inline-size:16px;block-size:16px;border-radius:50%;border:2px solid var(--border-strong);background:#fff;margin-block-start:3px;display:block}
.ms-stages .is-done .ms-dot{background:var(--ok);border-color:var(--ok)}
.ms-stages .is-now .ms-dot{background:var(--a);border-color:var(--a);box-shadow:0 0 0 4px var(--as)}
.ms-stages .is-now .ms-st{font-weight:var(--fw-semibold)}
.ms-stages .is-todo .ms-st,.ms-stages .is-todo .ms-dt{color:var(--muted)}
.ms-dt{font-size:14px;color:var(--ink-2);white-space:nowrap}
.ms-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-block-end:16px}
.ms-kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--muted)}
.ms-kpi-n{font:var(--fw-semibold) 28px/1.1 var(--font-serif);color:var(--ink)}
.ms-owner .ms-two{margin-block-end:16px}
.ms-leads{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ms-leads li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding-block:8px;border-block-end:1px dashed var(--border);font-size:14px;align-items:center}
@container site (min-width:700px){.ms-leads li{grid-template-columns:70px minmax(0,1fr) 90px auto}}

/* chips, toggles, days, slots */
.ms-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ms-chip{display:inline-flex;align-items:center;min-block-size:34px;padding:0 12px;border-radius:999px;background:var(--as);color:var(--ink);font:var(--fw-semibold) 14px/1.2 var(--font-sans);border:1px solid transparent}
.ms-chip-btn{cursor:pointer;background:#fff;border-color:var(--border-strong);min-block-size:40px}
.ms-chip-btn[aria-pressed="true"]{background:var(--a);color:#fff;border-color:var(--a)}
.ms-chk{display:inline-flex;align-items:center;gap:8px;min-block-size:40px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;background:#fff;cursor:pointer;font:var(--fw-semibold) 14px/1.2 var(--font-sans);text-transform:capitalize}
.ms-chk input{accent-color:var(--a);inline-size:18px;block-size:18px;margin:0}
.ms-chk:has(input:checked){background:var(--as);border-color:var(--a)}
.ms-allergen{margin-block-end:8px}
.ms-days,.ms-slots{display:flex;flex-wrap:wrap;gap:8px}
.ms-day,.ms-slot{min-block-size:44px;padding:0 14px;border-radius:12px;border:1px solid var(--border-strong);background:#fff;font:var(--fw-semibold) 14px/1.2 var(--font-sans);color:var(--ink);cursor:pointer}
.ms-day[aria-pressed="true"],.ms-slot[aria-pressed="true"]{background:var(--a);border-color:var(--a);color:#fff}
.ms-slot:disabled{background:var(--card-2);color:var(--muted);cursor:not-allowed;text-decoration:line-through}
.ms-taken{font-size:13px}
.ms-prog{display:flex;align-items:center;gap:12px}
.ms-prog progress{flex:1;block-size:12px;accent-color:var(--a)}
.ms-checks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ms-count{font-size:14px;color:var(--muted);margin-block-start:6px}

/* dishes and products */
.ms-dishes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@container site (min-width:700px){.ms-dishes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ms-dish{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px}
.ms-glyph{inline-size:48px;block-size:48px;border-radius:14px;display:grid;place-items:center;background:var(--as);color:var(--a)}
.ms-glyph .icon{inline-size:28px;block-size:28px}
.ms-dish-n{font-weight:var(--fw-semibold)}
.ms-dish-d{font-size:14px;color:var(--muted)}
.ms-dish-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ms-badges{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:6px!important}
.ms-bdg{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:var(--fw-semibold);line-height:1.3;padding:2px 8px;border-radius:999px;background:var(--card-2);border:1px solid var(--border);color:var(--ink-2)}
.ms-bdg .icon{inline-size:14px;block-size:14px}
.ms-bdg-halal{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.ms-bdg-veg{background:#EEF3E2;color:#3F5B1A;border-color:#CFDDB0}
.ms-bdg-al{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.ms-search{position:relative;margin-block-end:10px}
.ms-search .icon{position:absolute;inset-inline-start:14px;inset-block-start:50%;margin-block-start:-10px;color:var(--muted);pointer-events:none}
.ms-search .input{padding-inline-start:42px}
.ms-cart{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ms-cart li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding-block:6px;border-block-end:1px dashed var(--border)}
.ms-cart li.ms-empty{display:block;border:1px dashed var(--border-strong)}
.ms-cart-n em{font-style:normal;color:var(--muted);font-size:14px}
.ms-qty{display:inline-flex;align-items:center;gap:8px}
.ms-qty button{inline-size:36px;block-size:36px;border-radius:50%;border:1px solid var(--border-strong);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.ms-qty .icon{inline-size:16px;block-size:16px}
.ms-pop{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.ms-banner{background:var(--warn-bg);color:var(--warn-ink);border-block-end:1px solid var(--warn-line);padding:10px 16px;font-weight:var(--fw-semibold);font-size:15px}
.ms-open{font-weight:700;margin-block-end:8px!important}
.ms-open.is-open{color:var(--ok-ink)}
.ms-open.is-closed{color:var(--danger-ink)}
.ms-table{inline-size:100%;border-collapse:collapse;font-size:15px}
.ms-table th,.ms-table td{padding:8px 10px;border-block-end:1px solid var(--border);text-align:start}
.ms-table thead th{font-size:13px;color:var(--muted);font-weight:var(--fw-semibold)}
.ms-table .num{text-align:end;font-variant-numeric:tabular-nums}

/* photos, before and after */
.ms-thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.ms-thumb{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;border:1px solid var(--border)}
.ms-thumb img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.ms-thumb button{position:absolute;inset-block-start:4px;inset-inline-end:4px;inline-size:30px;block-size:30px;border-radius:50%;background:rgba(46,40,34,.88);color:#fff;border:0;display:grid;place-items:center;cursor:pointer}
.ms-thumb .icon{inline-size:16px;block-size:16px}
.ms-plain{margin-block-end:14px}
.ms-ba{--p:50%;position:relative;aspect-ratio:5/3;border-radius:16px;overflow:hidden;border:1px solid var(--border);direction:ltr;inline-size:100%;max-inline-size:640px;margin-inline:auto}
.ms-ba-l,.ms-ba-r{position:absolute;inset:0}
.ms-ba-r{clip-path:inset(0 0 0 var(--p))}
.ms-ba-svg{inline-size:100%;block-size:100%;display:block}
.ms-ba-line{position:absolute;inset-block:0;inset-inline-start:var(--p);inline-size:3px;margin-inline-start:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(46,40,34,.4);pointer-events:none}
.ms-ba-line i{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:34px;block-size:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;border:2px solid var(--a);box-shadow:var(--shadow-2)}
.ms-ba input{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;cursor:ew-resize;margin:0}
.ms-ba:focus-within{outline:3px solid var(--a);outline-offset:2px}
.ms-ba-tag{position:absolute;inset-block-end:10px;padding:3px 10px;border-radius:999px;background:rgba(46,40,34,.9);color:#fff;font-size:13px;font-weight:var(--fw-semibold);pointer-events:none}
.ms-ba-t1{inset-inline-start:10px}
.ms-ba-t2{inset-inline-end:10px}

/* review card and app note */
.ms-qrwrap{display:grid;gap:16px}
@container site (min-width:700px){.ms-qrwrap{grid-template-columns:auto minmax(0,1fr);align-items:center}}
.ms-qrcard{background:#fff;border:2px dashed var(--a);border-radius:16px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;max-inline-size:320px;inline-size:100%;margin-inline:auto}
.ms-qr{inline-size:120px;block-size:120px;color:var(--ink)}
.ms-qr-name{font:700 18px/1.2 var(--font-serif);color:var(--a)}
.ms-qr-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;text-align:center}
.ms-qr-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ms-appnote{align-items:center}
.ms-phone{inline-size:170px;block-size:300px;border:8px solid #2E2822;border-radius:30px;background:var(--as);padding:22px 12px;margin-inline:auto}
.ms-ph-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
.ms-ph-grid i{display:block;aspect-ratio:1;border-radius:12px;background:rgba(46,40,34,.2)}
.ms-ph-app{display:flex;flex-direction:column;align-items:center;gap:2px;min-inline-size:0}
.ms-ph-app b{inline-size:100%;aspect-ratio:1;border-radius:12px;background:var(--a);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--font-sans)}
.ms-ph-app em{font-size:13px;font-style:normal;color:var(--ink);inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.ms-steps{margin:0 0 12px;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.ms-files{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ms-files li{display:flex;gap:8px;align-items:center;font-size:14px;min-inline-size:0}
.ms-files li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-files em{margin-inline-start:auto;font-style:normal;color:var(--muted)}
.ms-files .icon{inline-size:16px;block-size:16px;flex:none}
.ms-mail p{margin:0}

/* assistant chat */
.ms-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-block-size:260px;overflow-y:auto}
.ms-log:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.ms-log li>span{display:inline-block;padding:8px 12px;border-radius:14px;max-inline-size:92%}
.ms-bot>span{background:var(--as);color:var(--ink)}
.ms-user{align-self:flex-end}
.ms-user>span{background:var(--a);color:#fff}
.ms-bot em{display:block;font-size:13px;font-style:normal;color:var(--muted);margin-block-start:2px;margin-inline-start:6px}
.ms-bot.is-warn>span{background:var(--warn-bg);color:var(--warn-ink)}

/* faq inside the frame */
.ms-faq{max-inline-size:none}

/* cinematic hero on the six samples (a stock photo under a dark scrim; business-samples-demos.js adds the picture and wraps the words) */
.ms-hero-img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;z-index:0}
.ms-hero-media::before{background:linear-gradient(180deg,rgba(8,14,26,.62) 0%,rgba(8,14,26,.92) 100%)}
.ms-hero-media .ms-seg button:not([aria-pressed="true"]){background:#fff;color:#1b2a3a}