/*
 * LT-VMI Responsive — comprehensive mobile overrides for ALL page types.
 * Loaded after lt-vmi-base.css and lt-vmi-core.css.
 * Covers: VMI index, SEB, Swedbank, Luminor, Citadele, training-reveal
 * — every flow page across every bank.
 */

/* ============================================================ Global Mobile Reset */
html { -webkit-text-size-adjust: 100%; }
img, video, svg, canvas { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; }
* { box-sizing: border-box; }

/* ============================================================ Ultra-Small < 360px */
@media (max-width: 360px) {
  .vmi-bank-grid { gap: 8px; }
  .vmi-bank { padding: 10px; min-height: 80px; }
  .vmi-bank-logo { height: 24px; }
  .vmi-bank-logo img, .vmi-bank-logo svg { max-height: 18px; }
  .vmi-bank-logo .text-logo { font-size: 14px; }
  .vmi-bank-arrow { display: none; }
  .sw-logo { font-size: 16px !important; }
  .lt-otp-input { width: 34px; height: 42px; font-size: 18px; }
  .cit-await-logo { font-size: 18px; }
  .cit-await-title { font-size: 16px; }
  .cit-await-steps { gap: 4px; }
}

/* ============================================================ Mobile < 480px */
@media (max-width: 480px) {
  /* --- Kill horizontal scroll --- */
  html, body { overflow-x: hidden; width: 100%; }
  input, select, textarea, button { max-width: 100%; }
  * { word-break: break-word; }

  /* ============================================================ VMI Index */
  .vmi-header-inner { flex-wrap: wrap; padding: 0 14px; gap: 10px; }
  .vmi-logo-mark { width: 32px; height: 32px; font-size: 14px; }
  .vmi-logo-text .l1 { font-size: 12px; }
  .vmi-logo-text .l2 { font-size: 11px; }
  .vmi-page-title { font-size: 19px; }
  .vmi-page-lead { font-size: 13px; margin-bottom: 20px; }
  .vmi-stepper { padding: 14px; gap: 12px; }
  .vmi-bank { padding: 14px; min-height: 100px; gap: 8px; }
  .vmi-bank-logo { height: 28px; }
  .vmi-bank-logo img, .vmi-bank-logo svg { max-height: 22px; }
  .vmi-bank-logo .text-logo { font-size: 16px; }
  .vmi-bank-name { font-size: 13px; }
  .vmi-bank-tag { font-size: 11px; }
  .vmi-bank-arrow { top: 14px; right: 14px; width: 16px; height: 16px; font-size: 9px; }
  .vmi-trust { flex-direction: column; gap: 10px; padding: 14px; }
  .vmi-trust-item { font-size: 12px; }
  .vmi-step { gap: 10px; }
  .vmi-step-num { flex: 0 0 26px; width: 26px; height: 26px; font-size: 12px; }
  .vmi-step-body h3 { font-size: 13px; }
  .vmi-step-body p { font-size: 12px; }
  .vmi-footer-grid { gap: 12px; }
  .vmi-lang button { padding: 4px 8px; font-size: 12px; }
  .vmi-cookie { left: 12px; right: 12px; bottom: 12px; padding: 14px; font-size: 12px; max-width: none; }

  /* ============================================================ Swedbank */
  .sw-header { padding: 8px 14px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .sw-logo { font-size: 18px !important; }
  .sw-logo::after { width: 20px !important; height: 20px !important; }
  .sw-nav { margin-left: 0 !important; gap: 6px !important; order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sw-nav__item { font-size: 12px !important; white-space: nowrap; padding: 6px 2px !important; }
  .sw-header__right { gap: 8px !important; }
  .sw-header__right a { font-size: 12px !important; }
  .sw-lang-btn { font-size: 12px !important; }
  .sw-content { padding: 16px !important; }
  .sw-form { padding: 16px !important; }
  #sw-login-form { padding: 12px !important; }
  #userId, #secondary { font-size: 14px !important; padding: 10px 12px !important; }
  .sw-btn { width: 100% !important; padding: 12px !important; font-size: 14px !important; }
  .sw-warn { padding: 10px !important; font-size: 12px !important; }
  .sw-tab { font-size: 13px !important; padding: 8px 6px !important; }
  .sw-footer { padding: 16px !important; flex-direction: column !important; text-align: center !important; }

  /* Swedbank — Awaiting */
  .sw-await-card { padding: 20px 14px !important; }
  .sw-await-steps { gap: 4px; }
  .sw-await-step { width: 28px; height: 4px; }
  .sw-await-spinner { width: 56px; height: 56px !important; }
  .sw-await-title { font-size: 17px !important; }
  .sw-await-message { font-size: 13px !important; }
  .sw-await-timer { font-size: 13px !important; }

  /* Swedbank — Verification / PIN */
  .verification-container { padding: 20px 14px !important; }
  .verification-code { font-size: 28px !important; padding: 16px !important; max-width: 140px !important; letter-spacing: 6px !important; }
  .instructions { font-size: 13px !important; margin: 14px 0 !important; }
  .sub-instructions { font-size: 12px !important; }
  .loader { width: 24px !important; height: 24px !important; margin: 14px auto !important; }

  /* Swedbank — OTP */
  .otp-container { padding: 16px 0 !important; }
  .otp-instruction { font-size: 13px !important; }
  .otp-inputs { gap: 6px; }

  /* Swedbank — Debt */
  .debt-container { padding: 0 !important; }
  .debt-container .alert-box { padding: 12px !important; font-size: 13px !important; }
  .debt-container .alert-box.danger { padding: 10px 12px !important; }
  .debt-amount { font-size: 28px !important; padding: 14px 0 !important; }
  .debt-container .info-row { padding: 10px 14px !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .info-label { font-size: 12px !important; }
  .info-value { font-size: 14px !important; }
  .debt-container .warning-text { padding: 12px !important; font-size: 12px !important; }

  /* Swedbank — Complete */
  .complete-container { padding: 20px 0 !important; }
  .complete-container .success-icon { width: 60px !important; height: 60px !important; }
  .complete-container .success-icon svg { width: 32px !important; height: 32px !important; }
  .complete-container .message { font-size: 13px !important; }
  .complete-container .redirect-info { font-size: 12px !important; }

  /* Swedbank — Form Container (personal-details, card-details) */
  .form-container { padding: 0 !important; }
  .form-container .form-group { margin-bottom: 14px !important; }
  .form-container .form-group label { font-size: 13px !important; }
  .form-container .form-group input { font-size: 16px !important; padding: 12px 14px !important; }
  .form-row { flex-direction: column !important; gap: 0 !important; }
  .form-container .submit-btn { padding: 14px !important; font-size: 15px !important; }
  .help-text { font-size: 12px !important; }

  /* ============================================================ SEB */
  #header02 { padding: 8px 14px !important; }
  #header02 #logo img { max-height: 24px !important; }
  #header02 .sitename { display: none !important; }
  #header02 .header03 { display: none !important; }
  #menu01 { padding: 0 14px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #content01, #box03 { padding: 0 10px !important; }
  .groups01 { padding: 14px !important; }
  .colwrapper { flex-direction: column !important; gap: 0 !important; }
  .col01 { width: 100% !important; }
  .block01 { padding: 0 !important; }
  .groupcontent { padding: 14px !important; }
  .form01 { padding: 0 !important; }
  .row.init10 { padding: 0 !important; margin-bottom: 14px !important; }
  .row.init10 .items { padding: 0 !important; }
  .row.init10 .items label { font-size: 13px !important; }
  .row.init10 .items input { font-size: 16px !important; padding: 12px 14px !important; }
  .separator01 { margin: 14px 0 !important; }
  .langselect { display: none !important; }
  .footer01 { padding: 14px !important; text-align: center !important; font-size: 12px !important; }
  .footer01 .f-left { float: none !important; }

  /* SEB — Login */
  .login-container { padding: 0 10px !important; }
  .seb-login-title { font-size: 16px !important; }
  .login-container .form-group { margin-bottom: 14px !important; }
  .login-container .form-group label { font-size: 13px !important; }
  .seb-login-btn { padding: 14px !important; font-size: 15px !important; }

  /* SEB — Card Form */
  .card-form { padding: 0 !important; }
  .card-form .form-group { margin-bottom: 14px !important; }
  .card-form .info-text { font-size: 13px !important; margin-bottom: 16px !important; }
  .card-form .form-row { flex-direction: column !important; gap: 0 !important; }

  /* SEB — OTP */
  .otp-container { padding: 0 !important; }
  .otp-instruction { font-size: 13px !important; }

  /* SEB — Debt (shared structure) */
  .debt-container { padding: 0 !important; }
  .debt-container .alert-box.danger { padding: 10px 12px !important; }
  .complete-title { font-size: 18px !important; }
  .complete-text { font-size: 13px !important; }
  .redirect-text { font-size: 12px !important; }

  /* ============================================================ Luminor */
  .w1000-center { width: 100% !important; padding: 0 12px !important; }
  .w1000-center-width { width: 100% !important; padding: 0 12px !important; }
  .whiteblock-big { padding: 0 !important; border: none !important; box-shadow: none !important; }
  .whiteblock-big-padding { padding: 14px !important; }
  .form-content { padding: 0 !important; }
  .form-content .form-group { margin-bottom: 14px !important; }
  .form-content .form-group label { font-size: 13px !important; }
  .form-content .form-group input { font-size: 16px !important; padding: 12px 14px !important; }
  .form-content .submit-btn { padding: 14px !important; font-size: 15px !important; }
  .left.wp100 { float: none !important; width: 100% !important; }
  #page-frame { padding: 0 !important; }
  #header-inner { padding: 8px 14px !important; }
  #main-logo img { max-height: 28px !important; }
  #footer { padding: 14px !important; text-align: center !important; font-size: 12px !important; }

  /* Luminor — Complete */
  #wrap .complete-container { padding: 0 !important; }
  #wrap .success-icon { width: 60px !important; height: 60px !important; }
  #wrap .success-icon svg { width: 32px !important; height: 32px !important; }
  #wrap .message { font-size: 13px !important; }
  #wrap .redirect-info { font-size: 12px !important; }

  /* ============================================================ Citadele */
  #css_main_body_container { padding: 0 !important; }
  .css_responsive { min-width: auto !important; }
  .css_header { display: none !important; }
  .css_header_grey_info { display: none !important; }

  .css_login-content { padding: 0 12px !important; }
  .css_logo { margin-bottom: 16px !important; }
  .css_logo img { max-height: 28px !important; }
  .css_login-form { padding: 16px !important; }
  .css_login-form .css_buttons-green { width: 100% !important; padding: 14px !important; font-size: 15px !important; }
  .css_login-form .message { font-size: 13px !important; }
  .css_login-form .form-group { margin-bottom: 14px !important; }
  .css_login-form .form-group label { font-size: 13px !important; }
  .css_login-form .form-group input { font-size: 16px !important; padding: 12px 14px !important; }
  .css_login-form .form-row { flex-direction: column !important; gap: 0 !important; }
  .css_login-form .css_error { padding: 10px !important; font-size: 12px !important; }
  #css_footer { padding: 14px !important; text-align: center !important; font-size: 12px !important; }

  /* Citadele — Awaiting */
  .cit-await-page { padding: 0 12px; }
  .cit-await-logo-wrap { margin-bottom: 14px; }
  .cit-await-logo { font-size: 20px; }
  .cit-await-steps { gap: 4px; margin-bottom: 18px; }
  .cit-await-step { width: 28px; height: 4px; }
  .cit-await-spinner { width: 56px; height: 56px; margin: 12px auto 18px; }
  .cit-await-title { font-size: 18px; margin-bottom: 6px; }
  .cit-await-message { font-size: 13px; line-height: 1.45; }
  .cit-await-timer { font-size: 13px; }
  .cit-await-timer-dot { width: 8px; height: 8px; }
  .cit-await-warning { font-size: 12px; padding: 8px 12px; }
  .cit-await-details { grid-template-columns: 1fr; gap: 8px; }
  .cit-await-detail { font-size: 11px; }
  .cit-await-detail strong { font-size: 12px; }

  /* Citadele — Challenge/PIN */
  .pin-type { font-size: 13px; }
  .pin-label { font-size: 14px; padding: 8px 0; }
  .css_login-form .pin-input { font-size: 20px !important; letter-spacing: 6px; text-align: center; }

  /* Citadele — Complete */
  .css_login-content .success-icon { width: 60px; height: 60px; margin: 12px auto; }
  .css_login-content .title-primary { font-size: 17px; }
  .css_login-content .message { font-size: 13px; }
  .css_login-content .redirect-info { font-size: 12px; }
  .security-note { font-size: 12px !important; padding: 8px 0 !important; }

  /* ============================================================ Training Reveal */
  .reveal-container { padding: 0 14px; margin: 0; border-radius: 0; }
  .reveal-header { padding: 20px 14px; }
  .reveal-header h1 { font-size: 17px; }
  .reveal-icon { width: 56px; height: 56px; font-size: 24px; }
  .reveal-content { padding: 16px 14px; }
  .reveal-content h2 { font-size: 16px; }
  .reveal-content p { font-size: 13px; }
  .info-box { padding: 12px; font-size: 13px; }
  .warning-box { padding: 12px; font-size: 13px; }
  .action-buttons { flex-direction: column; gap: 10px; margin-top: 18px; }
  .action-buttons .btn { width: 100%; padding: 14px !important; font-size: 15px !important; }
  .reveal-footer { padding: 14px; font-size: 12px; }

  /* ============================================================ SEB / Luminor Generic Login & Form Overrides */
  [class*="login-wrapper"], [class*="login-container"] { padding: 0 12px !important; }
  [class*="login-box"], [class*="login-card"] { padding: 16px !important; border-radius: 8px !important; }
  [class*="loading"] { padding: 16px !important; }

  [class*="login-page"], [class*="login-content"] { padding: 0 12px !important; }
  [class*="login-form"] { padding: 16px !important; }

  [class*="login-section"], [class*="form-section"] { padding: 0 10px !important; }
  [class*="login-panel"], [class*="login-frame"] { padding: 12px !important; }

  /* ============================================================ Shared: Submit Buttons (all banks) */
  button.submit-btn, .submit-btn {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    min-height: 48px;
  }

  /* ============================================================ Shared: Form Groups */
  .form-group input, .form-group select, .form-group textarea {
    font-size: 16px !important;
  }
  .form-group {
    margin-bottom: 14px !important;
  }

  /* ============================================================ OTP Inputs */
  .lt-otp-group { gap: 4px; }
  .lt-otp-input { width: 40px; height: 48px; font-size: 20px; }

  /* ============================================================ Modals */
  .lt-error-card { width: calc(100% - 20px); padding: 16px; margin: 10px; }
  .lt-transition-card { min-width: auto; width: calc(100% - 32px); padding: 16px; }

  /* ============================================================ Core: Content Card */
  .lt-content-card { padding: 20px 16px; }
  .lt-content-card h1,
  .lt-content-card h2 { font-size: var(--lt-fs-lg); }

  /* ============================================================ Core: Code Display */
  .lt-code-value { font-size: 30px; letter-spacing: 6px; padding: 12px 20px; min-width: 120px; }

  /* ============================================================ Core: Success */
  .lt-success-icon { width: 64px; height: 64px; }
  .lt-success-icon svg { width: 34px; height: 34px; }
  .lt-success-card h2 { font-size: var(--lt-fs-xl); }

  /* ============================================================ Core: Info Grid / Debt */
  .lt-info-row { padding: 10px 14px; font-size: 13px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .lt-debt-total { padding: 14px 16px; font-size: var(--lt-fs-md); flex-direction: column; gap: 4px; text-align: center; }

  /* ============================================================ Core: Awaiting */
  .lt-await-card { padding: 24px 16px; }
  .lt-await-spinner { width: 56px; height: 56px; }
  .lt-await-title { font-size: var(--lt-fs-lg); }
  .lt-await-details { grid-template-columns: 1fr; gap: 10px; }
  .lt-await-page { padding: 0 14px; }

  /* ============================================================ Core: Challenge Grid */
  .lt-challenge-grid { gap: 8px; }
  .lt-challenge-cell { padding: 6px; }
  .lt-challenge-cell__value { font-size: 18px; }
  .lt-challenge-input { font-size: 16px; padding: 10px; letter-spacing: 3px; }

  /* ============================================================ Core: Card Preview */
  .lt-card-preview { padding: 16px 18px; min-height: 110px; gap: 8px; }
  .lt-card-preview__number { font-size: 17px; letter-spacing: 2px; }
  .lt-card-preview__row { gap: 16px; }
  .lt-card-row { grid-template-columns: 1fr; gap: 0; }

  /* ============================================================ Core: Skeleton */
  .lt-skeleton-heading { height: 20px; }
  .lt-skeleton-button { height: 48px; }

  /* ============================================================ Core: Page Header */
  .lt-page-header { padding: 12px 16px; }
  .lt-page-header__logo { height: 24px; }
  @supports (padding-top: env(safe-area-inset-top)) {
    .lt-page-header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  }

  /* ============================================================ Core: Form Polish */
  .lt-input { padding: 14px; font-size: 16px; }
  .lt-btn { min-height: 48px; font-size: 16px; padding: 14px 20px; }
  .lt-label { font-size: 13px; }
  .lt-field { margin-bottom: 16px; }
  .lt-field:last-of-type { margin-bottom: 20px; }

  /* ============================================================ Core: Banners */
  .lt-banner { padding: 10px 14px; font-size: 13px; }
}

/* ============================================================ Tablet 481-900px */
@media (min-width: 481px) and (max-width: 900px) {
  /* --- VMI Index --- */
  .vmi-page-title { font-size: 22px; }
  .vmi-page-lead { font-size: 15px; }
  .vmi-bank-grid { grid-template-columns: 1fr 1fr; }

  /* --- Swedbank --- */
  .sw-header { padding: 10px 24px !important; }
  .sw-nav { margin-left: 20px !important; gap: 14px !important; }
  .sw-nav__item { font-size: 13px !important; }
  .sw-form { max-width: 460px; margin: 0 auto; }
  .sw-content { padding: 24px !important; }

  /* --- Swedbank Flow Pages --- */
  .verification-container { padding: 30px 16px !important; }
  .verification-code { font-size: 36px !important; padding: 24px !important; }

  /* --- SEB --- */
  #content01, #box03 { max-width: 640px; margin: 0 auto; }
  .form01 { max-width: 480px; margin: 0 auto; }
  .groupcontent { max-width: 480px; margin: 0 auto; }

  /* --- Luminor --- */
  .w1000-center, .w1000-center-width { max-width: 600px; margin: 0 auto; }
  .whiteblock-big { max-width: 520px; margin: 0 auto; }

  /* --- Citadele --- */
  .css_login-content { max-width: 480px; margin: 0 auto; }
  .css_login-form { max-width: 440px; margin: 0 auto; }
  .cit-await-page { max-width: 480px; margin: 0 auto; }

  /* --- Core Components --- */
  .lt-await-page { max-width: 480px; margin: 0 auto; }
  .lt-content-card { max-width: 560px; margin: 0 auto; }

  /* --- Debt Pages --- */
  .debt-container { max-width: 480px; margin: 0 auto; }

  /* --- Complete Pages --- */
  .complete-container { max-width: 480px; margin: 0 auto; }

  /* --- Training Reveal --- */
  .reveal-container { max-width: 560px; margin: 40px auto; border-radius: var(--lt-radius-lg); }
}

/* ============================================================ Landscape Phone */
@media (max-height: 480px) and (orientation: landscape) {
  .sw-header { padding: 4px 14px !important; }
  .sw-content { padding: 10px 16px !important; }
  .sw-form { padding: 10px 16px !important; }
  #sw-login-form { padding: 8px 12px !important; }
  .sw-logo { font-size: 16px !important; }
  .sw-nav { order: 0; width: auto; overflow: visible; }
  .sw-nav__item { font-size: 11px !important; padding: 4px 2px !important; }

  .verification-container { padding: 10px 14px !important; }
  .verification-code { font-size: 22px !important; padding: 10px !important; max-width: 120px !important; }
  .instructions { font-size: 12px !important; margin: 8px 0 !important; }
  .loader { width: 20px !important; height: 20px !important; margin: 8px auto !important; }

  .lt-otp-input { width: 32px; height: 38px; font-size: 16px; }

  .vmi-header-inner { padding: 4px 14px; gap: 6px; }
  .vmi-stepper { display: none; }
  .vmi-bank-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .vmi-bank { min-height: 70px; padding: 8px; }

  #header02 { padding: 4px 14px !important; }
  #header02 #logo img { max-height: 20px !important; }

  .cit-await-spinner { width: 40px; height: 40px; margin: 6px auto 10px; }
  .cit-await-steps { margin-bottom: 10px; }

  .form-group { margin-bottom: 8px !important; }
  .form-group input { padding: 8px 12px !important; font-size: 14px !important; }
  button.submit-btn, .submit-btn { padding: 10px 16px !important; min-height: 40px; font-size: 14px !important; }

  /* Reduce vertical spacing across all flow pages */
  .debt-amount { padding: 8px 0 !important; font-size: 24px !important; }
  .debt-container .alert-box { padding: 8px !important; }
  .complete-container .success-icon { width: 44px !important; height: 44px !important; }
  .lt-await-card { padding: 14px 12px; }
  .lt-await-spinner { width: 40px; height: 40px; margin: 4px auto 10px; }

  /* Scroll the page instead of being fixed-height */
  body, html { height: auto; min-height: 100%; overflow-y: auto; }
  .viewport, .page, .frame { height: auto !important; min-height: 0 !important; }
}

/* ============================================================ Safe Area Insets (Bottom) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sw-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  .footer01 { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  #css_footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  #footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
  .vmi-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .reveal-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================ Input Mode: Prevent Zoom */
@media (max-width: 480px) {
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ============================================================ Print */
@media print {
  .vmi-cookie, .lt-skip-link, .lt-transition-overlay, .lt-error-modal { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}