*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    /* Sticky footer: body stretches full viewport height */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #666;
    border-radius: 16px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
}

:root {
    --bg-dark: #0c0c0c;
    --card-dark: #353535;
    --gold-gradient: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    --text-light: #ffffff;
    --text-muted: #aaaaaa;
    --border-light: #444;
    --silver-btn: linear-gradient(180deg, #848181 0%, #7C7C7C 56%, #5B5B5B 100%);
    --header-height: 73px;
    --footer-height: 56px;
}

/*Common*/
a {
    text-decoration: none !important;
    cursor: pointer !important;
    color: #EEEEEE !important;
    line-height: 21px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

/* Background */
.ekyc-bg {
    flex: 1 0 auto;
    /* grows to fill space between header & footer */
    padding-top: 80px;
    padding-bottom: 40px;
    background: url("../img/bg-login.jpg") center center no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.dropdown-toggle::after {
    border: none !important;
}

.gold-dropdown::after {
    content: "" !important;
    display: inline-block !important;
    width: 10px !important;
    height: 6px !important;
    margin-left: .255em !important;
    vertical-align: .160em !important;
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='black'/%3E%3C/svg%3E") no-repeat center !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='black'/%3E%3C/svg%3E") no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
}

.gold-dropdown.show::after {
    transform: rotate(180deg) !important;
    transition: 0.3s ease !important;
}

.gold-text {
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(236, 195, 77, 1) 15%, rgba(216, 129, 5, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* Silver gradient — for Font Awesome icons */
.silver-icon {
    background: linear-gradient(180deg, #B1B1B1 0%, #B1B1B1 56%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding-top: 3px;
}

/*Common End*/

/* Header */
.ekyc-header {
    background: #1C1C1C;
    border-bottom: 1px solid var(--border-light);
}

/* Header buttons */
.header-btn {
    background: #474747;
    padding: 7px 14px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #F6F6F6 !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    background-image: linear-gradient(#474747, #474747), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.header-btn>i,
.header-dd-icon-wrap>i,
.trust-badge>i {
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(236, 195, 77, 1) 15%, rgba(216, 129, 5, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.header-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 10px rgba(240, 209, 92, 0.5);
}

/* Desktop = Row */
.header-actions {
    flex-direction: row;
}

/* Card */
.ekyc-card {
    background: var(--card-dark);
    border-radius: 20px;
    width: 100%;
    max-width: 510px;
    border: 1.5px solid transparent;
    background-image: linear-gradient(#2b2b2b, #2b2b2b), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /* Equal-height flow cards */
    min-height: 420px;
    flex-direction: column;
    justify-content: space-between;
}

/* Modal cards — reset min-height so modals size to content */
.modal-content.ekyc-card {
    min-height: auto !important;
    justify-content: flex-start !important;
}

/* Form inside card grows to fill available space */
.ekyc-card>form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Card header inside card should not shrink */
.ekyc-card>.card-header {
    flex-shrink: 0;
}

/* Profile page: wider card layout */
.ekyc-card-wide {
    max-width: 1085px;
    padding: 32px !important;
}

.ekyc-card-unbound {
    max-width: none !important;
}

/* Profile page: wider card layout */
.ekyc-card-wide {
    max-width: 1085px;
    padding: 32px !important;
}

@media (max-width: 1100px) {
    .ekyc-card-wide {
        max-width: 95vw;
    }
}

@media (max-width: 768px) {
    .ekyc-card-wide {
        max-width: 92vw;
    }

    .profile-footer-btn {
        min-width: 110px;
    }
}

@media (max-width: 1100px) {
    .ekyc-card-wide {
        max-width: 95vw;
    }
}

@media (max-width: 768px) {
    .ekyc-card-wide {
        max-width: 92vw;
    }

    .profile-footer-btn {
        min-width: 110px;
    }
}

.tittle-head,
h5.tittle-head {
    font-size: 18px;
    color: #EEEEEE;
    line-height: normal;
    margin-bottom: 0;
}

.sub-tittle {
    color: #AEAEAE;
    font-size: 16px;
    line-height: 1.3
}

.label-tittle,
p {
    color: #EEEEEE;
    margin-bottom: 6px !important;
    line-height: 21px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

/* Fieldset layout — inline-flex column with gap */
.form-inputs {
    display: inline-flex;
    flex-direction: column !important;
    gap: 5px;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* label-tittle without margin — for use inside fieldsets / legends */
.label-tittle-nm {
    color: #EEEEEE;
    margin-bottom: 0 !important;
    line-height: 21px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    align-items: center;
}

/* Input Group Wrapper */
.ekyc-group {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Icon Box */
.ekyc-icon {
    background: #fff !important;
    border: none !important;
    border-radius: 8px 0 0 8px !important;
    padding: 14px 20px !important;
    color: #666 !important;
}

/* Input Field */
.ekyc-input-field {
    height: 44px !important;
    width: 100% !important;
    flex: 1 !important;
    padding: 0 16px 0 0px !important;
    line-height: 44px !important;
    border: none !important;
    background: #fff !important;
    color: #5C5D60 !important;
    box-shadow: none !important;
    font-size: 14px;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Date input specific — ensures browser icons align right */
input[type="date"].ekyc-input-field {
    padding-right: 10px !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* Form Controls Override */
.form-control {
    height: 44px !important;
    line-height: 44px !important;
}

/* Profile page: plain inputs (no left icon), keep 20px left padding */
.profile-input-field {
    padding-left: 20px !important;
}

/* Remove Focus Styles */
.ekyc-input-field:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove Bootstrap focus on input-group */
/*.ekyc-group:focus-within {
    box-shadow: none !important;
    border: none !important;
}*/

.ekyc-group:focus-within {
    box-shadow: 0 0 0 1px rgba(240, 209, 92, 0.5) !important;
}

/* Wrapper Border (Gradient Trick) */
.ekyc-border {
    border-radius: 8px !important;
    border: 1.5px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), var(--gold-gradient) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    transition: box-shadow 0.3s ease !important;
}

/* Input Group Fix */
.ekyc-group .input-group {
    overflow: hidden !important;
}

/* Left Icon */
.ekyc-icon {
    height: 44px !important;
    background: #fff !important;
    border: none !important;
    padding: 0 10px 0 20px !important;
    color: #666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Right Icon */
.ekyc-icon-right {
    height: 44px !important;
    background: #fff !important;
    border: none !important;
    padding: 0 20px !important;
    cursor: pointer !important;
    color: #666 !important;
    border-radius: 0px 6px 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Remove Focus */
.ekyc-input-field:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Bootstrap Focus */
.ekyc-border:focus-within {
    border: 1.5px solid transparent !important;
    background-image: linear-gradient(#fff, #fff), var(--gold-gradient) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    /* Glow Effect */
    box-shadow: 0 0 0 2px rgba(240, 209, 92, 0.25), 0 0 8px rgba(240, 209, 92, 0.4) !important;
    /*transition: 0.3s ease !important;*/
}

#timer {
    display: inline-block !important;
    min-width: 30px !important;
    text-align: right !important;
}



.btn-gold {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border: none;
    color: #101828 !important;
    font-weight: 600;
    font-size: 15px;
}

.btn-gold {
    position: relative;
    overflow: hidden;
}

.btn-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-100%);
}

.btn-gold:hover::after {
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

.input-group-text {
    border-radius: 8px 0 0 8px;
}

.custom-radio {
    color: #F4F4F4;
    border-radius: 8px;
    background: #424242;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border: 1px solid #AEAEAE;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease, border-color 0.2s ease;
    font-size: 14px;
    font-weight: 300;
}

/* ACTIVE */
.btn-check:checked+.custom-radio {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    color: #101828;
    border: none;
    font-weight: 500;
    transform: translateY(-2px) scale(1.02);
    box-shadow: -1px 1px 16px rgba(240, 209, 92, 0.25), 0 0 0 1px rgba(240, 209, 92, 0.25);
}

/* HOVER */
.custom-radio:hover {
    border-color: #f0d15c;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(240, 209, 92, 0.18);
}

.btn-check:focus-visible+.custom-radio {
    outline: 2px solid rgba(240, 209, 92, 0.8);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════ */
/* Gold Toggle Switch                     */
/* ═══════════════════════════════════════ */
.gold-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.gold-switch input[type="checkbox"] {
    display: none;
}

.gold-switch .switch-track {
    position: relative;
    width: 48px;
    height: 26px;
    background: #424242;
    border-radius: 50px;
    border: 1px solid #555;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gold-switch .switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Checked state — gold gradient + slide knob right */
.gold-switch input:checked+.switch-track {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(240, 209, 92, 0.3);
    border: none !important;
}

.gold-switch input:checked+.switch-track::after {
    transform: translateX(22px);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Label text */
.gold-switch .switch-label {
    font-size: 13px;
    font-weight: 500;
    color: #999;
    transition: color 0.3s ease;
    min-width: 24px;
}

.gold-switch input:checked~.switch-label-yes {
    color: #f0d15c;
}

.gold-switch input:not(:checked)~.switch-label-no {
    color: #f4f4f4;
}

/* Hover on track */
.gold-switch:hover .switch-track {
    border-color: #f0d15c;
}

/* ═══════════════════════════════════════ */
/* Unique Select for Standing Instructions  */
/* ═══════════════════════════════════════ */
.standing-select-container {
    display: inline-flex;
    align-items: center;
}

.standing-select-unique {
    background-color: #424242;
    color: #f0d15c;
    border: 1.5px solid transparent;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='%23f0d15c'/%3E%3C/svg%3E"), linear-gradient(#424242, #424242), var(--gold-gradient);
    background-origin: border-box, padding-box, border-box;
    background-clip: border-box, padding-box, border-box;
    background-repeat: no-repeat;
    background-position: right 10px center, center, center;
    background-size: 10px 6px, 100% 100%, 100% 100%;
    border-radius: 8px;
    padding: 0 20px 0 10px;
    font-size: 13px;
    font-weight: 500;
    height: 32px;
    width: 100px;
    /* Reference switch width + padding for text */
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.3s ease;
}

.standing-select-unique:focus {
    box-shadow: 0 0 12px rgba(240, 209, 92, 0.4);
    border-color: transparent;
}

.standing-select-unique option {
    background-color: #333;
    color: #fff;
}

/* ═══════════════════════════════════════ */
/* Manual Flow Warning Modal              */
/* ═══════════════════════════════════════ */
.manual-flow-warning-box {
    background: #2b2b2b;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #444;
}

.manual-flow-icon-wrap {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    background: rgba(240, 209, 92, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #f0d15c;
}

.manual-flow-info-card {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 14px 16px;
    border-left: 3px solid #f0d15c;
}

/* Profile page footer buttons */
.profile-footer-btn {
    min-width: 140px;
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.footer-button-group {
    display: flex;
    width: 100%;
}

@media (max-width: 576px) {
    .profile-footer-btn {
        min-width: unset;
        flex: 1;
        padding: 14px 16px;
        font-size: 14px;
    }

    .footer-button-group {
        gap: 12px !important;
    }
}

.btn-outline-light {
    border-radius: 8px;
}

/* Active button */
.btn.active {
    background: var(--gold-gradient);
    color: black;
    border: none;
}

/*Card Footer*/
.account-sign {
    color: #eeee;
    line-height: 21px;
}

.terms-text {
    color: #AEAEAE !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

.terms-text>a,
#googleBtnText {
    font-size: 13px !important;
    line-height: 18px !important;
}

/*alert*/
/* Toast Container */
.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Toast */
.ultra-toast {
    min-width: 260px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #fff;
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 209, 92, 0.4);
    /* SOFT SHADOW */
    box-shadow: 0 0 8px rgba(240, 209, 92, 0.5), 0 0 16px rgba(240, 209, 92, 0.3), 0 0 24px rgba(240, 209, 92, 0.15);
    animation: slideIn 0.3s ease;
}

/* Layout */
.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast-icon {
    font-size: 18px;
    color: #f0d15c;
}

.toast-message {
    flex: 1;
    font-size: 14px;
}

/* Close */
.toast-close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
}

.toast-close:hover {
    color: #fff;
}

/* Progress */
.toast-progress {
    height: 3px;
    background: linear-gradient(90deg, #f0d15c, #d88105);
    margin-top: 6px;
    animation: progress 3s linear forwards;
}

/* Hide animation */
.ultra-toast.hide {
    opacity: 0;
    transform: translateX(80px);
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(60px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes progress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Success Screen */
.success-screen {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.success-box {
    background: #1e1e1e;
    padding: 30px;
    border-radius: 12px;
    color: #fff;
}

.success-icon {
    font-size: 50px;
    color: #f0d15c;
}

/****************************************************************/
/*******************Verifiy Details******************************/
/****************************************************************/
/* Background */
/* Inner Box */
.verify-box {
    background: #f2f2f2;
    /* light inner card */
    border-radius: 8px;
    padding: 16px 20px;
    border: 1px solid transparent;
    /* GOLD BORDER MAGIC */
    background-image: linear-gradient(#f2f2f2, #f2f2f2), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.verify-box:hover {
    box-shadow: 0 0 12px rgba(240, 209, 92, 0.4), 0 0 24px rgba(240, 209, 92, 0.2);
    transform: translateY(-2px);
    transition: 0.3s ease;
}

/* Items */
.verify-item {
    display: flex;
    align-items: flex-start;
    /* Better for multi-line values like address */
    gap: 12px;
    font-size: 14px;
    margin-bottom: 16px;
    width: 100%;
}

.verify-item i {
    color: #8e8e93;
    /* Subtle gray */
    width: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    text-align: center;
}

.verify-item span {
    color: #6c757d;
    width: 85px;
    /* Fixed width for alignment */
    flex-shrink: 0;
    font-weight: 400;
}

.verify-item strong {
    color: #000;
    font-weight: 600;
    flex: 1;
    word-break: break-word;
    /* Crucial for long emails */
    line-height: 1.4;
    text-align: left;
}

/* Buttons */

.btn-silver {
    border-radius: 8px;
    background: var(--silver, linear-gradient(180deg, #848181 0%, #7C7C7C 56%, #5B5B5B 100%));
    display: flex;
    height: 52px;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    color: #EEE;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    position: relative;
    overflow: hidden;
    /* Glass effect */
    background: rgba(180, 180, 180, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Metallic gradient layer */
    background-image: var(--silver-btn);
    border-bottom: 0 !important;
}

/* Compact version for 
    igation buttons */
.btn-compact {
    max-width: 110px !important;
    width: 100% !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: normal !important;
}

.btn-silver::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: translateX(-100%);
}

.btn-silver:hover::after {
    transform: translateX(100%);
    transition: transform 0.7s ease;
}

/* Edit Link */
.edit-link {
    color: #f0d15c;
    text-decoration: none;
    font-size: 14px;
}

.edit-link:hover {
    text-decoration: underline;
}



.bank-logo-fallback {
    background: #f0d15c !important;
    color: #1e1e1e !important;
    font-weight: bold !important;
    padding: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .ekyc-bg {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
        align-items: center !important;
    }

    .dependent-radio {
        min-height: 60px;
    }

    .ekyc-card {
        /*
        margin: 10px;*/
        padding: 15px;
        max-width: 100% !important;
        border-radius: 12px !important;
        min-height: 380px;
    }

    .ekyc-card-wide {
        max-width: 100% !important;
    }

    h4 {
        font-size: 18px;
    }
}

/* Mobile = Column */
@media (max-width: 768px) {
    .header-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        margin-top: 10px;
    }

    .header-actions .btn,
    .header-actions .dropdown {
        width: 100%;
    }

    .header-actions .btn {
        text-align: center;
    }
}

/* Global footer — relative, flows in the page (no overlap on mobile) */
.ekyc-fixed-footer {
    flex-shrink: 0;
    /* never shrinks in the flex column */
    width: 100%;
    background: rgba(20, 20, 20, 0.95);
    border-top: 1px solid rgba(240, 209, 92, 0.35);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35);
}

.ekyc-fixed-footer p {
    margin: 0 !important;
    color: #d9d9d9;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    padding: 10px 16px;
}

/* Mobile footer responsive */
@media (max-width: 576px) {
    .ekyc-fixed-footer p {
        font-size: 11px;
        padding: 10px 8px;
        line-height: 1.5;
    }
}

@media (max-width: 360px) {
    .ekyc-fixed-footer p {
        font-size: 10px;
        padding: 8px 6px;
    }
}

/* ============================================================
   Profile Dropdown Panel
   ============================================================ */

/* Small avatar in the trigger button */
.profile-dd-avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    border: 1.5px solid var(--gold);
}

/* The panel itself */
.header-dd-panel {
    background: #1e1e1e;
    border: 1px solid rgba(240, 209, 92, 0.25);
    border-radius: 14px;
    min-width: 280px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(240, 209, 92, 0.12);
    animation: headerDdSlideIn 0.22s ease;
}

@keyframes headerDdSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header Dropdown sizing variants */
.header-dd-panel-sm {
    min-width: 240px !important;
}

.header-dd-panel-md {
    min-width: 290px !important;
}

.header-dd-icon-gold {
    background: rgba(240, 209, 92, 0.12) !important;
    border: 1px solid rgba(240, 209, 92, 0.3) !important;
    color: #f0d15c !important;
}

.cursor-default {
    cursor: default !important;
}

.otp-info-box {
    background: rgba(240, 209, 92, 0.1) !important;
    border: 1px solid rgba(240, 209, 92, 0.3) !important;
    border-radius: 8px;
}

.text-truncate-sm {
    max-width: 80px;
}

.ekyc-upload-slot {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Preview Modal Overlay */
.preview-modal-overlay {
    z-index: 2000 !important;
}

#previewImg {
    max-height: 80vh;
    margin: 0 auto;
}

#previewPdf {
    width: 100%;
    height: 70vh;
    border-radius: 12px;
}

.scale-down {
    font-size: 12px !important;
}

.header-dd-icon-gold {
    background: rgba(240, 209, 92, 0.12) !important;
    border-color: rgba(240, 209, 92, 0.3) !important;
    color: #f0d15c !important;
}

/* Header row — avatar + name/date */
.header-dd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: #252525;
}

.header-dd-avatar-wrap {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    background-image: linear-gradient(#252525, #252525), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-dd-avatar-fallback {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: linear-gradient(180deg, #B1B1B1 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-dd-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header-dd-name {
    font-size: 15px;
    font-weight: 700;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-dd-date {
    font-size: 12px;
    color: #AEAEAE;
    display: flex;
    align-items: center;
}

/* Dividers */
.header-dd-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0;
}

/* Item rows */
.header-dd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    transition: background 0.2s ease;
    cursor: default;
}

.header-dd-item:hover {
    background: rgba(240, 209, 92, 0.06);
}

/* Icon wrap */
.header-dd-icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #AEAEAE;
}

/* Item text */
.header-dd-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header-dd-item-label {
    font-size: 13px;
    font-weight: 600;
    color: #EEEEEE;
    line-height: 1.3;
}

.header-dd-item-value {
    font-size: 12px;
    color: #AEAEAE;
    line-height: 1.5;
    word-break: break-word;
}

/* Danger row (Start Over) */
.header-dd-danger {
    cursor: pointer;
}

.header-dd-danger:hover {
    background: rgba(220, 53, 69, 0.1);
}

.header-dd-danger-icon {
    border-color: rgba(220, 53, 69, 0.35);
    background: rgba(220, 53, 69, 0.1);
    color: #E85555;
}

.header-dd-danger-label {
    color: #E85555 !important;
}

.header-dd-danger-text {
    color: #AEAEAE;
}

/* Dropdown Modifiers (to replace inline CSS) */
.header-dd-panel-sm {
    min-width: 240px;
}

.header-dd-panel-md {
    min-width: 290px;
}

.header-dd-header-sm {
    padding: 12px 14px 10px;
}

.header-dd-user-info-sm {
    gap: 0;
}

.header-dd-name-sm {
    font-size: 13px !important;
}

.header-dd-date-sm {
    font-size: 11px !important;
}

.header-dd-icon-wrap-sm {
    width: 34px !important;
    height: 34px !important;
}

.header-dd-icon-gold {
    background: rgba(240, 209, 92, 0.12) !important;
    border-color: rgba(240, 209, 92, 0.3) !important;
    color: #f0d15c !important;
}

.header-dd-icon-gold-light {
    background: rgba(240, 209, 92, 0.1) !important;
    border-color: rgba(240, 209, 92, 0.25) !important;
    color: #f0d15c !important;
}

.header-dd-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(240, 209, 92, 0.12);
    color: #f0d15c;
    border: 1px solid rgba(240, 209, 92, 0.3);
    white-space: nowrap;
}

/* Utilities requested by user */

.fw-semi {
    font-weight: 600 !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}



/* ── Step progress bar ── */
.step-progress-wrap {
    margin-bottom: 4px;
}

.step-label {
    font-size: 11px;
    color: #AEAEAE;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.step-bar-track {
    height: 4px;
    background: #3a3a3a;
    border-radius: 4px;
    overflow: hidden;
}

.step-bar-fill {
    height: 100%;
    background: var(--gold-gradient);
    border-radius: 4px;
    transition: width .5s ease;
}

/* ── Pathway cards ── */
.pathway-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1.5px solid transparent;
    background-image: linear-gradient(#242424, #242424), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    padding: 18px;
    cursor: pointer;
    transition: box-shadow .25s, transform .2s;
}

.pathway-card:hover {
    box-shadow: 0 0 18px rgba(240, 209, 92, .22);
    transform: translateY(-2px);
}

.pathway-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(240, 209, 92, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.divider-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 12px;
    letter-spacing: 1px;
}

.divider-or::before,
.divider-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #3a3a3a;
}

/* ── Mobile number display ── */
.mobile-pill {
    background: rgba(240, 209, 92, .08);
    border: 1.5px solid rgba(240, 209, 92, .3);
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Account option card ── */
.account-option {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1.5px solid #3a3a3a;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.account-option:hover,
.account-option.selected {
    border-color: rgba(240, 209, 92, .55);
    box-shadow: 0 0 12px rgba(240, 209, 92, .15);
}

.account-option .form-check-input:checked {
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(236, 195, 77, 1) 15%, rgba(216, 129, 5, 1) 100%);
    border-color: #f0d15c;
}

/* ── Loading pulse ── */
.pulse-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(240, 209, 92, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.5s ease-in-out infinite;
    margin: 0 auto 20px;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(240, 209, 92, .4);
    }

    50% {
        box-shadow: 0 0 0 18px rgba(240, 209, 92, .0);
    }
}

/* ── Info / detail rows ── */
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #333;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    color: #AEAEAE;
    font-size: 12px;
    min-width: 130px;
    flex-shrink: 0;
    /* Protect label from shrinking */
}

.detail-value {
    color: #EEEEEE;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    flex: 1;
    /* Grow to fill space */
    word-break: break-word;
    /* Wrap long words */
    line-height: 1.4;
    margin-left: 10px;
    /* Gap between label and value */
}

/* ── Success check ── */
.success-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(25, 135, 84, .15);
    border: 3px solid rgba(25, 135, 84, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: pop .4s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Badge chips ── */
.trust-badge {
    font-size: 11px;
    color: #AEAEAE;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.trust-badge i {
    color: #f0d15c;
}

/* ── Document Upload Wrapper ── */
.ekyc-upload-wrapper {
    background: rgba(255, 255, 255, 0.04);
    border: 2px dotted #d88105;
    /* Solid gold dotted border */
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.ekyc-upload-wrapper:hover {
    border-color: #f0d15c;
    /* Brighter gold on hover */
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.file-preview-wrap {
    border: 1.5px solid rgba(216, 129, 5, 0.4);
    background: #111111 !important;
}

/* ── Verified banner ── */
.verified-banner {
    background: rgba(25, 135, 84, .1);
    border: 1px solid rgba(25, 135, 84, .3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #d1e7dd;
}

/* ── IFSC branch card ── */
.branch-card {
    background: rgba(255, 255, 255, .02);
    border-radius: 8px;
    border: 1px solid rgba(240, 209, 92, .2);
    padding: 12px 16px;
    animation: fadeSlide .3s ease;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Masked input display ── */
.masked-acc {
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 600;
    color: #f0d15c;
    font-family: monospace;
}

/* ── Custom Bank Dropdown ── */
.bank-dd-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    /* Matches input height */
    text-align: left;
    padding: 12px 16px;
    background-color: transparent;
    border: none;
    border-radius: 12px;
    color: #EEEEEE;
    font-size: 14px;
}

.bank-dd-btn:focus {
    outline: none;
}

.bank-dd-btn .bank-logo-sm {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
}

.bank-dd-btn .chevron {
    margin-left: auto;
    color: #666;
    transition: transform 0.2s;
}

.bank-dd-btn[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

.bank-dd-menu {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: #1e1e1e;
    border: 1px solid rgba(240, 209, 92, .2);
    border-radius: 8px;
    margin-top: 4px;
    padding: 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.bank-search-wrap {
    padding: 0 12px 8px;
    position: sticky;
    top: 0;
    background: #1e1e1e;
    z-index: 2;
    border-bottom: 1px solid #333;
    margin-bottom: 8px;
}

.bank-search-input {
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 12px 8px 32px;
    color: #eee;
    font-size: 13px;
}

.bank-search-input:focus {
    outline: none;
    border-color: rgba(240, 209, 92, .5);
}

.bank-search-icon {
    position: absolute;
    left: 22px;
    top: 10px;
    color: #666;
    font-size: 13px;
}

.bank-dd-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    color: #eee;
    font-size: 14px;
}

.bank-dd-item:hover,
.bank-dd-item.bg-hover {
    background: rgba(240, 209, 92, .1);
}

.bank-dd-item .bank-logo-sm {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 12px;
    background: #fff;
    border-radius: 4px;
    padding: 3px;
}

.bank-dd-item .check {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.bank-dd-item.selected .check {
    opacity: 1;
}

.bank-list-header {
    padding: 8px 16px 4px;
    font-size: 11px;
    color: #AEAEAE;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    background: #1e1e1e;
}

.edit-bank-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .05);
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    color: #f0d15c;
    font-size: 13px;
    transition: background 0.2s;
    z-index: 5;
}

.edit-bank-btn:hover {
    background: rgba(240, 209, 92, .15);
    color: #fff;
}

/* Custom scrollbar for dropdown */
.bank-dd-menu::-webkit-scrollbar {
    width: 6px;
}

.bank-dd-menu::-webkit-scrollbar-track {
    background: transparent;
}

.bank-dd-menu::-webkit-scrollbar-thumb {
    background: rgba(240, 209, 92, .3);
    border-radius: 4px;
}

.bank-dd-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(240, 209, 92, .5);
}

/* ============================================================
   Bank Details Page — Utility classes (replacing inline CSS)
   ============================================================ */

/* ── Badge variants ── */
.badge-verified {
    background: rgba(25, 135, 84, .2);
    color: #6fcf97;
    font-size: 11px;
    border: 1px solid rgba(25, 135, 84, .3);
}

.badge-linked {
    background: rgba(25, 135, 84, .2);
    color: #6fcf97;
    border: 1px solid rgba(25, 135, 84, .3);
}

.badge-gold-sm {
    background: rgba(240, 209, 92, .12);
    color: #f0d15c;
    font-size: 10px;
}

/* ── Text helpers ── */
.text-muted-sm {
    font-size: 12px;
    color: #AEAEAE;
}

.text-muted-xs {
    font-size: 11px;
    color: #AEAEAE;
}

.text-muted-13 {
    font-size: 13px;
    color: #AEAEAE;
}

.text-muted-14 {
    font-size: 14px;
    color: #AEAEAE;
}

.text-bank-name {
    font-size: 14px;
}

.text-icon-muted {
    color: #666;
}

.text-validated {
    font-size: 13px;
    color: #d1e7dd;
}

.text-error-sm {
    color: #f87171;
    font-size: 12px;
}

/* ── Icon sizes ── */
.icon-lg {
    font-size: 28px;
}

.icon-xl {
    font-size: 36px;
}

.icon-xxl {
    font-size: 44px;
}

/* ── Spinner size ── */
.spinner-penny {
    width: 2.5rem;
    height: 2.5rem;
}

/* ── Radio scale ── */
.radio-lg {
    transform: scale(1.3);
}

/* ── Border helpers ── */
.border-separator {
    border-bottom: 1px solid #333;
}

/* ── Card variant backgrounds ── */
.branch-card-subtle {
    background: rgba(255, 255, 255, .03);
}

/* ── Info notice (gold tinted) ── */
.info-notice-gold {
    background: rgba(240, 209, 92, .07);
    border: 1px solid rgba(240, 209, 92, .2);
    font-size: 12px;
    color: #AEAEAE;
}

/* ── Bank dropdown overflow fix ── */
.ekyc-dropdown-visible {
    overflow: visible !important;
}

/* ── Bank icon placeholder color ── */
.bank-dd-btn .selected-value-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

/* White theme overrides for premium look */
.bank-dd-btn.bg-white {
    color: #101828 !important;
}

.bank-dd-btn.bg-white .icon-placeholder {
    color: #667085 !important;
}

.bank-dd-btn.bg-white .chevron {
    color: #667085 !important;
}

.ekyc-input-field::placeholder {
    color: #667085 !important;
    opacity: 0.7;
}

.bank-dd-menu {
    border: 1px solid rgba(216, 129, 5, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    background: #1e1e1e;
    /* Match theme */
}

.bank-search-input {
    background: #2d2d2d !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

.bank-dd-item {
    color: #e0e0e0;
}

.bank-dd-item:hover {
    background: rgba(216, 129, 5, 0.1);
    color: #fff;
}

.icon-placeholder {
    color: #666;
    width: 24px;
    text-align: center;
}

/* ── Selected bank logo container ── */
.bank-logo-inline {
    display: contents;
}

/* ── IFSC verify button ── */
.btn-verify-ifsc {
    border-radius: 0 8px 8px 0 !important;
    font-size: 12px;
    font-weight: 700;
}

/* ── Disabled state for continue button ── */
.btn-gold[disabled],
.btn-gold.is-disabled {
    opacity: .6;
}

/* ── Masked account display in summary ── */
.masked-acc-summary {
    font-size: 14px;
    letter-spacing: 2px;
}

/* ── Back link button styling ── */
.btn-back-link {
    font-size: 13px;
    color: #AEAEAE;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}

.btn-back-link:hover,
.btn-back-link:focus {
    color: #f0d15c;
    text-decoration: underline;
}

/* ── Focus visible outline for accessibility ── */
.pathway-card:focus-visible,
.account-option:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible,
.btn-back-link:focus-visible {
    outline: 2px solid #f0d15c;
    outline-offset: 2px;
}

/* Premium Modal Typography */
.ekyc-modal-text {
    font-size: 14px;
    line-height: 1.6;
}

.ekyc-modal-list {
    font-size: 14px;
    line-height: 1.6;
    padding-left: 20px;
}

/* ═══════════════════════════════════════ */
/* Premium Creative Tooltip Design         */
/* ═══════════════════════════════════════ */
.tooltip {
    opacity: 1 !important;
    transition: opacity 0.2s ease-in-out !important;
}

.tooltip-inner {
    max-width: 350px !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    text-align: left !important;
    background: rgba(30, 30, 30, 0.98) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(240, 209, 92, 0.6) !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(240, 209, 92, 0.15) !important;
    white-space: pre-line !important;
}

/* Gold Arrow Styling */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: rgba(240, 209, 92, 0.9) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: rgba(240, 209, 92, 0.9) !important;
}

/* Creative Entrance Animation */
.tooltip.show {
    animation: premiumTooltipPop 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes premiumTooltipPop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ═══════════════════════════════════════ */
/* Tooltip Icon Button Hover Fixes         */
/* ═══════════════════════════════════════ */
/* Target the info icon buttons inside legends and card headers */
.btn-link.p-0.border-0 {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

.btn-link.p-0.border-0:hover,
.btn-link.p-0.border-0:focus,
.btn-link.p-0.border-0:active {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
}

.btn-link.p-0.border-0 i.fa-circle-info {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease-in-out;
    display: inline-block;
    /* ensures transform works perfectly */
}

.btn-link.p-0.border-0:hover i.fa-circle-info {
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(240, 209, 92, 0.6));
}

.btn-link.p-0.border-0:focus-visible i.fa-circle-info {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(240, 209, 92, 0.9));
}

.btn-link.p-0.border-0:active i.fa-circle-info {
    transform: scale(0.95);
}







/* ══════════════════════════════════════════════════════════════
           Selfie Verification — Page-specific styles
           ══════════════════════════════════════════════════════════════ */

/* ── Instruction grid cards ── */
.selfie-hint-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 576px) {
    .selfie-hint-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.selfie-hint-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.selfie-hint-card:hover {
    transform: translateY(-2px);
}

/* DO cards — green tinted */
.selfie-hint-do {
    background: rgba(25, 135, 84, 0.08);
    border-color: rgba(25, 135, 84, 0.35);
}

.selfie-hint-do:hover {
    box-shadow: 0 0 14px rgba(25, 135, 84, 0.2);
}

.selfie-hint-do .selfie-hint-icon {
    background: rgba(25, 135, 84, 0.15);
    border: 1.5px solid rgba(25, 135, 84, 0.4);
    color: #6fcf97;
}

.selfie-hint-do .selfie-hint-badge {
    background: rgba(25, 135, 84, 0.2);
    color: #6fcf97;
    border: 1px solid rgba(25, 135, 84, 0.3);
}

/* DON'T cards — red tinted */
.selfie-hint-dont {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.35);
}

.selfie-hint-dont:hover {
    box-shadow: 0 0 14px rgba(220, 53, 69, 0.2);
}

.selfie-hint-dont .selfie-hint-icon {
    background: rgba(220, 53, 69, 0.15);
    border: 1.5px solid rgba(220, 53, 69, 0.4);
    color: #f87171;
}

.selfie-hint-dont .selfie-hint-badge {
    background: rgba(220, 53, 69, 0.2);
    color: #f87171;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Icon circle inside hint card */
.selfie-hint-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    position: relative;
}

.selfie-hint-icon .hint-status {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 14px;
}

.selfie-hint-label {
    font-size: 11px;
    font-weight: 600;
    color: #EEEEEE;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selfie-hint-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Divider label ── */
.selfie-divider-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
    margin: 16px 0 8px;
}

/* ── Camera viewport ── */
.selfie-camera-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 400px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    border: 2px solid rgba(240, 209, 92, 0.3);
}

.selfie-camera-wrap video,
.selfie-camera-wrap canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Face oval overlay */
.selfie-face-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.selfie-face-oval {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    height: 72%;
    border-radius: 50%;
    border: 3px dashed rgba(240, 209, 92, 0.6);
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.selfie-face-oval.detected {
    border-color: #6fcf97;
    border-style: solid;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.45), 0 0 20px rgba(25, 135, 84, 0.3);
}

.selfie-face-oval.warning {
    border-color: #f87171;
    border-style: solid;
    animation: pulseWarn 1s ease-in-out infinite;
}

@keyframes pulseWarn {

    0%,
    100% {
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(220, 53, 69, 0.3);
    }

    50% {
        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.55), 0 0 18px 4px rgba(220, 53, 69, 0.4);
    }
}

/* Detection hint inside camera */
.selfie-detect-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #f0d15c;
    white-space: nowrap;
    border: 1px solid rgba(240, 209, 92, 0.25);
}

.selfie-detect-hint.success {
    color: #6fcf97;
    border-color: rgba(25, 135, 84, 0.3);
}

.selfie-detect-hint.error {
    color: #f87171;
    border-color: rgba(220, 53, 69, 0.3);
}

/* ── Live check list alongside camera ── */
.selfie-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    font-size: 13px;
    color: #AEAEAE;
    transition: border-color 0.3s, color 0.3s;
}

.selfie-check-item.passed {
    border-color: rgba(25, 135, 84, 0.4);
    color: #6fcf97;
}

.selfie-check-item.failed {
    border-color: rgba(220, 53, 69, 0.4);
    color: #f87171;
}

.selfie-check-item i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

/* ── Capture button ── */
.selfie-capture-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid rgba(240, 209, 92, 0.6);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto;
}

.selfie-capture-btn:hover {
    border-color: #f0d15c;
    box-shadow: 0 0 20px rgba(240, 209, 92, 0.3);
}

.selfie-capture-btn:active {
    transform: scale(0.92);
}

.selfie-capture-inner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--gold-gradient);
    transition: transform 0.15s ease;
}

.selfie-capture-btn:hover .selfie-capture-inner {
    transform: scale(1.05);
}

.selfie-capture-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.selfie-capture-btn:disabled:hover {
    border-color: rgba(240, 209, 92, 0.6);
    box-shadow: none;
}

/* ── Preview image ── */
.selfie-preview-wrap {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(240, 209, 92, 0.3);
}

.selfie-preview-wrap img {
    width: 100%;
    display: block;
}

/* ── Requirement pills at bottom of instructions ── */
.selfie-req-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #444;
    font-size: 12px;
    color: #AEAEAE;
}

.selfie-req-pill i {
    font-size: 13px;
}

/* ── Liveness verified banner ── */
.liveness-banner {
    background: rgba(25, 135, 84, 0.1);
    border: 1px solid rgba(25, 135, 84, 0.3);
    border-radius: 10px;
    padding: 14px 18px;
    color: #d1e7dd;
    font-size: 13px;
}
    .liveness-banner > p {
        font-size: 12px;
        font-weight: 600;
        text-align:center;
    }

/* ── Timer ring for auto-capture ── */
.selfie-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    font-size: 56px;
    font-weight: 800;
    color: #f0d15c;
    text-shadow: 0 0 30px rgba(240, 209, 92, 0.5);
    animation: timerPop 0.4s cubic-bezier(.34, 1.56, .64, 1);
    display: none;
}

@keyframes timerPop {
    from {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ── Action buttons row below camera ── */
.selfie-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
}

.selfie-action-secondary {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid #555;
    background: rgba(255, 255, 255, 0.05);
    color: #AEAEAE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.selfie-action-secondary:hover {
    border-color: #f0d15c;
    color: #f0d15c;
    box-shadow: 0 0 12px rgba(240, 209, 92, 0.2);
}

/* ── Segment Selection Modal Table ── */
.stack-radio-btn {
    min-width: 90px;
    padding: 6px 16px;
}

.modal-detail-table {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #444;
}

.modal-detail-table tr td:first-child {
    background-color: #2a2a2a !important;
    color: #d1d1d1 !important;
    font-weight: 500;
    width: 60%;
    border-bottom: 1px solid #444;
}

.modal-detail-table tr td:last-child {
    background-color: #1e1e1e !important;
    color: #fff !important;
    font-weight: 600;
    text-align: right;
    border-bottom: 1px solid #444;
}

.modal-detail-table-segment tr td:last-child {
    background-color: #1e1e1e !important;
    color: #fff !important;
    font-weight: 400;
    text-align: left;
    border-bottom: 1px solid #444;
}

.modal-detail-table tr:last-child td {
    border-bottom: none;
}

/* Gold underline text */
.gold-underline {
    color: #f0d15c;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.gold-underline:hover {
    color: #d88105;
}

/* Added for Email OTP Page */
.font-13 {
    font-size: 13px !important;
}

.opacity-3 {
    opacity: 0.3 !important;
}

.social-auth-btn {
    background: #424242;
    border: 1px solid #555 !important;
    border-radius: 10px;
    color: #f4f4f4;
    transition: all 0.2s ease;
}

.social-auth-btn:hover {
    border-color: #f0d15c !important;
    background: #f4f4f4 !important;
}

    .social-auth-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
        background: #ffffff !important;
        border-color: #ffffff !important;
    }

.modal-bg-custom {
    background: #242424 !important;
}

.segment-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.segment-subtext {
    font-size: 10px;
    opacity: 0.75;
}

/* Selfie Verification Enhancements */
.mobile-option-container {
    padding-top: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.tracking-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(240, 209, 92, 0.3);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}

.tracking-header {
    background: rgba(240, 209, 92, 0.1);
    padding: 8px 15px;
    border-bottom: 1px solid rgba(240, 209, 92, 0.2);
}

.tracking-label {
    font-size: 11px;
    font-weight: 700;
    color: #f0d15c;
    letter-spacing: 0.5px;
}

.tracking-body {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
}

.tracking-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.btn-copy-tracking {
    background: none;
    border: none;
    color: #f0d15c;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 0;
}

.btn-copy-tracking:hover {
    transform: scale(1.2);
    color: #fff;
}

.tracking-footer {
    padding: 10px 15px;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.text-muted-14 {
    font-size: 14px;
    color: #AEAEAE;
}

.badge-linked {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}


.trade-switch {
    display: flex;
    flex-direction: row !important;
    align-items: start;
}

.trade-switch>legend {
    margin: 4px 0 !important;
}

/* Standing Instructions Modal Utilities */
.opa-80 {
    opacity: 0.8 !important;
}

.x-small {
    font-size: 11px !important;
}

.bg-dark-card {
    background-color: #1e1e1e !important;
}

.blue-radio {
    transform: scale(1.1);
    cursor: pointer;
}

#standingInstructionsModal .form-check-input:checked {
    background-color: transparent !important;
    /* prevent bootstrap override */
    border-color: rgba(216, 129, 5, 1) !important;
    background-image: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(236, 195, 77, 1) 15%, rgba(216, 129, 5, 1) 100%) !important;
}

#standingInstructionsModal .form-check-label {
    cursor: pointer;
    user-select: none;
    color: #f4f4f4
}

/* DDPI Modal Purpose Cards */
.ddpi-purpose-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(240, 209, 92, 0.1);
    transition: all 0.3s ease;
}

.ddpi-purpose-card:hover {
    background: rgba(240, 209, 92, 0.05);
    border-color: rgba(240, 209, 92, 0.3);
    transform: translateY(-2px);
}

.purpose-icon-wrap {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 209, 92, 0.1);
    border-radius: 8px;
    font-size: 18px;
}

.bg-black-subtle {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.standing-item:last-child {
    border-bottom: none !important;
}

.modal-body {
    -webkit-overflow-scrolling: touch;
}

/* Signature Verification Styles */
.signature-canvas-container {
    border: 1px dashed #666;
    border-radius: 12px;
    height: 340px;
    position: relative;
    background: #fff;
    overflow: hidden;
    cursor: crosshair;
}

.signature-center-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #aeaeae;
    font-weight: 500;
    pointer-events: none;
    letter-spacing: 1px;
    opacity: 0.5;
}

.signature-toolbar {
    background: #2b2b2b;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.signature-tool-btn {
    background: none;
    border: none;
    color: #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    transition: color 0.2s;
    font-family: inherit;
    font-weight: 500;
}

.signature-tool-btn:hover {
    color: #f0d15c;
}

.signature-tool-btn i {
    font-size: 16px;
}

.range-slider {
    -webkit-appearance: none;
    width: 60px;
    height: 4px;
    background: #555;
    border-radius: 2px;
    outline: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f0d15c;
    cursor: pointer;
}

.nav-pills.signature-tabs {
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.nav-pills.signature-tabs .nav-link {
    color: #aeaeae !important;
    border-radius: 0;
    padding: 14px 16px;
    font-weight: 500;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nav-pills.signature-tabs .nav-link.active {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%) !important;
    color: #101828 !important;
}

/* Review Guidelines */
.guideline-box {
    background: transparent;
    padding: 0;
}

.guideline-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.guideline-icon {
    width: 36px;
    height: 36px;
    background: #424242;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0d15c;
    flex-shrink: 0;
}

.guideline-content p {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px !important;
    color: #eeeeee;
}

.guideline-content span {
    font-size: 12px;
    color: #aeaeae;
    line-height: normal;
    display: block;
}

.guideline-pro-tip {
    background: #1e252b;
    /* bluish dark */
    border: none;
    border-radius: 12px;
    padding: 16px;
}

.upload-area {
    border: 1px dashed #666;
    border-radius: 12px;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: #f0d15c;
}

.upload-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #424242;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #f0d15c;
    font-size: 24px;
}

.preview-bar {
    background: #1e1e1e;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.preview-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-info-box {
    width: 40px;
    height: 40px;
    background: #2b2b2b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.preview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ink-style-btn {
    background: transparent;
    border: 1px solid #666;
    color: #aaa;
    border-radius: 50px;
    padding: 6px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.ink-style-btn.active,
.ink-style-btn:hover {
    border-color: #f0d15c;
    color: #f0d15c;
}


/* ── Allocation Badge ── */
.nominee-alloc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    padding: 4px 12px;
}

.alloc-badge-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #d4af37;
    white-space: nowrap;
}

.alloc-badge-input {
    width: 52px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    padding: 0 2px;
    outline: none;
}

.alloc-badge-input:focus {
    border-bottom-color: #d4af37;
}

.alloc-badge-suffix {
    font-size: 0.8rem;
    font-weight: 700;
    color: #d4af37;
}

/* ── Address Toggle Switch — Creative Segmented Pill ── */
.addr-toggle-wrap {
    display: inline-flex;
    align-items: center;
}

.addr-toggle-input {
    display: none;
}

.addr-toggle-label {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    padding: 3px;
    cursor: pointer;
    position: relative;
    gap: 0;
    overflow: hidden;
}

.addr-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    bottom: 3px;
    background: linear-gradient(135deg, #d4af37, #b8960c);
    border-radius: 50px;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.addr-toggle-yes,
.addr-toggle-no {
    position: relative;
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 16px;
    border-radius: 50px;
    transition: color 0.25s;
    white-space: nowrap;
}

/* Checked = YES active */
.addr-toggle-input:checked+.addr-toggle-label .addr-toggle-yes {
    color: #1a1a1a;
}

.addr-toggle-input:checked+.addr-toggle-label .addr-toggle-no {
    color: rgba(255, 255, 255, 0.4);
}

.addr-toggle-input:checked+.addr-toggle-label .addr-toggle-knob {
    transform: translateX(0);
}

/* Unchecked = NO active: slide knob to right */
.addr-toggle-input:not(:checked)+.addr-toggle-label .addr-toggle-knob {
    transform: translateX(100%);
}

.addr-toggle-input:not(:checked)+.addr-toggle-label .addr-toggle-yes {
    color: rgba(255, 255, 255, 0.4);
}

.addr-toggle-input:not(:checked)+.addr-toggle-label .addr-toggle-no {
    color: #1a1a1a;
}

.addr-toggle-input:not(:checked)+.addr-toggle-label {
    border-color: rgba(255, 255, 255, 0.15);
}

.addr-toggle-input:not(:checked)+.addr-toggle-label .addr-toggle-knob {
    /*background: linear-gradient(135deg, #888, #555);*/
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════
           Nominee Video Confirmation — Scoped Styles
           ═══════════════════════════════════════════════════════════ */

/* ── Camera / Preview Viewport ── */
.nvc-viewport {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    background-image: linear-gradient(#000, #000), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nvc-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Live feed is mirrored; preview is not */
#nvcLive {
    transform: scaleX(-1);
}

#nvcPreview {
    transform: none;
}

/* ── Placeholder ── */
.nvc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #666;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.nvc-placeholder i {
    font-size: 52px;
    opacity: 0.35;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nvc-placeholder p {
    font-size: 13px;
    color: #777 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    /* prevents text hitting the edge */
    text-align: center;
    line-height: 1.5;
}

/* ── REC badge ── */
.nvc-rec-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

.nvc-rec-badge.show {
    opacity: 1;
}

.nvc-rec-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e53935;
    animation: recPulse 1s ease-in-out infinite;
}

@keyframes recPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .15
    }
}

/* ── Timer badge ── */
.nvc-timer-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #f0d15c;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    font-variant-numeric: tabular-nums;
}

.nvc-timer-badge.show {
    opacity: 1;
}

/* ── Confirmation statement ── */
.nvc-statement {
    background: rgba(240, 209, 92, .06);
    border: 1.5px solid rgba(240, 209, 92, .25);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: #eee;
    line-height: 1.7;
    text-align: center;
}

.nvc-name {
    font-weight: 700;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Instructions ── */
.nvc-instructions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nvc-instructions li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #bbb !important;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 !important;
}

.nvc-instructions li i {
    margin-top: 2px;
    font-size: 11px;
    flex-shrink: 0;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Primary gold outline button (Start Recording) ── */
.btn-nvc-outline {
    flex: 1;
    background: #252525;
    border: 1.5px solid transparent;
    background-image: linear-gradient(#252525, #252525), var(--gold-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #f0d15c !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    padding: 11px 16px;
    cursor: pointer;
    transition: box-shadow .25s, transform .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-nvc-outline:hover:not(:disabled) {
    box-shadow: 0 0 14px rgba(240, 209, 92, .3);
    transform: translateY(-1px);
}

.btn-nvc-outline:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

/* ── Solid gold button (Confirm / Proceed) ── */
.btn-nvc-gold {
    flex: 1;
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border: none;
    color: #101828 !important;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    padding: 11px 16px;
    cursor: pointer;
    transition: box-shadow .25s, transform .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.btn-nvc-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-100%);
}

.btn-nvc-gold:hover::after {
    transform: translateX(100%);
    transition: transform .6s ease;
}

.btn-nvc-gold:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(240, 209, 92, .4);
    transform: translateY(-1px);
}

.btn-nvc-gold:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ── Silver / retake button ── */
.btn-nvc-silver {
    flex: 1;
    background: linear-gradient(180deg, #848181 0%, #7C7C7C 56%, #5B5B5B 100%);
    border: none;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    padding: 11px 16px;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-nvc-silver:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    transform: translateY(-1px);
}

/* ── Button row ── */
.nvc-btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Mobile: stack buttons vertically */
@media (max-width: 575.98px) {
    .nvc-btn-row {
        flex-direction: column;
    }

    .nvc-btn-row .btn-nvc-outline,
    .nvc-btn-row .btn-nvc-gold,
    .nvc-btn-row .btn-nvc-silver {
        flex: none;
        width: 100%;
    }
}

/* ── Hint text ── */
.nvc-hint {
    font-size: 12px;
    color: #777;
    text-align: center;
    margin-top: 4px !important;
}

/* ── Inline Listen button (inside statement box) ── */
.btn-listen-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border: none;
    color: #101828 !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 50px;
    padding: 7px 18px;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s;
    margin-top: 10px;
}

.btn-listen-inline:hover {
    box-shadow: 0 4px 16px rgba(240, 209, 92, .45);
    transform: translateY(-1px);
}

/* Volume % text */
.nvc-vol-pct {
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    min-width: 34px;
    text-align: right;
}

/* ═══════════════════════════════════════════════════
           PREVIEW STEP extras
           ═══════════════════════════════════════════════════ */

/* Custom video controls bar */
.nvc-controls {
    background: rgba(18, 18, 18, .92);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Play / Pause big button */
.nvc-play-btn {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border: none;
    color: #101828;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s;
}

.nvc-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(240, 209, 92, .5);
}

/* Seek bar */
.nvc-seek {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 4px;
    background: #444;
    outline: none;
    cursor: pointer;
}

.nvc-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(240, 209, 92, .5);
}

/* Time label */
.nvc-time-label {
    font-size: 12px;
    font-weight: 600;
    color: #f0d15c;
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Volume control */
.nvc-vol-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nvc-vol-icon {
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    transition: color .15s;
}

.nvc-vol-icon:hover {
    color: #f0d15c;
}

.nvc-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 72px;
    height: 4px;
    border-radius: 4px;
    background: #444;
    outline: none;
    cursor: pointer;
}

.nvc-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #aaa;
    cursor: pointer;
}

/* Preview badge overlay */
.nvc-preview-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #f0d15c;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════
           SUCCESS STEP extras
           ═══════════════════════════════════════════════════ */
.nvc-success-wrap {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.nvc-success-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .12);
    border: 2px solid rgba(34, 197, 94, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #22c55e;
}

/* detail rows */
.nvc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 13px;
}

