/*!
 * Shahoosh — authentication pages (Phase 2.9-A)
 * ---------------------------------------------------------------------------
 * This file restyles the GENUINE Digits 9.2 form. It adds no behaviour and
 * changes no markup: every selector below targets a class the Digits plugin
 * itself renders.
 *
 * The retheme works in two layers, in this order of preference:
 *
 *   1. DIGITS' OWN VARIABLES. Digits themes itself through six custom
 *      properties (--dprimary, --dtitle, --dfield_bg, --daccent, --dform_bg,
 *      --dbutton_text). Re-pointing those six at Shahoosh tokens retheme most
 *      of the form with no per-element rules at all, and — because the Shahoosh
 *      tokens already flip for dark — gives light/dark parity for free.
 *
 *   2. SCOPED OVERRIDES. Digits' stylesheet also carries ~40 literal hex
 *      colours that no variable reaches. Those are overridden below, each one
 *      scoped under .sh-auth so nothing here can affect the legacy login page,
 *      /my-account/, or any other page that renders a Digits form.
 *
 * RTL: logical properties throughout. The shell is RTL; only the fields whose
 * CONTENT is Latin (phone, e-mail, OTP, password) are set LTR, and each is set
 * individually so the surrounding form never flips.
 */

/* ------------------------------------------------------------------ shell */

.sh-auth-body{
  margin:0;
  /* The site prints `body{background-color:#32215C !important}` into every
     head, so this one declaration has to answer in kind. A class beats a type
     selector, so specificity decides it once both are !important — this is not
     an escalation that anything else needs to match. */
  background:var(--sh-bg) !important;
  color:var(--sh-text);
  font-family:var(--sh-font);
  font-size:var(--sh-fs-base);
  line-height:var(--sh-lh-base);
  -webkit-font-smoothing:antialiased;
}

.sh-auth{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding-block-start:env(safe-area-inset-top,0px);
  padding-block-end:env(safe-area-inset-bottom,0px);
}

.sh-auth__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sh-space-4);
  padding:var(--sh-space-5) clamp(16px,4vw,var(--sh-gutter));
}

.sh-auth__brand{
  display:inline-flex;
  align-items:center;
  gap:var(--sh-space-2);
  text-decoration:none;
  color:var(--sh-text);
}
.sh-auth__logo{ display:block;width:34px;height:34px;border-radius:10px; }
.sh-auth__wordmark{ font-weight:var(--sh-fw-black);font-size:var(--sh-fs-md);letter-spacing:.2px; }

.sh-auth__theme{
  inline-size:38px;block-size:38px;
  display:grid;place-items:center;
  border-radius:var(--sh-radius-pill);
  border:1px solid var(--sh-iconcircle-bd);
  background:var(--sh-surface);
  color:var(--sh-iconcircle-fg);
  cursor:pointer;
  transition:background var(--sh-dur-fast) var(--sh-ease),border-color var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth__theme:hover{ background:var(--sh-surface-2); }
.sh-auth__theme:focus-visible{ outline:2px solid var(--sh-focus-ring);outline-offset:2px; }
/* One button, two glyphs: show the one for the theme you'd switch TO. */
.sh-auth__theme-sun{ display:none; }
:root[data-theme="dark"] .sh-auth__theme-sun{ display:block; }
:root[data-theme="dark"] .sh-auth__theme-moon{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sh-auth__theme-sun{ display:block; }
  :root:not([data-theme="light"]) .sh-auth__theme-moon{ display:none; }
}

.sh-auth__main{
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(8px,2vh,28px) clamp(16px,4vw,var(--sh-gutter)) clamp(28px,6vh,64px);
}

/* The card never grows into a banner on a wide screen and never touches the
   edges on a narrow one. */
.sh-auth__card{
  box-sizing:border-box;     /* max-inline-size is the whole card, padding included */
  inline-size:100%;
  max-inline-size:452px;
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-card);
  box-shadow:var(--sh-shadow-card);
  padding:clamp(20px,4vw,30px);
}

.sh-auth__intro{ margin-block-end:var(--sh-space-5);text-align:center; }
.sh-auth__title{
  margin:0 0 var(--sh-space-2);
  font-size:var(--sh-fs-xl);
  font-weight:var(--sh-fw-black);
  line-height:var(--sh-lh-tight);
  color:var(--sh-text);
}
.sh-auth__lead{
  margin:0;
  font-size:var(--sh-fs-sm);
  color:var(--sh-text-muted);
  line-height:var(--sh-lh-base);
}

.sh-auth__nav{
  margin-block-start:var(--sh-space-5);
  padding-block-start:var(--sh-space-4);
  border-block-start:1px solid var(--sh-border);
  display:flex;flex-wrap:wrap;gap:var(--sh-space-2) var(--sh-space-4);
  justify-content:center;
}
.sh-auth__navlink{
  font-size:var(--sh-fs-sm);
  color:var(--a-brand-fg);
  text-decoration:none;
  border-radius:var(--sh-radius-pill);
  padding:2px 8px;
}
.sh-auth__navlink:hover{ text-decoration:underline; }
.sh-auth__navlink:focus-visible{ outline:2px solid var(--sh-focus-ring);outline-offset:2px; }
.sh-auth__navlink.is-current{ color:var(--sh-text-faint);pointer-events:none; }


/* A brand colour for TEXT has to be readable on both surfaces, and #431EAB is
   not readable on #26023A. --sh-chip-icon is the token that already carries
   exactly that pair (brand purple in light, a lifted purple in dark), so it is
   reused here rather than inventing a second one. --sh-brand keeps its job as a
   fill, where a solid purple works in either theme. */
.sh-auth{ --a-brand-fg:var(--sh-chip-icon); }


/* -------- the sign-out confirmation --------------------------------------- */
/* /app/logout/ is a real page with one button, so it needs one button rule
   rather than the whole Digits form language. */
.sh-auth__btn{
  inline-size:100%;
  min-block-size:50px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sh-brand);
  color:var(--sh-text-on-brand);
  border:0;
  border-radius:var(--sh-radius-pill);
  font-family:var(--sh-font);
  font-size:var(--sh-fs-base);
  font-weight:var(--sh-fw-bold);
  cursor:pointer;
  transition:background var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth__btn:hover{ background:var(--sh-brand-hover); }
.sh-auth__btn:active{ background:var(--sh-brand-active); }
.sh-auth__btn:focus-visible{ outline:2px solid var(--sh-focus-ring);outline-offset:2px; }

/* ------------------------------------------- 1. Digits' own theme variables */
/* Six declarations that do most of the work. Digits already redefines these
   for `prefers-color-scheme: dark`, so they are set at a specificity that wins
   in both themes, and pointed at Shahoosh tokens that flip on their own. */

.sh-auth .digits-form_container,
.sh-auth .digits-form_page,
.sh-auth .digits-main_style,
.sh-auth .digits-form_container.digits-dark-theme,
.sh-auth .digits-dark-theme .digits-form_container{
  --dprimary:    var(--sh-brand);
  --dtitle:      var(--sh-text);
  --dfield_bg:   var(--sh-prompt-bg);
  --daccent:     var(--sh-focus-ring);
  --dform_bg:    transparent;
  --dbutton_text:var(--sh-text-on-brand);
}

/* ------------------------------------------------- 2. scoped overrides */

/* Digits forces 'Iransans-digits' onto every descendant. */
.sh-auth .digits_ui,
.sh-auth .digits_ui *,
.sh-auth .digits-form_container,
.sh-auth .digits-form_container *{
  font-family:var(--sh-font);
}

/* The plugin draws its own card: box, border, shadow, padding and max width.
   Ours is the card, so its is flattened rather than nested inside. */
.sh-auth .digits_ui,
.sh-auth .digits_embed-form,
.sh-auth .digits-form_container,
.sh-auth .digits-form_wrapper,
.sh-auth .digits2_box,
.sh-auth .digits_modal_box{
  background:transparent;
  box-shadow:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  max-width:none;
  width:100%;
  min-height:0;
}

