/* Modern bank account UI for account.php. */

#bank-account-section.bank-dashboard {
    --bank-brand: #078b54;
    --bank-brand-dark: #056b41;
    --bank-brand-soft: #edf9f3;
    --bank-ink: #17251e;
    --bank-muted: #748179;
    --bank-border: #e1e9e4;
    --bank-surface: #fff;
    --bank-shadow: 0 12px 30px rgba(26,61,43,.07);
    color: var(--bank-ink);
}

#bank-account-section .bank-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 23px 25px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.16), transparent 28%),
        linear-gradient(135deg,#057447 0%,#0a9258 58%,#13a667 100%);
    box-shadow: 0 16px 38px rgba(7,139,84,.16);
}

#bank-account-section .bank-hero-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255,255,255,.14);
    font-size: 22px;
}

#bank-account-section .bank-hero-copy {
    min-width: 0;
    flex: 1;
}

#bank-account-section .bank-eyebrow {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .75px;
    text-transform: uppercase;
    opacity: .84;
}

#bank-account-section .bank-hero h4 {
    margin: 0 0 4px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.35px;
}

#bank-account-section .bank-hero p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.5;
}

#bank-account-section .bank-hero-security {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

#bank-account-section .bank-panel {
    padding: 21px;
    border: 1px solid var(--bank-border);
    border-radius: 18px;
    background: var(--bank-surface);
    box-shadow: var(--bank-shadow);
}

#bank-account-section .bank-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}

#bank-account-section .bank-panel-kicker {
    color: var(--bank-brand);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .75px;
    text-transform: uppercase;
}

#bank-account-section .bank-panel-heading h5 {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
}

#bank-account-section .bank-panel-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--bank-brand);
    background: var(--bank-brand-soft);
}

#bank-account-section .bank-loading {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--bank-muted);
    font-size: 12px;
}

#bank-account-section .bank-loading .spinner-border {
    color: var(--bank-brand);
}

#bank-account-section .bank-profile {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(250px,.7fr);
    gap: 16px;
    align-items: stretch;
}

#bank-account-section .bank-profile-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 15%, rgba(255,255,255,.14), transparent 30%),
        linear-gradient(135deg,#19382b 0%,#0f5b3f 60%,#087548 100%);
    box-shadow: 0 14px 30px rgba(18,63,42,.14);
}

#bank-account-section .bank-profile-card::after {
    content: '';
    position: absolute;
    right: -35px;
    bottom: -42px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 28px solid rgba(255,255,255,.05);
    pointer-events: none;
}

#bank-account-section .bank-profile-top,
#bank-account-section .bank-account-number,
#bank-account-section .bank-profile-grid {
    position: relative;
    z-index: 1;
}

#bank-account-section .bank-profile-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

#bank-account-section .bank-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.13);
}

#bank-account-section .bank-brand-copy {
    min-width: 0;
    flex: 1;
}

#bank-account-section .bank-brand-copy span,
#bank-account-section .bank-brand-copy small {
    display: block;
}

#bank-account-section .bank-brand-copy span {
    color: rgba(255,255,255,.68);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

#bank-account-section .bank-brand-copy h6 {
    margin: 2px 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

#bank-account-section .bank-brand-copy small {
    color: rgba(255,255,255,.72);
    font-size: 9px;
}

#bank-account-section .bank-saved-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: 8px;
    font-weight: 750;
}

#bank-account-section .bank-account-number {
    margin: 22px 0 18px;
}

#bank-account-section .bank-account-number span,
#bank-account-section .bank-account-number strong,
#bank-account-section .bank-account-number small {
    display: block;
}

#bank-account-section .bank-account-number span {
    margin-bottom: 3px;
    color: rgba(255,255,255,.66);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

#bank-account-section .bank-account-number strong {
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
}

#bank-account-section .bank-account-number small {
    margin-top: 5px;
    color: rgba(255,255,255,.62);
    font-size: 8px;
    line-height: 1.4;
}

#bank-account-section .bank-profile-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

