/* =========================================================
   NOOR PRO ACADEMY — REGISTER PAGE
   Premium Modern EdTech UI
   ========================================================= */

.register-page{
    min-height:calc(100vh - 76px);
    background:
        radial-gradient(circle at 10% 10%,rgba(21,154,156,.10),transparent 30%),
        radial-gradient(circle at 90% 20%,rgba(79,174,123,.09),transparent 28%),
        #f7faf9;
}

/* HERO */

.register-hero{
    position:relative;
    overflow:hidden;
    padding:76px 0 70px;
    background:
        linear-gradient(135deg,#ffffff 0%,#f1faf8 55%,#eaf7f4 100%);
    border-bottom:1px solid rgba(227,236,233,.9);
}

.register-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    right:-170px;
    top:-230px;
    background:rgba(21,154,156,.10);
    filter:blur(3px);
}

.register-hero::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    left:-130px;
    bottom:-180px;
    background:rgba(79,174,123,.08);
}

.register-hero .container{
    position:relative;
    z-index:2;
}

.register-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(21,154,156,.09);
    border:1px solid rgba(21,154,156,.15);
    color:var(--teal);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.3px;
}

.register-kicker::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(79,174,123,.10);
}

.register-hero h1{
    max-width:700px;
    margin:18px 0 12px;
    color:var(--dark);
    font-size:clamp(38px,5vw,58px);
    line-height:1.02;
    letter-spacing:-2px;
    font-weight:900;
}

.register-hero p{
    max-width:600px;
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

/* MAIN */

.register-section{
    padding:55px 0 90px;
}

.register-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(340px,.75fr);
    gap:28px;
    align-items:start;
}

/* CARDS */

.register-card,
.selected-course{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(227,236,233,.95);
    border-radius:24px;
    box-shadow:
        0 20px 60px rgba(16,43,53,.08),
        0 2px 8px rgba(16,43,53,.03);
}

.register-card{
    padding:38px;
}

.register-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,var(--teal),var(--green));
}

/* FORM HEADER */

.register-heading{
    margin-bottom:30px;
}

.register-heading span{
    display:block;
    margin-bottom:9px;
    color:var(--teal);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.2px;
}

.register-heading h2{
    margin:0 0 8px;
    color:var(--dark);
    font-size:30px;
    line-height:1.2;
    letter-spacing:-.7px;
}

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

/* FORM */

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    color:var(--dark);
    font-size:13px;
    font-weight:800;
}

.form-group input{
    width:100%;
    height:54px;
    padding:0 16px;
    border:1px solid #dce8e5;
    border-radius:13px;
    outline:none;
    background:#fbfdfc;
    color:var(--dark);
    font-size:14px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        transform .2s ease;
}

.form-group input::placeholder{
    color:#9aa9ad;
}

.form-group input:hover{
    border-color:#c9ddda;
    background:#fff;
}

.form-group input:focus{
    border-color:var(--teal);
    background:#fff;
    box-shadow:
        0 0 0 4px rgba(21,154,156,.09),
        0 8px 22px rgba(21,154,156,.05);
    transform:translateY(-1px);
}

/* BUTTON */

.register-btn{
    position:relative;
    width:100%;
    min-height:56px;
    margin-top:8px;
    padding:0 22px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--teal),var(--teal2));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:900;
    box-shadow:
        0 12px 26px rgba(21,154,156,.22),
        inset 0 1px 0 rgba(255,255,255,.18);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.register-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 16px 32px rgba(21,154,156,.28),
        inset 0 1px 0 rgba(255,255,255,.18);
    filter:saturate(1.08);
}

.register-btn i{
    font-size:12px;
    transition:transform .2s ease;
}

.register-btn:hover i{
    transform:translateX(4px);
}

/* SELECTED COURSE */

.selected-course{
    padding:30px;
    position:sticky;
    top:100px;
    background:
        linear-gradient(145deg,#ffffff 0%,#f4faf8 100%);
}

.selected-course::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-110px;
    top:-100px;
    border-radius:50%;
    background:rgba(21,154,156,.08);
}

.course-label{
    position:relative;
    z-index:2;
    display:inline-flex;
    color:var(--teal);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.2px;
}

.course-icon{
    position:relative;
    z-index:2;
    width:68px;
    height:68px;
    margin:22px 0 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:linear-gradient(135deg,var(--teal),var(--green));
    color:#fff;
    font-size:25px;
    box-shadow:0 14px 28px rgba(21,154,156,.20);
}

.selected-course h3{
    position:relative;
    z-index:2;
    margin:0 0 12px;
    color:var(--dark);
    font-size:23px;
    line-height:1.25;
    letter-spacing:-.5px;
}

.selected-course p{
    position:relative;
    z-index:2;
    margin:0 0 25px;
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
}

/* PRICE */

.course-price{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:19px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.course-price span{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.course-price strong{
    color:var(--dark);
    font-size:32px;
    line-height:1;
    letter-spacing:-1px;
}

/* CHECKS */

.course-check{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:16px;
    color:var(--text);
    font-size:13px;
    font-weight:600;
}

.course-check i{
    color:var(--green);
    font-size:15px;
}

/* ACCOUNT NOTE */

.register-card::after{
    content:"Secure student registration";
    display:block;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--border);
    color:#8a9a9f;
    font-size:11px;
    text-align:center;
}

/* RESPONSIVE */

@media(max-width:900px){

    .register-grid{
        grid-template-columns:1fr;
    }

    .selected-course{
        position:relative;
        top:auto;
    }
}

@media(max-width:650px){

    .register-hero{
        padding:55px 0 50px;
    }

    .register-hero h1{
        font-size:40px;
        letter-spacing:-1.5px;
    }

    .register-section{
        padding:35px 0 60px;
    }

    .register-card,
    .selected-course{
        padding:24px;
        border-radius:19px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .register-heading h2{
        font-size:26px;
    }
}

@media(max-width:420px){

    .register-hero h1{
        font-size:34px;
    }

    .register-card,
    .selected-course{
        padding:20px;
    }

    .course-price strong{
        font-size:28px;
    }
}