/* Digits' own page heading duplicates ours. */
.sh-auth .digits-form_heading_text{
  font-size:var(--sh-fs-md);
  font-weight:var(--sh-fw-bold);
  color:var(--sh-text);
}
.sh-auth .digits-form_heading{
  display:flex;align-items:center;gap:var(--sh-space-2);
  margin-block-end:var(--sh-space-4);
  min-height:24px;
}
/* The step-back arrow only means something once a step has been taken. */
.sh-auth .digits_back_icon{
  color:var(--sh-text-muted);
  cursor:pointer;
  border-radius:var(--sh-radius-pill);
}
.sh-auth .digits_back_icon.digits_hide_back{ display:none; }

/* -------- tab bar: a segmented control, not underlined links -------------- */
.sh-auth .digits-form_tab-bar{
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--sh-surface-2);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-pill);
  margin-block-end:var(--sh-space-4);
}
.sh-auth .digits-form_tab-item{
  flex:1 1 0;
  text-align:center;
  padding:9px 10px;
  font-size:var(--sh-fs-sm);
  font-weight:var(--sh-fw-medium);
  color:var(--sh-text-muted);
  background:transparent;
  border:0;
  border-radius:var(--sh-radius-pill);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background var(--sh-dur-fast) var(--sh-ease),color var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth .digits-form_tab-item:hover{ color:var(--sh-text); }
/* the plugin marks the active tab with an underline, drawn on the item and on
   the bar beneath it */
.sh-auth .digits-form_tab-item::before,
.sh-auth .digits-form_tab-item::after,
.sh-auth .digits-form_tabs::after,
.sh-auth .digits-form_tab-bar::after{ content:none;display:none; }
.sh-auth .digits-form_tabs,
.sh-auth .digits-form_tab_container{ border:0;padding:0;margin:0;background:transparent; }
.sh-auth .digits-form_tab-item.digits-tab_active{
  background:var(--sh-surface-4);
  color:var(--a-brand-fg);
  font-weight:var(--sh-fw-bold);
  outline:1px solid var(--sh-border-strong);
  outline-offset:-1px;
}
/* The plugin marks the active tab with a 3px bar that its own JS slides along
   the bar's width (.digits-slider_line). The segmented pill already says which
   tab is active, and the bar drew a straight purple line across a rounded
   control. Hidden, not removed: it is still in the DOM and still tracked by the
   script that positions it. */
.sh-auth .digits-slider_line{ display:none; }

/* The plugin spaces the step body off the tab bar with its own top margin, on
   top of the bar's bottom margin. One gap is enough. */
.sh-auth .digits-form_body{ margin-block-start:0; }

/* -------- fields --------------------------------------------------------- */
.sh-auth .digits-form_input_row{
  margin-block-end:var(--sh-space-3);
  display:flex;
  align-items:stretch;
  gap:var(--sh-space-2);
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
.sh-auth .digits-form_input{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  background:var(--sh-prompt-bg);
  border:1px solid var(--sh-prompt-bd);
  border-radius:var(--sh-radius-field);
  transition:border-color var(--sh-dur-fast) var(--sh-ease),box-shadow var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth .digits-form_input:hover{ border-color:var(--sh-prompt-bd-hover); }
.sh-auth .digits-form_input:focus-within{
  border-color:var(--sh-prompt-bd-focus);
  box-shadow:0 0 0 3px var(--sh-prompt-ring);
}
.sh-auth .digits-form_input input,
.sh-auth .digits-form_input select,
.sh-auth .digits-form_input textarea{
  inline-size:100%;
  box-sizing:border-box;
  min-block-size:48px;
  padding:0 14px;
  background:transparent;
  border:0;
  outline:0;
  color:var(--sh-text);
  font-family:var(--sh-font);
  font-size:var(--sh-fs-base);
  box-shadow:none;
}
.sh-auth .digits-form_input input::placeholder{ color:var(--sh-text-faint);opacity:1; }
/* Chrome paints its own autofill background; keep the field readable. */
.sh-auth .digits-form_input input:-webkit-autofill,
.sh-auth .digits-form_input input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--sh-text);
  -webkit-box-shadow:0 0 0 1000px var(--sh-prompt-bg) inset;
  caret-color:var(--sh-text);
}

/* The mobile row is country-code + number and must stay one unit. */
.sh-auth .digits-mobile_wrapper{ display:flex;gap:var(--sh-space-2);align-items:stretch; }
/* Digits writes `style="display:inline-block"` on this container inline, which
   no selector can outrank without !important. So the flag is positioned instead
   of laid out: the container keeps the plugin's display value and the sprite is
   pinned inside it. `direction:ltr` on the container makes inline-start mean the
   physical left, which is where a dial code's flag belongs — the form around it
   stays RTL. */
.sh-auth .digits-form_countrycode{
  flex:0 0 auto;
  inline-size:104px;
  position:relative;
  direction:ltr;
}
/* The sprite tile is 48x32 and the plugin renders it at half size with a
   transform. Resizing the box picks the wrong tile, so the plugin's geometry is
   kept exactly and only the placement is added — the scale has to be carried
   through, because one transform replaces the other. */
.sh-auth .digits-form_countrycode .digits-field-country_flag{
  inset-inline-start:-2px;
  inset-block-start:50%;
  transform:translateY(-50%) scale(.5);
  pointer-events:none;
}
.sh-auth .digits-form_countrycode input{
  padding-inline:38px 10px;
  text-align:start;
  font-variant-numeric:tabular-nums;
}

/* --- LTR islands. Latin content only; the form around them stays RTL. ----- */
.sh-auth input[name="digits_phone"],
.sh-auth input[name="phone"],
.sh-auth input[name="digits_email"],
.sh-auth input[name="email"],
.sh-auth input[name="login_digt_countrycode"],
.sh-auth input[name="digt_countrycode"],
.sh-auth input[type="password"],
.sh-auth input[name="sms_otp"],
.sh-auth input[name="email_otp"],
.sh-auth .otp_input,
.sh-auth .digits_otp_input-field{
  direction:ltr;
  text-align:start;
}
/* A verification code is short and centred everywhere it appears. */
.sh-auth .otp_input,
.sh-auth .digits_otp_input-field,
.sh-auth input[name="sms_otp"]{
  text-align:center;
  letter-spacing:.42em;
  text-indent:.42em;      /* cancels the trailing letter-space so it looks centred */
  font-size:var(--sh-fs-lg);
  font-weight:var(--sh-fw-bold);
  font-variant-numeric:tabular-nums;
}
.sh-auth .otp_input::placeholder{
  letter-spacing:normal;
  text-indent:0;
  font-size:var(--sh-fs-sm);
  font-weight:var(--sh-fw-regular);
  direction:rtl;
}

/* The password reveal control sits inside the field, on the trailing edge. */
.sh-auth .digits_password_eye-cont{
  position:absolute;
  inset-inline-end:10px;
  inset-block-start:50%;
  transform:translateY(-50%);
  color:var(--sh-text-faint);
  cursor:pointer;
  display:grid;place-items:center;
  inline-size:28px;block-size:28px;
  border-radius:var(--sh-radius-pill);
}
.sh-auth .digits_password_eye-cont:hover{ color:var(--sh-text-muted); }
.sh-auth .digits_password_inp_row .digits-form_input input{ padding-inline-end:44px; }

/* -------- submit --------------------------------------------------------- */
.sh-auth .digits-form_button,
.sh-auth .digits-form_submit-btn{
  inline-size:100%;
  min-block-size:50px;
  margin-block-start:var(--sh-space-4);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sh-space-2);
  background:var(--sh-brand);
  color:var(--sh-text-on-brand);
  border:0;
  border-radius:var(--sh-radius-pill);
  font-family:var(--sh-font);
  font-size:var(--sh-fs-base);
  font-weight:var(--sh-fw-bold);
  cursor:pointer;
  box-shadow:none;
  transition:background var(--sh-dur-fast) var(--sh-ease),transform var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth .digits-form_button:hover{ background:var(--sh-brand-hover); }
.sh-auth .digits-form_button:active{ background:var(--sh-brand-active);transform:translateY(1px); }
.sh-auth .digits-form_button:focus-visible{ outline:2px solid var(--sh-focus-ring);outline-offset:2px; }
.sh-auth .digits-form_button[disabled],
.sh-auth .digits-form_button.digits_disabled{ opacity:.55;cursor:not-allowed; }

/* -------- secondary actions ---------------------------------------------- */
.sh-auth .digits-form_link,
.sh-auth .digits-form_show_forgot_password,
.sh-auth .digits-form_toggle_login_register,
.sh-auth .digits-form_forgot_password{
  color:var(--a-brand-fg);
  font-size:var(--sh-fs-sm);
  cursor:pointer;
  text-decoration:none;
  background:transparent;
}
.sh-auth .digits-form_link:hover,
.sh-auth .digits-form_show_forgot_password:hover,
.sh-auth .digits-form_toggle_login_register:hover{ text-decoration:underline; }
.sh-auth .digits-form_footer_content{
  margin-block-start:var(--sh-space-2);
  display:flex;justify-content:flex-start;
}
.sh-auth .digits-form_footer{
  margin-block-start:var(--sh-space-4);
  text-align:center;
  font-size:var(--sh-fs-sm);
  color:var(--sh-text-muted);
}

/* resend: visibly inert until the countdown ends */
.sh-auth .digits-form_resend_otp{ font-size:var(--sh-fs-sm); }
.sh-auth .digits_resend_disabled{ color:var(--sh-text-faint);cursor:default;pointer-events:none; }
.sh-auth .digits_resend_disabled:hover{ text-decoration:none; }

/* remember me */
.sh-auth .digits-form_rememberme{
  display:flex;align-items:center;gap:var(--sh-space-2);
  font-size:var(--sh-fs-sm);color:var(--sh-text-muted);
  margin-block:var(--sh-space-2) 0;
}
.sh-auth .digits-form_rememberme input[type="checkbox"]{
  inline-size:18px;block-size:18px;min-block-size:0;accent-color:var(--sh-brand);margin:0;padding:0;
}
.sh-auth .digits-form_rememberme label{ cursor:pointer;margin:0; }

/* -------- messages ------------------------------------------------------- */
/* Digits reports results in a fixed toast that it appends to <body>, OUTSIDE
   the .sh-auth wrapper — so these are scoped to the page's body class instead.
   The text is the server's own, kept rather than replaced; sh-auth.js reduces
   its markup to a five-tag allow-list before it is shown. */
.sh-auth-body .dig_popmessage{
  position:fixed;
  inset-block-start:calc(16px + env(safe-area-inset-top,0px));
  inset-inline-end:16px;
  inline-size:min(360px,calc(100vw - 32px));
  box-sizing:border-box;
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-panel);
  box-shadow:var(--sh-shadow-pop);
  color:var(--sh-text);
  font-family:var(--sh-font);
  font-size:var(--sh-fs-sm);
  line-height:var(--sh-lh-base);
  padding:12px 14px;
  /* Digits sets min-height:80px on the toast, which makes a one-line
     validation error 138px tall. The card should be as tall as its text. */
  min-block-size:0;
  /* --sh-radius-panel (20px) belongs to a full panel; an inline alert reads
     better at the field radius. */
  border-radius:var(--sh-radius-md,12px);
  z-index:2147483000;
}
.sh-auth-body .dig_popmessage_contents{ display:flex;gap:var(--sh-space-3);align-items:flex-start; }
/* The plugin paints the toast with its own decorative blocks — a tinted panel
   behind the text and two gradient layers beside it. The status colour is
   carried by the leading border instead, which reads correctly in both themes;
   the decoration is removed rather than re-tinted. */
