/* ============================================================================
   PTSB Online Banking — Polish Layer
   ----------------------------------------------------------------------------
   Loaded AFTER style.css and responsive.css. Fine-detail refinements: brand
   gradient on the submit button, soft brand-tinted card shadows, refined focus
   rings on inputs, tighter footer-icon alignment, smoother "or" divider,
   accessible focus outlines on links, and 180ms interactivity transitions.

   Brand palette (extracted from vendor CSS):
     #1D252C   navy-charcoal — headings, header background
     #D23A06   deep orange-red — focus, links, accents
     #FF703E   bright orange — submit button
     #FFF6F2   warm peach — login card
     #FFDACB   salmon — notification banner
     #343F41   slate — secondary text
   ============================================================================ */

:root {
  --ptsb-navy: #1D252C;
  --ptsb-slate: #343F41;
  --ptsb-orange: #FF703E;
  --ptsb-orange-deep: #D23A06;
  --ptsb-peach: #FFF6F2;
  --ptsb-salmon: #FFDACB;
  --ptsb-hairline: rgba(29, 37, 44, 0.08);
  --ptsb-shadow-card: 0 6px 24px -8px rgba(210, 58, 6, 0.14),
                      0 2px 8px -2px rgba(29, 37, 44, 0.08);
  --ptsb-shadow-card-hover: 0 10px 32px -8px rgba(210, 58, 6, 0.20),
                            0 4px 12px -4px rgba(29, 37, 44, 0.10);
  --ptsb-focus-ring: 0 0 0 3px rgba(210, 58, 6, 0.28);
  --ptsb-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Global smoothing ---------- */

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Safe font fallback — Lato is loaded via @font-face in style.css. If the
   font files are missing / TLS blocks / slow load, browser falls back
   through this stack rather than showing giant Times New Roman. Also
   applied to inputs/buttons which browsers set to system-serif by default. */
body,
input,
button,
select,
textarea,
.module,
.module-login,
.module-header,
.module-footer,
h1, h2, h3, h4, h5, h6, p, label, span, a, li {
  font-family: 'Lato', 'Lato-Regular', 'Lato-Medium', 'Lato-Black',
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Everything with interactive intent gets a shared transition profile */
a,
button,
input,
.btn,
.module,
.module-login,
.module-need-help,
.module-protect-yourself,
.btn-close {
  transition: box-shadow 180ms var(--ptsb-ease),
              border-color 180ms var(--ptsb-ease),
              background-color 180ms var(--ptsb-ease),
              color 150ms var(--ptsb-ease),
              transform 120ms var(--ptsb-ease),
              opacity 150ms var(--ptsb-ease);
}

/* ---------- Selection color on-brand ---------- */

::selection {
  background: var(--ptsb-orange);
  color: var(--ptsb-navy);
}

/* ---------- Notification banner ---------- */

.module-notification-banner {
  border-radius: 10px !important;
  border: 1px solid rgba(210, 58, 6, 0.35) !important;
  background: linear-gradient(180deg, #FFE3D6 0%, var(--ptsb-salmon) 100%) !important;
  box-shadow: 0 2px 10px -2px rgba(210, 58, 6, 0.12);
  margin: 12px 12px 0 12px !important;
}
.module-notification-banner .btn-close {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.module-notification-banner .btn-close:hover,
.module-notification-banner .btn-close:focus-visible {
  background: rgba(255, 255, 255, 0.85);
  opacity: 1 !important;
  outline: none;
  box-shadow: var(--ptsb-focus-ring);
}

/* ---------- Header ---------- */

.module-header {
  background: linear-gradient(180deg, #232C35 0%, var(--ptsb-navy) 100%) !important;
  border-bottom: 1px solid var(--ptsb-slate) !important;
}

/* Desktop layout only — logo pinned left, welcome absolutely centered so the
   inner 1180px wrapper stays centered inside the full-bleed header bar.
   Mobile layout stays in the responsive.css @media(max-width:767px) block. */
@media (min-width: 768px) {
  .module-header {
    height: auto !important;
    min-height: 64px;
    padding: 12px 0 !important;
  }
  .module-header > div {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
  }
  .module-header .logo {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    height: auto;
    line-height: 0;
  }
  .module-header .logo img {
    display: block;
    height: 34px !important;
    width: auto !important;
    max-width: none;
  }
  .module-header .welcome {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* ---------- Cards: login, need-help, protect-yourself ---------- */

.module-login,
.module-need-help,
.module-protect-yourself {
  border-radius: 12px !important;
  border: 1px solid var(--ptsb-hairline) !important;
  box-shadow: var(--ptsb-shadow-card) !important;
  overflow: visible !important;
}
.module-login:hover,
.module-need-help:hover,
.module-protect-yourself:hover {
  box-shadow: var(--ptsb-shadow-card-hover) !important;
}

.module-login {
  background: linear-gradient(180deg, #FFFBF8 0%, var(--ptsb-peach) 100%) !important;
}
.module-need-help,
.module-protect-yourself {
  background: #FFFFFF !important;
}

/* Card headings */
.module-login h1,
.heading-help,
.heading-excl {
  letter-spacing: -0.2px;
  color: var(--ptsb-navy);
}

/* ---------- Form inputs ---------- */

.module-login input.large {
  border: 1.5px solid #E8DCD3 !important;
  background: #FFFFFF !important;
  color: var(--ptsb-navy) !important;
  caret-color: var(--ptsb-orange-deep);
  box-shadow: inset 0 1px 2px rgba(29, 37, 44, 0.04);
  outline: none;
}
.module-login input.large::placeholder {
  color: #B9AFA6;
  opacity: 1;
}
.module-login input.large:hover {
  border-color: #D8C5B8 !important;
}
.module-login input.large:focus,
.module-login input.large:focus-visible {
  border-color: var(--ptsb-orange-deep) !important;
  background: #FFFFFF !important;
  box-shadow: var(--ptsb-focus-ring), inset 0 1px 2px rgba(29, 37, 44, 0.04);
  outline: none;
}
.module-login .editor-field.focus input.large {
  border-color: var(--ptsb-orange-deep) !important;
}

/* Error field state */
.module-login input.large.error,
.module-login input.large.input-validation-error {
  border-color: var(--ptsb-orange-deep) !important;
  background: #FFF8F5 !important;
}

/* Labels */
.module-login ul.step-1 li label {
  color: var(--ptsb-navy);
  letter-spacing: 0.1px;
}
.module-login ul.step-1 li label span {
  color: var(--ptsb-slate);
  opacity: 0.75;
}

/* ---------- Submit button ---------- */

.module-login .btn,
.module-login .btn-submit,
.btn-submit {
  background: linear-gradient(180deg, #FF8558 0%, var(--ptsb-orange) 55%, #EE5A28 100%) !important;
  color: var(--ptsb-navy) !important;
  border-radius: 8px !important;
  font-family: 'Lato-Black', 'Lato', -apple-system, Segoe UI, Roboto, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 6px 16px -4px rgba(210, 58, 6, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.module-login .btn:hover,
.module-login .btn-submit:hover,
.btn-submit:hover {
  background: linear-gradient(180deg, #FF9370 0%, #FF7A48 55%, #E85622 100%) !important;
  box-shadow: 0 10px 24px -6px rgba(210, 58, 6, 0.48),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.module-login .btn:active,
.module-login .btn-submit:active,
.btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px -3px rgba(210, 58, 6, 0.4),
              inset 0 2px 4px rgba(0, 0, 0, 0.12);
}
.module-login .btn:focus-visible,
.module-login .btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 6px 16px -4px rgba(210, 58, 6, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.35),
              var(--ptsb-focus-ring);
}
.module-login .btn-submit[disabled],
.btn-submit[disabled] {
  filter: grayscale(0.3);
  cursor: not-allowed;
  transform: none;
}

/* ---------- Links ---------- */

a {
  color: var(--ptsb-orange-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: #A62E04;
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--ptsb-focus-ring);
  border-radius: 3px;
}
#gbtnforgot {
  font-weight: 600;
}

/* ---------- "or" divider ---------- */

.hr {
  margin: 20px 0 !important;
  text-align: center !important;
  color: var(--ptsb-slate);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hr:before {
  border-top: 1px solid rgba(29, 37, 44, 0.10) !important;
}
.hr span {
  background: #FFFFFF !important;
  padding: 2px 12px !important;
  color: var(--ptsb-slate);
}
.module-need-help .hr span {
  background: #FFFFFF !important;
}

/* ---------- Arrow lists ---------- */

.arrows li,
.arrows-hovered li {
  line-height: 1.5;
  color: var(--ptsb-slate);
}
.arrows-hovered li a {
  font-weight: 600;
}

/* ---------- Footer ---------- */

.module-footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F5 100%) !important;
  border-top: 1px solid var(--ptsb-hairline);
  color: var(--ptsb-slate);
}
.module-footer .label {
  color: var(--ptsb-navy) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}
.module-footer .label i {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 !important;
  flex-shrink: 0;
}
.module-footer .icon-footer-logo {
  opacity: 0.9;
}
.module-footer a {
  color: var(--ptsb-orange-deep);
  font-weight: 600;
}
.module-footer a:hover {
  color: #A62E04;
}
.module-footer .icon-twitter {
  vertical-align: middle;
  margin-right: 2px !important;
}

/* ---------- Focus visibility everywhere ---------- */

button:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--ptsb-focus-ring);
}

/* ---------- Desktop layout — narrow centered login column ---------- */
/* On real PTSB desktop the login card sits in a ~500px centered column, with
   the two info cards (Need help / Important Fraud Information) directly under
   it, matching the same column width and split 50/50. Only the LOGIN flow
   pages (Step 1 and Step 2) get this narrow column — authed pages stay at the
   full 1180px cap so dashboards and tables have room. We detect a login
   surface by the presence of a `.module-login` card inside `#wrap`. */
@media (min-width: 768px) {
  #wrap:has(.module-login) #main > .row {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The two info cards below the login — match the cream card treatment
     instead of pure white so the whole login stack reads as one unit. */
  #wrap:has(.module-login) .module-need-help,
  #wrap:has(.module-login) .module-protect-yourself {
    background: linear-gradient(180deg, #FFFBF8 0%, var(--ptsb-peach) 100%) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Login card inner padding — tighten on desktop so the ~500px card doesn't
     feel airy. */
  .module-login .padding {
    padding: 26px 28px 22px !important;
  }

  /* Center the "Login (Step 1 of 2)" heading like the real page */
  .module-login h1 {
    text-align: center !important;
    margin-bottom: 22px !important;
  }

  /* Continue button — centered pill, not full-width */
  .module-login footer.full-width {
    text-align: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .module-login .btn-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 180px !important;
    padding: 12px 30px !important;
    text-align: center !important;
    font-size: 15px !important;
    float: none !important;
  }
  .module-login .btn-submit span {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Info cards padding parity */
  .module-need-help .padding,
  .module-protect-yourself .padding {
    padding: 20px 22px !important;
  }

  /* Gutter between the two info cards */
  .gutter-right-half { padding-right: 8px !important; }
  .gutter-left-half  { padding-left:  8px !important; }
}

/* ---------- Tighter mobile rhythm (≤ 767px) ---------- */

@media (max-width: 767px) {
  .module-notification-banner {
    margin: 10px 10px 0 10px !important;
    font-size: 12.5px !important;
    box-shadow: 0 2px 8px -2px rgba(210, 58, 6, 0.10);
  }

  .module-header {
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.5);
  }

  .module-login,
  .module-need-help,
  .module-protect-yourself {
    border-radius: 14px !important;
    box-shadow: 0 4px 16px -6px rgba(210, 58, 6, 0.12),
                0 1px 4px -1px rgba(29, 37, 44, 0.06) !important;
  }
  .module-login {
    /* Slight lift from the dark background */
    margin: 16px 0 !important;
  }

  .module-login h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
  .module-login h1 span {
    font-weight: 800 !important;
  }

  .module-login input.large {
    border-radius: 10px !important;
  }
  .module-login .btn-submit {
    border-radius: 12px !important;
    min-height: 52px !important;
    font-size: 16px !important;
    box-shadow: 0 8px 20px -6px rgba(210, 58, 6, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  #main {
    padding-top: 4px;
  }

  /* Consistent vertical rhythm between cards */
  .row + .row {
    margin-top: 12px !important;
  }
}

/* ---------- Ultra-small phones — trim shadows so they don't clip ---------- */

@media (max-width: 360px) {
  .module-login,
  .module-need-help,
  .module-protect-yourself {
    border-radius: 12px !important;
  }
  .module-login .btn-submit {
    border-radius: 10px !important;
    min-height: 48px !important;
  }
}

/* ---------- Dark mode preference — subtle adaptation ---------- */
/* We keep the brand look but soften the pure-white cards for OLED comfort. */
@media (prefers-color-scheme: dark) {
  .module-need-help,
  .module-protect-yourself {
    background: #FAF7F5 !important;
  }
}

/* ---------- Motion: subtle card entrance on load ---------- */

@keyframes ptsb-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .module-login,
  .module-need-help,
  .module-protect-yourself {
    animation: ptsb-card-in 380ms var(--ptsb-ease) both;
  }
  .module-need-help {
    animation-delay: 80ms;
  }
  .module-protect-yourself {
    animation-delay: 160ms;
  }
}