/* ==========================================================================
   16 — THE SIGN-IN AND POINTS PLUGIN'S FRONT END (alaliyah-otp-login-rewards)

   The theme owns how the plugin looks; the plugin owns what it does. The
   plugin's own otp-login.css is not loaded: inc/signin.php swaps the
   `alaliyah-otp` handle's source for this file, so it arrives wherever the
   plugin enqueues that handle (the modal on My Account and at checkout, the
   inline widget/shortcode, the points block on cart and checkout, and the
   Rewards tab). Nothing here fights the plugin's sheet any more, so every
   structural rule that sheet used to provide is stated here too.

   Contract (agreed with the plugin session, 2026-09-26): class names,
   data-* / aria-* attributes and the states the plugin's JS toggles —
   [hidden] on .aa-otp__panel and .aa-otp__error, data-step on .aa-otp,
   [disabled] on .aa-otp__cta while a request is in flight and on the resend
   link during its countdown, .is-filled on .aa-otp__digit, .is-busy on the
   points buttons. Never give a toggled element a `display` value without a
   :not([hidden]) guard, or [hidden] stops hiding it.

   Specificity: buttons are scoped under their block (0,2,0 and 0,3,0 for
   states) because the Elementor kit paints every `button` gold-800 on white
   at 0,1,1 / 0,2,1, and inputs likewise because hello-elementor's reset
   styles input[type=…] at 0,1,1. English-only release: the Arabic heading
   (.aa-otp__ar) is hidden and the English line is the title (spec §6.3).
   ========================================================================== */

/* ---- Modal shell -------------------------------------------------------- */
.aa-otp {
  position: fixed; inset: 0;
  z-index: 99999; /* the plugin's value: above Elementor's sticky header and every floating widget */
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--color-text-body);
}
.aa-otp__scrim { position: absolute; inset: 0; background: var(--scrim); cursor: pointer; }

.aa-otp__dialog {
  position: relative;
  inline-size: 100%; max-inline-size: 400px;
  max-block-size: calc(100vh - 32px); max-block-size: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
}
.aa-otp__body { padding: 26px 26px 0; }

/* The close control sits on the scrim, top-end of the viewport, so it never
   crowds the dialog's own composition. 40px circle, 44px hit area via ::before. */
.aa-otp .aa-otp__close {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: var(--radius-circle);
  background: var(--cream-50); color: var(--ink-700);
  font: 400 22px/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-sm);
}
.aa-otp .aa-otp__close:hover, .aa-otp .aa-otp__close:focus { background: var(--cream-150); color: var(--ink-900); }
.aa-otp .aa-otp__close:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.aa-otp__close::before { content: ""; position: absolute; inset: calc((40px - var(--touch-target-min)) / 2); }

/* Checkout: no dismiss, only "Back to cart" (spec §6.3; js/signin.js adds the link). */
body.aly-checkout-gated .aa-otp .aa-otp__close { display: none; }
body.aly-checkout-gated .aa-otp__scrim { pointer-events: none; cursor: default; }

/* ---- Brand and headings ------------------------------------------------- */
.aa-otp__brand { display: flex; justify-content: center; margin-block-end: var(--space-4); }
.aa-otp__brand img { display: block; inline-size: 46px; block-size: 46px; border-radius: 8px; object-fit: contain; }
.aa-otp__wordmark { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 22px; line-height: 1.2; color: var(--ink-900); }

.aa-otp__head { text-align: start; margin-block-end: var(--space-4); }
.aa-otp__ar { display: none; }
.aa-otp__en {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 26px; line-height: 1.15;
  letter-spacing: -0.01em; text-transform: none; color: var(--ink-900);
}

/* "Sent to +971 5• ••• ••12 · Change" on the code step. */
.aa-otp__sent { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-text-body); text-align: start; }

/* ---- Fields ------------------------------------------------------------- */
.aa-otp__form { display: flex; flex-direction: column; }
.aa-otp__label {
  display: block; margin: var(--space-3) 0 6px;
  font: var(--fw-semibold) 11.5px/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted);
}
.aa-otp__form > .aa-otp__label:first-child { margin-block-start: 0; }
.aa-otp__optional { margin-inline-start: 4px; font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }

/* One Input (04-forms): 48px, 8px radius, hairline border, blue focus ring. */
.aa-otp__field {
  display: flex; align-items: center; block-size: 48px; overflow: hidden;
  background: var(--surface-white); border: var(--border-width) solid var(--ink-400); border-radius: var(--radius-sm);
}
/* ink-400 boundary: 3.16:1 on white, the 3:1 non-text minimum (cream-500 measures 1.55:1). */
.aa-otp__field:hover { border-color: var(--ink-500); }
.aa-otp__field:focus-within { border-color: var(--color-focus-outline); box-shadow: 0 0 0 3px var(--focus-ring-tint), 0 0 0 1px var(--color-focus-outline); }
.aa-otp__cc {
  display: inline-flex; align-items: center; block-size: 100%; padding-inline: 12px 10px; white-space: nowrap;
  border-inline-end: var(--border-width) solid var(--color-border); background: var(--cream-50);
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--ink-700);
}
.aa-otp__cc::before { content: "🇦🇪\00a0"; }
.aa-otp .aa-otp__input, .aa-points .aa-otp__input {
  flex: 1; min-inline-size: 0; inline-size: auto; block-size: 100%; margin: 0; padding: 0 12px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font: 400 15px/1.5 var(--font-sans); color: var(--ink-900);
}
.aa-otp .aa-otp__input:focus, .aa-otp .aa-otp__input:focus-visible,
.aa-points .aa-otp__input:focus, .aa-points .aa-otp__input:focus-visible { border: 0; box-shadow: none; outline: none; } /* the field ring above shows focus */
/* Phone rejected ("Enter a valid UAE mobile number.", rate limit, send failure):
   the field takes the error ring while the message shows. Focus still wins. */
