/* =========================================================
   FORMULÁRIOS REWRD
   ========================================================= */


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.form-card {

    max-width: 900px;

    background: #14283c;

    border: 1px solid rgba(255,255,255,.05);

    border-radius: 18px;

    padding: 40px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}


/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 25px;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {

    display: flex;

    flex-direction: column;
}


.form-group label {

    color: #96a7bb;

    font-size: 14px;

    margin-bottom: 10px;

    font-weight: 600;
}


.form-group input {

    background: #0f1d2b;

    border: 1px solid #22384e;

    border-radius: 12px;

    color: white;

    padding: 14px 18px;

    font-size: 15px;

    transition: .25s;
}


.form-group input:focus {

    outline: none;

    border-color: #37b8ff;

    box-shadow:
        0 0 0 4px rgba(55,184,255,.15);
}


/* =========================================================
   DROPDOWNS REWRD
   ========================================================= */

.select-wrapper {

    position: relative;

    width: 100%;
}


.select-wrapper select {

    width: 100%;

    height: 48px;

    box-sizing: border-box;

    padding: 0 46px 0 15px;

    border: 1px solid rgba(255,255,255,.065);

    border-radius: 13px;

    outline: none;

    background: rgba(15,29,43,.92);

    color: white;

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    color-scheme: dark;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* =========================================================
   DROPDOWN — HOVER
   ========================================================= */

.select-wrapper select:hover {

    background: rgba(20,40,60,.96);

    border-color: rgba(55,184,255,.25);
}


/* =========================================================
   DROPDOWN — FOCUS
   ========================================================= */

.select-wrapper select:focus {

    background: rgba(20,40,60,.98);

    border-color: rgba(58,166,255,.45);

    box-shadow:
        0 0 0 3px rgba(42,145,255,.07);
}


/* =========================================================
   DROPDOWN — OPTIONS
   ========================================================= */

.select-wrapper select option {

    background: #142536;

    color: white;
}


/* =========================================================
   DROPDOWN — OPTGROUP
   ========================================================= */

.select-wrapper select optgroup {

    background: #142536;

    color: #6ebcff;

    font-weight: 600;
}


/* =========================================================
   DROPDOWN — SETA
   ========================================================= */

.select-wrapper > i {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #60788a;

    font-size: 11px;

    pointer-events: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.select-wrapper:hover > i {

    color: #6ebcff;
}


.select-wrapper:focus-within > i {

    color: #37b8ff;

    transform:
        translateY(-50%)
        rotate(180deg);
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.form-actions {

    margin-top: 35px;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.primary-button {

    background:
        linear-gradient(
            90deg,
            #2da8ff,
            #4cb7ff
        );

    color: white;

    border: none;

    padding: 14px 26px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s;
}


.primary-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(34,170,255,.30);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

    .form-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .form-card {

        padding: 25px;

    }

    .page-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

}