/* Extracted from _CustOnboardingLayout.cshtml */
        :root {
            --primary: var(--brand-primary-dark);
            --primary-container: var(--brand-primary-strong);
            --on-primary: #ffffff;
            --secondary: var(--brand-accent-deep);
            --secondary-container: var(--brand-accent-soft);
            --background: #fbf9f6;
            --surface-lowest: #ffffff;
            --surface-low: #f5f3f0;
            --on-surface: #1b1c1a;
            --on-surface-variant: #564145;
            --outline-variant: var(--brand-tint-border);
            --danger: #b3392c;
            --success: #2f7d5c;
        }

        .form-check-input.rv-checkbox {
            width: 1.25em;
            height: 1.25em;
            border: 2px solid var(--maroon) !important;
            border-radius: .3rem;
            cursor: pointer;
            transition: all .15s ease;
            background-color: #fff;
            background-image: none !important;
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            box-sizing: border-box;
            margin: 0;
            flex-shrink: 0;
        }

            .form-check-input.rv-checkbox:checked {
                background-color: var(--maroon) !important;
                border-color: var(--maroon) !important;
            }

                .form-check-input.rv-checkbox:checked::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 45%;
                    width: 30%;
                    height: 55%;
                    border: solid #fff;
                    border-width: 0 2px 2px 0;
                    transform: translate(-50%, -50%) rotate(45deg);
                }

            .form-check-input.rv-checkbox:focus {
                box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-dark-rgb),.15) !important;
            }

            .form-check-input.rv-checkbox:hover {
                border-color: var(--maroon) !important;
            }

        /* ---------- OTP display modal ---------- */
        #otpDisplayModal .modal-content {
            border: none;
            border-radius: .9rem;
            overflow: hidden;
            box-shadow: 0 24px 60px -20px rgba(var(--brand-primary-dark-rgb),.45);
        }

        #otpDisplayModal .modal-header {
            background: linear-gradient(120deg, var(--primary) 0%, var(--primary-container) 100%) !important;
            border-bottom: none;
            padding: 1.25rem 1.5rem;
        }

        #otpDisplayModal .modal-title {
            color: var(--on-primary);
            font-weight: 800;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: .6rem;
        }

            #otpDisplayModal .modal-title i {
                font-size: 1.1rem;
                color: var(--secondary-container);
            }

        #otpDisplayModal .btn-close {
            filter: brightness(0) invert(1);
            opacity: .85;
        }

            #otpDisplayModal .btn-close:hover {
                opacity: 1;
            }

        #otpDisplayModal .modal-body {
            padding: 2rem 1.5rem 1.5rem;
            background-color: var(--surface-lowest);
        }

            #otpDisplayModal .modal-body p {
                font-size: .85rem;
                color: var(--on-surface-variant);
            }

        .otp-display-box {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background-color: var(--surface-low);
            border: 1.5px dashed var(--outline-variant);
            border-radius: .6rem;
            padding: .85rem 1.5rem;
            margin: .25rem 0 .5rem;
        }

        #otpDisplayValue {
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 1.8rem;
            letter-spacing: .35rem;
            color: var(--primary);
            margin: 0;
        }

        .otp-copy-btn {
            background: none;
            border: none;
            color: var(--secondary);
            font-size: 1.1rem;
            padding: .25rem;
            line-height: 1;
            transition: color .15s ease, transform .1s ease;
        }

            .otp-copy-btn:hover {
                color: var(--primary);
            }

            .otp-copy-btn:active {
                transform: scale(.9);
            }

        .otp-dev-note {
            display: flex;
            align-items: flex-start;
            gap: .5rem;
            background-color: rgba(var(--brand-accent-deep-rgb),.08);
            border: 1px solid rgba(var(--brand-accent-soft-rgb),.4);
            border-radius: .5rem;
            padding: .6rem .8rem;
            font-size: .75rem;
            color: var(--on-surface-variant);
            text-align: left;
            margin-top: 1rem;
        }

            .otp-dev-note i {
                color: var(--secondary);
                margin-top: .1rem;
            }

        #otpDisplayModal .modal-footer {
            background-color: var(--surface-low);
            border-top: 1px solid rgba(220,191,195,.4);
            padding: 1rem 1.5rem;
        }

            #otpDisplayModal .modal-footer .btn-maroon {
                width: 100%;
                justify-content: center;
                display: flex;
                align-items: center;
                gap: .4rem;
            }

        /* Bhashini language widget — themed to sit in the maroon brandbar */
        /* !important: some pages (e.g. CustLogin) also pull in index.css, whose
           .brandbar{overflow:hidden} would otherwise re-clip the language dropdown */
        .brandbar { overflow: visible !important; }
        .bhashini-plugin-container { display: flex; align-items: center; }
        .bhashini-plugin-container .bhashini-dropdown-btn {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.2);
            border-radius: .75rem;
            padding: .3rem .45rem;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: background .2s ease, border-color .2s ease;
        }
        .bhashini-plugin-container .bhashini-dropdown-btn:hover {
            background: rgba(255,255,255,.15);
            border-color: var(--gold-soft);
        }
        .bhashini-plugin-container .bhashini-dropdown-btn-icon svg { display: block; width: 24px; height: 24px; }
        /* Header widget is always at the top of the page — force the menu to open
           downward (the plugin's own JS sometimes flips it up, off-screen) and scroll if tall */
        .bhashini-plugin-container #bhashiniLanguageDropdown {
            top: calc(100% + 6px) !important;
            bottom: auto !important;
            max-height: 70vh;
            overflow-y: auto;
            z-index: 2000;
        }