/* Sign in -- the approved "ABK login phone" design.
 *
 * Loaded by core/login.html only. Every rule is scoped under #abk-login (the
 * card, which also holds the help dialogs) or the sign-in body/main, so an id
 * outranks the shell's global element rules (abk.css) and the Metronic .btn
 * chain without touching either. Buttons carry `btn` for the migrated-page
 * gate; the properties that brings in are reset below.
 *
 * The design is light-only (color-scheme: light), so this page ignores the
 * stored dark theme on purpose. Logical properties throughout: in Arabic the
 * form panel reads right-to-left while the card keeps the artwork on the
 * left, exactly as the design specifies.
 */

#kt_app_body.abk-login-body {
  color-scheme: light;
  min-width: 320px;
  height: auto;
  min-height: 100svh;
  margin: 0;
  /* The body's background paints the whole canvas but is sized to the root
     element, one viewport tall. When the card outgrows a short window the
     page scrolls, and a repeating gradient would start again below the fold
     as a visible band under the form. Paint it once; its own end colour
     carries on underneath. */
  background: radial-gradient(ellipse at 30% 20%, #f0f4f5 0%, #e0e8ec 75%) no-repeat #e0e8ec;
}

.abk-login-main {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(20px, 4vw, 64px);
}

#abk-login {
  --ink: #142c3c;
  --muted: #6c7d86;
  --blue: #006eb8;
  --blue-dark: #005c9b;
  --line: #dae2e6;
  --danger: #b63142;
  --focus: #6bb4df;
  color-scheme: light;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  box-sizing: border-box;
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  width: 100%;
  max-width: 1480px;
  min-height: clamp(690px, calc(100svh - 112px), 850px);
  border-radius: 42px;
  overflow: hidden;
  background: #d3dfe4;
  box-shadow: 0 32px 80px #20353e13;
}
#abk-login *, #abk-login *::before, #abk-login *::after { box-sizing: border-box; }
[dir="rtl"] #abk-login .login-panel,
[dir="rtl"] #abk-login .visual-panel,
[dir="rtl"] #abk-login .help-dialog { direction: rtl; }

/* ── shared resets: the shell's button/input/heading rules stop here ── */
#abk-login button,
#abk-login input { font: inherit; letter-spacing: normal; }
#abk-login .btn {
  min-width: 0;
  min-height: 0;
  margin: 0;
  box-shadow: none;
  text-transform: none;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#abk-login .btn:focus-visible,
#abk-login input:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 4px; }
#abk-login button:disabled { cursor: default; opacity: .6; }
#abk-login h1,
#abk-login h2,
#abk-login p { color: inherit; }

/* ── visual panel ── */
#abk-login .visual-panel { position: relative; min-width: 0; overflow: hidden; padding: 46px 35px 0; background: linear-gradient(145deg, #dbe5e9, #cddbe2); text-align: center; isolation: isolate; }
#abk-login .visual-eyebrow { position: relative; z-index: 1; margin: 0; color: #647d8a; font-size: 12px; line-height: 1.7; letter-spacing: .1px; }
#abk-login .visual-title { position: relative; z-index: 1; margin: 44px 0 0; font-size: clamp(38px, 3.8vw, 58px); line-height: 1.06; letter-spacing: -2.3px; font-weight: 500; color: #17394c; }
#abk-login .orbit { position: absolute; z-index: 0; left: 50%; top: 49px; transform: translateX(-50%); width: 310px; height: 310px; border: 1px solid #7896a215; border-radius: 50%; pointer-events: none; }
#abk-login .orbit-two { width: 430px; height: 430px; top: -11px; }
/* The wallet stands clear of the panel edges (unlike a cropped hand), so it
   is centred under the headline with a soft blue pool echoing its glow. */
#abk-login .visual-panel::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 10%; width: 62%; height: 30%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #2f5bff2e, #2f5bff00); pointer-events: none; }
#abk-login .hero-art { position: absolute; display: block; z-index: 2; left: 0; right: 0; bottom: 8%; width: 100%; height: 52%; margin-inline: auto; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 28px 36px #0d1f4a33); }

/* ── login panel ── */
#abk-login .login-panel { position: relative; z-index: 4; display: flex; flex-direction: column; min-width: 0; padding: 43px clamp(34px, 4vw, 64px) 30px; background: #fff; border-radius: 42px 0 0 42px; }
#abk-login .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
#abk-login .abk-logo { display: block; width: 116px; height: auto; }

