/* ==========================================================================
   LICHFL eNACH Portal – Design System
   app.css
   Bootstrap 5.3.8 + LIC HFL brand tokens (aligned with portal.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Webfonts — ITC Franklin Gothic LT (assets/webfonts)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'ITC Franklin Gothic LT Book';
    src: url(../webfonts/FranklinGothicLT-Book.eot);
    src: url(../webfonts/FranklinGothicLT-Book.eot?#iefix) format("embedded-opentype"),
         url(../webfonts/FranklinGothicLT-Book.woff2) format("woff2"),
         url(../webfonts/FranklinGothicLT-Book.woff) format("woff"),
         url(../webfonts/FranklinGothicLT-Book.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ITC Franklin Gothic LT Demi';
    src: url(../webfonts/FranklinGothicLT-Demi.eot);
    src: url(../webfonts/FranklinGothicLT-Demi.eot?#iefix) format("embedded-opentype"),
         url(../webfonts/FranklinGothicLT-Demi.woff2) format("woff2"),
         url(../webfonts/FranklinGothicLT-Demi.woff) format("woff"),
         url(../webfonts/FranklinGothicLT-Demi.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    font-size: 16px;

    /* Centralized LIC HFL Brand Color Scheme */
    --lichfl-blue:         #00529C;
    --lichfl-dark-blue:    #003D75;
    --lichfl-gold:         #FECA0A;
    --lichfl-bg:           #F5F7FA;
    --lichfl-card:         #FFFFFF;
    --lichfl-text:         #0F172A;
    --lichfl-text-muted:   #475569;
    --lichfl-border:       #E2E8F0;

    --lichfl-success:      #16A34A;
    --lichfl-warning:      #D97706;
    --lichfl-danger:       #DC2626;
    --lichfl-info:         #0284C7;

    /* Legacy compatibility tokens */
    --lhfWhite:          var(--lichfl-card);
    --lhfBlack:          var(--lichfl-text);
    --lhfDefault:        var(--lichfl-text-muted);
    --lhfYellow:         var(--lichfl-gold);
    --lhfBlue:           var(--lichfl-blue);
    --lhfSeaBlue:        var(--lichfl-border);
    --lhfGrey:           var(--lichfl-bg);
    --lhfBlueDark:       var(--lichfl-dark-blue);
    --lhfBlueLight:      #f0f7ff;
    --lhfYellowDark:     #d4a800;
    --lhfLinkHover:      #8a6d00;
    --lhfSeaBlueDark:    #94a3b8;
    --lhfPlaceholder:    #64748b;
    --lhfGreyDark:       #e2e8f0;
    --lhfBorderColor:    var(--lichfl-border);
    --lhfFooterAccent:   #F8991D;
    --lhfFooterLink:     #FFCB09;

    /* Typography */
    --fontBook: 'ITC Franklin Gothic LT Book', sans-serif, Arial, Helvetica;
    --fontDemi: 'ITC Franklin Gothic LT Demi', sans-serif, Arial, Helvetica;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Component tokens */
    --cardRadius:  8px;
    --inputRadius: 6px;

    /* eNACH aliases */
    --lichfl-blue-dark:    var(--lichfl-dark-blue);
    --lichfl-blue-light:   #dce9f7;
    --lichfl-blue-xlight:  #f0f7ff;
    --lichfl-gold-dark:    #d4a800;

    /* Semantic Colors */
    --color-primary:       var(--lichfl-blue);
    --color-primary-dark:  var(--lichfl-dark-blue);
    --color-primary-light: var(--lichfl-blue-light);
    --color-accent:        var(--lichfl-gold);

    --color-success:       var(--lichfl-success);
    --color-success-bg:    #d1f0e0;
    --color-success-border:#a3dfc0;

    --color-warning:       var(--lichfl-warning);
    --color-warning-bg:    #fff4cc;
    --color-warning-border:#ffdea0;

    --color-danger:        var(--lichfl-danger);
    --color-danger-bg:     #fde8e6;
    --color-danger-border: #f5b7b1;

    --color-info:          var(--lichfl-info);
    --color-info-bg:       #dce9f7;
    --color-info-border:   #a8c8ef;

    /* Text */
    --text-primary:        var(--lichfl-text);
    --text-secondary:      var(--lichfl-text-muted);
    --text-muted:          #64748b;
    --text-light:          #94a3b8;
    --text-inverse:        #ffffff;

    /* Backgrounds */
    --bg-body:             var(--lichfl-bg);
    --bg-card:             var(--lichfl-card);
    --bg-subtle:           var(--lichfl-bg);
    --bg-topbar:           var(--lichfl-blue);

    /* Borders */
    --border-color:        var(--lhfBorderColor);
    --border-light:        var(--lhfSeaBlue);
    --border-focus:        var(--lichfl-blue);

    /* Shadows */
    --shadow-sm:           0 1px 4px rgba(0, 82, 156, 0.06);
    --shadow-md:           0 4px 16px rgba(0, 82, 156, 0.10);
    --shadow-lg:           0 8px 32px rgba(0, 82, 156, 0.14);
    --shadow-card:         0 2px 10px rgba(26, 43, 60, 0.07);

    /* Border Radius */
    --radius-xs:           4px;
    --radius-sm:           var(--inputRadius);
    --radius-md:           10px;
    --radius-lg:           14px;
    --radius-xl:           20px;
    --radius-pill:         9999px;

    /* Type scale (standardized) */
    --font-family:         var(--fontBook);
    --font-size-xs:        0.75rem;     /* 12px – captions, helpers */
    --font-size-sm:        0.8125rem;   /* 13px – labels, buttons, steppers */
    --font-size-base:      0.875rem;    /* 14px – body */
    --font-size-md:        0.9375rem;   /* 15px – card headers */
    --font-size-lg:        1.0625rem;   /* 17px – section titles */
    --font-size-xl:        1.25rem;     /* 20px – page titles */
    --font-size-2xl:       1.5rem;      /* 24px – status titles */
    --font-size-3xl:       1.75rem;     /* 28px – display */
    --line-height-base:    1.55;

    /* Control sizes */
    --btn-height-sm:       32px;
    --input-height:        38px;

    /* Transitions */
    --transition-fast:     150ms ease;
    --transition-base:     250ms ease;
    --z-loader:            9999;

    /* Bootstrap 5 theme remap */
    --bs-primary:            #00529C;
    --bs-primary-rgb:        0, 82, 156;
    --bs-secondary:          #FECA0A;
    --bs-secondary-rgb:      254, 202, 10;
    --bs-body-font-family:   var(--fontBook);
    --bs-body-color:         var(--lhfDefault);
    --bs-body-bg:            var(--lhfGrey);
    --bs-border-radius:      var(--cardRadius);
    --bs-border-radius-sm:   var(--inputRadius);
    --bs-border-color:       var(--lhfBorderColor);
    --bs-link-color:         var(--lhfBlue);
    --bs-link-hover-color:   var(--lhfLinkHover);
    --bs-heading-color:      var(--lhfBlack);
}