.nvc-detail-row:last-child {
    border-bottom: none;
}

.nvc-detail-label {
    color: #888;
}

.nvc-detail-val {
    color: #eee;
    font-weight: 500;
}

/* Step dots indicator */
.nvc-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.nvc-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #444;
    transition: background .3s, width .3s;
}

.nvc-step-dot.active {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    width: 22px;
    border-radius: 4px;
}

.nvc-step-line {
    width: 20px;
    height: 2px;
    background: #333;
    border-radius: 2px;
}


.animation-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem auto;
}

.custom-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(255, 193, 7, 0.15);
    /* Warning/gold color transparent */
    border-top-color: #ffc107;
    /* Warning/gold color solid */
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.custom-loader::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-bottom-color: rgba(255, 193, 7, 0.5);
    animation: spin 2s linear infinite reverse;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pulse-icon {
    font-size: 2.5rem;
    color: #ffc107;
    animation: pulse-glow 2s infinite alternate;
}

@keyframes pulse-glow {
    0% {
        transform: scale(0.95);
        text-shadow: 0 0 10px rgba(255, 193, 7, 0.2);
    }

    100% {
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
    }
}

/* ── Session Timeout Card ── */
.session-card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: 40px 16px;
}

.session-card {
    background: #1e1e1e;
    border-radius: 24px;
    border: 1.5px solid transparent;
    background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    width: 100%;
    max-width: 480px;
    padding: 44px 36px;
    text-align: center;
    box-shadow: 0 0 60px rgba(240, 209, 92, 0.08), 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: cardEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Animated Hourglass Icon ── */
.timeout-icon-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
}

