:root {
    --bg: #f3f4f6;
    --surface: #fff;
    --ink: #111317;
    --ink-2: #1f242b;
    --muted: #6b7280;
    --line: #e5e7eb;
    --line-2: #eef0f3;
    --accent: #f08a1e;
    --accent-2: #ffb347;
    --good: #16a34a;
    --bad: #dc2626;
    --info: #2563eb;
    --chip: #f6f7f9;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
    --shadow: 0 8px 24px -12px rgba(15, 23, 42, .15), 0 2px 6px rgba(15, 23, 42, .04);
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
}
body { background: #0f1029; min-height: 100vh }

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}
.validation-summary-errors.text-danger {
    color: red;
}

            .auth {
                min-height: 100vh;
                display: grid;
                grid-template-columns: 1.05fr 1fr;
            }

            /* LEFT — brand / hero */
            .auth-hero {
                position: relative;
                overflow: hidden;
                color: #fff;
                background: radial-gradient(120% 100% at 80% 20%, rgba(240,138,30,.55), transparent 55%), radial-gradient(80% 80% at 20% 100%, rgba(124,58,237,.55), transparent 60%), linear-gradient(180deg,#1a1238 0%,#251a4a 60%,#0f1029 100%);
                padding: 48px 56px;
                display: flex;
                flex-direction: column;
                gap: 32px;
            }

            .auth-hero::before {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                background: radial-gradient(1px 1px at 10% 30%, rgba(255,255,255,.7), transparent 2px), radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,.5), transparent 2px), radial-gradient(1px 1px at 70% 35%, rgba(255,255,255,.6), transparent 2px), radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,.7), transparent 2px), radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,.5), transparent 2px), radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,.6), transparent 2px), radial-gradient(2px 2px at 85% 75%, rgba(255,255,255,.6), transparent 3px), radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,.5), transparent 2px);
            }

            .auth-brand {
                   display: block;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
    position: relative;
    z-index: 1;
    color: #fff;
    text-decoration: none;
        text-align: center;    }

            .auth-brand .mark {
               height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff, #ffffff);
    display: grid;
    place-items: center;
    color: #fff;
    padding: 4px 4px;
            }

            .hero-body {
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: column;
                gap: 22px;
                margin-top: 6vh
            }

            .hero-body h1 {
                font-size: 42px;
                font-weight: 800;
                margin: 0;
                line-height: 1.25;
                text-shadow: 0 4px 20px rgba(0,0,0,.4)
            }

            .hero-body h1 span {
                color: var(--accent)
            }

            .hero-body p {
                margin: 0;
                color: #e7d9ff;
                font-size: 15px;
                line-height: 1.8;
                max-width: 460px
            }

            .features {
                display: grid;
                gap: 12px;
                margin-top: 8px;
                max-width: 480px
            }

            .feat {
                display: flex;
                align-items: center;
                gap: 14px;
                background: rgba(255,255,255,.06);
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255,255,255,.1);
                border-radius: 12px;
                padding: 12px 14px;
            }

            .feat .fic {
                width: 38px;
                height: 38px;
                border-radius: 9px;
                background: rgba(240,138,30,.18);
                display: grid;
                place-items: center;
                flex-shrink: 0;
                color: var(--accent)
            }

            .feat b {
                display: block;
                font-size: 14px;
                font-weight: 700
            }

            .feat small {
                display: block;
                color: #cbd0d8;
                font-size: 12px;
                margin-top: 2px
            }

            /* floating mini-card preview */
            .mini-card {
                position: absolute;
                z-index: 1;
                background: #fff;
                color: var(--ink);
                border-radius: 14px;
                padding: 14px 16px;
                box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
                width: 240px;
            }

            .mini-card .tour {
                font-size: 10.5px;
                color: var(--accent);
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: .5px
            }

            .mini-card .mvs {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 8px;
                gap: 8px
            }

            .mini-card .mvs .t {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 5px;
                text-align: center;
                flex: 1;
                font-size: 11.5px;
                font-weight: 700
            }

            .mini-card .mvs .t .flag {
                width: 30px;
                height: 30px;
                font-size: 8px;
                position: relative
            }

            .mini-card .mvs .vs {
                font-size: 12px;
                color: var(--muted);
                font-weight: 800;
                font-family: "Cairo"
            }

            .mini-card .pp {
                margin-top: 10px;
                padding-top: 9px;
                border-top: 1px solid var(--line-2);
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 11px
            }

            .mini-card .pp .pts {
                background: #fff7ed;
                color: var(--accent);
                font-weight: 800;
                padding: 3px 9px;
                border-radius: 99px;
                font-family: "Cairo"
            }

            .mc-1 {
                top: 19%;
                left: -26px;
                transform: rotate(-4deg)
            }

            .mc-2 {
                bottom: 14%;
                left: 38%;
                transform: rotate(3deg);
                width: 220px
            }

            /* RIGHT — form */
            .auth-form {
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 48px 7vw;
                position: relative;
            }

            .form-wrap {
                max-width: 440px;
                margin: 0 auto;
                width: 100%
            }

            .switch-wrap {
                display: flex;
                justify-content: flex-end;
                font-size: 13.5px;
                color: var(--muted);
                margin-bottom: 24px
            }

            .switch-wrap a {
                color: var(--accent);
                font-weight: 700;
                margin-inline-start:6px}

            .tabs {
                display: flex;
                background: #f6f7f9;
                border: 1px solid var(--line);
                border-radius: 12px;
                padding: 4px;
                margin-bottom: 28px;
                gap: 4px
            }

            .tab {
                flex: 1;
                padding: 11px 14px;
                border-radius: 9px;
                font-weight: 700;
                font-size: 14px;
                color: var(--muted);
                transition: .15s;
                text-align: center;
            }

            .tab.active {
                background: #fff;
                color: var(--ink);
                box-shadow: 0 1px 3px rgba(15,23,42,.08)
            }

            .form-head h2 {
                margin: 0;
                font-size: 26px;
                font-weight: 800
            }

            .form-head p {
                margin: 6px 0 0;
                color: var(--muted);
                font-size: 14px;
                line-height: 1.6
            }

            .fields {
                display: grid;
                gap: 16px;
                margin-top: 26px
            }

            .field label {
                display: block;
                font-size: 13px;
                font-weight: 700;
                margin-bottom: 7px
            }

            .field .ctrl {
                position: relative;
            }

            .field .ctrl input {
                width: 100%;
                padding: 13px 44px 13px 14px;
                background: #fafbfc;
                border: 1px solid var(--line);
                border-radius: 10px;
                font: inherit;
                font-size: 14px;
                color: var(--ink);
                transition: .15s;
                outline: 0;
            }

            .field .ctrl input:focus {
                border-color: var(--accent);
                background: #fff;
                box-shadow: 0 0 0 4px rgba(240,138,30,.12)
            }
              .field .ctrl select {
                width: 100%;
                padding: 13px 44px 13px 14px;
                background: #fafbfc;
                border: 1px solid var(--line);
                border-radius: 10px;
                font: inherit;
                font-size: 14px;
                color: var(--ink);
                transition: .15s;
                outline: 0;
            }


            .field .ctrl .ic {
                position: absolute;
                top: 50%;
                right: 14px;
                transform: translateY(-50%);
                color: var(--muted);
                pointer-events: none;
            }

            .field .ctrl .toggle-pw {
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
                color: var(--muted);
                padding: 6px;
                border-radius: 6px;
                cursor: pointer;
                background: none;
                border: 0;
            }

            .field .ctrl .toggle-pw:hover {
                color: var(--ink);
                background: #f3f4f6
            }

            .field .cradio >div {
                display: flex;
                justify-content: start;
                gap: 10px;
            }



            .field .hint {
                margin-top: 6px;
                font-size: 12px;
                color: var(--muted)
            }

            .field .strength {
                margin-top: 8px;
                display: flex;
                gap: 4px
            }

            .field .strength span {
                flex: 1;
                height: 4px;
                border-radius: 99px;
                background: #e5e7eb
            }

            .field .strength span.s1 {
                background: var(--bad)
            }

            .field .strength span.s2 {
                background: #f59e0b
            }

            .field .strength span.s3 {
                background: var(--good)
            }

            .row-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 4px;
                font-size: 13px
            }

            .check {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                color: var(--ink-2)
            }

            .check input {
                appearance: none;
                width: 18px;
                height: 18px;
                border: 1.5px solid #cbd0d8;
                border-radius: 5px;
                cursor: pointer;
                position: relative;
                flex-shrink: 0;
                transition: .15s
            }

            .check input:checked {
                background: var(--accent);
                border-color: var(--accent)
            }

            .check input:checked::after {
                content: "";
                position: absolute;
                inset: 2px;
                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat
            }

            .forgot {
                color: var(--accent);
                font-weight: 700
            }

            .btn {
                width: 100%;
                padding: 14px 18px;
                border-radius: 11px;
                font-weight: 800;
                font-size: 14.5px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                cursor: pointer;
                border: 0;
                transition: .15s;
            }

            .btn-primary {
                background: var(--accent);
                color: #fff;
                box-shadow: 0 10px 24px -10px rgba(240,138,30,.6)
            }

            .btn-primary:hover {
                background: #e07b15;
                transform: translateY(-1px)
            }

            .or {
                display: flex;
                align-items: center;
                gap: 14px;
                margin: 24px 0;
                color: var(--muted);
                font-size: 12.5px
            }

            .or::before,.or::after {
                content: "";
                flex: 1;
                height: 1px;
                background: var(--line)
            }

            .social {
                display: grid;
                gap: 10px
            }

            .btn-social {
                width: 100%;
                padding: 12px 16px;
                border-radius: 11px;
                font-weight: 700;
                font-size: 14px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                cursor: pointer;
                background: #fff;
                border: 1px solid var(--line);
                color: var(--ink);
                transition: .15s;
            }

            .btn-social:hover {
                background: #fafbfc;
                border-color: #cbd0d8
            }

            .btn-social svg {
                width: 18px;
                height: 18px
            }

            .terms {
                margin-top: 10px;
                font-size: 12.5px;
                color: var(--muted);
                line-height: 1.7;
                text-align: center
            }

            .terms a {
                color: var(--accent);
                font-weight: 700
            }

           

            /* OTP/sms tip card */
            .tip {
                margin-top: 22px;
                padding: 12px 14px;
                background: #fff7ed;
                border: 1px solid #fed7aa;
                border-radius: 10px;
                display: flex;
                gap: 10px;
                font-size: 12.5px;
                color: #7c2d12;
                line-height: 1.6;
            }

            .tip svg {
                flex-shrink: 0;
                color: var(--accent);
                margin-top: 1px
            }

            .tip b {
                color: #7c2d12
            }

            /* footer link bar */
            .form-foot {
                margin-top: 28px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12.5px;
                color: var(--muted)
            }

            .form-foot a {
                color: var(--ink-2);
                font-weight: 600
            }

            .form-foot a:hover {
                color: var(--accent)
            }

            @media (max-width: 980px) {
                .auth {
                    grid-template-columns:1fr
                }

                .auth-hero {
                    padding: 32px 24px;
                    min-height: 300px
                }

                .hero-body h1 {
                    font-size: 30px
                }

                .features,.mini-card {
                    display: none
                }

                .auth-form {
                    padding: 32px 20px
                }
            }



            .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 24px;
    cursor: pointer;
}