@import url("./login.css");

.register-page {
    display: grid;
    grid-template-columns: 1fr 620px;
    min-height: 100vh;
}

.register-hero {
    position: relative;
    background: linear-gradient(135deg, #071427, #0d2b53);
    overflow: hidden;
    padding: 80px 70px 0;
    color: white;
}

.register-logo {
    width: 340px;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

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

.register-hero h1 {
    font-size: 52px;
    line-height: 60px;
    max-width: 760px;
    margin-bottom: 25px;
}

.register-hero p {
    max-width: 620px;
    color: #d5dbe8;
    font-size: 21px;
    line-height: 34px;
}

.register-card {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
}

.register-header h2 {
    font-size: 32px;
    color: var(--text);
}

.register-header p {
    margin-top: 8px;
    color: var(--muted);
    margin-bottom: 28px;
}

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

label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
}

/* INPUTS */

input,
select {

    width: 100%;
    height: 56px;

    border: 1px solid #dbe4ef;
    border-radius: 14px;

    padding: 0 18px;

    font-size: 15px;

    background: white;

    transition: .25s;

}

/* SELECT */

select {

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);

    background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px);

    background-size: 6px 6px;

    background-repeat: no-repeat;

}

input:focus,
select:focus {

    outline: none;

    border-color: #1146d8;

    box-shadow: 0 0 0 4px rgba(17,70,216,.10);

}

button {

    margin-top: 10px;

    height: 58px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    font-size: 16px;

    font-weight: bold;

    color: white;

    background: linear-gradient(135deg,#1146d8,#16a34a);

    transition: .25s;

}

button:hover {

    transform: translateY(-2px);

    box-shadow: 0 15px 30px rgba(17,70,216,.20);

}

.register-message {

    margin-top: 10px;

    min-height: 22px;

    text-align: center;

    font-size: 14px;

}

.register-footer {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    gap: 8px;

    font-size: 15px;

}

.register-footer a {

    color: #1146d8;

    text-decoration: none;

    font-weight: bold;

}

.register-footer a:hover {

    text-decoration: underline;

}

/* MOBILE */

@media (max-width:980px){

    .register-page{

        grid-template-columns:1fr;

    }

    .register-hero{

        display:none;

    }

    .register-card{

        min-height:100vh;

        padding:30px 24px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

}