.timeout-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background-image: linear-gradient(#1e1e1e, #1e1e1e), conic-gradient(from 0deg, rgba(216, 129, 5, 0.8) 0%, rgba(240, 209, 92, 1) 60%, rgba(216, 129, 5, 0.1) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: ringRotate 3s linear infinite;
}

@keyframes ringRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.timeout-icon-inner {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeout-icon-inner i {
    font-size: 22px;
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(216, 129, 5, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: sandPulse 2s ease-in-out infinite;
}

@keyframes sandPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(0.92);
    }
}

/* ── GIF-style Sand Dots ── */
.sand-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}

.sand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(216, 129, 5, 1) 100%);
    animation: sandDrop 1.4s ease-in-out infinite;
}

.sand-dot:nth-child(1) {
    animation-delay: 0s;
}

.sand-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.sand-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes sandDrop {

    0%,
    80%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    40% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* ── Typography ── */
.session-title {
    font-size: 22px;
    font-weight: 700;
    color: #EEEEEE;
    margin-bottom: 10px;
    line-height: 1.3;
}

.session-subtitle {
    font-size: 14px;
    color: #AEAEAE;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ── Countdown ── */
.countdown-wrap {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 8px 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(240, 209, 92, 0.15);
}

.countdown-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.countdown-timer {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(216, 129, 5, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    letter-spacing: 4px;
    font-variant-numeric: tabular-nums;
}

.countdown-sub {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

/* ── Divider ── */
.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.or-divider span {
    font-size: 12px;
    color: #666;
}

/* ── Info Row ── */
.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(216, 129, 5, 0.06);
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(216, 129, 5, 0.2);
    margin-top: 16px;
    text-align: left;
}

.info-row i {
    color: #d88105;
    font-size: 16px;
    flex-shrink: 0;
}

.info-row span {
    font-size: 12px;
    color: #AEAEAE;
    line-height: 1.5;
}

/* ── Glow Pulse Background ── */
.glow-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.07;
    animation: orbFloat 8s ease-in-out infinite;
}

.glow-orb-1 {
    width: 400px;
    height: 400px;
    background: #f0d15c;
    top: -120px;
    right: -100px;
    animation-delay: 0s;
}

.glow-orb-2 {
    width: 300px;
    height: 300px;
    background: #d88105;
    bottom: -100px;
    left: -80px;
    animation-delay: 4s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-30px) scale(1.05);
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .session-card {
        padding: 32px 20px;
    }

    .session-title {
        font-size: 18px;
    }
}

/* ── Error Card Variables ── */
:root {
    --error-red: #e63946;
    --error-orange: #f4941b;
    --error-glow: rgba(230, 57, 70, 0.25);
}

/* ── Error Card Wrapper ── */
.error-card-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: 40px 16px;
}