#bank-account-section .bank-profile-field {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: rgba(255,255,255,.07);
}

#bank-account-section .bank-profile-field span,
#bank-account-section .bank-profile-field strong {
    display: block;
}

#bank-account-section .bank-profile-field span {
    margin-bottom: 4px;
    color: rgba(255,255,255,.64);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .35px;
}

#bank-account-section .bank-profile-field span i {
    margin-right: 5px;
}

#bank-account-section .bank-profile-field strong {
    color: #fff;
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#bank-account-section .bank-profile-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#bank-account-section .bank-security-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px;
    border: 1px solid #dce8e1;
    border-radius: 15px;
    background: linear-gradient(135deg,#fbfefc,#f3faf6);
}

#bank-account-section .bank-security-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--bank-brand);
    background: var(--bank-brand-soft);
}

#bank-account-section .bank-security-card strong,
#bank-account-section .bank-security-card span {
    display: block;
}

#bank-account-section .bank-security-card strong {
    color: #34463c;
    font-size: 11px;
}

#bank-account-section .bank-security-card span {
    margin-top: 4px;
    color: #75837b;
    font-size: 9px;
    line-height: 1.5;
}

#bank-account-section .bank-actions {
    display: block;
}

#bank-account-section .bank-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    background: #fff;
    font-size: 9px;
    font-weight: 750;
}

#bank-account-section .bank-action-refresh {
    width: 100%;
    color: #536259;
    border: 1px solid #d4e0d9;
}

#bank-account-section .bank-action-refresh:hover {
    color: var(--bank-brand);
    border-color: #b8d2c4;
    background: #f7fbf9;
}

#bank-account-section .bank-form {
    padding: 17px;
    border: 1px solid #e0e9e4;
    border-radius: 16px;
    background: #fbfcfb;
}

#bank-account-section .bank-form-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

#bank-account-section .bank-form-heading-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--bank-brand);
    background: var(--bank-brand-soft);
}

#bank-account-section .bank-form-heading span,
#bank-account-section .bank-form-heading h6 {
    display: block;
}

#bank-account-section .bank-form-heading span {
    color: var(--bank-brand);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

#bank-account-section .bank-form-heading h6 {
    margin: 2px 0 0;
    color: #304239;
    font-size: 13px;
    font-weight: 800;
}

#bank-account-section .bank-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
}

#bank-account-section .bank-form-field-wide {
    grid-column: span 2;
}

#bank-account-section .bank-form-field label {
    display: block;
    margin-bottom: 6px;
    color: #425249;
    font-size: 10px;
    font-weight: 750;
}

#bank-account-section .bank-form-field label span {
    color: #d44e4e;
}

#bank-account-section .bank-input-wrap {
    position: relative;
}

#bank-account-section .bank-input-wrap > i {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 2;
    width: 16px;
    color: #87948d;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}

#bank-account-section .bank-input-wrap .form-control,
#bank-account-section .bank-input-wrap .form-select {
    min-height: 45px;
    padding-left: 39px;
    border: 1px solid #dce6e0;
    border-radius: 11px;
    color: #26372e;
    background-color: #fff;
    box-shadow: none;
}

#bank-account-section .bank-input-wrap .form-control:focus,
#bank-account-section .bank-input-wrap .form-select:focus {
    border-color: #66b691;
    box-shadow: 0 0 0 3px rgba(7,139,84,.09);
}

#bank-account-section .bank-input-wrap .select2-container {
    width: 100% !important;
}

#bank-account-section .bank-input-wrap .select2-container--bootstrap-5 .select2-selection {
    min-height: 45px;
    padding-left: 28px;
    border: 1px solid #dce6e0;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
}

#bank-account-section .bank-input-wrap .select2-container--bootstrap-5.select2-container--focus .select2-selection,
#bank-account-section .bank-input-wrap .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #66b691;
    box-shadow: 0 0 0 3px rgba(7,139,84,.09);
}

#bank-account-section .bank-input-wrap .select2-container--bootstrap-5 .select2-selection--single {
    display: flex;
    align-items: center;
}

