/* tafaddal site layer (design "Option E"): maroon hero with lattice and Omani door, arch-window steps,
   occasion tiles, bottom estimate bar, welcome section, and the dark-mode switch. Loaded after brand.css. */
:root{--e-maroon:#8A1538;--e-cream:#F7F1E8;--e-ink:#2A2326;--e-gold:#B8975A;--e-gold-d:#9E7E45;--e-gold-l:#D4B97A;
  --leaf:var(--e-cream);--knob:var(--e-maroon);--step-edge:var(--e-gold-d);--tile:#FFFFFF;--tile-text:#2A2326;--tile-line:#D9C3A5;
  --dock:var(--e-ink);--dock-text:var(--e-cream)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--step-edge:var(--e-gold-l);--tile:#F7F1E8;--tile-text:#2A2326;--tile-line:#2A2326;--dock:var(--e-cream);--dock-text:var(--e-ink)}}
:root[data-theme="dark"]{--step-edge:var(--e-gold-l);--tile:#F7F1E8;--tile-text:#2A2326;--tile-line:#2A2326;--dock:var(--e-cream);--dock-text:var(--e-ink)}
#occBg{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- maroon band: hero on the order page, masthead on the others ---------- */
.hero,.band{position:relative;background:var(--e-maroon);color:var(--e-cream);overflow:hidden}
.hero a,.band a{color:var(--e-cream)}
.lattice{position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F7F1E8' stroke-opacity='0.07' stroke-width='1'%3E%3Crect x='19' y='19' width='26' height='26'/%3E%3Crect x='19' y='19' width='26' height='26' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 32h6M58 32h6M32 0v6M32 58v6'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 92px,#000 170px);mask-image:linear-gradient(to bottom,transparent 0,transparent 92px,#000 170px)}
.band .lattice{-webkit-mask-image:none;mask-image:none}
.ewrap{position:relative;max-width:1180px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
.etop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}
.ehome{display:flex;align-items:center;min-height:44px;padding:6px 0}
.hero .tf-logo,.band .tf-logo{display:block;width:136px;max-width:none;height:auto;margin:0}
.hero .tf-logo .m,.band .tf-logo .m,.wm .m{fill:var(--e-cream)}
.hero .tf-logo .g,.band .tf-logo .g,.wm .g{fill:var(--e-gold);stroke:none}
.etools{display:flex;align-items:center}
.elang{display:flex;align-items:center;background:none!important;padding:0!important;border-radius:0!important;direction:ltr}
.hero .lg,.band .lg{min-width:44px;min-height:44px;padding:0 6px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--e-cream)!important;font:400 14px 'Lexend',system-ui,sans-serif!important;cursor:pointer}
.hero .lg[lang="ar"],.band .lg[lang="ar"]{font-family:'Almarai',system-ui,sans-serif!important;font-size:15px!important}
.hero .lg[aria-pressed="true"],.band .lg[aria-pressed="true"]{font-weight:600!important;text-decoration:underline;text-underline-offset:6px}
.elang i{width:1px;height:14px;background:var(--e-cream);opacity:.6}
.tf-dark{width:44px;height:44px;margin-inline-start:6px;display:grid;place-items:center;border:0;background:none;color:var(--e-cream);cursor:pointer;border-radius:50%;padding:0}
.tf-dark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.tf-dark .sun{display:none}.tf-dark[aria-pressed="true"] .sun{display:block}.tf-dark[aria-pressed="true"] .moon{display:none}
.hero :focus-visible,.band :focus-visible{outline:2px solid var(--e-cream)!important;outline-offset:3px}

.hero-grid{display:grid;padding-top:28px}
.copy{display:flex;flex-direction:column;min-height:296px}
.big{position:relative;margin:0;font-weight:800;color:var(--e-cream);text-align:start;text-wrap:initial}
.big-ar{font-family:'Almarai','Geeza Pro','Noto Kufi Arabic',Tahoma,sans-serif;font-size:48px;line-height:1.4;letter-spacing:0}
.big-en{font-family:'Lexend',system-ui,sans-serif!important;font-weight:500!important;font-size:clamp(34px,10.4vw,42px);line-height:1.12;letter-spacing:-.025em!important}
.big-ar{font-weight:800!important;letter-spacing:0!important}
/* the big tagline follows the page language: English with the logo wordmark, or Arabic with a gold shadda */
html[lang="en"] .big-ar,html[lang="ar"] .big-en{display:none!important}
html[dir="ltr"] .big-ar{text-align:left}
html[dir="rtl"] .big-en{text-align:right}
.nw{white-space:nowrap}.word{position:relative}
.bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.shadda{display:none}
/* the gold shadda from the logo sits on the ض; the letter is its own span, joined to its neighbours with zero-width joiners */
.dad{position:relative}
.dad .shd{position:absolute;left:50%;top:-.04em;width:.5em;height:auto;transform:translateX(-50%);fill:var(--e-gold);pointer-events:none;overflow:visible}
.wm{display:inline-block;height:.833em;width:auto;vertical-align:-.0667em;margin-inline-start:.04em}
.esub{margin:18px 0 0;max-width:34ch;font-size:16px;line-height:1.5;color:var(--e-cream)}
html[lang="ar"] .esub{font-size:17px;line-height:1.7}
.eacts{display:flex;align-items:center;gap:24px;margin-top:26px;flex-wrap:wrap}
.ebtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:0;border-radius:999px;font-weight:600;font-size:16px;line-height:1;text-decoration:none;cursor:pointer}
.ebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .ebtn svg{transform:scaleX(-1)}
.hero .ebtn-c{background:var(--e-cream);color:var(--e-maroon)}
.hero .acct{all:unset;display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-underline-offset:6px;cursor:pointer;color:var(--e-cream)}
.door{display:block;width:54%;max-width:340px;margin-top:40px;margin-inline-start:auto;line-height:0}
.door svg{width:100%;height:auto;display:block}
[dir="rtl"] .door svg{transform:scaleX(-1)}
.door .leaf{fill:var(--leaf)}.door .trim{fill:none;stroke:var(--e-gold);stroke-width:2}.door .knob{fill:var(--knob)}

/* ---------- order form: steps as arch windows ---------- */
.wrap{padding-top:8px}
.top{display:block!important;min-height:0}
.bar{position:static!important;margin:36px 0 0!important;padding:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
.steps{position:relative;display:flex!important;justify-content:space-between;gap:0!important;overflow:visible!important;margin:0!important;padding:0!important;max-width:560px}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:16px;height:1px;background:var(--step-edge);opacity:.6}
.st{position:relative;flex:1 1 0!important;display:flex!important;flex-direction:column;align-items:center;gap:6px;padding:0 0 4px!important;border:0!important;background:none!important;color:var(--ink)!important;font-size:13px!important;font-weight:400!important;text-align:center!important;white-space:nowrap;cursor:pointer;min-height:56px}
html[lang="ar"] .st{font-size:15px!important}
.st i{display:grid!important;place-items:center;width:30px;height:32px;padding-top:3px;border-radius:15px 15px 3px 3px;border:1.5px solid var(--step-edge);background:var(--tile);color:var(--tile-text)!important;font:500 13px 'Lexend',system-ui,sans-serif!important;font-style:normal}
.st[aria-current="step"]{font-weight:700!important;border:0!important}
.st[aria-current="step"] i{background:var(--e-maroon);border-color:var(--e-maroon);color:var(--e-cream)!important}
.st:hover i{border-color:var(--e-maroon)}
.panel{padding-top:28px!important}
.panel>h2{font-size:30px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.15!important}
html[lang="ar"] .panel>h2{font-weight:800!important;letter-spacing:0!important}

/* ---------- occasion tiles ---------- */
.evs{grid-template-columns:repeat(2,1fr)!important;gap:1px!important;background:var(--tile-line);border:1px solid var(--tile-line);border-radius:14px;overflow:hidden}
.ev>span{position:relative;border-radius:0!important;background:var(--tile)!important;color:var(--tile-text)!important;min-height:96px!important;padding:14px!important;gap:14px!important;box-shadow:none!important;font-weight:500!important}
.ev .eic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ev .eck{position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center}
.ev .eck svg{width:12px;height:12px;fill:none;stroke:var(--e-maroon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.ev input:checked+span{background:var(--e-maroon)!important;color:var(--e-cream)!important}
.ev input:checked+span .eck{background:var(--e-cream);border-color:var(--e-cream)}
.ev input:checked+span .eck svg{visibility:visible}
.ev input:focus-visible+span{outline:2px solid var(--e-maroon);outline-offset:-4px}
.ev:hover>span{filter:brightness(.97)}

/* ---------- bottom bar: back, estimate, next ---------- */
#form .nav{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;align-items:center;gap:10px;margin-top:32px;padding:8px;background:var(--dock);color:var(--dock-text);border:1px solid var(--dock);border-radius:999px;box-shadow:0 16px 30px -14px rgba(23,18,20,.6)}
#form .nav #bar{flex:1;min-width:0;padding-inline:14px;font-size:14px;line-height:1.3}
#form .nav #bar .big{display:block;font-family:'Lexend',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--dock-text)!important}
#form .nav #bar::before{content:attr(data-lbl);display:block;font-size:12px;opacity:.8}
#form .nav #bar:empty::before{content:attr(data-empty)}
#form .nav .btn{min-height:48px;border-radius:999px!important;padding:0 22px;font-weight:600}
#form .nav #nx{background:var(--e-maroon)!important;color:var(--e-cream)!important;margin-inline-start:auto}
#form .nav #nx[disabled]{background:transparent!important;color:var(--dock-text)!important;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.55;cursor:not-allowed}
#form .nav #bk{background:transparent!important;color:var(--dock-text)!important;box-shadow:inset 0 0 0 1.5px currentColor}
#form .nav :focus-visible{outline-color:var(--dock-text)!important}

/* ---------- welcome, what we make, samples, WhatsApp ---------- */
.more{margin-top:48px;padding:24px 0 8px;border-top:1px solid var(--tile-line)}
.more h3{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
html[lang="ar"] .more h3{font-weight:800;letter-spacing:0}
.more .what{margin:8px 0 0;max-width:46ch}
.samples{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 8px;padding:0;list-style:none}
.samples li{display:flex;flex-direction:column;gap:8px;font-size:13px}
.samples svg{width:100%;height:auto;display:block;border-radius:10px;outline:1px solid rgba(150,135,140,.5);outline-offset:-1px;box-shadow:0 10px 24px -16px rgba(42,35,38,.7)}
.reach{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.reach .wa{background:var(--e-maroon);color:var(--e-cream)!important}
.reach .wa svg{width:20px;height:20px;fill:currentColor;stroke:none}
.reach p{margin:0;font-size:14px}

/* ---------- masthead on My orders and Staff ---------- */
.band{margin:0 0 8px}
.band .etop{padding-bottom:14px}
.band .home .tf-logo{width:136px}

@media (min-width:900px){
  .ewrap{padding:0 64px}
  .etop{padding-top:24px}
  .hero .tf-logo{width:168px}
  .lattice{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 110px,#000 200px);mask-image:linear-gradient(to bottom,transparent 0,transparent 110px,#000 200px)}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:72px;align-items:end;padding-top:20px}
  .copy{padding-bottom:96px;min-height:464px;justify-content:flex-end}
  .big-ar{font-size:76px;line-height:1.35}
  .big-en{font-size:60px}
  .esub{font-size:19px;max-width:32ch}
  html[lang="ar"] .esub{font-size:19px}
  .door{width:100%;max-width:330px;margin-top:0}
  .evs{grid-template-columns:repeat(5,1fr)!important}
  .ev>span{min-height:124px!important;padding:16px!important}
  .more{padding-top:40px}.samples{max-width:640px;gap:20px}.more h3{font-size:30px}
}
@media (forced-colors:active){.hero,.band{forced-color-adjust:auto}.ev input:checked+span{outline:2px solid Highlight}}

.band .langs{background:none!important;padding:0!important;box-shadow:none!important}
.band .top{margin:0!important;padding-bottom:14px}
.band .home{display:flex;align-items:center;min-height:44px}
.band h1{color:var(--e-cream)}
.band .top{flex-wrap:nowrap!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(input[type=email],input[type=text],input[type=tel],input[type=date],input[type=time],input[type=number],select,textarea){border-color:var(--e-gold-d)}}
:root[data-theme="dark"] :is(input[type=email],input[type=text],input[type=tel],input[type=date],input[type=time],input[type=number],select,textarea){border-color:var(--e-gold-d)}

/* finished steps: light maroon */
.st.done i{background:#E9C7D0;border-color:var(--e-maroon);color:var(--e-maroon)!important}
/* theme buttons and other chips: text on one line, wrapping neatly */
.chip.theme>span{white-space:nowrap}
/* date and time boxes stay inside the column on iPhone */
input[type=date],input[type=time]{display:block;width:100%!important;max-width:100%;min-width:0!important;box-sizing:border-box;-webkit-appearance:none;appearance:none;min-height:52px;text-align:start}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:start}
.grid2>*,.grid1>*,.f{min-width:0}
/* pin map */
.mapbox{margin-top:12px}
.pinmap{position:relative;height:300px;border-radius:14px;overflow:hidden;border:1px solid var(--tile-line);background:#e8e2d8;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;direction:ltr}
.pinmap:active{cursor:grabbing}
.pinmap .tl{position:absolute;inset:0}
.pinmap .tl img{position:absolute;left:0;top:0;width:256px;height:256px;max-width:none;pointer-events:none}
.pinmap .pm{position:absolute;left:0;top:0;width:30px;height:40px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pinmap .zm{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pinmap .zm button{width:44px;height:44px;border:0;background:#F7F1E8;color:#2A2326;font-size:22px;line-height:1;cursor:pointer}
.pinmap .zm button+button{border-top:1px solid #D9C3A5}
.pinmap .attr{position:absolute;right:0;bottom:0;padding:2px 6px;font-size:10px;background:rgba(247,241,232,.85);color:#2A2326}
.pinmap .attr a{color:#2A2326}
.pinmap:focus-visible{outline:2px solid var(--e-maroon);outline-offset:2px}
.mapfind{display:flex;gap:8px;margin-bottom:10px}
.mapfind input{flex:1;min-width:0}
.mapfind .btn{flex:none;min-height:48px;padding:0 22px;border-radius:999px}
.pinmap .pm[hidden]{display:none}
@media (min-width:900px){.pinmap{height:360px}}
/* about and questions */
.about{margin-top:28px}
.about h3{margin-bottom:8px}
.faq{margin-top:20px;border-top:1px solid var(--tile-line)}
.faq details{border-bottom:1px solid var(--tile-line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:12px 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--e-gold-d)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 14px;color:var(--ink2)}

/* keep the page from jumping when parts above change size */
html,body{overflow-anchor:none}

html.nosticky #form .nav{position:static!important}

/* photo upload */
.phup{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.phgrid{display:flex;flex-wrap:wrap;gap:10px}
.phgrid:empty{display:none}
.phit{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--tile-line);background:var(--tile)}
.phit img{width:100%;height:100%;object-fit:cover;display:block}
.phx{position:absolute;top:4px;inset-inline-end:4px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(42,35,38,.78);color:#F7F1E8;font-size:20px;line-height:1;cursor:pointer}
.phadd{align-self:flex-start;min-height:48px;display:inline-flex;align-items:center;cursor:pointer}
#f-phfile:focus-visible+.phadd{outline:2px solid var(--e-maroon);outline-offset:2px}
#phStat:empty{display:none}
/* keep a label clear of the hint text above it */
.panel .hint+.f,.panel .hint+.grid2,.panel .hint+.phup{margin-top:14px}
#photoMore .f{margin-top:16px!important}

/* place suggestions */
.mapsug{list-style:none;margin:-4px 0 10px;padding:4px;border:1px solid var(--tile-line);border-radius:14px;background:var(--tile);color:var(--tile-text);box-shadow:0 10px 24px -14px rgba(0,0,0,.5);max-height:300px;overflow:auto}
.mapsug li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;cursor:pointer;min-height:44px;justify-content:center}
.mapsug li+li{border-top:1px solid rgba(128,128,128,.18)}
.mapsug li:hover,.mapsug li:focus{background:rgba(138,21,56,.1);outline:none}
.mapsug b{font-weight:600}
.mapsug span{font-size:13px;opacity:.75}
.mapsug span:empty{display:none}

/* floating header: logo, language and dark mode stay on screen while scrolling */
.hero{padding-top:64px}
.hero .etop{position:fixed;top:0;left:0;right:0;z-index:60;margin:0;padding:10px max(20px,calc(50vw - 570px));background:rgba(138,21,56,.97);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);box-shadow:0 1px 0 rgba(247,241,232,.12),0 8px 20px -14px rgba(0,0,0,.6)}
.band{position:sticky;top:0;z-index:60}
@media (min-width:900px){.hero{padding-top:72px}.hero .etop{padding:12px max(64px,calc(50vw - 526px))}}

/* the header keeps the same layout in both languages: logo on the left, switches on the right */
.etop{direction:ltr}
.etop .lang,.etop .elang{direction:ltr}

/* dark mode: the top of the page turns from maroon to the brand's ink, with a soft maroon glow and gold pattern */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:radial-gradient(120% 70% at 85% 0%,rgba(138,21,56,.55),transparent 60%),#2A2326}
 :root:not([data-theme="light"]) .hero .etop,:root:not([data-theme="light"]) .band{background:rgba(42,35,38,.96)}
 :root:not([data-theme="light"]) .hero .lattice{filter:sepia(1) saturate(3) hue-rotate(-10deg);opacity:.9}
 :root:not([data-theme="light"]) .hero .ebtn-c{background:var(--e-maroon);color:var(--e-cream)}}
:root[data-theme="dark"] .hero{background:radial-gradient(120% 70% at 85% 0%,rgba(138,21,56,.55),transparent 60%),#2A2326}
:root[data-theme="dark"] .hero .etop,:root[data-theme="dark"] .band{background:rgba(42,35,38,.96)}
:root[data-theme="dark"] .hero .lattice{filter:sepia(1) saturate(3) hue-rotate(-10deg);opacity:.9}
:root[data-theme="dark"] .hero .ebtn-c{background:var(--e-maroon);color:var(--e-cream)}

/* تفضّل stays one joined word: a gold copy with the shadda sits underneath, the cream word without it covers the letters,
   so only the shadda shows in gold. No measuring, works with any font. */
.big-ar .word{position:relative;display:inline-block;white-space:nowrap}
.big-ar .w-gold{position:absolute;top:0;right:0;color:var(--e-gold);white-space:nowrap}
.big-ar .w-base{position:relative;color:var(--e-cream);-webkit-text-stroke:.8px var(--e-cream)}
.dad,.dad .shd{display:none}