/* --------------------------------------------------------------------------
   2. Base / Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:     var(--fontBook);
    font-size:       var(--font-size-base);
    line-height:     var(--line-height-base);
    color:           var(--lhfDefault);
    background-color: #F5F7FA;
    /* Abstract decorative architectural and curved wave lines on body backdrop */
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(0, 82, 156, 0.035) 0px,
            rgba(0, 82, 156, 0.035) 1px,
            transparent 1px,
            transparent 48px
        ),
        repeating-linear-gradient(
            45deg,
            rgba(0, 82, 156, 0.02) 0px,
            rgba(0, 82, 156, 0.02) 1px,
            transparent 1px,
            transparent 96px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' width='1600' height='900'%3E%3Cpath d='M-100 180 C 350 80, 700 480, 1150 200 C 1420 50, 1620 280, 1800 220' fill='none' stroke='rgba(0,82,156,0.06)' stroke-width='2'/%3E%3Cpath d='M-100 240 C 370 140, 680 510, 1130 250 C 1400 100, 1600 320, 1800 270' fill='none' stroke='rgba(0,82,156,0.045)' stroke-width='1.5'/%3E%3Cpath d='M-100 300 C 390 200, 660 540, 1110 300 C 1380 150, 1580 360, 1800 320' fill='none' stroke='rgba(254,202,10,0.04)' stroke-width='1.5'/%3E%3Cpath d='M-100 360 C 410 260, 640 570, 1090 350 C 1360 200, 1560 400, 1800 370' fill='none' stroke='rgba(0,82,156,0.04)' stroke-width='1.5'/%3E%3Cpath d='M-100 520 C 300 720, 820 440, 1260 670 C 1470 790, 1640 620, 1800 660' fill='none' stroke='rgba(0,82,156,0.05)' stroke-width='2'/%3E%3Cpath d='M-100 580 C 320 770, 800 480, 1240 710 C 1450 820, 1620 660, 1800 700' fill='none' stroke='rgba(254,202,10,0.04)' stroke-width='1.5'/%3E%3Cpath d='M-100 640 C 340 820, 780 520, 1220 750 C 1430 850, 1600 700, 1800 740' fill='none' stroke='rgba(0,82,156,0.04)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-position:    center center, center center, center center;
    background-size:        auto, auto, cover;
    background-repeat:      repeat, repeat, no-repeat;
    background-attachment:  fixed;
    margin:          0;
    padding:         0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display:         flex;
    flex-direction:  column;
    min-height:      100vh;
    min-height:      100dvh;
    overflow-y:      auto;
}

#page-content {
    flex:            1 0 auto;
    width:           100%;
    padding-bottom:  60px !important;
}

/* Ensure login form and content sections are solid opaque white (no background lines bleed through) */
.login-card,
.login-card-body,
.enach-card,
.enach-card-body,
.step-content-card,
.step-content-body,
.receipt-card,
.receipt-card-inner,
.enach-form-panel,
.modal-content {
    background-color: #ffffff !important;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fontDemi);
    font-weight: 600;
    color:       var(--lhfBlack);
    line-height: 1.3;
    margin-bottom: 0.5em;
}
h1, .h1 { font-size: var(--font-size-xl); }
h2, .h2 { font-size: var(--font-size-lg); }
h3, .h3 { font-size: var(--font-size-md); }
h4, .h4 { font-size: var(--font-size-base); }
h5, .h5 { font-size: var(--font-size-sm); }
h6, .h6 { font-size: var(--font-size-sm); }

.fw-demi {
    font-family: var(--fontDemi);
    font-weight: 600 !important;
}

p { margin-bottom: 0.75rem; font-size: var(--font-size-base); }
a { color: var(--lhfBlue); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--lhfLinkHover); text-decoration: none; }

label,
.form-label {
    font-family: var(--fontDemi);
}

.text-muted-custom,
.page-section-desc {
    color:     var(--text-muted);
    font-size: var(--font-size-sm);
    margin:    0;
    line-height: 1.45;
}

.page-section-title {
    font-family: var(--fontDemi);
    font-size:   var(--font-size-lg);
    font-weight: 600;
    color:       var(--lichfl-blue);
    margin:      0 0 4px;
    line-height: 1.3;
}

.small, small {
    font-size: var(--font-size-xs);
}

/* Readable note text — dark body colour for WCAG contrast on white */
.text-secondary {
    color: var(--lhfDefault) !important;
}

.form-note,
.form-check-label.form-note,
.declaration-section .form-note,
.form-section-body .form-note {
    font-family: var(--fontBook);
    font-size:   var(--font-size-sm);
    font-weight: 400;
    color:       var(--lhfDefault) !important; /* #334155 — readable on white */
    line-height: 1.6;
    margin:      0 0 12px;
}

.form-note-strong,
.declaration-section .form-note-strong {
    font-family: var(--fontDemi);
    font-size:   var(--font-size-sm);
    color:       var(--lhfBlack) !important; /* #0f172a */
    font-weight: 600;
    line-height: 1.5;
    margin:      0;
}

/* --------------------------------------------------------------------------
   4. Unified Full-Width LIC-Blue Site Header
   -------------------------------------------------------------------------- */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    1030;
    flex-shrink: 0;
    width:      100%;
}

.site-header-unified {
    background-color: var(--lichfl-blue);
    border-bottom:    3px solid var(--lichfl-gold);
    box-shadow:       0 2px 10px rgba(0, 45, 84, 0.25);
    padding:          8px 0;
    min-height:       64px;
    display:          flex;
    align-items:      center;
    width:            100%;
}

.site-header-inner {
    width:         100%;
    max-width:     none;
    padding-left:  1.25rem;
    padding-right: 1.25rem;
}
@media (min-width: 992px) {
    .site-header-inner {
        padding-left:  2rem;
        padding-right: 2rem;
    }
}

/* Header logo direct images (no white box container, no drop shadow, no transition) */
.header-logo-img {
    width:                   auto;
    object-fit:              contain;
    display:                 block;
    filter:                  none;
    transition:              none;
    image-rendering:         -webkit-optimize-contrast;
}
.header-lichfl-logo {
    height:        46px;
    max-height:    49px;
    filter:        none !important;
    transition:    none;
}
.header-emandate-logo {
    height:        20px;
    max-height:    20px;
    filter:        none;
    position:      relative;
    left:          -2%;
    top:           0.5%;
    transform:     translate(-2%, 0.5%);
    transition:    none;
}
.header-brand-divider {
    display:       inline-block;
    width:         1.5px;
    height:        22px;
    background:    rgba(255, 255, 255, 0.4);
    margin:        0 4px;
}