.sh-auth-body .dig_pop_bg,
.sh-auth-body .dig_pop_bg_over{ display:none; }
/* The icon slot is kept and drawn here instead of being hidden: Digits leaves
   the element empty and paints its own decoration behind it, so the glyph is a
   mask tinted by the variant's own colour and costs no extra markup. */
.sh-auth-body .dig_firele{
  flex:0 0 auto;
  inline-size:20px;
  block-size:20px;
  margin:1px 0 0 !important;
  background:currentColor;
  -webkit-mask:var(--sh-alert-icon) center/100% 100% no-repeat;
  mask:var(--sh-alert-icon) center/100% 100% no-repeat;
  --sh-alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.2 1.2 0 0 1 1.2 1.3l-.3 5a.9.9 0 0 1-1.8 0l-.3-5A1.2 1.2 0 0 1 12 7Zm0 9.3a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6Z'/%3E%3C/svg%3E");
}
.sh-auth-body .dig_success_message .dig_firele{
  --sh-alert-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.3-5.4 5.4a1 1 0 0 1-1.4 0L7.3 12.1a1 1 0 1 1 1.4-1.4l1.9 1.9 4.7-4.7a1 1 0 1 1 1.4 1.4Z'/%3E%3C/svg%3E");
}
.sh-auth-body .dig_lasele,
.sh-auth-body .dig_popmessage_contents{ background:transparent; }
/* ...and its border. Digits styles `.dig_critical_msg .dig_popmessage_contents`
   with `border:1px solid #FE004D1A`, which survived the background reset above
   and drew a second box inside the card. Measured before this rule: outer
   360x138 with an inner 323x108 bordered box. */
.sh-auth-body .dig_popmessage_contents{ border:0; padding:0; min-block-size:0; }
.sh-auth-body .dig_popdismiss{
  position:absolute;
  inset-block-start:8px;
  inset-inline-end:8px;
  inline-size:24px;block-size:24px;
  border-radius:var(--sh-radius-pill);
  background:transparent;
  color:var(--sh-text-faint);
  cursor:pointer;
}
.sh-auth-body .dig_popdismiss:hover{ background:var(--sh-surface-2);color:var(--sh-text); }
.sh-auth-body .dig_lasele{
  flex:1 1 auto;
  min-width:0;
  /* Digits pads this block 22px top and bottom to fill its 80px-tall toast.
     With the toast now sized to its text, that padding is 44px of empty space
     around a single line - measured 98px total for a one-line error. */
  padding-block:0;
}
.sh-auth-body .dig_lase_snap{
  font-weight:var(--sh-fw-bold);
  font-size:var(--sh-fs-sm);
  margin-block-end:2px;
}
/* A title that only ever says "توجه!" above "please enter a valid code" states
   nothing twice. sh-auth.js marks those, and only those, so a real title still
   renders. */
.sh-auth-body .dig_lase_snap[data-sh-generic="1"]{ display:none; }
.sh-auth-body .dig_lase_message{
  color:var(--sh-text);              /* body text stays neutral, not tinted */
  unicode-bidi:plaintext;
  overflow-wrap:anywhere;
}
.sh-auth-body .dig_error_message,
.sh-auth-body .dig_critical_msg{
  color:var(--sh-danger);            /* the icon mask inherits this */
  border-inline-start:4px solid var(--sh-danger);
  background:var(--sh-danger-bg);
  border-color:var(--sh-danger-border);
}
.sh-auth-body .dig_error_message .dig_lase_snap{ color:var(--sh-danger); }
.sh-auth-body .dig_success_message{
  color:var(--sh-ok);
  border-inline-start:4px solid var(--sh-ok);
  background:var(--sh-ok-bg);
  border-color:var(--sh-ok-border);
}
.sh-auth-body .dig_success_message .dig_lase_snap{ color:var(--sh-ok); }
.sh-auth-body .dig_notice_message,
.sh-auth-body .dig_warning_message{
  color:var(--sh-warn);
  border-inline-start:4px solid var(--sh-warn);
  background:var(--sh-warn-bg);
  border-color:var(--sh-warn-border);
}
.sh-auth-body .dig_notice_message .dig_lase_snap,
.sh-auth-body .dig_warning_message .dig_lase_snap{ color:var(--sh-warn); }
.sh-auth-body .dig_lase_message strong,
.sh-auth-body .dig_lase_message b{ font-weight:var(--sh-fw-bold); }


/* -------- plugin furniture this page does not use ------------------------ */

/* Our <h1> already names the page; Digits' own heading repeated it directly
   underneath. The element stays — its back arrow is a real control, the only
   way to correct a mistyped number without reloading — but the duplicated text
   is dropped, and the whole strip is hidden on the first step where the arrow
   has nothing to go back to. */
.sh-auth .digits-form_heading_text{ display:none; }
.sh-auth .digits-form_heading{
  min-block-size:32px;
  margin-block-end:var(--sh-space-2);
}
.sh-auth .digits-form_heading:not(:has(.digits_back_icon:not(.digits_hide_back))){
  display:none;
}
.sh-auth .digits_back_icon:not(.digits_hide_back){
  /* the plugin positions this absolutely against the form, which put it on the
     physical left of an RTL card and collapsed the strip it lives in; letting it
     take part in the heading's flow puts it at the inline start, where a back
     control belongs in RTL */
  position:static;
  display:inline-flex;
  flex:0 0 auto;
  inline-size:28px;
  block-size:28px;
  margin:0;
}

