/**
 * AIDF Mobile Banking — Premium Native App Shell
 * ================================================
 * Applies only on screens < 768px (mobile-first).
 * Does NOT override desktop layouts.
 * Uses deep navy / gold / white palette.
 *
 * Component prefix: .aidf-mobile-*
 * All rules are scoped inside @media (max-width: 767.98px)
 * so desktop is completely untouched.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   0. CSS CUSTOM PROPERTIES (mobile tokens)
───────────────────────────────────────────────────────────────────────────── */
:root {
  --mob-navy:        #071543;
  --mob-navy-mid:    #14296e;
  --mob-navy-light:  #1e3a8a;
  --mob-gold:        #c9a227;
  --mob-gold-light:  #e6c84f;
  --mob-green:       #86c83d;
  --mob-green-dark:  #3d8500;
  --mob-white:       #ffffff;
  --mob-surface:     #f4f6fa;
  --mob-card-bg:     #ffffff;
  --mob-border:      rgba(20,41,110,.10);
  --mob-shadow-sm:   0 4px 16px rgba(7,21,67,.10);
  --mob-shadow-md:   0 8px 28px rgba(7,21,67,.14);
  --mob-shadow-lg:   0 16px 48px rgba(7,21,67,.18);
  --mob-radius-sm:   12px;
  --mob-radius-md:   18px;
  --mob-radius-lg:   24px;
  --mob-nav-h:       64px;          /* bottom nav height */
  --mob-topbar-h:    56px;          /* mobile top bar height */
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mob-safe-top:    env(safe-area-inset-top, 0px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. BOTTOM NAVIGATION BAR
───────────────────────────────────────────────────────────────────────────── */
.aidf-bottom-nav {
  display: none; /* hidden on desktop — shown via media query below */
}

@media (max-width: 767.98px) {

  /* ── App shell wrapper ── */
  .aidf-mobile-app-shell {
    /* signals mobile context to JS */
  }

  /* ── Bottom navigation ── */
  .aidf-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: calc(var(--mob-nav-h) + var(--mob-safe-bottom));
    padding-bottom: var(--mob-safe-bottom);
    background: var(--mob-white);
    border-top: 1px solid rgba(20,41,110,.10);
    box-shadow: 0 -4px 24px rgba(7,21,67,.10);
    align-items: stretch;
    justify-content: space-around;
  }

  .aidf-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 3px;
    padding: 6px 2px 4px;
    color: #8292aa;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .aidf-bottom-nav-item i {
    font-size: 20px;
    line-height: 1;
    transition: transform .18s, color .15s;
  }

  .aidf-bottom-nav-item:hover,
  .aidf-bottom-nav-item.is-active {
    color: var(--mob-navy);
  }

  .aidf-bottom-nav-item.is-active i {
    color: var(--mob-navy-mid);
    transform: translateY(-2px);
  }

  /* Gold dot indicator on active item */
  .aidf-bottom-nav-item.is-active::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--mob-gold);
    border-radius: 50%;
    display: block;
  }

  /* Badge on nav items */
  .aidf-bottom-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
  }

  /* ── Body padding so content not hidden behind bottom nav ── */
  body.aidf-mobile-active {
    padding-bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 8px) !important;
  }

  /* Portal layout: push aidf-content down (JS class or CSS-only fallback for customer portal) */
  body.aidf-mobile-active .aidf-content,
  body.p-portal-customer .aidf-content {
    padding-bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 8px) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     2. MOBILE TOP APP BAR
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--mob-topbar-h);
    padding: 0 1rem;
    padding-top: var(--mob-safe-top);
    background: var(--mob-navy);
    color: var(--mob-white);
    box-shadow: var(--mob-shadow-sm);
    gap: .5rem;
  }

  .aidf-mobile-topbar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    font-weight: 900;
    color: var(--mob-white);
    text-decoration: none;
    letter-spacing: -.01em;
  }

  .aidf-mobile-topbar__brand-mark {
    width: 32px;
    height: 32px;
    background: var(--mob-gold);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mob-navy);
    font-size: 1rem;
  }

  .aidf-mobile-topbar__greeting {
    flex: 1;
    font-size: .82rem;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .aidf-mobile-topbar__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
  }

  .aidf-mobile-topbar__btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,.12);
    color: var(--mob-white);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-topbar__btn:hover {
    background: rgba(255,255,255,.2);
    color: var(--mob-white);
  }

  .aidf-mobile-topbar__avatar {
    width: 32px;
    height: 32px;
    background: var(--mob-gold);
    color: var(--mob-navy);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* ─────────────────────────────────────────────────────────────────────
     3. MOBILE ACTION SHEET (More menu / drawer)
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7,21,67,.55);
    z-index: 1060;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .aidf-mobile-sheet-backdrop.is-open {
    display: block;
  }

  .aidf-mobile-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1070;
    background: var(--mob-white);
    border-radius: var(--mob-radius-lg) var(--mob-radius-lg) 0 0;
    padding: 0 0 calc(1.5rem + var(--mob-safe-bottom));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-height: 85vh;
    overflow-y: auto;
  }

  .aidf-mobile-sheet.is-open {
    transform: translateY(0);
  }

  .aidf-mobile-sheet__handle {
    width: 40px;
    height: 4px;
    background: rgba(20,41,110,.15);
    border-radius: 99px;
    margin: 12px auto 0;
  }

  .aidf-mobile-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid var(--mob-border);
  }

  .aidf-mobile-sheet__header strong {
    font-size: .95rem;
    font-weight: 900;
    color: var(--mob-navy);
  }

  .aidf-mobile-sheet__close {
    width: 32px;
    height: 32px;
    background: var(--mob-surface);
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--mob-navy);
    cursor: pointer;
  }

  .aidf-mobile-sheet__body {
    padding: .75rem 1rem;
  }

  .aidf-mobile-sheet__link {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem .75rem;
    border-radius: var(--mob-radius-sm);
    text-decoration: none;
    color: var(--mob-navy);
    font-size: .9rem;
    font-weight: 700;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-sheet__link:hover,
  .aidf-mobile-sheet__link:active {
    background: var(--mob-surface);
    color: var(--mob-navy);
  }

  .aidf-mobile-sheet__link i {
    width: 38px;
    height: 38px;
    background: rgba(20,41,110,.08);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--mob-navy-mid);
    flex-shrink: 0;
  }

  .aidf-mobile-sheet__link--danger {
    color: #c0392b;
  }

  .aidf-mobile-sheet__link--danger i {
    background: rgba(220,53,69,.1);
    color: #c0392b;
  }

  .aidf-mobile-sheet__divider {
    height: 1px;
    background: var(--mob-border);
    margin: .5rem 0;
  }

  /* Prevent body scroll when sheet open */
  body.aidf-sheet-open {
    overflow: hidden;
  }

  /* ─────────────────────────────────────────────────────────────────────
     4. MOBILE CARDS
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-card {
    background: var(--mob-card-bg);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
    box-shadow: var(--mob-shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .aidf-mobile-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem .75rem;
    border-bottom: 1px solid var(--mob-border);
    background: #fff;
  }

  .aidf-mobile-card__title {
    font-size: .88rem;
    font-weight: 900;
    color: var(--mob-navy);
    letter-spacing: -.01em;
    margin: 0;
  }

  .aidf-mobile-card__body {
    padding: .9rem 1rem;
  }

  /* ── Balance card ── */
  .aidf-mobile-balance-card {
    background: linear-gradient(135deg, #071543 0%, #14296e 60%, #0d3d7a 100%);
    border-radius: var(--mob-radius-lg);
    padding: 1.4rem 1.25rem 1.25rem;
    color: var(--mob-white);
    box-shadow: var(--mob-shadow-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }

  .aidf-mobile-balance-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
  }

  .aidf-mobile-balance-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 20px;
    width: 80px;
    height: 80px;
    background: rgba(201,162,39,.12);
    border-radius: 50%;
  }

  .aidf-mobile-balance-card__label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: .3rem;
  }

  .aidf-mobile-balance-card__amount {
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: .2rem;
  }

  .aidf-mobile-balance-card__sub {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    margin-bottom: 1.1rem;
  }

  .aidf-mobile-balance-card__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
  }

  .aidf-mobile-balance-card__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    border-radius: 99px;
    font-size: .76rem;
    font-weight: 900;
    text-decoration: none;
    transition: transform .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-balance-card__btn--primary {
    background: var(--mob-green);
    color: var(--mob-navy);
  }

  .aidf-mobile-balance-card__btn--ghost {
    background: rgba(255,255,255,.12);
    color: var(--mob-white);
    border: 1px solid rgba(255,255,255,.2);
  }

  .aidf-mobile-balance-card__btn:active {
    transform: scale(.96);
  }

  /* ─────────────────────────────────────────────────────────────────────
     5. QUICK ACTION GRID (app-icon style)
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
    margin-bottom: 1.25rem;
  }

  .aidf-mobile-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem .25rem .6rem;
    border-radius: var(--mob-radius-md);
    background: var(--mob-card-bg);
    border: 1px solid var(--mob-border);
    box-shadow: var(--mob-shadow-sm);
    text-decoration: none;
    color: var(--mob-navy);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-align: center;
    transition: transform .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-action:active {
    transform: scale(.93);
  }

  .aidf-mobile-action:hover {
    color: var(--mob-navy);
    box-shadow: var(--mob-shadow-md);
  }

  .aidf-mobile-action__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(20,41,110,.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--mob-navy-mid);
    flex-shrink: 0;
  }

  .aidf-mobile-action__icon--gold  { background: rgba(201,162,39,.14); color: #b8891a; }
  .aidf-mobile-action__icon--green { background: rgba(134,200,61,.16); color: var(--mob-green-dark); }
  .aidf-mobile-action__icon--red   { background: rgba(220,53,69,.12);  color: #c0392b; }
  .aidf-mobile-action__icon--teal  { background: rgba(22,160,133,.12); color: #16a085; }

  /* ─────────────────────────────────────────────────────────────────────
     6. MOBILE LIST CARDS (replaces tables on mobile)
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-list-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--mob-card-bg);
    border-bottom: 1px solid var(--mob-border);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-list-card:last-child {
    border-bottom: none;
  }

  .aidf-mobile-list-card:active {
    background: var(--mob-surface);
  }

  .aidf-mobile-list-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .aidf-mobile-list-card__icon--credit  { background: rgba(134,200,61,.14); color: var(--mob-green-dark); }
  .aidf-mobile-list-card__icon--debit   { background: rgba(220,53,69,.10);  color: #b03535; }
  .aidf-mobile-list-card__icon--default { background: rgba(20,41,110,.08);  color: var(--mob-navy-mid); }

  .aidf-mobile-list-card__body {
    flex: 1;
    min-width: 0;
  }

  .aidf-mobile-list-card__title {
    font-size: .84rem;
    font-weight: 800;
    color: var(--mob-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  .aidf-mobile-list-card__meta {
    font-size: .7rem;
    color: #8292aa;
    line-height: 1.3;
  }

  .aidf-mobile-list-card__amount {
    font-size: .9rem;
    font-weight: 900;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
  }

  .aidf-mobile-list-card__amount--credit { color: var(--mob-green-dark); }
  .aidf-mobile-list-card__amount--debit  { color: #b03535; }

  .aidf-mobile-list-card__chevron {
    color: #c0cad8;
    font-size: .8rem;
    flex-shrink: 0;
    margin-left: .25rem;
  }

  /* ─────────────────────────────────────────────────────────────────────
     7. SAFE AREA SPACER
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-safe-bottom {
    height: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 12px);
    flex-shrink: 0;
  }

  /* ─────────────────────────────────────────────────────────────────────
     8. FLOATING ACTION BUTTON
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-fab {
    position: fixed;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 16px);
    right: 18px;
    z-index: 1040;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mob-gold);
    color: var(--mob-navy);
    border: none;
    box-shadow: 0 8px 24px rgba(201,162,39,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-fab:hover,
  .aidf-mobile-fab:active {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(201,162,39,.55);
    color: var(--mob-navy);
  }

  /* ─────────────────────────────────────────────────────────────────────
     9. TOAST OFFSET (avoid bottom nav)
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-toast-offset,
  .aidf-toast-wrap {
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom) + 12px) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     10. PORTAL SIDEBAR — hide on mobile (use bottom nav instead)
  ───────────────────────────────────────────────────────────────────── */
  .p-sidebar {
    display: none !important;
  }

  .aidf-shell {
    display: block !important;
    flex-direction: unset !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .aidf-main {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* Hide existing desktop topbar search on mobile */
  .p-topbar__search {
    display: none !important;
  }

  /* Compress portal topbar for mobile */
  .p-topbar {
    padding: 0 .75rem !important;
    height: var(--mob-topbar-h) !important;
    min-height: var(--mob-topbar-h) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
  }

  .aidf-content {
    padding: .75rem .75rem 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     11. MOBILE-RESPONSIVE TABLE → CARD CONVERSION
  ───────────────────────────────────────────────────────────────────── */

  /* Wrap tables in .aidf-table-responsive-mobile for card view */
  .aidf-mobile-table-cards .table {
    display: block;
    border: none;
  }

  .aidf-mobile-table-cards .table thead {
    display: none;
  }

  .aidf-mobile-table-cards .table tbody {
    display: block;
  }

  .aidf-mobile-table-cards .table tr {
    display: flex;
    flex-direction: column;
    background: var(--mob-card-bg);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
    padding: .9rem 1rem;
    margin-bottom: .65rem;
    box-shadow: var(--mob-shadow-sm);
  }

  .aidf-mobile-table-cards .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: .22rem 0;
    font-size: .82rem;
    color: var(--mob-navy);
    gap: .5rem;
  }

  .aidf-mobile-table-cards .table td::before {
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8292aa;
    flex-shrink: 0;
    min-width: 80px;
  }

  /* For tables NOT using data-label, use a compact horizontal scroll */
  .table-responsive {
    border-radius: var(--mob-radius-sm);
    border: 1px solid var(--mob-border);
  }

  /* ─────────────────────────────────────────────────────────────────────
     12. MOBILE FORM UPGRADES
  ───────────────────────────────────────────────────────────────────── */
  .form-control,
  .form-select {
    border-radius: var(--mob-radius-sm) !important;
    font-size: 1rem !important;
    padding: .65rem .9rem !important;
    min-height: 48px !important;
  }

  .form-label {
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #62708a !important;
    margin-bottom: .3rem !important;
  }

  .btn {
    min-height: 48px !important;
    border-radius: var(--mob-radius-sm) !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
  }

  .btn-lg {
    min-height: 52px !important;
    font-size: 1rem !important;
  }

  /* Sticky submit bar */
  .aidf-mobile-submit-bar {
    position: sticky;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe-bottom));
    left: 0;
    right: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--mob-border);
    padding: .75rem 1rem;
    z-index: 800;
    box-shadow: 0 -4px 16px rgba(7,21,67,.08);
  }

  /* Section cards for long forms */
  .aidf-mobile-form-section {
    background: var(--mob-card-bg);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
    padding: 1.1rem 1rem;
    margin-bottom: .9rem;
    box-shadow: var(--mob-shadow-sm);
  }

  .aidf-mobile-form-section-title {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8292aa;
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--mob-border);
  }

  /* ─────────────────────────────────────────────────────────────────────
     13. PUBLIC WEBSITE MOBILE OVERRIDES
  ───────────────────────────────────────────────────────────────────── */

  /* Hero above fold */
  .aidf-hero-section,
  .aidf-home-hero,
  [class*="hero"] {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* Full-width CTAs */
  .aidf-hero-cta,
  .aidf-cta-btn,
  .aidf-home-hero .btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* Product cards stacked */
  .aidf-product-grid,
  .aidf-product-cards {
    grid-template-columns: 1fr !important;
  }

  /* Compact public header top bar */
  .aidf-premium-topbar {
    display: none !important;
  }

  /* Main nav already collapses via Bootstrap on mobile */
  .aidf-premium-mainnav {
    padding: .4rem .75rem !important;
  }

  .aidf-premium-brand {
    font-size: .88rem !important;
  }

  .aidf-premium-brand img {
    height: 38px !important;
  }

  /* Public page body padding for bottom nav */
  body.aidf-public-mobile .container,
  body.aidf-public-mobile main.container {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     FOOTER CTA CARD — premium mobile treatment
  ───────────────────────────────────────────────────────────────────── */
  .aidf-footer-cta {
    /* Remove desktop translate — sits flush on mobile */
    transform: none !important;

    /* Stack text + buttons vertically */
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.5rem !important;

    /* Tighter padding, full-bleed feel */
    padding: 1.75rem 1.25rem !important;

    /* More rounded corners — native-app card feel */
    border-radius: 22px !important;

    /* Richer gradient with gold radial accent */
    background:
      radial-gradient(ellipse at 110% -10%, rgba(201,162,39,.32) 0%, transparent 55%),
      radial-gradient(ellipse at -10% 110%, rgba(134,200,61,.18) 0%, transparent 50%),
      linear-gradient(145deg, #0c1d5a 0%, #14296e 60%, #0d2d6e 100%) !important;

    /* Deeper shadow for elevation */
    box-shadow:
      0 20px 56px rgba(7,21,67,.28),
      0 4px 16px rgba(201,162,39,.12),
      inset 0 1px 0 rgba(255,255,255,.06) !important;

    /* Thin gold top border line */
    border-top: 1.5px solid rgba(201,162,39,.35) !important;

    /* Subtle card border */
    outline: 1px solid rgba(255,255,255,.06);

    /* Margin from bottom-nav */
    margin-bottom: 1rem !important;
  }

  /* Kicker pill */
  .aidf-footer-cta .aidf-kicker {
    display: inline-flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: rgba(201,162,39,.18) !important;
    color: #e6c84f !important;
    border: 1px solid rgba(201,162,39,.30) !important;
    border-radius: 999px !important;
    padding: .28rem .75rem !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin-bottom: .65rem !important;
  }

  /* Headline */
  .aidf-footer-cta h2 {
    font-size: clamp(1.45rem, 5vw, 1.85rem) !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    color: #ffffff !important;
    margin-bottom: .55rem !important;
  }

  /* Body copy */
  .aidf-footer-cta p:not(.aidf-kicker) {
    font-size: .85rem !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,.68) !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Button row — stack vertically, full-width */
  .aidf-footer-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: .65rem !important;
    width: 100% !important;
  }

  .aidf-footer-cta-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    border-radius: 14px !important;
  }

  /* Primary CTA — gold/green */
  .aidf-footer-cta .btn-success {
    background: #86c83d !important;
    border-color: #86c83d !important;
    color: #071543 !important;
    box-shadow: 0 6px 20px rgba(134,200,61,.35) !important;
  }

  /* Secondary CTA — ghost */
  .aidf-footer-cta .aidf-btn-talk {
    background: rgba(255,255,255,.08) !important;
    border: 1.5px solid rgba(255,255,255,.22) !important;
    color: #ffffff !important;
    backdrop-filter: blur(4px) !important;
  }

  /* Footer accordion — collapse on mobile */
  .aidf-public-footer-section {
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .aidf-public-footer-section-toggle {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .8rem 0;
    background: transparent;
    border: none;
    color: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
  }

  .aidf-public-footer-section h3 {
    display: none; /* toggle button replaces h3 on mobile */
  }

  .aidf-public-footer-section-links {
    display: none; /* collapsed by default on mobile */
    padding-bottom: .75rem;
  }

  .aidf-public-footer-section.is-open .aidf-public-footer-section-links {
    display: block;
  }

  /* Sticky login CTA for public pages */
  .aidf-public-sticky-login {
    position: sticky;
    top: 58px;
    z-index: 800;
    background: var(--mob-navy);
    color: var(--mob-white);
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
  }

  .aidf-public-sticky-login a {
    background: var(--mob-gold);
    color: var(--mob-navy);
    padding: .35rem .9rem;
    border-radius: 99px;
    font-weight: 900;
    font-size: .76rem;
    text-decoration: none;
    white-space: nowrap;
  }

  /* ─────────────────────────────────────────────────────────────────────
     14. CUSTOMER DASHBOARD MOBILE OVERRIDES
  ───────────────────────────────────────────────────────────────────── */

  /* Mobile quick-action strip (below hero, customer dashboard) */
  .aidf-mobile-quick-actions {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 .1rem .5rem;
    margin-bottom: .75rem;
  }

  .aidf-mobile-quick-actions::-webkit-scrollbar { display: none; }

  .aidf-mobile-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    color: var(--mob-navy);
    flex-shrink: 0;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }

  .aidf-mobile-quick-action__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform .15s;
  }

  .aidf-mobile-quick-action:active .aidf-mobile-quick-action__icon {
    transform: scale(.93);
  }

  .aidf-mobile-quick-action__label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #62708a;
    white-space: nowrap;
  }

  /* Dashboard hero — slim on mobile */
  .cd-hero {
    border-radius: var(--mob-radius-md) !important;
    padding: 1.1rem 1rem !important;
    margin-bottom: 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .9rem !important;
  }

  .cd-hero__balance {
    font-size: 1.9rem !important;
  }

  .cd-hero__name {
    font-size: 1.4rem !important;
  }

  .cd-hero__right {
    align-items: flex-start !important;
    width: 100% !important;
  }

  .cd-hero__actions {
    width: 100% !important;
  }

  .cd-hero__actions .cd-action {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* KPI grid — 2 cols on mobile */
  .cd-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .65rem !important;
    margin-bottom: 1rem !important;
  }

  .cd-kpi {
    padding: .85rem .9rem !important;
    border-radius: var(--mob-radius-sm) !important;
  }

  .cd-kpi__value {
    font-size: 1.15rem !important;
  }

  /* Single column body on mobile */
  .cd-body {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Account cards scroll horizontal */
  .cd-acct-scroll-wrap {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cd-acct-scroll-wrap::-webkit-scrollbar { display: none; }

  .cd-acct-scroll-wrap .cd-acct {
    min-width: 220px;
    flex-shrink: 0;
    scroll-snap-align: start;
    margin-bottom: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     15. STATUS CHIPS
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .6rem;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
  }

  .aidf-mobile-chip--success { background: rgba(134,200,61,.14); color: var(--mob-green-dark); }
  .aidf-mobile-chip--warning { background: rgba(255,184,0,.14);  color: #b57e00; }
  .aidf-mobile-chip--danger  { background: rgba(220,53,69,.12);  color: #b03535; }
  .aidf-mobile-chip--info    { background: rgba(20,41,110,.08);  color: var(--mob-navy-mid); }
  .aidf-mobile-chip--gold    { background: rgba(201,162,39,.14); color: #7d5a00; }

  /* ─────────────────────────────────────────────────────────────────────
     16. SECURITY NOTE
  ───────────────────────────────────────────────────────────────────── */
  .aidf-security-note {
    font-size: .72rem !important;
    color: #8292aa !important;
    padding: .5rem .75rem !important;
    background: rgba(20,41,110,.04) !important;
    border-radius: var(--mob-radius-sm) !important;
    border-left: 3px solid var(--mob-gold) !important;
    margin: .75rem 0 0 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     17. HORIZONTAL SCROLL FOR ACCOUNT CARDS
  ───────────────────────────────────────────────────────────────────── */
  .aidf-mobile-hscroll {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 .1rem .5rem;
    scrollbar-width: none;
  }

  .aidf-mobile-hscroll::-webkit-scrollbar { display: none; }

  .aidf-mobile-hscroll > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* ─────────────────────────────────────────────────────────────────────
     18. RECEIPT & STATEMENT MOBILE
  ───────────────────────────────────────────────────────────────────── */
  .aidf-receipt-card,
  .aidf-statement-card {
    border-radius: var(--mob-radius-md) !important;
    padding: 1rem !important;
  }

  /* ─────────────────────────────────────────────────────────────────────
     19. PAGE TRANSITIONS (subtle fade-in)
  ───────────────────────────────────────────────────────────────────── */
  .aidf-content,
  main.container {
    animation: aidfFadeIn .22s ease-out both;
  }

  @keyframes aidfFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ─────────────────────────────────────────────────────────────────────
     20. MISC UTILITY
  ───────────────────────────────────────────────────────────────────── */
  .d-mobile-none    { display: none !important; }
  .d-mobile-block   { display: block !important; }
  .d-mobile-flex    { display: flex !important; }

  /* Remove excessive padding on containers */
  .container, .container-fluid {
    --bs-gutter-x: 1.1rem;
  }

  /* Cards rounded on mobile */
  .card {
    border-radius: var(--mob-radius-md) !important;
  }

  /* Prevent horizontal overflow site-wide */
  body {
    overflow-x: hidden;
  }

} /* end @media (max-width: 767.98px) */

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP: footer accordion toggle hidden, links always visible
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .aidf-public-footer-section-toggle { display: none !important; }
  .aidf-public-footer-section-links  { display: block !important; }

  /* Hide all mobile-only UI on desktop — these elements have no desktop styles
     so without this rule they render as raw unstyled HTML in the document flow */
  .aidf-bottom-nav,
  .aidf-mobile-sheet,
  .aidf-mobile-sheet-backdrop,
  .aidf-mobile-topbar,
  .aidf-mobile-fab,
  .aidf-mobile-submit-bar { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRINT: never show mobile UI elements in print
───────────────────────────────────────────────────────────────────────────── */
@media print {
  .aidf-bottom-nav,
  .aidf-mobile-topbar,
  .aidf-mobile-sheet,
  .aidf-mobile-sheet-backdrop,
  .aidf-mobile-fab,
  .aidf-mobile-submit-bar { display: none !important; }
}