.aa-otp__form:has([data-error="phone"]:not([hidden])) .aa-otp__field:not(:focus-within) { border-color: var(--color-error-strong); box-shadow: inset 0 0 0 1px var(--color-error-strong); }
.aa-otp .aa-otp__input::placeholder { color: var(--ink-500); opacity: 1; } /* 5.12:1 */
.aa-otp__help { margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--color-text-muted); }

/* Errors: clay text with the alert glyph, no box (Field spec). */
.aa-otp__error, .aa-points__error { margin: var(--space-2) 0 0; padding: 0; border: 0; background: none; font-size: var(--fs-sm); line-height: 1.45; color: var(--color-error-strong); }
.aa-otp__error:not([hidden]), .aa-points__error:not([hidden]) { display: flex; gap: 6px; align-items: flex-start; }
.aa-otp__error::before, .aa-points__error::before {
  content: ""; flex: 0 0 16px; block-size: 16px; margin-block-start: 1px; background: currentColor;
  -webkit-mask: url("../assets/icons/alert.svg") center / contain no-repeat; mask: url("../assets/icons/alert.svg") center / contain no-repeat;
}

/* ---- Code boxes (OtpInput: 6 × 46×56, 9px radius, Inter 22/600) ---------- */
.aa-otp__code { display: flex; justify-content: space-between; gap: 8px; margin-block-start: var(--space-1); }
.aa-otp .aa-otp__digit {
  flex: 0 1 46px; min-inline-size: 0; inline-size: 46px; block-size: 56px; margin: 0; padding: 0;
  border: var(--border-width) solid var(--ink-400); border-radius: 9px; /* an empty box is identified by its border alone: 3.16:1 */ background: var(--surface-white); box-shadow: none;
  text-align: center; font: var(--fw-semibold) 22px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-900);
}
.aa-otp .aa-otp__digit.is-filled { border-color: var(--gold-500); background: var(--gold-50); } /* progress through the code */
.aa-otp .aa-otp__digit:focus, .aa-otp .aa-otp__digit:focus-visible { outline: none; border-color: var(--color-focus-outline); box-shadow: 0 0 0 3px var(--focus-ring-tint), 0 0 0 1px var(--color-focus-outline); }
/* Wrong code: the plugin shows the error line and clears the boxes, but sets no
   invalid flag on them, so the ring keys off the visible error. Boxes turn gold
   again as they are refilled, which reads as the error clearing while typing. */
.aa-otp__form:has(.aa-otp__error:not([hidden])) .aa-otp__digit:not(.is-filled),
.aa-otp__form.is-invalid .aa-otp__digit,
.aa-otp .aa-otp__digit[aria-invalid="true"] { border-color: var(--color-error-strong); box-shadow: inset 0 0 0 1px var(--color-error-strong); }

/* ---- Actions ------------------------------------------------------------ */
.aa-otp .aa-otp__cta {
  display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 48px;
  margin: var(--space-4) 0 0; padding: 0 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--gold-500); color: var(--ink-900); box-shadow: none;
  font: var(--fw-semibold) 15px/1 var(--font-sans); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.aa-otp .aa-otp__cta:hover, .aa-otp .aa-otp__cta:focus { background: var(--gold-400); color: var(--ink-900); }
.aa-otp .aa-otp__cta:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
/* The plugin disables the button only while a request is in flight and swaps
   its label to "Sending…" / "Checking…": that is a busy state, not an
   unavailable one, so it stays gold. */
.aa-otp .aa-otp__cta[disabled] { background: var(--gold-300); color: var(--ink-900); opacity: 1; cursor: progress; }