/* Header Right items */
.header-right {
    display:       flex;
    align-items:   center;
    gap:           1.25rem;
}
.header-date {
    font-size:     0.875rem;
    color:         #ffffff;
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
}
.text-gold {
    color:         var(--lichfl-gold) !important;
}
.header-user {
    font-size:     0.875rem;
    color:         #ffffff;
    display:       inline-flex;
    align-items:   center;
    gap:           0.45rem;
    background:    rgba(255, 255, 255, 0.12);
    padding:       5px 12px;
    border-radius: 20px;
    border:        1px solid rgba(255, 255, 255, 0.2);
}
.header-user-name {
    font-weight:   600;
    color:         #ffffff;
    max-width:     220px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* Header Logout Button - White with red border, red icon, red text */
.btn-header-logout {
    background:       #ffffff !important;
    border:           1.5px solid var(--lichfl-danger) !important;
    color:            var(--lichfl-danger) !important;
    font-size:        0.85rem;
    font-weight:      600;
    padding:          5px 14px;
    border-radius:    6px;
    display:          inline-flex;
    align-items:      center;
    gap:              0.4rem;
    transition:       all 0.2s ease-in-out;
    text-decoration:  none;
}
.btn-header-logout i,
.btn-header-logout .fa-solid {
    color:            var(--lichfl-danger) !important;
}
.btn-header-logout:hover,
.btn-header-logout:focus {
    background-color: var(--lichfl-danger) !important;
    color:            #ffffff !important;
    border-color:     var(--lichfl-danger) !important;
    box-shadow:       0 2px 8px rgba(220, 38, 38, 0.35);
}
.btn-header-logout:hover i,
.btn-header-logout:focus i,
.btn-header-logout:hover .fa-solid,
.btn-header-logout:focus .fa-solid {
    color:            #ffffff !important;
}

@media (max-width: 576px) {
    .site-header-unified {
        padding: 6px 0;
    }
    .header-logo-img {
        height: 32px;
        max-height: 34px;
    }
    .header-lichfl-logo {
        height: 32px;
        max-height: 34px;
    }
    .header-emandate-logo {
        height: 12px;
        max-height: 12px;
    }
    .header-brand-divider {
        height: 16px;
        margin: 0 2px;
    }
    .header-user-name {
        max-width: 120px;
        font-size: 0.8rem;
    }
    .btn-header-logout {
        padding: 4px 10px;
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   6. Vertical Stepper (Left Side Navigation)
   -------------------------------------------------------------------------- */
.vertical-stepper {
    display:        flex;
    flex-direction: column;
    gap:            0;
    position:       relative;
}

.v-step-item {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    position:      relative;
    padding:       10px 6px;
}

.v-step-item::after {
    content:     '';
    position:    absolute;
    top:         38px;
    left:        20px;
    width:       2px;
    height:      calc(100% - 16px);
    background:  var(--border-color);
    z-index:     0;
}
.v-step-item:last-child::after { display: none; }

.v-step-item.completed::after { background: var(--lichfl-blue); }

.v-step-circle {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    border:          2px solid var(--border-color);
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--fontDemi);
    font-size:       var(--font-size-xs);
    font-weight:     700;
    color:           var(--text-muted);
    z-index:         1;
    flex-shrink:     0;
    transition:      all var(--transition-base);
    line-height:     1;
}
.v-step-circle .fa-solid,
.v-step-circle .fas {
    font-size: 0.7rem;
}

.v-step-item.completed .v-step-circle {
    background:   var(--lichfl-blue);
    border-color: var(--lichfl-blue);
    color:        #fff;
}
.v-step-item.active .v-step-circle {
    background:   var(--lichfl-blue);
    border-color: var(--lichfl-blue);
    color:        #fff;
    box-shadow:   0 0 0 3px var(--lichfl-blue-light);
}

.v-step-content {
    flex:        1;
    min-width:   0;
    padding-top: 2px;
}

.v-step-title {
    font-family: var(--fontDemi);
    font-size:   var(--font-size-sm);
    font-weight: 600;
    color:       var(--text-muted);
    line-height: 1.3;
}
.v-step-item.completed .v-step-title,
.v-step-item.active    .v-step-title {
    color:       var(--lichfl-blue);
    font-weight: 700;
}

.v-step-subtitle {
    font-size:   var(--font-size-xs);
    color:       var(--text-muted);
    margin-top:  2px;
    line-height: 1.35;
}

/* Inner-page sidebar — classic compact card */
.process-sidebar-card .process-card-title {
    display:         flex;
    align-items:     center;
    gap:             8px;
    margin:          0 0 10px;
    padding-bottom:  8px;
    border-bottom:   1px solid var(--border-light);
    font-family:     var(--fontDemi);
    font-size:       var(--font-size-sm);
    font-weight:     700;
    color:           var(--lichfl-blue);
    line-height:     1.3;
}

.process-sidebar-card .process-card-title .fa-solid {
    color:     var(--lichfl-blue);
    font-size: 0.85rem;
}

.process-sidebar-card .vertical-stepper {
    margin: 0;
}

/* --------------------------------------------------------------------------
   6a. Executive Process Card & Timeline Redesign
   -------------------------------------------------------------------------- */
.executive-process-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.07);
    transition: all 0.25s ease;
}

.executive-process-card:hover {
    box-shadow: 0 8px 28px rgba(0, 51, 102, 0.12);
}

