/* Sign-in / sign-up screen: one full-bleed shopfront photo, a white pitch over it, and a clean white form card.
   Every desktop size is in units of a 1672 x 941 artboard (--u), so the composition holds from laptop to wide screens.
   Phones stack the photo and pitch above the card on a 390 x 844 artboard. */
body.merchant .auth {
  --u: max(.62px, min(calc(100vw / 1672), calc(100dvh / 941)));
  --au-ink: #172422; --au-green: #285144; --au-gold: #F0BC1E; --au-gold-soft: #F7CB45; --au-link: #8A5F00;
  --au-2: #51655E; --au-line: #DCE5DF;
  position: relative; isolation: isolate; display: flex; min-height: 100dvh; overflow: hidden; background: var(--au-ink);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* ---------- the plate: nothing in the photo is drawn in code, it only drifts ---------- */
body.merchant .auth .au-plate { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
body.merchant .auth .au-plate::before { content: ""; position: absolute; inset: -3%; background: var(--au-ink) url("/talaboona-login.webp") center 34% / cover; animation: au-drift 28s ease-in-out infinite alternate; }
body.merchant .auth .au-plate::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(12,28,22,.62), rgba(12,28,22,0) 58%),
    linear-gradient(to bottom, rgba(12,28,22,.5), rgba(12,28,22,0) calc(190 * var(--u))),
    linear-gradient(to top, rgba(12,28,22,.9), rgba(12,28,22,.45) calc(260 * var(--u)), rgba(12,28,22,0) calc(520 * var(--u))); }
@keyframes au-drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.07) translateY(-1.2%); } }

/* ---------- pitch (over the photo) ---------- */
body.merchant .auth .a-art { order: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; margin: 0; border-radius: 0;
  background: none; color: #fff; padding: calc(57 * var(--u)) calc(92.5 * var(--u)) calc(74 * var(--u)) calc(60 * var(--u)); }
body.merchant .auth .a-art::before, body.merchant .auth .a-art::after { display: none; }
body.merchant .auth .au-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.merchant .auth .au-logo { display: inline-flex; align-items: center; gap: calc(14 * var(--u)); color: #fff; text-decoration: none;
  font-family: Alexandria, sans-serif; font-weight: 700; font-size: max(22px, calc(35.5 * var(--u))); line-height: 1.3; }
body.merchant .auth .au-tile { width: max(36px, calc(48 * var(--u))); height: max(36px, calc(48 * var(--u))); border-radius: max(10px, calc(12 * var(--u))); background: var(--au-ink); display: grid; place-items: center; overflow: hidden; flex: none; }
body.merchant .auth .au-tile svg { width: 100%; height: 100%; }
body.merchant .auth .au-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border-radius: 10px; color: var(--au-gold-soft); text-decoration: none;
  font-size: max(14px, calc(17.4 * var(--u))); font-weight: 600; }
