/* Shared Fashion Express account UI (sign in / forgot / reset password / email confirmation).
   Follows the storefront's sign-in page (fashionexpress-web.wafisoftware.com/auth): a bordered box
   centred on the page — the brand-green panel on the left, the form on the right — with its
   colours, 44px controls and Inter / Manrope type. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#lpx-wrapper,
.lpx-content,
#lpx-wrapper .card,
#lpx-wrapper .card-body { all: unset !important; display: contents !important; }
/* The LeptonX Lite empty layout wraps the page in a Bootstrap .container; it becomes the full-page
   stage the box is centred on. */
body.abp-empty-layout > .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 100vh;
  padding: 48px 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

:root {
  --su-brand: #E30613;            /* the StarPlus logo red */
  --su-brand-h: #C4040F;          /* hover on a red fill — the storefront's hover */
  --su-brand-dark: #8B0000;       /* the logo's darker red */
  --su-brand-bright: #E30613;
  --su-brand-ring: rgba(227,6,19,.2);
  --su-ink-900: #1C1C1C;
  --su-ink-700: #595959;          /* headings, labels and field text */
  --su-ink-500: #777777;          /* muted text and field icons */
  --su-ink-400: #9A9A9A;
  --su-bg: #FFFFFF;
  --su-field: #F5F5F4;
  --su-border: #E7E5E4;
  --su-danger: #DC2626;
  --su-radius-card: 6px;
  --su-radius-control: 8.4px;
  --su-ease: cubic-bezier(.4,0,.2,1);
  --su-font: 'Inter', 'Noto Sans Bengali', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --su-font-heading: 'Manrope', 'Inter', 'Noto Sans Bengali', ui-sans-serif, system-ui, sans-serif;

  /* Older names, kept for any markup that still refers to them. */
  --su-brand-50: #FFF6F5;
  --su-brand-100: #FDECEB;
  --su-brand-600: #E30613;
  --su-ink-800: #595959;
  --su-ink-600: #595959;
  --su-border-strong: #D6D3D1;
  --su-radius-sm: 6px;
  --su-radius-md: 8.4px;
  --su-shadow-md: none;
}

html, body {
  min-height: 100%;
  font-family: var(--su-font);
  -webkit-font-smoothing: antialiased;
}

body, body.abp-empty-layout {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--su-ink-700);
  background: var(--su-bg) !important;
  overflow-x: hidden;
}

/* ── The box ─────────────────────────────────────────────────────────────── */
.su-grid {
  display: grid;
  grid-template-columns: minmax(0, 416fr) minmax(0, 478fr);
  width: 100%;
  max-width: 896px;
  background: var(--su-bg);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius-card);
  overflow: hidden;
}

/* ── Left: brand panel ───────────────────────────────────────────────────── */
.su-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  color: #fff;
  background: linear-gradient(135deg, var(--su-brand-dark) 0%, var(--su-brand) 45%, var(--su-brand-bright) 100%);
}
.su-brand-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 6px;
  /* Solid white: the mark is red, and any tint of the red panel behind it would muddy it. */
  background: #fff;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}
.su-brand-logo-img { height: 36px; width: auto; display: block; object-fit: contain; }
.su-panel-content { display: flex; flex-direction: column; }
.su-brand-heading {
  font-family: var(--su-font-heading);
  font-size: 30px;
  line-height: 1.375;
  letter-spacing: -.025em;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.su-benefits { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.su-benefit { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.85); }
.su-benefit-ico {
  width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.su-benefit-ico svg { width: 10px; height: 10px; }
.su-brand-foot { font-size: 12px; line-height: 16px; color: rgba(255,255,255,.6); }
.su-brand-foot p { margin: 0; }
.su-brand-foot .su-brand-contact { margin-top: 6px; }

/* ── Right: form panel ───────────────────────────────────────────────────── */
.su-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--su-bg);
}
.su-form-wrap { width: 100%; max-width: 384px; }

.su-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; margin-bottom: 20px; }
.su-topbar > .su-lang:only-child { margin-left: auto; }
/* margin: Bootstrap's reboot gives every p a bottom margin, which pushed the eyebrow above the language link. */
.su-eyebrow { margin: 0; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--su-ink-500); }