/* Digits renders the same "forgot password" control TWICE on the password step:
   once inside the step body and once in the form footer under the button. The
   footer copy is the conventional placement and the one that reads correctly;
   the in-body copy is hidden, which also removes the blank strip it was
   reserving between the field and the button. */
.sh-auth .digits-form_tab_body .digits-form_show_forgot_password{ display:none; }

/* A decorative arrow inside the submit button, pointing the wrong way in RTL.
   On step 2 Digits writes `style="display:inline"` on it directly, which no
   selector outranks — so it is collapsed by size rather than by display, which
   needs no !important and works in both cases. */
.sh-auth .digits-form_button_ic{
  display:none;
  inline-size:0;
  block-size:0;
  overflow:hidden;
}

/* Digits' own login/register toggle renders as an EMPTY div in this
   installation — the label comes from a setting that is not filled in, and
   there is no `show_register` variant at all, so the control cannot switch
   anywhere. This site has always used separate /login/ and /signup/ pages.
   The empty box is hidden; the card's own footer links are the navigation. */
.sh-auth .digits-form_toggle_login_register:empty,
.sh-auth .digits-social-logins:empty,
.sh-auth .digits-social-logins-box:empty{ display:none; }

/* Digits' own floating brand mark, bottom of the viewport. */
.sh-auth .digits_site_footer_box,
.sh-auth-body .digits_site_footer_box{ display:none; }

/* The site's global floating support button. It overlaps the card on short
   viewports and belongs to a different design language; sign-in is a single-task
   page and the footer links already cover "I can't get in". */
.sh-auth-body .fixed-support-image{ display:none; }

/* -------- remember me ---------------------------------------------------- */
/* Digits hides the real checkbox (opacity:0) and draws a masked ::before in its
   place, coloured for the plugin's palette. Rather than re-tint a mask, the
   native control is shown and given accent-color: it is the input's checked
   state that serialises into the request either way, so behaviour is untouched,
   and a real checkbox is what a screen reader and a keyboard expect. */
