﻿/* Page-specific polish for a more professional look (scoped by #mainCibilCard + #final-result-section) */
        :root {
            --nt-accent: #2563eb;
            /* blue-600 */
            --nt-accent-2: #0ea5e9;
            /* sky-500 */
            --nt-ink: #0f172a;
            /* slate-900 */
            --nt-muted: #475569;
            /* slate-600 */
            --nt-border: rgba(148, 163, 184, .45);
            --nt-surface: #ffffff;
            --nt-soft: #f8fafc;
            /* slate-50 */
        }

        .tracking-widest {
            letter-spacing: .08em;
        }

        .hover-lift {
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .hover-lift:hover {
            transform: translateY(-1px);
            box-shadow: 0 .75rem 1.5rem rgba(15, 23, 42, .10) !important;
        }

        /* Card tone + header hierarchy */
        #mainCibilCard {
            background: linear-gradient(180deg, rgba(37, 99, 235, .04), rgba(14, 165, 233, .02) 40%, rgba(255, 255, 255, 1) 100%);
            border: 1px solid rgba(148, 163, 184, .25) !important;
        }

        #mainCibilCard h3 {
            color: var(--nt-ink);
            letter-spacing: -.01em;
        }

        #mainCibilCard .badge.bg-primary.bg-opacity-10 {
            background: rgba(37, 99, 235, .10) !important;
            color: var(--nt-accent) !important;
            border: 1px solid rgba(37, 99, 235, .22);
        }

        .step-indicator {
            display: flex;
            gap: 10px;
            padding: 10px 12px;
            border: 1px solid var(--nt-border);
            background: rgba(248, 250, 252, .95);
            border-radius: 999px;
            align-items: center;
            justify-content: space-between;
        }

        .step-item {
            flex: 1;
            text-align: center;
            padding: 10px 8px;
            border-radius: 999px;
            font-weight: 650;
            color: #334155;
            background: transparent;
            border: 1px solid transparent;
            user-select: none;
        }

        .step-item.active {
            color: var(--nt-accent);
            background: rgba(37, 99, 235, .10);
            border-color: rgba(37, 99, 235, .25);
        }

        .step-item.completed {
            color: #0f5132;
            background: rgba(25, 135, 84, .10);
            border-color: rgba(25, 135, 84, .22);
        }

        .otp-input-box {
            text-align: center;
            font-weight: 750;
            font-size: 18px;
            letter-spacing: .28em;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, .55) !important;
        }

        .otp-input-box:focus {
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .12) !important;
            border-color: rgba(13, 110, 253, .45) !important;
        }

        /* Form controls: consistent height + subtle border for better hierarchy */
        #mainCibilCard .form-control,
        #mainCibilCard .input-group-text {
            border-radius: 14px !important;
        }

        /* Reduce oversized "lg" look and tame placeholders */
        #mainCibilCard .form-control-lg,
        #mainCibilCard .input-group.input-group-lg .input-group-text {
            font-size: 1rem !important;
            padding-top: .85rem !important;
            padding-bottom: .85rem !important;
        }

        #mainCibilCard .form-label {
            font-size: .78rem;
            letter-spacing: .08em;
            color: var(--nt-muted) !important;
            font-weight: 600 !important;
        }

        #mainCibilCard .form-control {
            font-weight: 500 !important;
        }

        #mainCibilCard .btn.fw-bold,
        #mainCibilCard .badge.fw-bold {
            font-weight: 600 !important;
        }

        #mainCibilCard h3.fw-bold {
            font-weight: 700 !important;
        }

        #mainCibilCard h3 {
            font-size: 1.35rem;
        }

        #mainCibilCard h4 {
            font-size: 1.15rem;
        }

        #mainCibilCard h5 {
            font-size: 1.02rem;
        }

        #mainCibilCard input::placeholder {
            font-size: .92rem;
            font-weight: 500;
            color: rgba(100, 116, 139, .75);
            /* slate-500 */
        }

        #mainCibilCard .form-control.bg-light {
            background: var(--nt-soft) !important;
            border: 1px solid rgba(148, 163, 184, .35) !important;
        }

        #mainCibilCard .input-group .input-group-text.bg-light {
            border: 1px solid rgba(148, 163, 184, .35) !important;
            border-right: 0 !important;
            background: var(--nt-soft) !important;
        }

        #mainCibilCard .input-group .form-control.bg-light {
            border-left: 0 !important;
        }

        /* Buttons: single accent, less harsh contrast */
        #mainCibilCard .btn-primary {
            background: linear-gradient(90deg, var(--nt-accent), var(--nt-accent-2)) !important;
            border: 0 !important;
        }

        #mainCibilCard .btn-dark {
            background: #0b1220 !important;
            border: 0 !important;
        }

        /* Make the page feel wider (less "narrow card") */
        .nt-wide-wrap {
            max-width: 1180px;
            margin-left: auto;
            margin-right: auto;
        }

        @media (max-width: 575.98px) {
            #mainCibilCard {
                border-radius: 18px !important;
            }

            .step-indicator {
                flex-direction: column;
                align-items: stretch;
                border-radius: 18px;
                padding: 8px;
            }

            .step-item {
                width: 100%;
                padding: 9px 10px;
                font-size: 0.76rem;
            }

            #mainCibilCard .btn-group {
                display: grid;
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }

            #mainCibilCard .btn-group > .btn {
                border-radius: 999px !important;
            }
        }