.su-lang { display: flex; align-items: center; gap: 6px; color: var(--su-ink-500); font-size: 12px; }
.su-lang-btn.btn, .su-lang-btn {
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--su-brand) !important;
  font-weight: 500 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.su-lang-btn.btn:hover { opacity: .75; }
.su-lang .dropdown-menu { font-size: 13px; border-color: var(--su-border); border-radius: var(--su-radius-control); }

.su-head { margin-bottom: 20px; }
.su-title { font-family: var(--su-font-heading); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--su-ink-700); margin: 0; }
.su-sub { font-size: 14px; line-height: 20px; color: var(--su-ink-500); margin: 4px 0 0; }
.su-req { color: var(--su-danger); font-weight: 600; margin-left: 2px; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.su-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--su-radius-control); padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.su-alert:empty { display: none; }
.su-alert svg { flex-shrink: 0; margin-top: 2px; }
.su-alert.validation-summary-valid { display: none; }
.su-alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.su-alert-warn  { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.su-alert-ok    { background: #F2F7F4; border: 1px solid #CFE3D6; color: #0A4423; }
.alert-warning  { background: #FFFBEB !important; border-color: #FDE68A !important; color: #92400E !important; border-radius: var(--su-radius-control) !important; }
.alert-danger   { background: #FEF2F2 !important; border-color: #FECACA !important; color: #991B1B !important; border-radius: var(--su-radius-control) !important; }
.alert-dismissible .btn-close { top: 0 !important; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.su-form { display: block; }
.su-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.su-field label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--su-ink-700); }
.su-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-forgot { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--su-brand); text-decoration: none; transition: opacity .15s var(--su-ease); }
.su-forgot:hover { color: var(--su-brand); opacity: .75; }

.su-input-wrap { position: relative; display: flex; align-items: center; }
.su-lead-ico {
  position: absolute; left: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--su-ink-500); pointer-events: none;
}
.su-lead-ico svg { width: 16px; height: 16px; }
.su-ipt {
  width: 100%;
  height: 44px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--su-ink-700);
  background: var(--su-field);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius-control);
  padding: 4px 12px 4px 40px;
  outline: none;
  transition: border-color .15s var(--su-ease), box-shadow .15s var(--su-ease), background-color .15s var(--su-ease);
}
.su-ipt.su-ipt-pw { padding-right: 68px; }
.su-ipt::placeholder { color: var(--su-ink-500); }
.su-ipt:focus { background: var(--su-bg); border-color: var(--su-brand); box-shadow: 0 0 0 2px var(--su-brand-ring); }
/* Saved logins: LeptonX Lite paints autofilled inputs grey with blue text through
   input:-webkit-autofill(:hover|:focus). The browser's autofill background can only be covered with an
   inset shadow, so these repaint the field in this page's colours — one selector stronger than LeptonX's. */
input.su-ipt:-webkit-autofill,
input.su-ipt:-webkit-autofill:hover {
  border: 1px solid var(--su-border);
  -webkit-text-fill-color: var(--su-ink-700);
  box-shadow: 0 0 0 1000px var(--su-field) inset;
}
input.su-ipt:-webkit-autofill:focus {
  border: 1px solid var(--su-brand);
  -webkit-text-fill-color: var(--su-ink-700);
  box-shadow: 0 0 0 1000px var(--su-bg) inset, 0 0 0 2px var(--su-brand-ring);
}

/* Password reveal toggle */
.su-pw-toggle {
  position: absolute; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--su-ink-500); cursor: pointer;
  font-size: 16px; line-height: 1;
  border-radius: 6px;
}
.su-pw-toggle:hover { color: var(--su-ink-700); }