#abk-login .language-switch { display: flex; align-items: center; gap: 6px; padding-top: 4px; color: #ccd5da; font-size: 11px; direction: ltr; }
#abk-login .language-switch form { margin: 0; }
#abk-login .lang-choice { min-height: 32px; min-width: 28px; padding: 3px; border: 0; border-radius: 5px; background: none; color: #7b8c95; font-size: 11px; }
#abk-login .lang-choice[aria-current="true"] { color: var(--blue); font-weight: 650; }
#abk-login .lang-choice:hover { background: none; color: var(--ink); }

#abk-login .login-content { width: 100%; max-width: 420px; margin: auto; padding-block: 48px; }
#abk-login .product-label { margin: 0 0 17px; font-size: 9px; line-height: 1.7; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: #668297; }
#abk-login h1 { margin: 0; font-family: inherit; font-size: clamp(34px, 3.25vw, 46px); line-height: 1.18; letter-spacing: -1.7px; font-weight: 500; color: var(--ink); }
#abk-login .intro { margin: 13px 0 38px; color: var(--muted); font-size: 13px; line-height: 1.65; }

/* Pill fields with the label notched into the top border. */
#abk-login .field-group { margin-bottom: 23px; }
#abk-login .floating-field { position: relative; }
#abk-login .floating-field label { position: absolute; z-index: 1; top: -8px; inset-inline-start: 23px; margin: 0; padding-inline: 6px; background: #fff; color: #3f5665; font-size: 11px; font-weight: 400; line-height: 16px; }
#abk-login .floating-field input { display: block; width: 100%; height: 58px; min-height: 0; margin: 0; padding: 0 28px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; box-shadow: none; transition: border-color .16s, box-shadow .16s; }
#abk-login .floating-field input::placeholder { color: #82929b; opacity: 1; }
/* Edge draws its own reveal (and clear) control inside a password field, a
   second eye beside the page's own toggle. Only the page's one is kept. */
#abk-login input[type="password"]::-ms-reveal,
#abk-login input[type="password"]::-ms-clear,
#abk-login input::-ms-clear { display: none; }
#abk-login .floating-field input:hover { border-color: #a9bcc7; }
#abk-login .floating-field input:focus { outline: none !important; border-color: var(--blue); box-shadow: 0 0 0 3px #006eb80d; }
#abk-login .floating-field:focus-within label { color: var(--blue); }
#abk-login .floating-field input[aria-invalid="true"] { border-color: var(--danger); }
#abk-login .floating-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px #b631420d; }
#abk-login .password-field input { padding-inline-end: 58px; }

#abk-login .icon-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8fa0a9; }
#abk-login .icon-button:hover { background: #f3f7f9; color: var(--blue); }
#abk-login .password-toggle { position: absolute; top: 9px; inset-inline-end: 12px; }
#abk-login .password-toggle[hidden] { display: none; }
#abk-login .eye-slash { display: none; }
#abk-login .password-toggle[aria-pressed="true"] .eye-slash { display: block; }

#abk-login .form-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: -1px 5px 29px; font-size: 11px; line-height: 1.6; }
#abk-login .remember-control { display: flex; align-items: center; gap: 7px; margin: 0; color: #637b88; font-size: inherit; cursor: pointer; }
#abk-login .remember-control input { flex-shrink: 0; width: 14px; height: 14px; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue); cursor: pointer; }

#abk-login .text-button { display: inline; vertical-align: baseline; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--blue); font-size: inherit; line-height: inherit; }
#abk-login .text-button:hover { background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

#abk-login .sign-in-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.5; transition: background .15s, transform .15s; }
#abk-login .sign-in-button:hover,
#abk-login .sign-in-button:focus-visible { background: var(--blue-dark); color: #fff; }
#abk-login .sign-in-button:active { background: var(--blue-dark); color: #fff; transform: translateY(1px); }
#abk-login .sign-in-button:disabled { opacity: .75; cursor: progress; }
#abk-login .sign-in-button .spinner-border { margin: 0 !important; }
#abk-login .sign-in-button[aria-busy="true"] .button-arrow { display: none; }