/* ── Main Error Card ── */
.error-card {
    background: #1e1e1e;
    border-radius: 24px;
    border: 1.5px solid transparent;
    background-image: linear-gradient(#1e1e1e, #1e1e1e), linear-gradient(135deg, rgba(230, 57, 70, 0.7) 0%, rgba(244, 148, 27, 0.7) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    width: 100%;
    max-width: 520px;
    padding: 44px 36px;
    text-align: center;
    box-shadow: 0 0 60px rgba(230, 57, 70, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: cardEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(32px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Animated Warning Icon ── */
.error-icon-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 28px;
}

/* Rotating outer ring */
.error-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background-image: linear-gradient(#1e1e1e, #1e1e1e), conic-gradient(from 0deg, rgba(230, 57, 70, 0.9) 0%, rgba(244, 148, 27, 1) 40%, rgba(230, 57, 70, 0.1) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: errorRingPulse 2s linear infinite;
}

@keyframes errorRingPulse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Pulsing halo */
.error-halo {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.4);
    animation: haloExpand 1.8s ease-out infinite;
}

@keyframes haloExpand {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.5);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(230, 57, 70, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
    }
}

.error-icon-inner {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: #2a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon-inner i {
    font-size: 42px;
    background: linear-gradient(180deg, #f4941b 0%, #e63946 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: warnShake 3s ease-in-out infinite;
}

@keyframes warnShake {

    0%,
    60%,
    100% {
        transform: rotate(0deg);
    }

    62% {
        transform: rotate(-6deg);
    }

    64% {
        transform: rotate(6deg);
    }

    66% {
        transform: rotate(-4deg);
    }

    68% {
        transform: rotate(4deg);
    }

    70% {
        transform: rotate(0deg);
    }
}

/* ── Flicker Dots ── */
.error-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}

.error-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error-red);
    animation: flickerDot 1.4s ease-in-out infinite;
}