#bank-account-section .bank-input-wrap .select2-container--bootstrap-5 .select2-selection__rendered {
    padding-left: 0;
    color: #26372e;
    font-size: 13px;
}

#bank-account-section .bank-input-wrap .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #9aa69f;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #cfe0d6;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(26,61,43,.12);
}

.select2-container--bootstrap-5 .select2-search--dropdown {
    padding: 9px;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    min-height: 40px;
    border: 1px solid #dce6e0;
    border-radius: 9px;
    box-shadow: none;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: #66b691;
    box-shadow: 0 0 0 3px rgba(7,139,84,.08);
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 9px 11px;
    font-size: 12px;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background: #078b54;
}

#bank-account-section .bank-form-field small {
    display: block;
    margin-top: 5px;
    color: #87938c;
    font-size: 8px;
    line-height: 1.45;
}

#bank-account-section .bank-form-security {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 11px;
    border-radius: 10px;
    color: #6f766d;
    background: #fff8e8;
    font-size: 9px;
    line-height: 1.5;
}

#bank-account-section .bank-form-security i {
    margin-top: 2px;
    color: #aa7a19;
}

#bank-account-section .bank-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px;
}

#bank-account-section .bank-form-cancel,
#bank-account-section .bank-form-save {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 750;
}

#bank-account-section .bank-form-cancel {
    color: #5a6860;
    border: 1px solid #d5e0da;
    background: #fff;
}

#bank-account-section .bank-form-save {
    color: #fff;
    border: 1px solid var(--bank-brand);
    background: var(--bank-brand);
    box-shadow: 0 6px 14px rgba(7,139,84,.14);
}

#bank-account-section .bank-form-save:disabled {
    opacity: .6;
    box-shadow: none;
}

#bank-account-section .bank-error-state {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 24px 16px;
    border: 1px dashed #ebc7c7;
    border-radius: 15px;
    color: #876565;
    text-align: center;
    background: #fff9f9;
}

#bank-account-section .bank-error-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #b54b4b;
    background: #ffeded;
    font-size: 23px;
}

#bank-account-section .bank-error-state strong {
    color: #704b4b;
    font-size: 12px;
}

#bank-account-section .bank-error-state span {
    max-width: 430px;
    font-size: 10px;
    line-height: 1.5;
}

#bank-account-section .bank-error-state button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 0 12px;
    border: 1px solid #dfb9b9;
    border-radius: 10px;
    color: #9f4747;
    background: #fff;
    font-size: 9px;
    font-weight: 750;
}

@media (max-width: 991.98px) {
    #bank-account-section .bank-profile {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    #bank-account-section .bank-hero {
        align-items: flex-start;
        gap: 12px;
        padding: 18px 16px;
        border-radius: 17px;
    }

    #bank-account-section .bank-hero-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
        font-size: 19px;
    }

    #bank-account-section .bank-hero h4 {
        font-size: 20px;
    }

    #bank-account-section .bank-hero p {
        font-size: 11px;
    }

    #bank-account-section .bank-hero-security {
        display: none;
    }

    #bank-account-section .bank-panel {
        padding: 16px;
        border-radius: 16px;
    }

    #bank-account-section .bank-profile-card {
        padding: 15px;
        border-radius: 16px;
    }

    #bank-account-section .bank-profile-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #bank-account-section .bank-saved-badge {
        margin-left: 53px;
    }

    #bank-account-section .bank-account-number {
        margin-top: 18px;
    }

    #bank-account-section .bank-account-number strong {
        font-size: 21px;
        letter-spacing: .5px;
    }

    #bank-account-section .bank-profile-grid {
        grid-template-columns: 1fr;
    }

    #bank-account-section .bank-form {
        padding: 14px;
    }

    #bank-account-section .bank-form-grid {
        grid-template-columns: 1fr;
    }

    #bank-account-section .bank-form-field-wide {
        grid-column: auto;
    }

    #bank-account-section .bank-form-actions {
        display: block;
    }

    #bank-account-section .bank-form-save {
        width: 100%;
    }
}