.process-card-header {
    background: linear-gradient(135deg, var(--lhfBlue) 0%, #003d75 100%);
    color: #ffffff;
    padding: 12px 16px;
    font-family: var(--fontDemi);
    font-size: var(--font-size-md);
    border-bottom: 3px solid var(--lhfYellow);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.process-header-icon {
    color: var(--lhfYellow);
    font-size: 1rem;
}

.process-time-pill {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
}

.executive-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
    margin-bottom: 8px;
}

.executive-timeline .v-step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding: 8px 6px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.executive-timeline .v-step-item:hover {
    background-color: #f8fafc;
}

.executive-timeline .v-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.executive-timeline .v-step-pod {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: all 0.25s ease;
    color: #64748b;
}

.executive-timeline .v-step-icon {
    font-size: 0.85rem;
}

.executive-timeline .v-step-num-pill {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #64748b;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1px solid #ffffff;
}

.executive-timeline .v-step-connector {
    width: 2px;
    height: calc(100% + 8px);
    background-color: #e2e8f0;
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.executive-timeline .v-step-item:last-child .v-step-connector {
    display: none;
}

/* Active Step Styling */
.executive-timeline .v-step-item.active {
    background-color: rgba(0, 82, 156, 0.04);
    border-left: 3px solid var(--lhfBlue);
    padding-left: 9px;
}

.executive-timeline .v-step-item.active .v-step-pod {
    background: linear-gradient(135deg, var(--lhfBlue) 0%, #003d75 100%);
    border-color: var(--lhfBlue);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 82, 156, 0.18);
}

.executive-timeline .v-step-item.active .v-step-num-pill {
    background: var(--lhfYellow);
    color: #0f172a;
    font-weight: 800;
}

.executive-timeline .v-step-item.active .v-step-title {
    color: var(--lhfBlue);
    font-weight: 700;
}

/* Completed Step Styling */
.executive-timeline .v-step-item.completed .v-step-pod {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.executive-timeline .v-step-item.completed .v-step-num-pill {
    background: #047857;
}

.executive-timeline .v-step-item.completed .v-step-connector {
    background-color: #10b981;
}

.executive-timeline .v-step-item.completed .v-step-title {
    color: #0f172a;
    font-weight: 600;
}

/* Step Content Details */
.v-step-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.executive-timeline .v-step-title {
    font-family: var(--fontDemi);
    font-size: 0.82rem;
    color: #334155;
    line-height: 1.25;
}

.executive-timeline .v-step-subtitle {
    font-size: 0.73rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

/* Step Badges & Tags */
.v-step-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}

.v-tag-blue {
    background-color: #e0f2fe;
    color: #0369a1;
}

.v-tag-slate {
    background-color: #f1f5f9;
    color: #475569;
}

.v-tag-indigo {
    background-color: #e0e7ff;
    color: #4338ca;
}

.v-tag-green {
    background-color: #dcfce7;
    color: #15803d;
}

/* Trust & Security Grid */
.process-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.trust-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    transition: all 0.2s ease;
}

.trust-item:hover {
    background: #ffffff;
    border-color: var(--lhfBlue);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.trust-item i {
    font-size: 0.85rem;
}

.trust-item span {
    font-size: 0.65rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.1;
}

/* --------------------------------------------------------------------------
   6d. Executive Process Banner (Hero Feature Showcase) — Zero Scroll
   -------------------------------------------------------------------------- */
.login-process-below {
    max-width: 1040px !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden; /* Ensure strictly no horizontal scrollbar */
}

.enach-process-banner {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 51, 102, 0.08);
    overflow: hidden;
}

/* Banner Hero Header Bar */
.process-banner-hero,
.compact-modal-header {
    background: linear-gradient(135deg, var(--lhfBlue) 0%, #003366 100%) !important;
    color: #ffffff;
    padding: 12px 20px !important;
    border-bottom: 3px solid var(--lhfYellow) !important;
}

.banner-hero-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(254, 202, 10, 0.18);
    border: 1px solid rgba(254, 202, 10, 0.4);
    color: var(--lhfYellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.banner-hero-title {
    font-family: var(--fontDemi);
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.banner-hero-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.banner-pill {
    font-size: 0.73rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.banner-time-pill {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.banner-npci-pill {
    background: rgba(254, 202, 10, 0.2);
    color: var(--lhfYellow);
    border: 1px solid rgba(254, 202, 10, 0.4);
}

/* 4-Card Process Grid */
.process-banner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
    width: 100%;
}

.banner-step-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.banner-step-card:hover {
    background: #ffffff;
    border-color: var(--lhfBlue);
    box-shadow: 0 8px 24px rgba(0, 82, 156, 0.12);
    transform: translateY(-3px);
}

/* Icon Pod & Step Number */
.banner-icon-pod {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.banner-step-icon,
.banner-check-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.banner-num-badge {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
}

.banner-card-tag {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Active Card Styles */
.banner-step-card.active {
    background: #ffffff;
    border: 2px solid var(--lhfBlue);
    box-shadow: 0 8px 24px rgba(0, 82, 156, 0.14);
}

.banner-step-card.active .banner-step-icon {
    background: linear-gradient(135deg, var(--lhfBlue) 0%, #003366 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 82, 156, 0.25);
}

.banner-step-card.active .banner-num-badge {
    background: var(--lhfYellow);
    color: #0f172a;
}

.banner-step-card.active .banner-card-title {
    color: var(--lhfBlue);
}

/* Completed Card Styles */
.banner-step-card.completed .banner-check-icon {
    background: #10b981;
    color: #ffffff;
}

.banner-step-card.completed .banner-num-badge {
    background: #d1fae5;
    color: #047857;
}

/* Card Content */
.banner-card-title {
    font-family: var(--fontDemi);
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.3;
}

.banner-card-text {
    font-size: 0.74rem;
    color: #64748b;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Card Footer Status */
.banner-card-foot {
    font-size: 0.7rem;
    font-weight: 600;
    border-color: #f1f5f9 !important;
}

.banner-status-active {
    color: var(--lhfBlue);
    font-weight: 700;
}

.animate-pulse {
    animation: pulseGlow 1.8s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.15); }
}

/* Banner Trust Footer */
.process-banner-trust {
    border-color: #e2e8f0 !important;
}

.banner-trust-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

/* Responsive Grid Breakdown */
@media (max-width: 992px) {
    .process-banner-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .process-banner-grid {
        grid-template-columns: 1fr;
    }
}

.process-subtitle-badge {
    background: rgba(254, 202, 10, 0.2);
    color: #b38600;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(254, 202, 10, 0.4);
}

.horizontal-stepper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.h-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 14px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
    z-index: 1;
}

.h-step-item:hover {
    background: #ffffff;
    border-color: var(--lhfBlue);
    box-shadow: 0 4px 14px rgba(0, 82, 156, 0.09);
    transform: translateY(-2px);
}

.h-step-line {
    position: absolute;
    top: 32px;
    left: calc(50% + 22px);
    width: calc(100% - 22px);
    height: 3px;
    background-color: #cbd5e1;
    z-index: 0;
    pointer-events: none;
}

.h-step-item.completed + .h-step-item .h-step-line,
.h-step-item.completed .h-step-line {
    background-color: #10b981;
}

.h-step-top {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
}

.h-step-pod {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #64748b;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.h-step-icon {
    font-size: 1rem;
}

.h-step-num-pill {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #64748b;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid #ffffff;
}

/* Active Step Horizontal */
.h-step-item.active {
    background: #ffffff;
    border: 2px solid var(--lhfBlue);
    box-shadow: 0 4px 16px rgba(0, 82, 156, 0.12);
}

.h-step-item.active .h-step-pod {
    background: linear-gradient(135deg, var(--lhfBlue) 0%, #003d75 100%);
    border-color: var(--lhfBlue);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 82, 156, 0.2);
}

.h-step-item.active .h-step-num-pill {
    background: var(--lhfYellow);
    color: #0f172a;
    font-weight: 800;
}

.h-step-item.active .h-step-title {
    color: var(--lhfBlue);
    font-weight: 700;
}

/* Completed Step Horizontal */
.h-step-item.completed .h-step-pod {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.h-step-item.completed .h-step-num-pill {
    background: #047857;
}

.h-step-title {
    font-family: var(--fontDemi);
    font-size: 0.84rem;
    color: #1e293b;
    line-height: 1.25;
}

.h-step-desc {
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.3;
}

.h-step-tag {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
}

/* Horizontal Trust Bar */
.horizontal-trust-bar {
    border-color: #e2e8f0 !important;
}

.h-trust-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.h-trust-chip i {
    font-size: 0.85rem;
}

/* Responsive adjustment for small screens — convert 4 columns to 2x2 grid without scrollbar */
@media (max-width: 768px) {
    .horizontal-stepper-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .h-step-line {
        display: none;
    }
}

@media (max-width: 480px) {
    .horizontal-stepper-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   6b. Login page — centered login + process steps
   -------------------------------------------------------------------------- */
.login-stage {
    display:               grid;
    grid-template-columns: 1fr minmax(0, 560px) 1fr;
    align-items:           start;
    column-gap:            16px;
    width:                 100%;
   
}

.login-stage-center {
    grid-column: 2;
    width:       100%;
    min-width:   0;
}

.login-stage-aside {
    grid-column:  3;
    justify-self: start;
    width:        100%;
    max-width:    280px;
    min-width:    0;
    padding-right: 4px;
}

.login-stage-aside .process-overview-card {
    margin-bottom: 0;
}

.login-stage-aside .process-card-body {
    padding: 12px 12px 14px;
}

.login-stage-aside .process-intro {
    font-size: var(--font-size-xs);
    margin-bottom: 10px;
}

.login-page-stack {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
   
}

.login-page-stack > .login-card,
.login-page-stack > .enach-card.login-card,
.login-stage-center > .login-card,
.login-stage-center > .enach-card.login-card {
    width:     100%;
    max-width: 560px;
}

.login-card {
    box-shadow: var(--shadow-card);
}

.login-card-body {
    padding: 28px 32px 32px !important;
}

.login-card-title {
    font-size: var(--font-size-xl);
    margin-bottom: 4px;
}

.login-card .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.login-card .form-control,
.login-card .form-select {
    height: 44px;
}

.login-card .input-group > .input-group-text {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    box-sizing: border-box;
}

.login-card .input-group > .form-control {
    height: 44px;
    box-sizing: border-box;
}

.login-card .captcha-img {
    height: 44px;
}

.login-page-wrap {
    width:        100%;
    max-width:    560px;
    margin:       16px auto 8px;
    padding:      0 6px;
}

/* Horizontal process cards (legacy / unused on index) */
.process-steps-section {
    width:        100%;
    max-width:    1040px;
    margin:       8px auto 20px;
    padding:      0 8px;
}
.process-steps-heading {
    font-family: var(--fontDemi);
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--lhfBlue);
    text-align:  center;
    margin:      0 0 14px;
    letter-spacing: 0.2px;
}
.process-steps-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   14px;
}
.process-step-card {
    position:      relative;
    background:    var(--lhfWhite);
    border:        1px solid var(--border-light);
    border-radius: 8px;
    box-shadow:    0 2px 8px rgba(0, 82, 156, 0.06);
    padding:       18px 12px 14px;
    text-align:    center;
    transition:    box-shadow var(--transition-base), transform var(--transition-fast);
}
.process-step-card:hover {
    box-shadow: 0 4px 14px rgba(0, 82, 156, 0.12);
    transform:  translateY(-2px);
}
.process-step-card.is-active {
    border-color: rgba(0, 82, 156, 0.35);
    box-shadow:   0 3px 12px rgba(0, 82, 156, 0.12);
}
.process-step-bar {
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
    height:   3px;
    background: linear-gradient(to right, var(--lhfBlue) 50%, var(--lhfYellow) 50%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.process-step-badge {
    position:        absolute;
    top:             0;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         2;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      var(--lhfBlue);
    color:           var(--lhfWhite);
    font-family:     var(--fontDemi);
    font-size:       0.72rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 4px rgba(0, 82, 156, 0.2);
    border:          2px solid var(--lhfWhite);
}
.process-step-card.is-done .process-step-badge {
    background: var(--color-success);
}
.process-step-icon {
    width:           38px;
    height:          38px;
    margin:          2px auto 8px;
    border-radius:   50%;
    background:      var(--lichfl-blue-xlight);
    color:           var(--lhfBlue);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
}
.process-step-title {
    font-family: var(--fontDemi);
    font-size:   0.84rem;
    font-weight: 600;
    color:       var(--lhfBlue);
    margin:      0 0 3px;
    line-height: 1.3;
}
.process-step-text {
    font-family: var(--fontBook);
    font-size:   0.72rem;
    color:       var(--lhfDefault);
    line-height: 1.4;
    margin:      0;
}

.two-card-layout-container {
    width:        100%;
    max-width:    980px;
    margin:       8px auto 4px;
    padding:      0 6px;
}

.process-overview-card {
    background:    var(--lhfWhite);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
}

.process-overview-card .process-card-body {
    display:        flex;
    flex-direction: column;
    padding:        var(--space-md) var(--space-lg);
    flex:           1 1 auto;
}

.process-overview-card.h-100 .process-card-body {
    height: 100%;
}

.process-overview-card .process-intro {
    margin-bottom: 12px;
}

.process-overview-card .vertical-stepper {
    flex:          1 1 auto;
    margin-bottom: 4px;
}

.process-trust-footer {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-top:    12px;
    padding-top:   12px;
    border-top:    1px solid var(--border-light);
    font-size:     var(--font-size-xs);
    color:         var(--text-muted);
    line-height:   1.4;
}
.process-trust-footer .fa-solid,
.process-trust-footer .fas {
    font-size: var(--font-size-md);
    color:     var(--color-success);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.enach-card {
    background:    var(--bg-card);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-card);
    overflow:      hidden;
    transition:    box-shadow var(--transition-base);
}
.enach-card:hover { box-shadow: var(--shadow-md); }

.enach-card-header {
    background:    #F1F6FB;
    color:         var(--lichfl-blue);
    padding:       14px var(--space-lg);
    font-family:   var(--fontDemi);
    font-weight:   600;
    font-size:     var(--font-size-md);
    border-bottom: 1px solid var(--lichfl-border);
    display:       flex;
    align-items:   center;
    gap:           10px;
    line-height:   1.3;
}
.enach-card-header .fa-solid,
.enach-card-header .fas,
.enach-card-header .far,
.enach-card-header i {
    font-size: var(--font-size-base);
    opacity:   1;
    color:     var(--lichfl-blue) !important;
}
.enach-card-header h1,
.enach-card-header h2,
.enach-card-header h3,
.enach-card-header .h6 {
    color:       var(--lichfl-blue) !important;
    font-weight: 700 !important;
}
.enach-card-header .badge {
    font-size:     var(--font-size-xs);
    font-weight:   600;
    padding:       5px 12px;
    border-radius: 20px;
    background:    #ffffff !important;
    color:         var(--lichfl-blue) !important;
    border:        1px solid rgba(0, 82, 156, 0.2) !important;
}

.enach-card-body {
    padding: var(--space-xl) var(--space-lg);
}

/* Single continuous form panel (nested inside step content card) */
.enach-form-panel {
    background:    var(--bg-card);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow:    none;
    overflow:      hidden;
    margin-bottom: 0;
}

/* Sticky process sidebar */
.process-col {
    align-self: flex-start;
}
.process-col-sticky {
    position: sticky;
    top:      12px;
    z-index:  5;
}
.process-col-sticky .process-overview-card,
.process-col-sticky .process-sidebar-card {
    margin-bottom: 0;
}

/* Main step content panel (Mandate Details / Summary / etc.) */
.step-content-card {
    overflow: hidden;
}
.step-content-body {
    padding: 16px 18px 20px !important;
}
.step-content-body > .step-actions-top {
    margin-bottom: 12px;
}
.step-content-body .enach-form-panel {
    border-radius: var(--radius-md);
}

@media (max-width: 767px) {
    .process-col-sticky {
        position: static;
    }
}

.form-section {
    border-bottom: 1px solid var(--border-light);
}
.form-section:last-child {
    border-bottom: none;
}

.form-section-head {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     12px 20px;
    background:  var(--lichfl-blue-xlight);
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid var(--lichfl-blue);
    font-family: var(--fontDemi);
    font-size:   var(--font-size-md);
    font-weight: 600;
    color:       var(--lichfl-blue);
    line-height: 1.3;
}
.form-section-head .fa-solid,
.form-section-head .fas {
    font-size: var(--font-size-base);
    color:     var(--lichfl-blue);
    width:     1.1em;
    text-align: center;
}

.form-section-body {
    padding: 18px 20px 20px;
}

.form-section-actions {
    padding-top: 8px;
    text-align:  center;
}

/* Step back / action bar */
.step-actions {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             10px;
    margin-top:      12px;
    margin-bottom:   4px;
}
.step-actions-primary {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-left: auto;
}
.step-back-btn {
    flex-shrink: 0;
}
.step-actions-top {
    margin-top:    0;
    margin-bottom: 14px;
}

/* Centered Form Wrapper */
.login-form-container {
    max-width: 520px;
    width:     100%;
    margin-left:  auto;
    margin-right: auto;
}

/* Info Card */
.info-card {
    background:    var(--bg-subtle);
    border:        1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding:       var(--space-md) var(--space-lg);
}
.info-card .info-row {
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    padding:        8px 0;
    border-bottom:  1px solid var(--border-light);
    gap:            12px;
}
.info-card .info-row:last-child { border-bottom: none; }
.info-card .info-label {
    color:       var(--text-muted);
    font-size:   var(--font-size-sm);
    font-weight: 500;
}
.info-card .info-value {
    color:       var(--text-primary);
    font-weight: 600;
    text-align:  right;
}

/* Summary Cards */
.summary-card {
    background:    #fff;
    border:        1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding:       var(--space-md);
    border-top:    3px solid var(--lichfl-blue);
}
.summary-card .card-label {
    font-size:   var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:       var(--text-muted);
    margin-bottom: 4px;
}
.summary-card .card-value {
    font-size:   var(--font-size-xl);
    font-weight: 700;
    color:       var(--text-primary);
}
.summary-card .card-icon {
    width:           40px;
    height:          40px;
    background:      var(--lichfl-blue-xlight);
    border-radius:   var(--radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--lichfl-blue);
    font-size:       1.2rem;
    margin-bottom:   var(--space-sm);
}

/* --------------------------------------------------------------------------
   8. Forms & Inputs Alignment & Validation Feedback Fix
   -------------------------------------------------------------------------- */
.form-label {
    font-weight:   600;
    font-size:     var(--font-size-sm);
    color:         var(--text-secondary);
    margin-bottom: 6px;
}
.form-label .required-star { color: var(--color-danger); margin-left: 2px; }

.form-control,
.form-select {
    border:        1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding:       6px 12px;
    font-size:     var(--font-size-base);
    color:         var(--text-primary);
    background:    #fff;
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
    height:        var(--input-height);
    line-height:   1.4;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--border-focus);
    box-shadow:   0 0 0 3px rgba(0, 82, 156, 0.12);
    outline:      none;
}
.form-control::placeholder { color: var(--text-light); }

.form-control.form-control-readonly,
.form-control[readonly] {
    background:  var(--bg-subtle);
    color:       var(--text-secondary);
    cursor:      not-allowed;
    border-style: dashed;
}

/* Comprehensive Invalid Feedback Display Rules */
.invalid-feedback {
    display:     none;
    align-items: center;
    gap:         4px;
    font-size:   var(--font-size-xs);
    color:       var(--color-danger);
    margin-top:  5px;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .input-group:has(:invalid) ~ .invalid-feedback,
.was-validated .mb-4:has(:invalid) .invalid-feedback,
.was-validated div:has(> .form-control:invalid) .invalid-feedback {
    display: flex !important;
}

/* Input Group Alignment */
.input-group {
    align-items: stretch;
}
.input-group .input-group-text {
    background:    #f8fafc;
    border:        1.5px solid var(--border-color);
    color:         var(--lichfl-blue);
    font-size:     var(--font-size-sm);
    font-weight:   600;
    padding:       0 12px;
    height:        var(--input-height);
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.input-group > .input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .input-group-text:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .btn,
.input-group > button.btn {
    height:        var(--input-height) !important;
    min-height:    var(--input-height) !important;
    padding:       0 16px;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
}
.input-group > .btn:last-child,
.input-group > button.btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}
.input-group > .btn:first-child,
.input-group > button.btn:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

.form-text {
    color:     var(--text-muted);
    font-size: var(--font-size-xs);
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   9. Buttons — standardized small size across the portal
   -------------------------------------------------------------------------- */
.btn,
.btn-sm,
.btn-lg {
    font-family:     var(--fontDemi);
    font-size:       var(--font-size-sm);
    font-weight:     500;
    border-radius:   var(--inputRadius);
    padding:         4px 12px;
    transition:      all var(--transition-fast);
    height:          var(--btn-height-sm);
    min-height:      var(--btn-height-sm);
    line-height:     1.2;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    white-space:     nowrap;
}
/* Login card — larger CTAs (override small global buttons) */
.login-card .btn.btn-login,
.login-card a.btn.btn-login,
.login-card button.btn.btn-login {
    height:      44px;
    min-height:  44px;
    padding:     10px 20px;
    font-size:   var(--font-size-base);
    font-weight: 600;
}
.login-card .btn.btn-login .fa-solid,
.login-card a.btn.btn-login .fa-solid {
    font-size: 0.95rem;
}

/* Keep Font Awesome icons visible inside every button */
.btn .fa-solid,
.btn .fas,
.btn .far,
.btn-sm .fa-solid,
.btn-lg .fa-solid,
a.btn .fa-solid,
button.btn .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style:  normal !important;
    font-size:   0.8125rem;
    line-height: 1;
    display:     inline-block;
    width:       1em;
    text-align:  center;
    flex-shrink: 0;
}
.btn-primary {
    background:   var(--lichfl-blue);
    border-color: var(--lichfl-blue);
    color:        #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
    background:   var(--lichfl-dark-blue);
    border-color: var(--lichfl-dark-blue);
    color:        #ffffff;
    box-shadow:   0 2px 8px rgba(0, 61, 117, 0.3);
}

.btn-secondary {
    background:   #ffffff;
    border:       1.5px solid var(--lichfl-blue);
    color:        var(--lichfl-blue);
}
.btn-secondary:hover, .btn-secondary:focus {
    background:   var(--lichfl-blue-xlight);
    border-color: var(--lichfl-dark-blue);
    color:        var(--lichfl-dark-blue);
}

.btn-outline-primary {
    color:        var(--lichfl-blue);
    border-color: var(--lichfl-blue);
    background:   #ffffff;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background:   var(--lichfl-blue);
    border-color: var(--lichfl-blue);
    color:        #ffffff;
}

.btn-outline-secondary {
    color:        var(--lichfl-blue);
    border-color: var(--lichfl-blue);
    background:   #ffffff;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background:   var(--lichfl-blue-xlight);
    border-color: var(--lichfl-dark-blue);
    color:        var(--lichfl-dark-blue);
}

.btn-outline-danger {
    color:        var(--color-danger);
    border-color: var(--color-danger);
    background:   #fff;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background:   var(--color-danger);
    border-color: var(--color-danger);
    color:        #fff;
}

.btn-danger {
    background:   var(--color-danger);
    border-color: var(--color-danger);
    color:        #fff;
}

/* SweetAlert2 buttons also use FA icons */
.swal2-styled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.swal2-styled[style*="display: none"],
.swal2-actions button.swal2-styled[style*="display: none"] {
    display: none !important;
}
.swal2-styled .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   10. Alerts (base design system)
   -------------------------------------------------------------------------- */
.alert {
    --alert-icon-color: currentColor;
    position:      relative;
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    margin-bottom: 1rem;
    padding:       12px 14px;
    border:        1px solid transparent;
    border-radius: var(--radius-md);
    font-family:   var(--fontBook);
    font-size:     var(--font-size-sm);
    line-height:   1.45;
    color:         var(--text-secondary);
}

.alert > .fa-solid,
.alert > .fas,
.alert > .far,
.alert .alert-icon {
    flex-shrink: 0;
    margin-top:  2px;
    font-size:   var(--font-size-base);
    color:       var(--alert-icon-color);
    line-height: 1;
}

.alert .alert-content {
    flex:      1;
    min-width: 0;
    color:     inherit;
}

.alert .alert-title {
    font-family: var(--fontDemi);
    font-size:   var(--font-size-base);
    font-weight: 700;
    color:       var(--text-primary);
    margin:      0 0 2px;
    line-height: 1.3;
}

.alert .alert-text {
    margin:      0;
    font-size:   var(--font-size-sm);
    color:       var(--text-muted);
    line-height: 1.45;
}

.alert .alert-content p:last-child,
.alert .alert-text:last-child {
    margin-bottom: 0;
}

.alert .alert-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
}

/* Compact alert (forms / inline validation banners) */
.alert.alert-sm,
.alert.py-2 {
    padding:     8px 12px;
    font-size:   var(--font-size-sm);
    align-items: center;
}
.alert.alert-sm > .fa-solid,
.alert.alert-sm .alert-icon,
.alert.py-2 > .fa-solid,
.alert.py-2 .alert-icon {
    margin-top: 0;
    font-size:  var(--font-size-sm);
}

/* Horizontal alert with trailing action (empty states, CTAs) */
.alert.alert-with-action {
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         14px 16px;
}
.alert.alert-with-action .alert-body {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    flex:        1;
    min-width:   0;
}
.alert.alert-with-action .alert-body > .fa-solid,
.alert.alert-with-action .alert-body > .fas,
.alert.alert-with-action .alert-body .alert-icon {
    margin-top: 2px;
    font-size:  1.15rem;
}
.alert.alert-with-action .alert-actions {
    margin-left: 0;
    padding-left: 0;
}

@media (max-width: 576px) {
    .alert.alert-with-action {
        flex-direction: column;
        align-items:    stretch;
    }
    .alert.alert-with-action .alert-actions {
        width: 100%;
    }
    .alert.alert-with-action .alert-actions .btn {
        width: 100%;
    }
}

/* Variants */
.alert-info {
    --alert-icon-color: var(--color-info);
    background:   var(--color-info-bg);
    border-color: var(--color-info-border);
    color:        var(--color-info);
}
.alert-info .alert-title { color: var(--color-info); }
.alert-info .alert-text  { color: var(--text-secondary); }

.alert-success {
    --alert-icon-color: var(--color-success);
    background:   var(--color-success-bg);
    border-color: var(--color-success-border);
    color:        var(--color-success);
}
.alert-success .alert-title { color: var(--color-success); }
.alert-success .alert-text  { color: var(--text-secondary); }

.alert-warning {
    --alert-icon-color: var(--color-warning);
    background:   var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color:        var(--color-warning);
}
.alert-warning .alert-title { color: var(--color-warning); }
.alert-warning .alert-text  { color: var(--text-secondary); }

.alert-danger {
    --alert-icon-color: var(--color-danger);
    background:   var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color:        var(--color-danger);
}
.alert-danger .alert-title { color: var(--color-danger); }
.alert-danger .alert-text  { color: var(--text-secondary); }

.alert-primary {
    --alert-icon-color: var(--lichfl-blue);
    background:   var(--lichfl-blue-xlight);
    border-color: var(--lichfl-blue-light);
    color:        var(--lichfl-blue);
}
.alert-primary .alert-title { color: var(--lichfl-blue); }
.alert-primary .alert-text  { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   11. OTP Channel Selection
   -------------------------------------------------------------------------- */
.otp-channel-list { list-style: none; padding: 0; margin: 0; }

.otp-channel-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    border:        1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding:       14px 16px;
    margin-bottom: 10px;
    cursor:        pointer;
    transition:    all var(--transition-fast);
    background:    #fff;
}
.otp-channel-item:hover,
.otp-channel-item.selected {
    border-color: var(--lichfl-blue);
    background:   var(--lichfl-blue-xlight);
}
.otp-channel-item input[type="radio"] { display: none; }

.otp-channel-icon {
    width:           34px;
    height:          34px;
    border-radius:   var(--radius-sm);
    background:      var(--lichfl-blue-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--lichfl-blue);
    font-size:       var(--font-size-base);
    flex-shrink:     0;
}
.otp-channel-label  { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-primary); }
.otp-channel-detail { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: 1px; }

.otp-input {
    letter-spacing: 0.3em;
    font-size:      var(--font-size-xl);
    font-weight:    700;
    text-align:     center;
    max-width:      220px;
    height:         44px;
}

.otp-timer {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-size:   var(--font-size-sm);
    color:       var(--text-muted);
}
.otp-timer .timer-count { color: var(--lichfl-blue); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Loading Overlay
   -------------------------------------------------------------------------- */
.loader-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(10, 20, 40, 0.55);
    backdrop-filter: blur(2px);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    z-index:         var(--z-loader);
    opacity:         0;
    visibility:      hidden;
    transition:      opacity var(--transition-base), visibility var(--transition-base);
}
.loader-overlay.active { opacity: 1; visibility: visible; }

.loader-box {
    background:    #fff;
    border-radius: var(--radius-lg);
    padding:       36px 24px;
    text-align:    center;
    min-width:     280px;
    box-shadow:    var(--shadow-lg);
}
.loader-spinner {
    width:        48px;
    height:       48px;
    border:       4px solid var(--lichfl-blue-light);
    border-top:   4px solid var(--lichfl-blue);
    border-radius: 50%;
    animation:    spin 0.8s linear infinite;
    margin:       0 auto var(--space-md);
}
.loader-text { color: var(--text-primary); font-weight: 600; font-size: var(--font-size-md); margin: 0; }
.loader-subtext { color: var(--text-muted); font-size: var(--font-size-sm); margin: 4px 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   13. Status Pages (Success / Failure / Pending)
   -------------------------------------------------------------------------- */
.status-page { text-align: center; padding: 32px 16px; max-width: 480px; margin: 0 auto; }
.status-icon-circle {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 2.2rem;
}
.status-icon-circle.success { background: var(--color-success-bg); color: var(--color-success); border: 2px solid var(--color-success-border); }
.status-icon-circle.danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border: 2px solid var(--color-danger-border); }
.status-icon-circle.warning { background: var(--color-warning-bg); color: var(--color-warning); border: 2px solid var(--color-warning-border); }

.status-title { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: 8px; }
.status-subtitle { color: var(--text-muted); font-size: var(--font-size-base); line-height: 1.6; margin-bottom: 20px; }

.reference-box {
    background: var(--bg-subtle); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 12px 18px; display: inline-block; min-width: 200px; text-align: left;
}
.reference-box .ref-label { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; color: var(--text-muted); }
.reference-box .ref-value { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); }

/* --------------------------------------------------------------------------
   14. Redirect Screen
   -------------------------------------------------------------------------- */
.redirect-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 16px; }
.redirect-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 36px 32px; max-width: 460px; width: 100%; }
.redirect-bank-logo { font-size: 3rem; color: var(--lichfl-blue); margin-bottom: 16px; }
.redirect-title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.redirect-subtitle { color: var(--text-muted); font-size: var(--font-size-base); line-height: 1.6; margin-bottom: 24px; }
.redirect-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--font-size-xs); color: var(--color-warning); margin-top: 16px; }

/* --------------------------------------------------------------------------
   15. Mandate Form Elements
   -------------------------------------------------------------------------- */
.mandate-amount-display { font-size: 1.8rem; font-weight: 800; color: var(--lichfl-blue); display: flex; align-items: baseline; gap: 4px; }
.mandate-amount-display .currency { font-size: 1.1rem; font-weight: 600; }

.declaration-box { background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; font-size: var(--font-size-sm); color: var(--text-secondary); line-height: 1.7; max-height: 180px; overflow-y: auto; }

.check-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.check-tile { border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 14px; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-secondary); background: #fff; display: flex; align-items: center; gap: 6px; }
.check-tile.active { border-color: var(--lichfl-blue); background: var(--lichfl-blue-xlight); color: var(--lichfl-blue); }
.check-tile.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* --------------------------------------------------------------------------
   16. CAPTCHA Alignment
   -------------------------------------------------------------------------- */
.captcha-container {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.captcha-img {
    border:        1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background:    #fff;
    height:        var(--input-height);
    width:         auto;
    cursor:        pointer;
    display:       block;
}

.captcha-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

/* --------------------------------------------------------------------------
   17. Footer — Exact match with Unified LIC-Blue Header
   -------------------------------------------------------------------------- */
.cp-page-footer {
    display:          block;
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    width:            100%;
    min-height:       38px;
    margin:           0;
    padding:          8px 16px;
    border:           none;
    border-top:       3px solid var(--lichfl-gold);
    border-radius:    0;
    background-color: var(--lichfl-blue);
    box-shadow:       0 -2px 10px rgba(0, 45, 84, 0.2);
    box-sizing:       border-box;
    flex-shrink:      0;
    z-index:          1020;
}
.cp-page-footer .container {
    width:     100%;
    max-width: none;
    margin:    0;
    padding:   0;
}
.cp-page-footer-copy {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             0.25rem 0.5rem;
    text-align:      center;
    color:           #ffffff !important;
    font-family:     var(--fontBook);
    font-weight:     500;
    font-size:       var(--font-size-xs);
    line-height:     1.4;
}
.cp-page-footer-copy span {
    color:       #ffffff !important;
    font-weight: 500;
    padding:     0;
}
.cp-page-footer-sep {
    padding:  0 4px;
    color:    rgba(255, 255, 255, 0.6) !important;
}
.cp-page-footer a {
    color:           var(--lichfl-gold) !important;
    font-weight:     700;
    text-decoration: none;
}
.cp-page-footer a:hover,
.cp-page-footer a:focus {
    color:           #ffffff !important;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.text-lichfl   { color: var(--lichfl-blue) !important; }
.divider       { border: none; border-top: 1px solid var(--border-light); margin: 20px 0; }

#page-content {
    flex:          1 1 auto;
    min-height:    0;
    overflow-y:    auto;
    overflow-x:    hidden;
    padding-top:   14px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.3s ease both; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .login-stage {
        grid-template-columns: 1fr;
        row-gap: 16px;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
    .login-stage-center,
    .login-stage-aside {
        grid-column: 1;
        max-width:   560px;
        width:       100%;
        justify-self: stretch;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 992px) {
    .two-card-layout-container {
        max-width: 720px;
    }
    .process-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .enach-card-body { padding: 18px 14px; }
    .process-overview-card .process-card-body { padding: 14px; }
    .cp-page-footer { padding: 8px 12px; }
    .login-form-container { max-width: 100%; }
    .login-page-wrap { max-width: 100%; }
    .two-card-layout-container { max-width: 100%; }
    .process-steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 420px;
        margin: 0 auto;
    }
}