.error-dot:nth-child(1) {
    animation-delay: 0s;
    background: #e63946;
}

.error-dot:nth-child(2) {
    animation-delay: 0.2s;
    background: #f4941b;
}

.error-dot:nth-child(3) {
    animation-delay: 0.4s;
    background: #e63946;
}

@keyframes flickerDot {

    0%,
    80%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }

    40% {
        transform: scale(1.4);
        opacity: 1;
    }
}

/* ── Title + Subtitle ── */
.error-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.3);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    color: #e63946;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}

.error-title {
    font-size: 22px;
    font-weight: 700;
    color: #EEEEEE;
    margin-bottom: 10px;
    line-height: 1.3;
}

.error-subtitle {
    font-size: 14px;
    color: #AEAEAE;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ── Error Code Box ── */
.error-code-box {
    background: rgba(230, 57, 70, 0.06);
    border: 1px solid rgba(230, 57, 70, 0.2);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.error-code-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    margin-bottom: 4px;
}

.error-code-value {
    font-size: 13px;
    font-weight: 600;
    color: #e63946;
    font-family: 'Courier New', monospace;
}

.error-code-copy {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #888;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.error-code-copy:hover {
    background: rgba(230, 57, 70, 0.15);
    color: #e63946;
    border-color: rgba(230, 57, 70, 0.3);
}

/* ── Action Buttons ── */
.btn-error-primary {
    background: linear-gradient(135deg, #e63946 0%, #f4941b 100%);
    border: none;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.btn-error-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: translateX(-100%);
}

.btn-error-primary:hover::after {
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

.btn-error-primary:hover {
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
}

/* ── Divider ── */
.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.or-divider span {
    font-size: 12px;
    color: #555;
}

/* ── Error Details Accordion ── */
.error-details-toggle {
    background: transparent;
    border: none;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin-top: 4px;
    transition: color 0.2s;
}

.error-details-toggle:hover {
    color: #e63946;
}

.error-details-toggle i {
    transition: transform 0.3s ease;
}

.error-details-toggle.open i {
    transform: rotate(180deg);
}

.error-details-body {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.error-details-body.show {
    display: block;
}

.error-detail-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.error-detail-line:last-child {
    border-bottom: none;
}

.error-detail-line span:last-child {
    color: #aaa;
}

/* ── Info Note ── */
.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(244, 148, 27, 0.06);
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(244, 148, 27, 0.2);
    margin-top: 20px;
    text-align: left;
}

.info-row i {
    color: #f4941b;
    font-size: 16px;
    flex-shrink: 0;
}

.info-row span {
    font-size: 12px;
    color: #AEAEAE;
    line-height: 1.5;
}

/* ── Glow BG ── */
.glow-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
}

.glow-orb-red {
    width: 400px;
    height: 400px;
    background: #e63946;
    top: -100px;
    right: -100px;
    animation: orbFloat 10s ease-in-out infinite;
}

.glow-orb-orange {
    width: 300px;
    height: 300px;
    background: #f4941b;
    bottom: -80px;
    left: -80px;
    animation: orbFloat 10s ease-in-out infinite 5s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .error-card {
        padding: 32px 20px;
        max-width: 320px;
    }

    .error-title {
        font-size: 18px;
    }
}

.f14 {
    font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════
Nominee Captcha Confirm — Scoped Styles
═══════════════════════════════════════════════════════════ */

/* ── Success icon circle ── */
.ncc-success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .10);
    border: 2px solid rgba(34, 197, 94, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #22c55e;
    box-shadow: 0 0 16px rgba(34, 197, 94, .12);
    margin: 0 auto;
}

/* ── Choice icon wrap (standard step) ── */
.ncc-choice-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

/* ── Info banner small icons ── */
.skip-banner-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* ── Prevent Scroll on standard screens ── */
@media (min-height: 600px) {
    .ekyc-bg {
        padding-top: 40px !important;
        padding-bottom: 20px !important;
    }
}

@media (max-height: 760px) {
    .ekyc-card {
        padding: 1rem !important;
    }

    .mb-4 {
        margin-bottom: 1rem !important;
    }

    .gap-md-4 {
        gap: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════ */
/* Utilities — used in nominee skip flow              */
/* ═══════════════════════════════════════════════════ */
/*
.text-muted-sm {
    color: #AEAEAE;
    font-size: 13px;
    line-height: 1.6;
}
*/
.silver-text {
    color: #AEAEAE !important;
}

.icon-xxl {
    font-size: 2.8rem;
}

/* Silver gradient button */
.btn-silver {
    background: var(--silver-btn);
    border: none;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    border-radius: 8px;
    transition: box-shadow 0.2s, transform 0.15s;
}

.btn-silver:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════ */
/* Verification Choice Cards                          */
/* ═══════════════════════════════════════════════════ */
.choice-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.choice-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(240, 209, 92, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.choice-icon-wrap {
    width: 64px;
    height: 64px;
    background: rgba(240, 209, 92, 0.10);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #f0d15c;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.choice-card:hover .choice-icon-wrap {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    color: #101828;
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════ */
/* Captcha Display Box                                */
/* ═══════════════════════════════════════════════════ */
.captcha-display-box {
    background: #111;
    border: 1px dashed rgba(240, 209, 92, 0.35);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 14px;
    color: #f0d15c;
    user-select: none;
    /* Dot-grid texture */
    background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 14px 14px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .8), -1px -1px 0 rgba(255, 255, 255, .06);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    position: relative;
    overflow: hidden;
}

/* Diagonal strike-through line for anti-bot feel */
.captcha-display-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(240, 209, 92, 0.18);
    transform: rotate(1.5deg);
    pointer-events: none;
}

/* Captcha input override — dark background */
.captcha-input-dark {
    background: #1a1a1a !important;
    color: #f0d15c !important;
    border: 1px solid rgba(240, 209, 92, 0.3) !important;
    border-radius: 8px !important;
    font-family: 'Courier New', monospace;
    font-size: 22px !important;
    letter-spacing: 12px !important;
    padding: 14px 0 !important;
    text-align: center;
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.captcha-input-dark::placeholder {
    color: #555 !important;
    letter-spacing: 2px;
    font-size: 14px !important;
}

.captcha-input-dark:focus {
    border-color: rgba(240, 209, 92, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(240, 209, 92, 0.12) !important;
}

/* ═══════════════════════════════════════════════════ */
/* Nominee Skip — step connector line                 */
/* ═══════════════════════════════════════════════════ */
.skip-step-line {
    width: 28px;
    height: 2px;
    background: #383838;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════ */
/* Success summary table inside skip flow             */
/* ═══════════════════════════════════════════════════ */
.verif-summary {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
}

.verif-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.verif-summary-row:last-child {
    border-bottom: none;
}

.verif-label {
    color: #888;
}

/* ═══════════════════════════════════════════════════ */
/* Skip Nominee — numbered step dot indicator         */
/* ═══════════════════════════════════════════════════ */
.skip-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 1.5px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #666;
    transition: background 0.3s, color 0.3s, border 0.3s;
}

.skip-dot.active {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border: none;
    color: #101828;
}

.skip-dot-lbl {
    font-size: 9px;
    color: #666;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.3s;
}

.skip-dot-lbl.active {
    color: #f0d15c;
}

.skip-dot-line {
    width: 26px;
    height: 2px;
    background: #3a3a3a;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════ */
/* Skip Info Banner — icon-left, text-right layout    */
/* ═══════════════════════════════════════════════════ */
.skip-info-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.skip-info-banner .skip-banner-icon {
    flex-shrink: 0;
    padding-top: 2px;
}

/* ═══════════════════════════════════════════════════ */
/* Verify Method Radio Cards                          */
/* ═══════════════════════════════════════════════════ */
/* Hidden native radio */
.verify-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Card label — acts as the clickable card */
.verify-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 20px 20px;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
    position: relative;
    width: 100%;
    height: 100%;
}

.verify-method-card:hover {
    border-color: rgba(240, 209, 92, 0.35);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Selected state */
.verify-radio:checked+.verify-method-card {
    border-color: #f0d15c;
    background: rgba(240, 209, 92, 0.06);
    box-shadow: 0 0 0 1px rgba(240, 209, 92, 0.25), 0 8px 28px rgba(240, 209, 92, 0.12);
    transform: translateY(-2px);
}

/* Checkmark badge — circle always visible, tick white on selected */
.verify-method-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.25s;
}

.verify-radio:checked+.verify-method-card .verify-method-check {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    border-color: transparent;
    color: #fff;
}

/* Icon wrap inside radio card */
.verify-method-card .choice-icon-wrap {
    margin-bottom: 14px;
    transition: background 0.25s, transform 0.25s;
}

.verify-radio:checked+.verify-method-card .choice-icon-wrap {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    color: #101828;
    transform: scale(1.06);
}

/* Col wrapper stretches to equal heights */
.verify-method-col {
    display: flex;
}

/* Enforce a consistent minimum height on each card so both are equal */
.verify-method-card {
    min-height: 190px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   Inline-style replacement utility classes
   Shared across nominee-captcha-confirm, nominee-details,
   and nominee-video-confirm.
   ═══════════════════════════════════════════════════════════ */

/* CAPTCHA section — "VERIFICATION CODE" label */
.captcha-label-xs {
    font-size: 10px;
    letter-spacing: 0.6px;
}

/* CAPTCHA section — Refresh button text size */
.captcha-refresh-btn {
    font-size: 11px;
}

/* Verified status colour — replaces color:#22c55e inline */
.text-verified {
    color: #22c55e !important;
}

/* Continue button fixed height — replaces style="height:46px" */
.btn-h-46 {
    height: 46px;
}

/* Larger choice-icon-wrap for captcha sub-step icon */
.choice-icon-wrap-lg {
    width: 68px;
    height: 68px;
    font-size: 28px;
}

/* Nominee-details success icon — replaces multi-line inline block */
.ncc-success-icon-nd {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.10);
    border: 2px solid rgba(34, 197, 94, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #22c55e;
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.18);
    margin: 0 auto;
}

/* Video-confirm summary card — replaces background/border-radius inline */
.nvc-summary-card {
    background: #1a1a1a;
    border-radius: 12px;
}

/* ── Status Glow Pulse ── */
.status-glow-pulse {
    background: linear-gradient(180deg, rgba(240, 209, 92, 1) 0%, rgba(236, 195, 77, 1) 15%, rgba(216, 129, 5, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    text-shadow: 0 0 8px rgba(240, 209, 92, 0.6);
    animation: textGlowPulse 2s infinite ease-in-out;
    letter-spacing: 0.5px;
    font-weight: 800;
}

@keyframes textGlowPulse {

    0%,
    100% {
        text-shadow: 0 0 8px rgba(240, 209, 92, 0.6);
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        text-shadow: 0 0 16px rgba(240, 209, 92, 0.9), 0 0 24px rgba(240, 209, 92, 0.4);
        transform: scale(1.05);
        opacity: 1;
    }
}


/* ═══════════════════════════════════════ */
/* Brokerage Checklist (Modal)            */
/* ═══════════════════════════════════════ */
.brokerage-checklist-wrap {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    overflow: hidden;
}

.brokerage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease;
}

    .brokerage-row:last-child {
        border-bottom: none;
    }

    .brokerage-row:nth-child(odd) {
        background: rgba(255, 255, 255, 0.04);
    }

    .brokerage-row:hover {
        background: rgba(240, 209, 92, 0.08) !important;
    }

/* ═══════════════════════════════════════ */
/* Brokerage Table (Other Client Modal)   */
/* ═══════════════════════════════════════ */
.brokerage-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.375rem;
    overflow: hidden;
}

.brokerage-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
    font-size: 14px;
}

    .brokerage-table th,
    .brokerage-table td {
        padding: 14px 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        vertical-align: middle;
    }

    .brokerage-table thead th {
        background: rgba(255, 255, 255, 0.06);
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #eee;
    }

    .brokerage-table tbody tr:nth-child(odd) {
        background: rgba(255, 255, 255, 0.03);
    }

    .brokerage-table tbody tr:hover {
        background: rgba(240, 209, 92, 0.08);
    }

    /* Highlight both F&O rows together */
    .brokerage-table .brokerage-subheader-row:hover,
    .brokerage-table .brokerage-subheader-row:hover + tr,
    .brokerage-table .brokerage-subvalue-row:hover {
        background: rgba(240, 209, 92, 0.08);
    }

    /* When hovering value row, also highlight the subheader above */
    .brokerage-table:has(.brokerage-subvalue-row:hover) .brokerage-subheader-row {
        background: rgba(240, 209, 92, 0.08);
    }

    .brokerage-table .brokerage-sub {
        font-size: 12px;
        color: #aeaeae;
        font-weight: 400;
    }

    .brokerage-table .brokerage-subheader-row td {
        border-bottom: none;
    }

/* ═══════════════════════════════════════ */
/* DP Tariff Tabs (Nav Pills)             */
.dp-tariff-tabs {
    gap: 4px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #2b2b2b;
    padding-bottom: 12px;
}

    .dp-tariff-tabs .nav-link {
        background: transparent;
        color: #ccc;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        padding: 8px 18px;
        transition: all 0.2s ease;
    }

        .dp-tariff-tabs .nav-link:hover {
            color: #fff;
            border-color: rgba(240, 209, 92, 0.4);
        }

        .dp-tariff-tabs .nav-link.active {
            background: rgba(240, 209, 92, 0.12);
            color: #fff;
            border-color: #f0d15c;
        }

/* BSDA Disclaimer */
.bsda-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* Mobile responsive for tabs & table */
@media (max-width: 576px) {
    .dp-tariff-tabs .nav-link {
        font-size: 11px;
        padding: 6px 12px;
    }

    .brokerage-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .brokerage-table {
        font-size: 12px;
        min-width: 100%;
    }

        .brokerage-table th,
        .brokerage-table td {
            padding: 10px 10px;
            word-break: break-word;
        }

            .brokerage-table th:first-child,
            .brokerage-table td:first-child {
                width: 40%;
            }

    .bsda-disclaimer {
        padding: 10px 12px;
        font-size: 11px;
    }
}

.custom-radio {
    color: #F4F4F4;
    border-radius: 8px;
    background: #424242;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border: 1px solid #AEAEAE;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease, border-color 0.2s ease;
    font-size: 14px;
    font-weight: 300;
}

/* ACTIVE */
.btn-check:checked + .custom-radio {
    background: linear-gradient(0deg, rgba(216, 129, 5, 1) 0%, rgba(240, 209, 92, 1) 100%);
    color: #101828;
    border: none;
    font-weight: 500;
    transform: translateY(-2px) scale(1.02);
    box-shadow: -1px 1px 16px rgba(240, 209, 92, 0.25), 0 0 0 1px rgba(240, 209, 92, 0.25);
}

/* HOVER */
.custom-radio:hover {
    border-color: #f0d15c;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(240, 209, 92, 0.18);
}

.btn-check:focus-visible + .custom-radio {
    outline: 2px solid rgba(240, 209, 92, 0.8);
    outline-offset: 2px;
}

/* ── Nominee Declaration Card ── */
.nominee-declaration-card {
    background: rgba(255, 255, 255, .03);
    border-radius: 8px;
    border: 1px solid rgba(240, 209, 92, .15);
    padding: 18px 22px;
    animation: fadeSlide .3s ease;
}

.nominee-declaration-text {
    font-size: 13px;
    font-weight: 600;
    color: #EEEEEE;
    line-height: 1.65;
}

.nominee-declaration-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: #AEAEAE;
    transition: color .2s;
}

    .nominee-declaration-radio:hover {
        color: #EEEEEE;
    }

    .nominee-declaration-radio input[type="radio"] {
        display: none;
    }

.nominee-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #555;
    position: relative;
    flex-shrink: 0;
    transition: border-color .2s;
}

    .nominee-radio-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: transparent;
        transform: translate(-50%, -50%) scale(0);
        transition: transform .2s, background .2s;
    }

.nominee-declaration-radio input[type="radio"]:checked ~ .nominee-radio-dot {
    border-color: #f0d15c;
}

    .nominee-declaration-radio input[type="radio"]:checked ~ .nominee-radio-dot::after {
        background: var(--gold-gradient);
        transform: translate(-50%, -50%) scale(1);
    }

.nominee-declaration-radio input[type="radio"]:checked ~ .nominee-radio-label {
    color: #EEEEEE;
}

.nominee-radio-label {
    font-size: 13px;
    transition: color .2s;
}