body.merchant .auth .au-back svg { width: 1.1em; height: 1.1em; }
@media (hover: hover) { body.merchant .auth .au-back:hover { color: #fff; } }
body.merchant .auth .au-h { font-family: Alexandria, sans-serif; font-weight: 600; font-size: max(26px, calc(52 * var(--u))); line-height: 1.42; color: #fff; }
body.merchant .auth .au-h span { display: block; white-space: nowrap; }
body.merchant .auth .au-s { margin-top: calc(19 * var(--u)); max-width: calc(640 * var(--u)); font-size: max(15px, calc(20 * var(--u))); line-height: 1.8; font-weight: 500; color: rgba(255,255,255,.88); min-height: 3.6em; }
body.merchant .auth .au-dots { display: flex; align-items: center; gap: calc(9 * var(--u) + 2px); margin-top: calc(35.5 * var(--u)); }
body.merchant .auth .au-dots button { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .35s cubic-bezier(.22,1,.36,1), background-color .25s; }
body.merchant .auth .au-dots button::after { content: ""; position: absolute; inset: -17px -6px; }
body.merchant .auth .au-dots button[aria-selected="true"] { width: 36px; background: var(--au-gold); }
body.merchant .auth .au-dots button:focus-visible, body.merchant .auth .au-back:focus-visible, body.merchant .auth .au-logo:focus-visible { outline: 2px solid var(--au-gold); outline-offset: 4px; }
body.merchant .auth .au-swap { animation: au-swap .5s cubic-bezier(.22,1,.36,1); }
@keyframes au-swap { from { opacity: 0; transform: translateY(10px); } }

/* ---------- the card ---------- */
body.merchant .auth .a-side { order: 1; flex: 0 0 auto; width: calc(742.4 * var(--u)); min-width: 420px; margin: calc(18 * var(--u)) 0 calc(22.5 * var(--u)) calc(18 * var(--u));
  padding: 32px 24px; background: #FEFEFE; border-radius: max(18px, calc(20 * var(--u))); display: grid; place-items: center; overflow: visible; }
body.merchant .auth .a-side::before, body.merchant .auth .a-home, body.merchant .auth .a-mark { display: none; }
body.merchant .auth .a-inner { max-width: max(340px, calc(559 * var(--u))); }
body.merchant .auth .a-title { margin-top: 0; font-family: Alexandria, sans-serif; font-weight: 700; font-size: max(30px, calc(46 * var(--u))); line-height: 1.4; color: #000; }
body.merchant .auth .a-sub { margin-top: 6px; font-size: max(15px, calc(19 * var(--u))); line-height: 1.7; color: var(--au-2); }
body.merchant .auth .a-card { margin-top: max(22px, calc(34 * var(--u))); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.merchant .auth .a-seg { border-radius: 999px; background: #EEF2EF; margin-bottom: max(18px, calc(26 * var(--u))); }
body.merchant .auth .a-seg span { height: max(44px, calc(52 * var(--u))); border-radius: 999px; font-size: max(14.5px, calc(17.4 * var(--u))); color: var(--au-2); }
body.merchant .auth .a-seg input:checked + span { color: #fff; }
body.merchant .auth .a-seg input:focus-visible + span { box-shadow: 0 0 0 4px rgba(240,188,30,.5); }
body.merchant .auth .a-thumb { border-radius: 999px; background: var(--au-ink); box-shadow: none; }
body.merchant .auth .k-label { font-size: max(14.5px, calc(17.4 * var(--u))); font-weight: 600; color: var(--au-ink); margin-bottom: 8px; }
body.merchant .auth .k-input { height: max(52px, calc(66 * var(--u))); border-radius: max(10px, calc(10 * var(--u))); border: 1px solid var(--au-line); background: #fff; font-size: max(16px, calc(18 * var(--u)));
  transition: border-color .16s, box-shadow .16s; }
body.merchant .auth .k-input::placeholder { color: #95999F; }
body.merchant .auth .k-input:focus { outline: none; border-color: var(--au-ink); box-shadow: 0 0 0 4px rgba(240,188,30,.35); }
body.merchant .auth .a-eye { color: var(--au-2); }
body.merchant .auth .a-eye:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(240,188,30,.5); }
body.merchant .auth .a-submit { height: max(54px, calc(66 * var(--u))); margin-top: max(22px, calc(34 * var(--u))); border-radius: 999px; background: var(--au-ink); color: var(--au-gold);
  font-size: max(16.5px, calc(20 * var(--u))); font-weight: 700; transition: background-color .2s, box-shadow .2s, transform .12s; }
body.merchant .auth .a-submit .a-spin { border-color: rgba(240,188,30,.3); border-top-color: var(--au-gold); }
@media (hover: hover) { body.merchant .auth .a-submit:hover { background: #000; box-shadow: 0 14px 28px -14px rgba(0,0,0,.55); } }
body.merchant .auth .a-submit:active { transform: scale(.985); }
body.merchant .auth .a-submit:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(240,188,30,.6); }
body.merchant .auth #authForgot { margin-top: 10px; min-height: 44px; color: var(--au-link); font-weight: 600; text-decoration: none; }
@media (hover: hover) { body.merchant .auth #authForgot:hover { text-decoration: underline; text-underline-offset: 4px; } }
body.merchant .auth .k-hint { color: var(--au-2); }

/* ---------- entrance: one sequence, about 1.6s ---------- */
body[data-auth="out"].merchant .auth .a-side { animation: au-card .9s cubic-bezier(.16,1,.3,1) .1s backwards; }
body[data-auth="out"].merchant .auth .au-top { animation: au-up .7s cubic-bezier(.22,1,.36,1) .05s backwards; }
body[data-auth="out"].merchant .auth .au-h span { animation: au-wipe .9s cubic-bezier(.16,1,.3,1) backwards; }
body[data-auth="out"].merchant .auth .au-h span:nth-child(1) { animation-delay: .3s; }
body[data-auth="out"].merchant .auth .au-h span:nth-child(2) { animation-delay: .4s; }
body[data-auth="out"].merchant .auth .au-s { animation: au-up .7s cubic-bezier(.22,1,.36,1) .62s backwards; }
body[data-auth="out"].merchant .auth .au-dots { animation: au-up .7s cubic-bezier(.22,1,.36,1) .74s backwards; }
@keyframes au-card { from { opacity: 0; transform: translateY(18px) scale(.99); } }
@keyframes au-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes au-wipe { from { opacity: 0; transform: translateY(16px); clip-path: inset(100% 0 -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }

/* ---------- tablet portrait and phones: photo and pitch on top, card at the foot ---------- */
@media (max-width: 899px), (orientation: portrait) and (max-width: 1100px) {
  body.merchant .auth { --u: min(calc(100vw / 390), calc(100dvh / 844), 1.7px); flex-direction: column; }
  body.merchant .auth .au-plate::before { background-position: center 30%; }
  body.merchant .auth .au-plate::after { background:
    linear-gradient(to bottom, rgba(12,28,22,.62), rgba(12,28,22,.12) calc(120 * var(--u)), rgba(12,28,22,.2) calc(170 * var(--u)), rgba(12,28,22,.92) calc(330 * var(--u)), var(--au-ink) calc(420 * var(--u))); }
  body.merchant .auth .a-art { flex: 1 1 auto; min-height: calc(250 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
  body.merchant .auth .au-logo { font-size: calc(22 * var(--u)); gap: calc(10 * var(--u)); }
  body.merchant .auth .au-tile { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); }
  body.merchant .auth .au-back { font-size: calc(13.5 * var(--u)); }
  body.merchant .auth .au-pitch { margin-top: calc(40 * var(--u)); }
  body.merchant .auth .au-h { font-size: calc(25 * var(--u)); line-height: 1.45; }
  body.merchant .auth .au-s { margin-top: calc(8 * var(--u)); max-width: none; font-size: calc(14 * var(--u)); line-height: 1.75; min-height: 3.5em; }
  body.merchant .auth .au-dots { margin-top: calc(14 * var(--u)); }
  body.merchant .auth .a-side { width: auto; min-width: 0; margin: 0 calc(10 * var(--u)) calc(10 * var(--u)); padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)); border-radius: calc(24 * var(--u)); display: block; }
  body.merchant .auth .a-inner { max-width: 460px; margin-inline: auto; }
  body.merchant .auth .a-title { font-size: calc(25 * var(--u)); }
  body.merchant .auth .a-sub { font-size: calc(14.5 * var(--u)); margin-top: 2px; }
  body.merchant .auth .a-card { margin-top: calc(16 * var(--u)); }
  body.merchant .auth .a-seg { margin-bottom: calc(14 * var(--u)); }
  body.merchant .auth .a-seg span { height: 44px; font-size: 14.5px; }
  body.merchant .auth .k-label { font-size: 14.5px; margin-bottom: 6px; }
  body.merchant .auth .k-input { height: 50px; font-size: 16px; }
  body.merchant .auth .a-submit { height: 52px; margin-top: 18px; font-size: 16.5px; }
  body.merchant .auth #authForgot { margin-top: 4px; }
}
@media (max-width: 899px) and (max-height: 740px) { body.merchant .auth .au-s { display: none; } body.merchant .auth .au-pitch { margin-top: calc(22 * var(--u)); } }

/* landscape phones: compact side-by-side */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  body.merchant .auth { --u: min(calc(100vw / 700), 1.3px); flex-direction: row; }
  body.merchant .auth .a-art { padding: calc(16 * var(--u)) calc(22 * var(--u)); min-height: 0; }
  body.merchant .auth .au-plate::after { background: linear-gradient(to left, rgba(12,28,22,.7), rgba(12,28,22,.25) 60%), linear-gradient(to top, rgba(12,28,22,.85), rgba(12,28,22,0) 70%); }
  body.merchant .auth .au-h { font-size: calc(21 * var(--u)); }
  body.merchant .auth .au-s, body.merchant .auth .au-dots { display: none; }
  body.merchant .auth .a-side { width: calc(360 * var(--u)); min-width: 320px; margin: 8px 0 8px 8px; padding: 14px 18px; border-radius: 18px; display: block; }
  body.merchant .auth .a-title { font-size: 22px; }
  body.merchant .auth .a-sub { display: none; }
  body.merchant .auth .a-card { margin-top: 12px; }
  body.merchant .auth .k-input, body.merchant .auth .a-submit { height: 46px; }
  body.merchant .auth .a-submit { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.merchant .auth .au-plate::before, body.merchant .auth .au-swap,
  body[data-auth="out"].merchant .auth .a-side, body[data-auth="out"].merchant .auth .au-top, body[data-auth="out"].merchant .auth .au-h span,
  body[data-auth="out"].merchant .auth .au-s, body[data-auth="out"].merchant .auth .au-dots { animation: none; }
  body.merchant .auth .au-dots button, body.merchant .auth .a-submit, body.merchant .auth .k-input { transition: none; }
}