/* sahra-welcome.css — AED 50 first-order offer bar + email capture modal.
   Sits ABOVE .sb-topbar so the geo-aware delivery rotator in sahra-market.js
   is untouched. sahra-welcome.js owns --topbar-h and sets it to the SUM of
   both bars, because body.has-topbar nav{top:var(--topbar-h)} positions the
   fixed nav and #s-hero sizes off it.
   Faint layers are named from the contrast-guard decorative list
   (sheen/glow/scrim/ring/rule); no text rule is muted with opacity. */

/* The bar lives INSIDE .sb-topbar (see the js header). .sb-topbar carries
   padding:9px 16px, 8px 12px under 560px — the wrap cancels it so the gold
   band bleeds the full width and sits above the delivery line. */
.sb-topbar.sbw-host{padding-top:0}
.sbw-wrap{position:relative;margin:0 -16px 9px}
@media(max-width:560px){.sbw-wrap{margin:0 -12px 8px}}
/* no .sb-topbar to sit inside (every page but the homepage, shop and previews): the
   negative margins cancel a padding that is not there and just overflow the viewport */
.sbw-wrap.sbw-solo{margin:0}

.sbw-bar{
  position:relative;z-index:62;display:block;width:100%;border:0;cursor:pointer;
  background:linear-gradient(101deg,#F2C98C 0%,#F7DCAF 38%,#E7B872 72%,#F2C98C 100%);
  color:#33271B;font-family:var(--mono,'Space Mono',monospace);
  font-size:11.5px;letter-spacing:2px;text-transform:uppercase;line-height:1.45;
  padding:10px 16px;text-align:center;overflow:hidden;
  -webkit-appearance:none;appearance:none;
}
.sbw-bar:hover{background:linear-gradient(101deg,#F7DCAF 0%,#FCE8C6 38%,#EFC384 72%,#F7DCAF 100%)}
.sbw-bar:focus-visible{outline:3px solid #33271B;outline-offset:-3px}
.sbw-bar-in{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.sbw-amt{font-weight:700;letter-spacing:2.4px}
.sbw-sep{color:#7E4114}
.sbw-go{
  display:inline-flex;align-items:center;gap:6px;
  background:#33271B;color:#F2C98C;border-radius:999px;
  padding:4px 13px;letter-spacing:1.6px;font-size:10.5px;white-space:nowrap;
}
.sbw-bar:hover .sbw-go{background:#14102A}
/* decorative — carries no words */
.sbw-sheen{
  position:absolute;top:0;left:-40%;width:28%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 50%,rgba(255,255,255,0) 100%);
  animation:sbw-sweep 4.6s cubic-bezier(.5,0,.4,1) infinite;
}
@keyframes sbw-sweep{0%{left:-40%}55%{left:118%}100%{left:118%}}
.sbw-dot{width:6px;height:6px;border-radius:50%;background:#A95A21;animation:sbw-pulse 1.7s ease-in-out infinite}
@keyframes sbw-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.55)}}
@media(max-width:620px){
  .sbw-bar{font-size:10px;letter-spacing:1.1px;padding:9px 12px}
  .sbw-bar-in{gap:7px}
  .sbw-go{font-size:9.5px;letter-spacing:1.1px;padding:4px 10px}
  .sbw-hide-sm{display:none}
}

/* ---------------------------------------------------------------- modal */
.sbw-modal[hidden]{display:none!important}
.sbw-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.sbw-scrim{position:absolute;inset:0;background:rgba(10,8,18,.80);backdrop-filter:blur(3px)}
.sbw-card{
  position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:#14102A;color:#F7EFE2;border:1px solid rgba(242,201,140,.42);
  border-radius:18px;padding:38px 30px 30px;text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:sbw-in .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes sbw-in{from{transform:translateY(22px) scale(.97)}to{transform:none}}
.sbw-glow{
  position:absolute;left:50%;top:-58px;width:300px;height:170px;margin-left:-150px;
  background:radial-gradient(ellipse at center,rgba(242,201,140,.30),rgba(242,201,140,0) 70%);
  pointer-events:none;
}
.sbw-close{
  position:absolute;right:10px;top:8px;background:none;border:0;color:#C9BEA8;
  font-size:27px;line-height:1;padding:6px 12px;cursor:pointer;
}
.sbw-close:hover{color:#F2C98C}
.sbw-eyebrow{
  font-family:var(--mono,'Space Mono',monospace);font-size:10.5px;letter-spacing:3px;
  text-transform:uppercase;color:#F2C98C;margin-bottom:16px;
}
.sbw-big{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:700;
  font-size:clamp(58px,15vw,88px);line-height:.92;color:#F2C98C;letter-spacing:-.02em;
}
.sbw-big small{display:block;font-size:.26em;letter-spacing:3px;font-weight:400;
  font-family:var(--mono,'Space Mono',monospace);color:#F7EFE2;margin-top:12px;text-transform:uppercase}
/* Rebuilt 19 Sep (Faheem: the eye must land on BOTH fifties; the card was
   crowded and the photo small and off to one side). Three moves: the tote is a
   full-bleed band across the top of the card, the two halves of the offer are a
   symmetrical pair at equal weight, and the three bullets became one line of
   fine print. The card pads 38px 30px, so the band cancels that with negative
   margins and takes the card's own top radius. */
.sbw-hero{
  position:relative;margin:-38px -30px 20px;border-radius:17px 17px 0 0;overflow:hidden;
  background:#241C3A;aspect-ratio:1160/580;
}
.sbw-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sbw-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,42,0),rgba(20,16,42,.88));
}
.sbw-hero figcaption{
  position:absolute;left:0;right:0;bottom:10px;z-index:2;
  font-family:var(--mono,'Space Mono',monospace);font-size:10.5px;letter-spacing:2.2px;
  text-transform:uppercase;color:#F2C98C;
}
.sbw-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px;
}
.sbw-tile{
  border:1px solid rgba(242,201,140,.38);border-radius:12px;
  background:rgba(242,201,140,.07);padding:16px 10px 14px;
}
.sbw-tile b{
  display:block;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size-adjust:.44;
  font-weight:700;font-size:clamp(34px,8.6vw,46px);line-height:.95;color:#F2C98C;letter-spacing:-.01em;
  white-space:nowrap;
}
.sbw-tile span{
  display:block;margin-top:8px;font-family:var(--mono,'Space Mono',monospace);
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#F7EFE2;line-height:1.7;
}
/* The AED 100 sum (19 Sep). Set as a receipt total, not a third tile: a hairline
   above it, no border of its own and no gold fill, so it reads as the total of
   the two AED 50 tiles rather than another item on the list — and so the only
   gold-FILLED block on the card stays the submit button. The figure is serif at
   32–38px, between the tiles' 46 and the body copy, so the eye lands on it third
   without it outranking the two halves it is made of. */
.sbw-sum{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 10px;
  margin:0 0 18px;padding-top:13px;border-top:1px solid rgba(242,201,140,.30);
}
.sbw-sum small{font-family:var(--mono,'Space Mono',monospace);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:#F7EFE2}
.sbw-sum b{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size-adjust:.44;
  font-weight:700;font-size:clamp(32px,8vw,38px);line-height:1;color:#F2C98C;
  letter-spacing:-.01em;white-space:nowrap}
.sbw-plus{
  font-family:var(--sans,Jost,system-ui,sans-serif);font-size:15px;line-height:1.4;
  color:#F7EFE2;margin:12px 0 4px;
}
.sbw-plus span{color:#F2C98C;font-weight:600;margin-right:4px}
.sbw-plus b{color:#F2C98C;font-weight:600;white-space:nowrap}
.sbw-rule{width:58px;height:2px;background:#F2C98C;margin:20px auto}
.sbw-list{list-style:none;margin:0 0 22px;padding:0;text-align:left;display:inline-block}
.sbw-list li{
  font-family:var(--sans,Jost,system-ui,sans-serif);font-size:14.5px;line-height:1.5;
  color:#F7EFE2;padding:7px 0 7px 26px;position:relative;
}
.sbw-list li::before{content:"✦";position:absolute;left:0;top:7px;color:#F2C98C}
.sbw-form{display:flex;gap:8px;margin-bottom:12px}
.sbw-form input{
  flex:1;min-width:0;background:#0C0A1C;border:1px solid rgba(242,201,140,.40);
  border-radius:8px;padding:14px 15px;color:#F7EFE2;font-size:16px;
  font-family:var(--sans,Jost,system-ui,sans-serif);
}
.sbw-form input::placeholder{color:#9A9184}
.sbw-form input:focus{outline:2px solid #F2C98C;outline-offset:1px;border-color:#F2C98C}
.sbw-form button{
  background:#F2C98C;color:#33271B;border:0;border-radius:8px;cursor:pointer;
  padding:14px 22px;font-family:var(--mono,'Space Mono',monospace);
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
}
.sbw-form button:hover{background:#FCE8C6}
.sbw-form button:disabled{cursor:default;background:#8C7A5C;color:#2A2118}
.sbw-fine{font-family:var(--sans,Jost,system-ui,sans-serif);font-size:12px;line-height:1.5;color:#C9BEA8}
.sbw-err{display:none;color:#F0A882;font-size:13px;margin-bottom:10px;font-family:var(--sans,Jost,system-ui,sans-serif)}
.sbw-modal.is-err .sbw-err{display:block}
.sbw-modal.is-err .sbw-form input{border-color:#F0A882}

/* success */
.sbw-won{display:none}
.sbw-modal.is-won .sbw-won{display:block}
.sbw-modal.is-won .sbw-ask{display:none}
.sbw-code{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:2px dashed #F2C98C;border-radius:10px;padding:15px 18px;margin:6px 0 16px;
}
.sbw-code b{
  font-family:var(--mono,'Space Mono',monospace);font-size:21px;letter-spacing:3px;color:#F2C98C;font-weight:700;
}
.sbw-copy{
  background:none;border:1px solid #F2C98C;color:#F2C98C;border-radius:6px;cursor:pointer;
  padding:8px 13px;font-family:var(--mono,'Space Mono',monospace);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
}
.sbw-copy:hover{background:#F2C98C;color:#33271B}
.sbw-shop{
  display:block;background:#F2C98C;color:#33271B;text-decoration:none;border-radius:8px;
  padding:15px;font-family:var(--mono,'Space Mono',monospace);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;
}
.sbw-shop:hover{background:#FCE8C6}

/* side by side the input collapses to ~135px on a 390px phone and the
   placeholder truncates — on the one control the whole offer depends on */
@media(max-width:430px){
  .sbw-form{flex-direction:column}
  .sbw-form button{width:100%}
  .sbw-card{padding:34px 22px 26px}
  .sbw-list li{font-size:14px;padding-left:24px}
  .sbw-hero{margin:-34px -22px 16px;border-radius:17px 17px 0 0}
  .sbw-pair{gap:9px}
  .sbw-tile{padding:13px 8px 12px}
  .sbw-tile span{font-size:9.5px;letter-spacing:1.6px}
  .sbw-plus{font-size:14.5px}
  .sbw-sum{gap:0 8px;padding-top:11px}
  .sbw-sum small{font-size:9.5px;letter-spacing:1.6px}
}

/* Short viewports (iPhone SE, 667px tall): the sum line pushed the card past
   calc(100vh - 40px), which put SEND MY CODE below the fold — on the one control
   the whole offer depends on. Reclaimed from the photo band and the sum's own
   spacing rather than from the fine print, which now carries the real conditions. */
@media(max-height:700px){
  .sbw-hero{aspect-ratio:1160/460}
  .sbw-sum{margin-bottom:12px;padding-top:10px}
  .sbw-card{padding-bottom:22px}
  .sbw-pair{margin-bottom:16px}
}

@media(prefers-reduced-motion:reduce){
  .sbw-sheen,.sbw-dot{animation:none}
  .sbw-sheen{display:none}
  .sbw-card{animation:none}
}