/* ============================================================
   Mina × Digits — brand skin for the Digits auth forms
   (login / signup / forgot-password / OTP), standalone pages,
   popup, checkout and My Account.
   Tokens come from mina-global.css :root.

   IMPORTANT: Digits builds the phone field as a single bordered
   "pill" (country code + number share one wrapper border). So we
   recolor through Digits' OWN css variables + the wrapper, and we
   do NOT put borders/radius/padding on the individual inputs — that
   splits the pill and makes the number slide under the +98 box.
   ============================================================ */

/* ---------- center the standalone shortcode pages + close the footer gap ---------- */
body > main .digits_ui,
body > #content .digits_ui,
.site-main .digits_ui{
  max-width:480px;
  margin:32px auto 40px;
  padding:0 16px;
}
body > #digits_protected.digits_ui,
body > .digits_login_form.digits_ui{
  max-width:none;
  margin:0;
  padding:0;
}
body:has(> main .digits_ui) .mina-footer,
body:has(> #content .digits_ui) .mina-footer,
body:has(.site-main .digits_ui) .mina-footer{ margin-top:auto; }

/* ---------- recolor Digits natively via its own variables (no layout change) ---------- */
.digits-form_container,
.digits2_box,
.digits_ui .digits-form_wrapper{
  --dfield_bg:var(--mina-bg-warm) !important;   /* input background */
  --daccent:var(--mina-accent) !important;       /* focus / active border */
  --dbutton_text:#ffffff !important;             /* button label */
}

/* ---------- font ---------- */
.digits-form_container,
.digits-form_container *{
  font-family:'IRANSans','Vazirmatn',Tahoma,sans-serif !important;
}

/* ---------- the form card ---------- */
.digits-form_wrapper{
  background:var(--mina-bg-white) !important;
  border:1px solid color-mix(in srgb,var(--mina-dark) 9%,transparent) !important;
  border-radius:24px !important;
  box-shadow:0 22px 60px color-mix(in srgb,var(--mina-bg-dark) 10%,transparent) !important;
  padding:32px 30px !important;
  max-width:440px;
  margin:0 auto;
}

/* ---------- heading (force dark, regardless of Digits' --dprimary) ---------- */
.digits-form_heading_text{
  font-size:24px !important;
  font-weight:900 !important;
  color:var(--mina-bg-dark) !important;
}
.digits-form_heading_text::after{ background:var(--mina-accent) !important; }
.digits_back_icon{ color:var(--mina-muted) !important; }

/* ---------- login / signup tabs ---------- */
.digits-form_tab_wrapper{
  background:color-mix(in srgb,var(--mina-accent) 8%,var(--mina-bg-warm)) !important;
  border-radius:14px !important;
  padding:5px !important;
}
.digits-form_tab,
.digits-form_tab_item{ border-radius:10px !important; color:var(--mina-muted) !important; font-weight:700 !important; }
.digits-form_tab.active,
.digits-form_tab_item.active,
.digits-form_tab_item_active,
.digits-form_tab[aria-selected="true"]{
  background:var(--mina-bg-white) !important;
  color:var(--mina-bg-dark) !important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--mina-bg-dark) 8%,transparent) !important;
}

/* ---------- fields: keep Digits' layout, only set text colour + keep the pill seamless ---------- */
.digits2_box .digits-form_input input,
.digits2_box .digits-form_input input[type='text'],
.digits2_box .digits-form_input textarea{
  color:var(--mina-dark) !important;
}
.digits2_box .digits-form_input input.countrycode{
  background-color:transparent !important;   /* stays seamless inside the pill */
}
.digits-form_input input::placeholder,
.digits-form_input textarea::placeholder{ opacity:.5 !important; }

/* focus ring on the whole field pill (Digits toggles .digits-row_active) */
.digits-form_border.digits-row_active{
  border-color:var(--mina-accent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mina-accent) 18%,transparent) !important;
}

/* ---------- primary button (kill the default magenta) ---------- */
.digits-form_button,
.digits-form_button[type="submit"],
.digits-form_wrapper button[type="submit"],
.digits-form_wrapper input[type="submit"],
.digits_ui button[type="submit"]{
  background-color:var(--mina-green) !important;
  background-image:none !important;
  color:#fff !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--mina-green) 26%,transparent) !important;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.digits-form_button:hover,
.digits-form_wrapper button[type="submit"]:hover,
.digits_ui button[type="submit"]:hover{
  background-color:var(--mina-green-hov,#587465) !important;
  transform:translateY(-2px);
}
.digits-form_button-text{ font-weight:800 !important; font-size:17px !important; }

/* ---------- links ---------- */
.digits-form_wrapper a,
.digits_ui a{ color:var(--mina-accent-2) !important; font-weight:700; }
.digits-form_wrapper a:hover,
.digits_ui a:hover{ color:var(--mina-accent) !important; }

/* ---------- "remember me" + checkboxes ---------- */
.digits-form_wrapper input[type="checkbox"]{ accent-color:var(--mina-green); }

/* ---------- OTP code boxes (separate single-char boxes — borders are fine here) ---------- */
.digits-form_otp input,
.digits_otp input,
.digits-otp_field input,
.digits-form_otp_wrapper input{
  background:var(--mina-bg-warm) !important;
  border:1.5px solid color-mix(in srgb,var(--mina-dark) 14%,transparent) !important;
  border-radius:12px !important;
  font-weight:800 !important;
  color:var(--mina-bg-dark) !important;
}
.digits-form_otp input:focus,
.digits_otp input:focus{
  border-color:var(--mina-accent) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mina-accent) 18%,transparent) !important;
}
.digits_resendotp,
.dig_resendotp{ color:var(--mina-accent-2) !important; }

/* ---------- responsive ---------- */
@media(max-width:520px){
  body > main .digits_ui,
  body > #content .digits_ui,
  .site-main .digits_ui{ margin:24px auto 32px; }
  .digits-form_wrapper{ padding:24px 18px !important; border-radius:20px !important; }
  .digits-form_heading_text{ font-size:21px !important; }
}