#abk-login .access-note { margin: 24px 0 0; text-align: center; font-size: 11px; line-height: 1.8; color: #86959d; }
#abk-login .access-note .text-button,
#abk-login .access-note .text-button:hover { color: #496776; }
#abk-login .credit-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 10px; line-height: 1.7; color: #8a989f; }
#abk-login .credit-note a { color: #5b717e; text-decoration: none; }
#abk-login .credit-note a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
#abk-login .panel-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-size: 9px; line-height: 1.7; color: #8a989f; }
#abk-login .panel-footer .text-button,
#abk-login .panel-footer .text-button:hover { color: #5b717e; }
#abk-login .field-error { margin: 7px 0 0; padding-inline: 23px; color: var(--danger); font-size: 11px; line-height: 1.6; }

/* A failed sign-in, announced by role="alert": the design's status-note
   shape, in its danger colour. */
#abk-login .form-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 26px; padding: 12px 16px; border-radius: 14px; background: #fbf0f1; color: var(--danger); font-size: 12px; line-height: 1.6; }
#abk-login .form-alert svg { flex-shrink: 0; margin-top: 1px; }

/* ── help dialogs ── */
#abk-login .help-dialog { width: min(440px, calc(100vw - 36px)); padding: 34px; border: 1px solid #e0e7ec; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px #19344830; }
#abk-login .help-dialog::backdrop { background: #0e2d4260; backdrop-filter: blur(5px); }
#abk-login .dialog-close { position: absolute; top: 10px; inset-inline-end: 10px; }
#abk-login .dialog-eyebrow { margin: 4px 0 15px; color: var(--blue); font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; }
#abk-login .help-dialog h2 { margin: 0 0 13px; font-family: inherit; font-size: 25px; line-height: 1.25; letter-spacing: -.6px; font-weight: 500; color: var(--ink); }
#abk-login .dialog-text { margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ── Arabic: tracking is for Latin capitals only ── */
[dir="rtl"] #abk-login .visual-eyebrow,
[dir="rtl"] #abk-login .visual-title,
[dir="rtl"] #abk-login .product-label,
[dir="rtl"] #abk-login h1,
[dir="rtl"] #abk-login .help-dialog h2,
[dir="rtl"] #abk-login .dialog-eyebrow { letter-spacing: 0; }
[dir="rtl"] #abk-login .product-label { font-size: 12px; }
[dir="rtl"] #abk-login .button-arrow { transform: rotate(180deg); }

/* ── responsive (the design's own breakpoints) ── */
@media (min-width: 981px) and (max-height: 820px) {
  .abk-login-main { padding: 20px; }
  #abk-login { min-height: calc(100svh - 40px); }
  #abk-login .login-panel { padding-top: 29px; padding-bottom: 23px; }
  #abk-login .login-content { padding-block: 33px; }
  #abk-login .abk-logo { width: 100px; }
  #abk-login h1 { font-size: 38px; }
  #abk-login .intro { margin-bottom: 32px; }
  #abk-login .visual-title { margin-top: 32px; font-size: 46px; }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .abk-login-main { padding: 24px; }
  #abk-login .login-panel { padding-inline: 32px; }
  #abk-login .visual-title { font-size: 43px; }
  #abk-login .visual-eyebrow { font-size: 11px; }
  #abk-login .product-label { letter-spacing: 1.5px; font-size: 8px; }
}
@media (max-width: 980px) {
  .abk-login-main { padding: 22px; }
  #abk-login { max-width: 550px; grid-template-columns: 1fr; min-height: min(800px, calc(100svh - 44px)); border-radius: 32px; }
  #abk-login .visual-panel { display: none; }
  #abk-login .login-panel { min-height: inherit; border-radius: 0; padding: 34px 42px 26px; }
  #abk-login .login-content { padding-block: 56px; }
  #abk-login h1 { font-size: 40px; }
  #abk-login .intro { font-size: 14px; }
}
@media (max-width: 430px) {
  .abk-login-main { padding: 12px; }
  #abk-login { min-height: calc(100svh - 24px); border-radius: 26px; }
  #abk-login .login-panel { padding: 28px 25px 24px; }
  #abk-login .abk-logo { width: 102px; }
  #abk-login .login-content { padding-block: 50px; }
  #abk-login .product-label { font-size: 8px; letter-spacing: 1.3px; }
  #abk-login h1 { font-size: 35px; }
  #abk-login .intro { font-size: 12px; margin-bottom: 35px; }
  #abk-login .floating-field input { height: 56px; font-size: 12px; padding-inline-start: 25px; }
  #abk-login .password-toggle { top: 8px; }
  #abk-login .form-options,
  #abk-login .access-note { font-size: 10px; }
  #abk-login .panel-footer { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #abk-login *, #abk-login *::before, #abk-login *::after { transition: none !important; }
}