.aa-otp .aa-otp__link {
  display: inline; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: var(--fw-semibold) 14px/1.4 var(--font-sans); letter-spacing: 0; text-transform: none;
  color: var(--gold-text-on-white); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.aa-otp .aa-otp__link:hover, .aa-otp .aa-otp__link:focus { background: none; color: var(--gold-800); }
.aa-otp .aa-otp__link:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; border-radius: 2px; }
/* Resend during its countdown ("Resend in 0:28"). */
.aa-otp .aa-otp__link[disabled] { color: var(--color-text-muted); text-decoration: none; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; cursor: default; }
.aa-otp__resend-line { margin: var(--space-3) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ---- Footer: legal line, plus "Back to cart" at checkout ----------------- */
/* Block, not flex: the legal line is a text node plus a link, and as flex items
   "Terms" was pushed away from its own sentence. */
.aa-otp__foot {
  display: block;
  margin: var(--space-5) 26px 0; padding: var(--space-3) 0 var(--space-5); border-block-start: 1px solid var(--cream-150);
  font-size: 12px; line-height: 1.5; text-align: start; color: var(--color-text-muted);
}
.aa-otp__foot a { color: var(--gold-text-on-white); text-decoration: underline; text-underline-offset: 2px; }
.aa-otp__foot a:hover { color: var(--gold-800); }
.aa-otp__foot a:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.aa-otp__foot .aa-otp__back { display: block; inline-size: fit-content; margin-block-start: var(--space-2); font-size: 13px; font-weight: var(--fw-semibold); text-decoration: none; } /* its own line under the legal text */

/* ---- Inline form (Elementor widget / [alaliyah_otp_login]) ---------------
   Same card in the page flow. The widget's own Alignment and Width controls
   write margin / max-width at {{WRAPPER}} .aa-otp--inline .aa-otp__dialog
   (0,3,0), so neither is set here at a strength that would beat them. */
.aa-otp--inline { position: static; inset: auto; z-index: auto; display: block; padding: 0; }
.aa-otp--inline .aa-otp__dialog { max-block-size: none; overflow: visible; margin-inline: auto; box-shadow: var(--elevation-hairline); }

/* Shown by the widget/shortcode to a customer who is already signed in. */
.aa-otp-signed-in { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--color-text-body); }
.aa-otp-signed-in a { font-weight: var(--fw-semibold); color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 400px) {
  .aa-otp__body { padding-inline: 20px; }
  .aa-otp__foot { margin-inline: 20px; }
  .aa-otp__en { font-size: 24px; }
  /* Six boxes share the row; at 390 each is still ≥44px wide. */
  .aa-otp .aa-otp__digit { flex: 1 1 0; inline-size: auto; block-size: 52px; font-size: 20px; }
}
@media (max-height: 560px) {
  .aa-otp { align-items: flex-start; }
}

/* ---- Points block on cart and checkout (spec §6.4) -----------------------
   Three states from the plugin: .aa-points__offer (can redeem: input +
   Apply), .aa-points__note (balance under the minimum), .aa-points__applied
   (a discount is on the order: value + Remove). On the cart the plugin prints
   it as a full-width totals row, <tr class="aa-points-row"><td colspan="2">,
   just above Total. */
.aa-points {
  text-align: start; /* the cell carries the totals' numeric end alignment (woocommerce-smallscreen forces it with !important) */
  margin-block: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--cream-50); border: 0; border-radius: var(--radius-md); box-shadow: var(--elevation-hairline);
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-body);
}
/* 0,4,4: under 768px woocommerce-smallscreen labels every totals cell with
   `td::before { content: attr(data-title) ": " }`; this cell has no title, so
   it printed a bare ": " above the block. */
.woocommerce-cart .cart_totals table.shop_table tr.aa-points-row td::before { content: none; display: none; }
.aa-points__label {
  display: block; margin-block-end: 4px;
  font: var(--fw-semibold) 11px/1.3 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
}
.aa-points__lede, .aa-points__note p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text); }
.aa-points__hint { margin: 2px 0 var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.aa-points__row { display: flex; align-items: stretch; gap: var(--space-2); }
/* 44px: this wraps a focusable <input>, so the real box must meet the target. */
.aa-points__row .aa-otp__field { flex: 1; block-size: var(--touch-target-min); }
.aa-points .aa-points__input { font-variant-numeric: tabular-nums; }
.aa-points .aa-points__apply {
  position: relative; flex: 0 0 auto; align-self: center; block-size: 40px; margin: 0; padding: 0 18px;
  border: 0; border-radius: var(--radius-sm); background: var(--gold-500); color: var(--ink-900); box-shadow: none;
  font: var(--fw-semibold) 14px/1 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
.aa-points .aa-points__apply:hover, .aa-points .aa-points__apply:focus { background: var(--gold-400); color: var(--ink-900); }
.aa-points .aa-points__apply:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.aa-points__apply::before { content: ""; position: absolute; inset: calc((40px - var(--touch-target-min)) / 2); } /* 44px hit area */
.aa-points__applied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); }
.aa-points__value { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--color-success-deep); }
.aa-points__value .woocommerce-Price-amount { color: inherit; }
.aa-points .aa-points__link {
  position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: var(--fw-semibold) 13px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none;
  color: var(--gold-text-on-cream); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.aa-points .aa-points__link:hover, .aa-points .aa-points__link:focus { background: none; color: var(--gold-900); }
.aa-points .aa-points__link:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.aa-points__link::before { content: ""; position: absolute; inset: -14px -8px; } /* 44px hit area on a text link */
.aa-points .is-busy, .aa-points .is-busy:hover { opacity: 0.7; cursor: progress; }

@media (prefers-reduced-motion: no-preference) {
  .aa-otp__field, .aa-otp .aa-otp__digit, .aa-otp .aa-otp__cta, .aa-points .aa-points__apply { transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
}