/* Caps lock indicator */
.su-caps { position: absolute; right: 42px; display: flex; align-items: center; font-size: 15px; color: #D97706; }

/* RTL */
[dir="rtl"] .su-lead-ico { left: auto; right: 14px; }
[dir="rtl"] .su-ipt { padding: 4px 40px 4px 12px; }
[dir="rtl"] .su-ipt.su-ipt-pw { padding-left: 68px; }
[dir="rtl"] .su-pw-toggle { right: auto; left: 10px; }
[dir="rtl"] .su-caps { right: auto; left: 42px; }

/* Validation */
.su-error { font-size: 12px; font-weight: 500; color: var(--su-danger); }
.su-error:empty { display: none; }
/* Validation messages carry no class= of ours on purpose. ASP.NET Core's validation tag
   helper builds its own class attribute and clobbers whatever we set, rendering the
   literal string "Microsoft.AspNetCore.Mvc.TagHelpers.TagHelperOutputExtensions+
   ClassAttributeHtmlContent" into the markup as a class name. That silently dropped the
   .su-error rules above; worse, it put the token "Microsoft" in the DOM of a page with a password
   field on a non-Microsoft domain, which is a brand-impersonation signal to the
   anti-phishing classifiers that flagged this deployment. So style by the data attribute
   the tag helper does emit reliably. */
[data-valmsg-for] { font-size: 12px; font-weight: 500; color: var(--su-danger); }
[data-valmsg-for]:empty { display: none; }
.field-validation-error { display: block; font-size: 12px; font-weight: 500; color: var(--su-danger); }
.input-validation-error { border-color: var(--su-danger) !important; box-shadow: 0 0 0 2px rgba(220,38,38,.14) !important; }

/* Remember me */
.su-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.su-chk-native { position: absolute; opacity: 0; width: 0; height: 0; }
.su-chk-box {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 1px solid var(--su-border-strong);
  border-radius: 4px;
  background: var(--su-field);
  display: grid; place-items: center;
  transition: background-color .15s var(--su-ease), border-color .15s var(--su-ease);
}
.su-chk-native:checked + .su-chk-box { background: var(--su-brand); border-color: var(--su-brand); }
.su-chk-native:checked + .su-chk-box::after {
  content: '';
  display: block;
  width: 8px; height: 4px;
  border-left: 1.8px solid #fff;
  border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.su-chk-native:focus-visible + .su-chk-box { box-shadow: 0 0 0 2px var(--su-brand-ring); }
.su-chk-lbl { font-size: 14px; line-height: 20px; color: var(--su-ink-500); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.su-primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 20px;
  padding: 0 12px;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600;
  color: #fff;
  background: var(--su-brand);
  border: 1px solid transparent;
  border-radius: var(--su-radius-control);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s var(--su-ease);
}
.su-primary-btn:hover { background: var(--su-brand-h); color: #fff; }
.su-primary-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--su-brand-ring); }
.su-primary-btn:disabled { opacity: .6; cursor: not-allowed; }
/* The storefront's buttons are text only; the arrow icons some pages still carry are not shown. */
.su-primary-btn > svg { display: none; }

.su-outline-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  padding: 0 12px;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--su-ink-700);
  background: var(--su-bg);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius-control);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s var(--su-ease);
}
.su-outline-btn:hover { background: var(--su-field); color: var(--su-ink-700); }

/* ── Links and footer ────────────────────────────────────────────────────── */
.su-signin { font-size: 14px; line-height: 20px; color: var(--su-ink-500); text-align: center; margin: 16px 0 0; }
.su-signin a { color: var(--su-brand); font-weight: 500; text-decoration: none; transition: opacity .15s var(--su-ease); }
.su-signin a:hover { color: var(--su-brand); opacity: .75; }
.su-foot { font-size: 12px; line-height: 16px; color: var(--su-ink-500); text-align: center; margin: 20px 0 0; }

/* ── Responsive (the storefront's lg / md breakpoints) ───────────────────── */
@media (max-width: 1023px) {
  .su-brand { padding: 32px; }
  .su-brand-heading { font-size: 24px; }
  .su-benefits, .su-brand-foot { display: none; }
}
@media (max-width: 767px) {
  body.abp-empty-layout > .container { padding: 24px 16px !important; align-items: flex-start; }
  .su-grid { grid-template-columns: 1fr; }
  .su-brand { padding: 24px; gap: 24px; }
  .su-brand-heading { font-size: 20px; }
  .su-form-panel { padding: 32px 20px; }
}