.sh-auth .digits-form_rememberme .digits-form_input,
.sh-auth .digits-form_rememberme .digits-form_input:hover,
.sh-auth .digits-form_rememberme .digits-form_input:focus-within{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
.sh-auth .digits-form_rememberme .dig_input_wrapper::before,
.sh-auth .digits-form_rememberme .dig_input_wrapper::after{
  content:none;
  display:none;
}
.sh-auth .digits-form_rememberme .dig_opt_mult_con,
.sh-auth .digits-form_rememberme .dig_opt_mult{
  display:block;
  background:transparent;border:0;padding:0;margin:0;
}
.sh-auth .digits-form_rememberme label,
.sh-auth .digits-form_rememberme .dig_input_wrapper{
  display:flex;
  align-items:center;
  gap:var(--sh-space-2);
  padding:0;
  margin:0;
  font-size:var(--sh-fs-sm);
  color:var(--sh-text-muted);
  cursor:pointer;
  line-height:var(--sh-lh-tight);
}
/* Still the native checkbox — appearance:none restyles it, it does not replace
   it, so the label, the keyboard and the accessibility tree are unchanged. The
   tick is a mask so its colour comes from a token rather than being baked into
   an SVG fill. */
.sh-auth .digits-form_rememberme input[type="checkbox"].digits_login_remember_me{
  display:inline-block;
  visibility:visible;
  opacity:1;
  position:static;
  flex:0 0 auto;
  appearance:none;
  -webkit-appearance:none;
  inline-size:18px;
  block-size:18px;
  min-block-size:0;
  padding:0;
  margin:0;
  cursor:pointer;
  background:var(--sh-prompt-bg);
  border:1px solid var(--sh-border-strong);
  border-radius:5px;
  transition:background var(--sh-dur-fast) var(--sh-ease),border-color var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth .digits-form_rememberme input[type="checkbox"].digits_login_remember_me:hover{
  border-color:var(--sh-prompt-bd-focus);
}
/* The tick is drawn into the box rather than masked: --sh-text-on-brand is
   #FFFFFF in both themes, so a white stroke here is not a theme-dependent
   colour escaping the token system. */
.sh-auth .digits-form_rememberme input[type="checkbox"].digits_login_remember_me:checked{
  background-color:var(--sh-brand);
  border-color:var(--sh-brand);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M4.4 9.3l3 3 6.2-6.2" fill="none" stroke="%23ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.sh-auth .digits-form_rememberme input[type="checkbox"]:focus-visible{
  outline:2px solid var(--sh-focus-ring);
  outline-offset:2px;
}

/* -------- country list --------------------------------------------------- */
.sh-auth-body .digit_cs-list{
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-panel);
  box-shadow:var(--sh-shadow-pop);
  color:var(--sh-text);
  max-block-size:min(320px,50vh);
  overflow-y:auto;
  z-index:2147482000;
}
.sh-auth-body .digit_cs-list li{
  display:flex;align-items:center;gap:var(--sh-space-2);
  padding:8px 12px;
  font-size:var(--sh-fs-sm);
  cursor:pointer;
  direction:ltr;
  text-align:start;
}
.sh-auth-body .digit_cs-list li:hover,
.sh-auth-body .digit_cs-list li.selected{ background:var(--sh-surface-2);color:var(--sh-brand-text); }
.sh-auth-body .digit_cs-list li.search_field{ position:sticky;inset-block-start:0;background:var(--sh-surface);padding:8px; }
.sh-auth-body .digit_cs-list .countrycode_search{
  inline-size:100%;box-sizing:border-box;
  min-block-size:38px;padding:0 10px;
  background:var(--sh-prompt-bg);
  /* the plugin writes style="border-color: transparent !important" on this
     input inline, so only !important can restore a visible edge */
  border:1px solid var(--sh-prompt-bd) !important;
  border-radius:var(--sh-radius-field);
  color:var(--sh-text);
  direction:rtl;
}

/* -------- loader --------------------------------------------------------- */
.sh-auth .dig_load_overlay,
.dig_load_overlay{
  background:color-mix(in srgb,var(--sh-bg) 72%,transparent);
  backdrop-filter:blur(2px);
}

/* -------- country picker ------------------------------------------------- */
.sh-auth .digits_countrycodecontainer .digit_cs-list,
.digit_cs-list{
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-panel);
  box-shadow:var(--sh-shadow-pop);
  color:var(--sh-text);
}
.sh-auth .countrycode_search{
  background:var(--sh-prompt-bg);
  color:var(--sh-text);
  border-radius:var(--sh-radius-field);
}

/* -------- register: labels are hidden by digits_hide_label; keep spacing -- */
.sh-auth .digits_register .digits-form_input_row label{
  font-size:var(--sh-fs-sm);
  color:var(--sh-text-muted);
}


/* -------- the code step -------------------------------------------------- */
/* The plugin puts the resend link and three hidden inputs INSIDE
   `.digits-form_input`, so the field rules above drew a box around all of it —
   a tall well with an empty band under the code. The box moves onto the input
   itself and the wrapper becomes plain. */
.sh-auth .digits_secure_login_auth_wrapper .digits-form_input,
.sh-auth .digits-form_input.digits-form_input_info,
.sh-auth .digits-form_input.digits-form_input_info:hover,
.sh-auth .digits-form_input.digits-form_input_info:focus-within{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}
.sh-auth .otp_input,
.sh-auth .digits_otp_input-field{
  box-sizing:border-box;
  inline-size:100%;
  min-block-size:52px;
  padding:0 14px;
  background:var(--sh-prompt-bg);
  border:1px solid var(--sh-prompt-bd);
  border-radius:var(--sh-radius-field);
  transition:border-color var(--sh-dur-fast) var(--sh-ease),box-shadow var(--sh-dur-fast) var(--sh-ease);
}
.sh-auth .otp_input:hover{ border-color:var(--sh-prompt-bd-hover); }
.sh-auth .otp_input:focus{
  border-color:var(--sh-prompt-bd-focus);
  box-shadow:0 0 0 3px var(--sh-prompt-ring);
  outline:0;
}
/* the resend link, now below the field rather than inside it */
.sh-auth .digits-form_input_info .digits-form_footer_content{
  margin-block-start:var(--sh-space-3);
  justify-content:center;
}
/* the plugin's inline "checking" indicator sits on top of the code otherwise */
.sh-auth .digits_auto_check::before,
.sh-auth .digits_auto_check::after{ content:none;display:none; }

/* Digits' info glyph for the code field is dropped loose into the wrapper and
   lands half over the field's border. Pinned inside the field, on the trailing
   edge, where the password reveal sits on the other step. */
.sh-auth .digits-form_input_info{ position:relative; }
.sh-auth .digits_otp_info_ic{
  position:absolute;
  inset-inline-end:12px;
  inset-block-start:26px;        /* centred on the 52px field, not on the wrapper */
  transform:translateY(-50%);
  opacity:.55;
  pointer-events:none;
}
.sh-auth .otp_input{ padding-inline-end:40px; }

/* -------- step back ------------------------------------------------------ */
/* Digits reveals an empty <span> as the back control once a step has been
   taken. It carries no glyph of its own here, so one is drawn as a mask in
   currentColor. Longhands, not the `mask` shorthand: the shorthand did not
   apply here and the element rendered as a solid filled dot — a failed mask on
   a background-color is invisible as a bug and obvious as a blob. */
.sh-auth .digits_back_icon:not(.digits_hide_back){
  background-color:currentColor;
  border-radius:0;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-size:20px 20px;    mask-size:20px 20px;
  transform:scaleX(-1);          /* the card is RTL: back points the other way */
}
.sh-auth .digits_back_icon:not(.digits_hide_back):hover{ color:var(--sh-text); }

/* ------------------------------------------------------------ responsive */
@media (max-width:540px){
  .sh-auth__top{ padding:var(--sh-space-4) var(--sh-space-4); }
  .sh-auth__main{ padding-inline:var(--sh-space-4); }
  .sh-auth__card{
    padding:var(--sh-space-5) var(--sh-space-4);
    border-radius:var(--sh-radius-panel);
  }
  .sh-auth__title{ font-size:var(--sh-fs-lg); }
  .sh-auth .digits-form_countrycode{ inline-size:80px; }
  .sh-auth .digits-form_tab-item{ font-size:var(--sh-fs-xs);padding:9px 6px; }
}

@media (max-width:360px){
  .sh-auth .digits-form_countrycode{ inline-size:72px; }
  .sh-auth .digits-form_input input{ font-size:var(--sh-fs-sm); }
}

@media (prefers-reduced-motion:reduce){
  .sh-auth *,.sh-auth *::before,.sh-auth *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* ========================================================================
   COUNTRY SELECTOR — Phase 2.13.8-AUTH-UI1
   ======================================================================== */

/* The phone control is an inherently LTR composite: a dial code and a number.
   Making the ROW ltr puts the country block — which is the first DOM child —
   on the physical LEFT, with the number to its right, without reversing any
   value and without flipping the RTL form around it. */
/* Every phone row carries `.digits-mobile_wrapper`; only the LOGIN one also
   carries `.digits-form_input_row`, so keying on both silently skipped the
   register form and left its country block on the right. */
.sh-auth .digits-mobile_wrapper{
  direction:ltr;
}
/* the label above the row stays with the page */
.sh-auth .digits-mobile_wrapper > label{ direction:rtl; }

/* A dial code must never be reordered by the bidi algorithm into "89+". */
.sh-auth input[name="login_digt_countrycode"],
.sh-auth input[name="digt_countrycode"],
.sh-auth .digits-form_countrycode input{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:start;
}

/* ---- the dropdown panel --------------------------------------------------
   Digits appends `ul.digit_cs-list` to a bare <div> under <body>, absolutely
   positioned at width:100% — so it spans the whole page and leaves the field
   uncovered on one side. sh-auth.js re-anchors it to the real field group and
   sets an exact width; everything visual is here. */
.sh-auth-body ul.digit_cs-list{
  box-sizing:border-box;
  max-inline-size:none;
  margin:0;
  padding:0;
  overflow:hidden auto;
  max-block-size:min(52vh,340px);
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#e3e6ea);
  border-radius:var(--sh-radius-md,12px);
  box-shadow:0 12px 32px rgba(16,24,40,.14);
  direction:rtl;
}
.sh-auth-body ul.digit_cs-list > li{
  box-sizing:border-box;
  inline-size:100%;
  margin:0;
  list-style:none;
}
.sh-auth-body ul.digit_cs-list > li.dig-cc-visible{
  display:flex;
  align-items:center;
  gap:var(--sh-space-2,8px);
  padding:10px 12px;
  cursor:pointer;
  direction:ltr;              /* "Iran (+98)" is Latin + a dial code */
  justify-content:flex-start;
}
.sh-auth-body ul.digit_cs-list > li.dig-cc-visible:hover,
.sh-auth-body ul.digit_cs-list > li.dig-cc-visible.selected{
  background:var(--sh-surface-2,#f4f6f8);
}

/* ---- the search row: it must fill the panel, not float inside it -------- */
.sh-auth-body ul.digit_cs-list > li.dig-cc-search-container{
  display:block;
  position:sticky;
  inset-block-start:0;
  z-index:1;
  padding:8px;
  background:var(--sh-surface,#fff);
  border-block-end:1px solid var(--sh-border,#e3e6ea);
}
.sh-auth-body ul.digit_cs-list .dig-cc-search{
  display:block;
  box-sizing:border-box;
  inline-size:100%;
  /* Digits ships this wrapper with `margin:0 12px`. Combined with a 100% width
     that is over-constrained inside the row's content box, so the field landed
     at 542..914 instead of 534..906 - a 16px gap on one side and flush against
     the panel border on the other. Neutralise the vendor margin; the 8px
     padding on .dig-cc-search-container is the only inset. */
  margin-inline:0;
}
.sh-auth-body ul.digit_cs-list input.countrycode_search{
  box-sizing:border-box;
  inline-size:100% !important;
  max-inline-size:none !important;
  margin:0 !important;
  padding:10px 12px !important;
  direction:rtl;
  text-align:start;
  background:var(--sh-surface-2,#f4f6f8) !important;
  border:1px solid var(--sh-border,#e3e6ea) !important;
  border-radius:var(--sh-radius-sm,8px);
  font:inherit;
  color:inherit;
}
.sh-auth-body ul.digit_cs-list input.countrycode_search:focus{
  outline:none;
  border-color:var(--sh-accent,#3858e9) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sh-accent,#3858e9) 22%,transparent);
}

/* ---- empty state -------------------------------------------------------- */
.sh-auth-body ul.digit_cs-list > li.sh-cc-empty{
  display:block;
  padding:18px 12px;
  text-align:center;
  color:var(--sh-text-muted,#6b7280);
  font-size:var(--sh-fs-sm,.875rem);
  direction:rtl;
}
.sh-auth-body ul.digit_cs-list > li.sh-cc-empty[hidden]{ display:none; }

/* ---- dark theme: no white block may survive ----------------------------- */
[data-theme="dark"] .sh-auth-body ul.digit_cs-list,
[data-theme="dark"] .sh-auth-body ul.digit_cs-list > li.dig-cc-search-container{
  background:var(--sh-surface,#14161a);
  border-color:var(--sh-border,#2a2f37);
}
[data-theme="dark"] .sh-auth-body ul.digit_cs-list input.countrycode_search{
  background:var(--sh-surface-2,#1b1e24) !important;
  border-color:var(--sh-border,#2a2f37) !important;
  color:var(--sh-text,#e8eaed);
}
[data-theme="dark"] .sh-auth-body ul.digit_cs-list > li.dig-cc-visible:hover,
[data-theme="dark"] .sh-auth-body ul.digit_cs-list > li.dig-cc-visible.selected{
  background:var(--sh-surface-2,#1b1e24);
}

/* ---- Shahoosh auth actions (native component, AUTH-UI2 §11) -------------
   Digits ships its own login/signup bar. Keeping it would leave the page with
   two competing navigations, and hiding it with visibility/opacity would leave
   a keyboard-focusable ghost underneath ours (measured: tabIndex 0 on every
   route). display:none removes it from the accessibility tree AND the tab
   order, without touching a single Digits file. */
.sh-auth .dig_login_signup_bar,
.sh-auth .digits-form_toggle_login_register{
  display:none !important;
}

.sh-auth-actions{
  margin-block-start:var(--sh-space-5,20px);
  padding-block-start:var(--sh-space-4,16px);
  border-block-start:1px solid var(--sh-border,#e3e6ea);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sh-space-2,8px);
  text-align:center;
}
.sh-auth-actions__row{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  line-height:1.9;
}
.sh-auth-actions__row--primary{
  font-size:var(--sh-fs-md,.9375rem);
  color:var(--sh-text,#1f2430);
}
.sh-auth-actions__row--secondary{
  font-size:var(--sh-fs-sm,.875rem);
  color:var(--sh-text-muted,#6b7280);
}
.sh-auth-actions__prompt{ color:var(--sh-text-muted,#6b7280); }
.sh-auth-actions__row--primary .sh-auth-actions__prompt{ color:inherit; }

.sh-auth-actions__link{
  color:var(--sh-accent-text,#6C3AE1);
  font-weight:var(--sh-fw-bold,700);
  text-decoration:none;
  border-radius:var(--sh-radius-sm,8px);
  padding:2px 4px;
  margin:-2px -4px;                     /* keep the baseline, gain a focus ring */
  transition:color var(--sh-dur-fast,.15s) var(--sh-ease,ease),
             background var(--sh-dur-fast,.15s) var(--sh-ease,ease);
}
.sh-auth-actions__link--subtle{ font-weight:var(--sh-fw-med,600); }
.sh-auth-actions__link:hover{
  color:var(--sh-accent-text,#6C3AE1);
  background:color-mix(in srgb,var(--sh-accent,#7c3aed) 10%,transparent);
}
.sh-auth-actions__link:focus-visible{
  outline:2px solid var(--sh-accent,#7c3aed);
  outline-offset:2px;
}
/* a hairline between the primary action and the quieter one */
.sh-auth-actions__rule{
  inline-size:44px;
  block-size:1px;
  background:var(--sh-border,#e3e6ea);
  opacity:.9;
}

[data-theme="dark"] .sh-auth-actions{ border-block-start-color:var(--sh-border,#2a2f37); }
[data-theme="dark"] .sh-auth-actions__rule{ background:var(--sh-border,#2a2f37); }
[data-theme="dark"] .sh-auth-actions__row--primary{ color:var(--sh-text,#e8eaed); }

@media (max-width:420px){
  .sh-auth-actions{ margin-block-start:var(--sh-space-4,16px); gap:6px; }
  .sh-auth-actions__row{ line-height:1.8; }
}

@media (max-width:420px){
  .sh-auth-body ul.digit_cs-list{ max-block-size:min(48vh,300px); }
}

/* ---- OTP resend prompt --------------------------------------------------
   Shown only when selecting the verification-code tab would REPLACE a code
   this browser has already been told was sent. Secondary by design: it is a
   confirmation, not a primary path, and it must not compete with the form. */
.sh-auth .sh-otp-prompt{
  box-sizing:border-box;
  margin-block-start:12px;
  padding:12px 14px;
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-md,12px);
  background:var(--sh-surface-2);
  direction:rtl;
  text-align:start;
}
.sh-auth .sh-otp-prompt__text{
  margin:0 0 10px;
  font-size:var(--sh-fs-sm);
  line-height:1.7;
  color:var(--sh-text);
}
.sh-auth .sh-otp-prompt__to{
  unicode-bidi:isolate;
  font-weight:var(--sh-fw-bold);
}
.sh-auth .sh-otp-prompt__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sh-auth .sh-otp-prompt__btn{
  flex:0 1 auto;
  min-block-size:38px;
  padding:0 14px;
  border:1px solid var(--sh-border-strong,var(--sh-border));
  border-radius:var(--sh-radius-sm,8px);
  background:var(--sh-surface);
  color:var(--sh-text);
  font:inherit;
  font-size:var(--sh-fs-sm);
  cursor:pointer;
  transition:background var(--sh-dur-fast,.15s) var(--sh-ease,ease);
}
.sh-auth .sh-otp-prompt__btn:hover:not(:disabled){ background:var(--sh-surface-2); }
.sh-auth .sh-otp-prompt__btn--primary{
  border-color:var(--sh-accent);
  background:var(--sh-accent);
  color:#fff;
}
.sh-auth .sh-otp-prompt__btn--primary:hover:not(:disabled){ background:var(--sh-accent-strong,var(--sh-accent)); }
/* the countdown state must stay legible in both themes rather than fading out */
.sh-auth .sh-otp-prompt__btn:disabled{
  cursor:default;
  opacity:1;
  border-color:var(--sh-border);
  background:var(--sh-surface-2);
  color:var(--sh-text-muted,#6b7280);
}
/* the submit button while a dispatch is in flight */
.sh-auth .digits-form_submit-btn.is-busy{
  opacity:.75;
  pointer-events:none;
}
@media (max-width:420px){
  .sh-auth .sh-otp-prompt__row{ flex-direction:column; align-items:stretch; }
  .sh-auth .sh-otp-prompt__btn{ inline-size:100%; }
}


/* ===========================================================================
   PHASE 2.13.16-R3 — auth-page defects the owner found on a physical device.
   All three are Digits rules winning the cascade; no vendor file is edited.
   =========================================================================== */

/* W8-11 — entered text was unreadable on the purple surface.
   Measured before: `input[name=digits_phone]` computed rgb(36,23,71) on
   rgb(28,2,42) = 1.18:1, and the country-code field #431EAB = 1.84:1.
   Two different vendor rules cause it:
       input.dig-mobile_field{ color:#241747 !important }       <- carries !important
       .digits2_box .digits-form_input input{ color:var(--dprimary) }
   The second only wins on source order (both are 0,2,1). The first cannot be
   beaten without !important, so !important is used here deliberately and
   scoped to .sh-auth — it answers a vendor !important rather than starting a
   specificity war of our own. -webkit-text-fill-color is set too, because that
   is what actually paints the glyphs once autofill is involved. */
.sh-auth .digits-form_input input,
.sh-auth input.dig-mobile_field,
.sh-auth .digits2_box .digits-form_input input,
.sh-auth .digits2_box .digits-form_input select{
  color:var(--sh-text) !important;
  -webkit-text-fill-color:var(--sh-text) !important;
  caret-color:var(--sh-text);
}
/* The placeholder must stay distinguishable from an entered value (§23): same
   family and size, lower contrast — never the same colour as the value. */
.sh-auth .digits-form_input input::placeholder,
.sh-auth input.dig-mobile_field::placeholder{
  color:var(--sh-text-faint) !important;
  -webkit-text-fill-color:var(--sh-text-faint) !important;
  opacity:1;
}
/* Autofill (§24): Chrome and WebKit paint their own background and glyph
   colour, which would put dark text back on the purple field. */
.sh-auth .digits-form_input input:-webkit-autofill,
.sh-auth .digits-form_input input:-webkit-autofill:hover,
.sh-auth .digits-form_input input:-webkit-autofill:focus,
.sh-auth input.dig-mobile_field:-webkit-autofill{
  -webkit-text-fill-color:var(--sh-text) !important;
  -webkit-box-shadow:0 0 0 1000px var(--sh-prompt-bg) inset !important;
  caret-color:var(--sh-text);
}

/* W8-13 — the password reveal sat 16px above the field's centre, identically
   at 1440/390/360. Our rule already said inset-block-start:50% + translateY(-50%),
   but Digits ships:
       html[dir="rtl"] .digits_password_eye{ top:11px }   (0,2,1)
       .digits_password_eye{ bottom:14px }
   which outranks `.sh-auth .digits_password_eye-cont` (0,2,0). The fix raises
   OUR specificity above it rather than adding !important, and keeps the
   percentage form §25 asks for — a fixed pixel offset would only be correct at
   one field height, and the field is 52px here and 48px elsewhere.
   The parent row's centre equals the input's centre (measured delta 0.0), so
   centring on the row is centring on the input. */
html[dir="rtl"] .sh-auth .digits_password_eye-cont,
html[dir="ltr"] .sh-auth .digits_password_eye-cont,
.sh-auth .digits_password_inp_row .digits_password_eye-cont{
  inset-block-start:50%;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
}



/* ===========================================================================
   PHASE 2.13.16-R3-SMS-UI — W8-14: the login alert still read as a heading.
   ===========================================================================
   The owner looked at the real device and said the alert still dominates the
   form. They are right, and the previous "15px PASS" was measuring one element
   while three others set the visual weight:

     .dig_lase_message   15px/26.25px  — larger than the 13px labels beside it
     .dig_lase_snap      18px/31.5px BOLD — a vendor rule this CSS lost to
     card padding        12px 14px, 12px gap, 20px icon

   The title was the real offender. Digits ships

       .dig_lase_snap{ font-size:18px !important }        (0,1,0)

   and `!important` beats our (0,3,0) selector regardless of specificity, so the
   existing 13px rule never applied. That is why a one-line toast rendered as a
   bold 18px heading over 15px body text — heavier than anything else on the
   form. !important is used below only where it answers that vendor !important.

   Target hierarchy (§3): inputs and the submit button stay primary; the alert
   becomes supporting status text at --sh-fs-sm (13px), the same size as the
   form labels, bold only for the title. */
.sh-auth-body .dig_popmessage{
  /* §5 — a one-line message should not occupy a card-sized block */
  padding:10px 12px;
}
.sh-auth-body .dig_popmessage_contents{ gap:var(--sh-space-2); }
.sh-auth-body .dig_popmessage .dig_lase_message{
  font-size:var(--sh-fs-sm);
  line-height:var(--sh-lh-base);   /* scales with the type: 13 x 1.75 = 22.75 */
}
/* answers `.dig_lase_snap{font-size:18px !important}` */
.sh-auth-body .dig_popmessage .dig_lase_snap{
  font-size:var(--sh-fs-sm) !important;
  line-height:var(--sh-lh-base) !important;
  font-weight:var(--sh-fw-bold);
  margin-block-end:1px;
}
/* §6 — the icon follows the text down, and sits on the first line */
.sh-auth-body .dig_firele{
  inline-size:16px;
  block-size:16px;
  margin-block-start:3px !important;
}

/* §8 — semantic colours were never reaching success/notice.
   Digits applies `dig_success_msg` / `dig_notice_msg` / `dig_critical_msg`;
   this file only styled `dig_success_message` / `dig_notice_message`, which the
   plugin never sets. Meanwhile `dig_error_message` is baked into the markup and
   is present on EVERY toast, so success and info both rendered in danger red.
   Measured before this rule: a success toast painted rgb(255,143,163) on
   rgb(58,14,28). These come after the error rule so they win on order. */
.sh-auth-body .dig_success_msg{
  color:var(--sh-ok);
  border-inline-start:4px solid var(--sh-ok);
  background:var(--sh-ok-bg);
  border-color:var(--sh-ok-border);
}
.sh-auth-body .dig_success_msg .dig_lase_snap{ color:var(--sh-ok) !important; }
.sh-auth-body .dig_notice_msg{
  color:var(--sh-warn);
  border-inline-start:4px solid var(--sh-warn);
  background:var(--sh-warn-bg);
  border-color:var(--sh-warn-border);
}
.sh-auth-body .dig_notice_msg .dig_lase_snap{ color:var(--sh-warn) !important; }
.sh-auth-body .dig_critical_msg .dig_lase_snap{ color:var(--sh-danger) !important; }
/* the body text stays neutral in every variant so it is read, not decoded */
.sh-auth-body .dig_popmessage .dig_lase_message{ color:var(--sh-text); }


/* ===========================================================================
   PHASE 2.13.16-R3-SMS-R3 — the login toast moves to the BOTTOM (owner request)
   ===========================================================================
   It was pinned top/right and slid in from the right edge. The owner wants it at
   the bottom. Only the position and the entrance change here: the R3-SMS-UI
   typography (13px message, 13px title, 22.75px leading, 10px 12px padding, 8px
   gap, 16px icon) is deliberately untouched, because the point of that phase was
   to stop this component shouting.

   Centring uses `inset-inline:0` + `margin-inline:auto` rather than
   `translateX(-50%)`: the entrance animation below animates `transform`, and a
   centring transform would fight it and make the toast drift sideways as it
   appeared. */
/* Digits pins the card horizontally with its own `dig_popmessage_right` /
   `dig_popmessage_left` classes, which outrank a bare `.dig_popmessage` rule and
   kept it hard against the right edge (measured: left:996 of a 1440 viewport,
   card centre 1206 vs viewport centre 720). The compound selectors below beat
   those, and PHYSICAL left/right are used rather than logical `inset-inline`,
   because on an RTL document the logical mapping is what made the override
   silently miss. */
.sh-auth-body .dig_popmessage,
.sh-auth-body .dig_popmessage.dig_popmessage_right,
.sh-auth-body .dig_popmessage.dig_popmessage_left{
  inset-block-start:auto;
  top:auto;
  inset-block-end:calc(16px + env(safe-area-inset-bottom, 0px));
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  /* Digits ships `.dig_popmessage{left:unset!important;right:24px!important}`.
     An !important declaration beats any normal one regardless of specificity, so
     the override has to carry !important too - scoped to .sh-auth-body, and only
     for the two properties that pin the card sideways. */
  left:0 !important;
  right:0 !important;
  margin-inline:auto !important;
  /* bottom-centre on every width; never a full-bleed bar on a wide desktop */
  inline-size:min(420px, calc(100vw - 32px));
}

/* §17 — `dig_popBounceInRight` is a top/right-origin bounce and reads wrong on a
   control that now lives at the bottom. Replaced with a short rise-and-fade.
   The class is left on the element (Digits adds and removes it itself); only
   what it animates is redefined. */
@keyframes sh-auth-toast-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}
.sh-auth-body .dig_popmessage.dig_popBounceInRight,
.sh-auth-body .dig_popmessage.dig_popBounceIn{
  animation:sh-auth-toast-in .22s ease-out both !important;
}
@media (prefers-reduced-motion: reduce){
  .sh-auth-body .dig_popmessage.dig_popBounceInRight,
  .sh-auth-body .dig_popmessage.dig_popBounceIn{
    animation:none !important;
  }
}

/* §14 — the dismiss control was positioned against the old top-anchored card;
   it stays in the same corner of the card, which is now simply lower on screen.
   Nothing to change, recorded so the omission is deliberate rather than missed. */


/* ===========================================================================
   PHASE 2.13.16-R5 — two defects the owner found on the physical device.
   =========================================================================== */

/* W8-15 — revealing the password flipped the field to RTL.
   Measured at 1440/390/360, identically: direction ltr -> rtl the moment the eye
   is tapped. The cause is our own selector, not Digits: the LTR rule keys off
   `input[type="password"]`, and the reveal control changes the type to `text`,
   so the selector stops matching and the field inherits the shell's RTL.
   Patching only `[type=password]` again would reproduce the bug, so the rule is
   re-anchored to the password ROW, whose class survives the type toggle, plus
   the credential field names. Deliberately NOT applied to every auth input:
   the phone and Persian fields are legitimately RTL (§4). */
.sh-auth .digits_password_inp_row input,
.sh-auth input.new_password,
.sh-auth input[name="digits_login_password"],
.sh-auth input[name="digits_reg_password"],
.sh-auth input[name="digits_password"],
.sh-auth input[name="password"]{
  direction:ltr;
  text-align:start;
  unicode-bidi:normal;
}

/* W8-16 — the reveal icon stayed brand-purple on the purple surface.
   The glyph is an inline SVG drawn with `stroke="currentColor"`, and Digits
   ships `.digits_password_eye svg{color:var(--dprimary)}` (0,1,1) which our
   container rule never reached — the container was correctly faint, the SVG
   inside it was not. `.sh-auth .digits_password_eye-cont svg` is (0,2,1) and
   wins on specificity alone, so no !important is needed here.
   The colour is stated on the SVG because that is what `currentColor` resolves
   against; both the hidden and revealed icons are the same element, so one rule
   covers both states. */
/* Phase 2.13.16-R5.1 — the owner asked for WHITE, and R5 delivered lavender.
   `--sh-text-muted` (#B9AFD0) is "not purple any more", which is not the same
   thing as the requirement. The auth foreground the owner pointed at is the one
   the entered input text already uses: `--sh-text`, #F3EEFB = rgb(243,238,251).
   Using the token rather than repeating the literal keeps the eye tied to the
   same foreground as the field it sits in.

   EVERY state is set, not just the resting one: an icon that is white until you
   touch it and then dims is the same complaint in a different state. */
.sh-auth .digits_password_eye-cont svg,
.sh-auth .digits_password_eye-cont .digit-eye,
.sh-auth .digits_password_eye-cont:hover svg,
.sh-auth .digits_password_eye-cont:hover .digit-eye,
.sh-auth .digits_password_eye-cont:focus-visible svg,
.sh-auth .digits_password_eye-cont:active svg{
  color:var(--sh-text);
  stroke:currentColor;
}
/* the container's own hover colour fed `currentColor` and would have pulled the
   glyph back down to muted on touch; it follows the icon now. */
.sh-auth .digits_password_eye-cont,
.sh-auth .digits_password_eye-cont:hover{
  color:var(--sh-text);
}


/* ===========================================================================
   PHASE 2.13.16-R5.2 — iOS Safari zoomed the page when a Login field was tapped
   ===========================================================================
   Measured cause, not assumed: iOS Safari auto-zooms a focused form control
   whose rendered font-size is under 16px. The auth controls were

       390px : 15px   (--sh-fs-base)
       360px : 13px   (auth.css:896 drops them to --sh-fs-sm)

   so every phone hit the threshold, and the narrower the device the worse it
   got. The country-code field was already 17px and never zoomed, which is why
   the effect looked inconsistent.

   16px is applied to TEXT-ENTRY CONTROLS ONLY. Alerts stay at 13px (R3-SMS-UI),
   and labels, helper text and the toast are untouched — none of them can receive
   focus, so none of them can trigger the zoom.

   The OTP field is excluded: it is already larger (--sh-fs-lg) and this rule
   would shrink it.

   Applied at every width rather than behind a mobile media query: 1px on desktop
   is not "oversized", and a width breakpoint would miss an iPad in portrait,
   which zooms for the same reason. The fields are 52px tall, so the extra pixel
   changes no layout.

   NOTE ON WHAT IS NOT DONE: the page keeps
       width=device-width, initial-scale=1, viewport-fit=cover
   `user-scalable=no` and `maximum-scale=1` would also stop the zoom and are the
   usual shortcut — they are NOT used, because they take pinch-zoom away from
   everyone who needs it. Fixing the type size removes the cause instead. */
.sh-auth .digits-form_input input:not(.otp_input):not(.digits_otp_input-field),
.sh-auth .digits2_box .digits-form_input input:not(.otp_input):not(.digits_otp_input-field),
.sh-auth input.dig-mobile_field,
.sh-auth .digits_password_inp_row input,
.sh-auth select,
.sh-auth textarea{
  font-size:16px;
}
/* the 360px rule above drops controls to 13px; it must not re-introduce the zoom */
@media (max-width:360px){
  .sh-auth .digits-form_input input:not(.otp_input):not(.digits_otp_input-field),
  .sh-auth input.dig-mobile_field,
  .sh-auth .digits_password_inp_row input,
  .sh-auth select,
  .sh-auth textarea{
    font-size:16px;
  }
}

/* ===========================================================================
   PHASE 2.13.16-R5.8 — the password eye was a 28x28 tap target
   ===========================================================================
   Owner finding on a physical iPhone: the eye looks right but one normal thumb
   tap usually does nothing; only repeated, very precise taps toggle it.

   MEASURED CAUSE, in the state the user actually taps (the eye is opacity:0
   until the field has content, so the empty-field state measures nothing
   useful): the interactive box is 28x28 around a 24x24 glyph — 2px of slack.
   elementFromPoint at the four corners of a realistic 44px thumb contact patch
   returns `input.new_password`, not the eye. A tap landing more than ~14px from
   the glyph centre therefore focuses the password field instead of toggling it,
   which is exactly "nothing happened, try again more carefully".

   THE GLYPH IS NOT ENLARGED. The 24x24 svg and its position are untouched; only
   the hit area grows, via a centred, invisible pseudo-element. Using ::before
   rather than resizing the box means the element's own geometry — and therefore
   the vertical centring fixed in W8-13 — cannot shift: a wider absolutely
   positioned box anchored by inset-inline-end would have pushed the glyph ~8px
   inward.

   The overlay extends the tappable region from 14px to 22px either side of the
   glyph centre. That takes a further ~8px strip off the trailing edge of the
   password field; the remaining ~280px of the field stays tappable for placing
   the caret. That trade is the point of a 44px target, not a side effect of it.

   touch-action:manipulation removes the double-tap-to-zoom wait on THIS control
   only, which is what produces the "laggy / needs another tap" feel. It does not
   affect pinch zoom, and no viewport zoom restriction is used anywhere. */
.sh-auth .digits_password_eye-cont,
.sh-auth .digits_password_eye{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  /* Digits sets overflow:hidden on this 28x28 box, which clipped the hit-area
     overlay below back to 28x28 and made the first attempt a no-op. Releasing
     the clip is visually inert HERE because the container's real children — a
     24x24 svg and a 17x17 absolutely positioned marker — already sit inside the
     box. Verified by pixel-comparing the rendered control against the pre-R5.8
     stylesheet, not by reading the rule. */
  overflow:visible;
}
.sh-auth .digits_password_eye-cont::before{
  content:"";
  position:absolute;
  /* PHYSICAL top/left, not logical inset-inline: under RTL the logical form
     resolves to the opposite edge and the 44px box lands beside the glyph
     instead of on it. top/left + translate(-50%,-50%) centres the overlay on
     the element's own centre in both directions. */
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  /* 48, not the bare 44 minimum: the complaint is reliability with a thumb, and
     44 leaves nothing for the contact patch being a few px off-centre. The
     overlay is invisible, so the extra 4px costs nothing visually. */
  inline-size:48px;
  block-size:48px;
  /* deliberately no background and no border: the target is invisible */
}
/* NOTE — a `> * { position:relative; z-index:1 }` rule was tried here to keep
   the glyph above its own hit area. It is WRONG and was removed: the container
   holds an absolutely positioned marker (.digits_password_eye-open), and
   forcing position:relative pulled it into flow, which shifted the svg ~9px
   above the 28px box. With the vendor's overflow:hidden still in force that
   clipped the top of the eye. It is unnecessary anyway — a ::before with no
   z-index paints beneath the element's own child content, so the glyph is
   already on top. */

/* ===========================================================================
   PHASE 2.13.16-R5.9 — a detached slash beside the password field
   ===========================================================================
   Owner finding on a physical iPhone: before the eye is ever tapped, a diagonal
   line sits on its own near the lower-right of the password input; tapping once
   moves it onto the eye, tapping again removes it.

   THIS WAS CAUSED BY R5.8. Measured, per state, with the field filled:

     A  password hidden, before any tap
        .digits_password_eye-line  transform: rotate(-45deg) translate(30px,30px)
        -> centre 30px down-right of the eye. VISIBLE.
     B  after first tap (container gains .eye-closed, line gains
        .digits_password_eye-closed-line)
        -> translate(0,0): correctly over the eye.
     C  after second tap
        -> the plugin's own JS sets inline display:none.

   Digits parks the marker outside the 28x28 box in state A and relies on its
   own overflow:hidden to clip it. R5.8 set overflow:visible on that container so
   the 48x48 touch overlay would not be clipped — which released the parked
   marker. The eye's opacity:0 on an empty field is why it was invisible until
   the user typed.

   THE FIX MATCHES THE PLUGIN'S OWN RESTING STATE. The marker carries
   `digits_password_eye-closed-line` only while it is meant to be drawn over the
   eye, so it is hidden whenever that class is absent. State A then renders
   exactly like state C, which is Digits' own definition of "password hidden" —
   this is not a guess at the intended semantics, it is the semantics the plugin
   applies to itself one toggle later.

   WHY NOT the alternatives:
   - Restoring overflow:hidden would re-clip the 48x48 touch target back to
     28x28 and undo R5.8 (§6).
   - Growing the container to 48x48 so the target is not clipped does NOT work:
     the clip region becomes +-24px from centre while the parked marker spans
     +21.5..+38.5px, so part of the slash would show anyway.
   - A blanket child-position override is the rule R5.8 already proved wrong
     (§5) and is not reintroduced here.

   Targeted by the marker's own class, not by element order or geometry, and it
   uses no directional property, so the RTL shell cannot move it. */
.sh-auth .digits_password_eye-cont .digits_password_eye-line:not(.digits_password_eye-closed-line){
  display:none;
}