/* =========================================================
   YOUR EXAM BUDDY
   PREMIUM STUDENT REGISTRATION
   MATCHES PREMIUM LOGIN DESIGN
   DESKTOP + TABLET + MOBILE
========================================================= */


/* =========================================================
   REGISTRATION PAGE
========================================================= */

body.see-membership-registration-page {
    background: #f8fafc;
}


/* =========================================================
   REMOVE THEME CONTENT WIDTH
========================================================= */

body.see-membership-registration-page .site-content,
body.see-membership-registration-page .ast-container {
    width: 100%;
    max-width: none;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.see-registration-shell {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 55px 20px 70px;

    box-sizing: border-box;

    color: #0f172a;

    font-family: inherit;
}


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

.see-registration-header {
    max-width: 650px;

    margin: 0 auto 30px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.see-registration-eyebrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px 15px;

    margin-bottom: 15px;

    border: 1px solid #c9dcff;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #f5f8ff,
            #edf4ff
        );

    color: #1558c0;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;
}


/* Lock */

.see-registration-lock {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 12px;
}


/* =========================================================
   PAGE TITLE
========================================================= */

.see-registration-header h1 {
    margin: 0;

    color: #0b172a;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -1.1px;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.see-registration-header p {
    max-width: 540px;

    margin: 11px auto 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   REGISTRATION CARD
========================================================= */

.see-registration-card {
    position: relative;

    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    padding: 30px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dce5ef;

    border-radius: 17px;

    box-shadow:
        0 20px 55px
        rgba(15, 23, 42, .075);

    overflow: hidden;
}


/* =========================================================
   TOP BLUE ACCENT
========================================================= */

.see-registration-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #3b82f6,
            #60a5fa
        );
}


/* =========================================================
   CARD HEADER
========================================================= */

.see-registration-card-header {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 25px;
}


/* =========================================================
   CARD ICON
========================================================= */

.see-registration-card-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border: 1px solid #cfe0ff;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #eef4ff,
            #e5efff
        );

    color: #2563eb;

    font-size: 17px;

    font-weight: 900;
}


/* =========================================================
   CARD TITLE
========================================================= */

.see-registration-card-header h2 {
    margin: 0 0 3px;

    color: #0b172a;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 900;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.see-registration-card-header p {
    margin: 0;

    color: #64748b;

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   PMPRO FORM
========================================================= */

.see-registration-card .pmpro_form {
    width: 100%;

    margin: 0;
}


/* =========================================================
   PMPRO SECTIONS
========================================================= */

.see-registration-card .pmpro_section {
    margin: 0;
}


/* =========================================================
   HIDE PMPRO DEFAULT FORM TITLE
========================================================= */

.see-registration-card .pmpro_form_heading {
    margin: 0 0 18px;

    color: #0b172a;

    font-size: 17px;

    line-height: 1.3;

    font-weight: 900;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.see-registration-card .pmpro_form_fields {
    display: block;

    width: 100%;

    margin: 0;
}


/* =========================================================
   INDIVIDUAL FIELD
========================================================= */

.see-registration-card .pmpro_form_field {
    width: 100%;

    margin: 0 0 17px;

    padding: 0;
}


/* =========================================================
   LABELS
========================================================= */

.see-registration-card .pmpro_form_label {
    display: block;

    margin: 0 0 7px;

    color: #334155;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 800;
}


/* Required marker */

.see-registration-card .pmpro_asterisk,
.see-registration-card .pmpro_form_label abbr {
    color: #ef4444;

    font-weight: 900;

    text-decoration: none;
}


/* =========================================================
   ALL INPUTS
========================================================= */

.see-registration-card .pmpro_form_input,
.see-registration-card input[type="text"],
.see-registration-card input[type="email"],
.see-registration-card input[type="password"],
.see-registration-card input[type="tel"],
.see-registration-card input[type="number"],
.see-registration-card select,
.see-registration-card textarea {

    display: block;

    width: 100%;

    min-height: 48px;

    padding: 12px 13px;

    box-sizing: border-box;

    border: 1px solid #ccd8e6;

    border-radius: 9px;

    background: #ffffff;

    color: #0f172a;

    font-family: inherit;

    font-size: 13px;

    line-height: 1.4;

    outline: none;

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


/* =========================================================
   INPUT FOCUS
========================================================= */

.see-registration-card .pmpro_form_input:focus,
.see-registration-card input:focus,
.see-registration-card select:focus,
.see-registration-card textarea:focus {

    border-color: #4d8df7;

    background: #fbfdff;

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, .08);

    outline: none;
}


/* =========================================================
   PASSWORD FIELD
========================================================= */

.see-registration-card
.pmpro_form_field-password {

    position: relative;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.see-registration-card
.pmpro_form_field-password-toggle {

    color: #1558c0;

    font-size: 11px;

    font-weight: 800;
}


/* =========================================================
   CHECKBOX
========================================================= */

.see-registration-card
.pmpro_form_field-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 3px;
}


.see-registration-card
.pmpro_form_field-checkbox input[type="checkbox"] {

    width: 16px;
    height: 16px;

    margin: 2px 0 0;

    flex: 0 0 auto;

    accent-color: #2563eb;
}


/* Checkbox label */

.see-registration-card
.pmpro_form_field-checkbox .pmpro_form_label {

    margin: 0;

    color: #64748b;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.5;
}


/* =========================================================
   HINT TEXT
========================================================= */

.see-registration-card .pmpro_form_hint {

    display: block;

    margin-top: 6px;

    color: #94a3b8;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   LINKS
========================================================= */

.see-registration-card a {

    color: #2563eb;

    font-weight: 800;

    text-decoration: none;
}


.see-registration-card a:hover {

    color: #1d4ed8;

    text-decoration: underline;
}


/* =========================================================
   PMPRO MESSAGES
========================================================= */

.see-registration-card .pmpro_message {

    margin: 0 0 18px;

    padding: 11px 13px;

    border: 1px solid #bfdbfe;

    border-radius: 9px;

    background: #eff6ff;

    color: #315b87;

    font-size: 10px;

    line-height: 1.6;
}


/* Error */

.see-registration-card .pmpro_message.pmpro_error {

    border-color: #fecaca;

    background: #fff7f7;

    color: #991b1b;
}


/* Success */

.see-registration-card .pmpro_message.pmpro_success {

    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.see-registration-card .pmpro_form_submit {

    display: block;

    width: 100%;

    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid #e5ebf2;
}


/* =========================================================
   CREATE ACCOUNT BUTTON
========================================================= */

.see-registration-card .pmpro_form_submit
.pmpro_btn,

.see-registration-card .pmpro_form_submit
input[type="submit"],

.see-registration-card .pmpro_form_submit
button[type="submit"],

.see-registration-card button.pmpro_btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    min-height: 54px !important;

    padding: 14px 20px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #1d4ed8 55%,
            #1e40af 100%
        ) !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        0 11px 25px
        rgba(37, 99, 235, .22) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.see-registration-card .pmpro_form_submit
.pmpro_btn:hover,

.see-registration-card .pmpro_form_submit
input[type="submit"]:hover,

.see-registration-card .pmpro_form_submit
button[type="submit"]:hover,

.see-registration-card button.pmpro_btn:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #1e40af
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 16px 32px
        rgba(37, 99, 235, .28) !important;
}


/* =========================================================
   BUTTON ACTIVE
========================================================= */

.see-registration-card .pmpro_form_submit
.pmpro_btn:active,

.see-registration-card .pmpro_form_submit
input[type="submit"]:active {

    transform: translateY(0);

    box-shadow:
        0 8px 18px
        rgba(37, 99, 235, .20) !important;
}


/* =========================================================
   LOGIN LINK
========================================================= */

.see-registration-login {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #e5ebf2;

    color: #64748b;

    font-size: 10px;

    line-height: 1.5;

    text-align: center;
}


.see-registration-login a {

    color: #2563eb;

    font-weight: 900;

    text-decoration: none;
}


.see-registration-login a:hover {

    color: #1d4ed8;

    text-decoration: underline;
}


/* =========================================================
   SECURITY FOOTER
========================================================= */

.see-registration-security {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 17px;

    color: #64748b;

    text-align: center;
}


.see-registration-security-icon {

    font-size: 12px;
}


.see-registration-security strong {

    color: #475569;

    font-size: 9px;

    font-weight: 900;
}


.see-registration-security small {

    color: #94a3b8;

    font-size: 8px;
}


.see-registration-security-dot {

    color: #cbd5e1;

    font-size: 11px;
}


/* =========================================================
   PMPRO HIDDEN
========================================================= */

.see-registration-card .pmpro_hidden {

    display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .see-registration-shell {

        padding-left: 18px;
        padding-right: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .see-registration-shell {

        padding:
            42px 15px 55px;
    }


    /* Header */

    .see-registration-header {

        margin-bottom: 25px;
    }


    .see-registration-eyebrow {

        padding: 7px 12px;

        font-size: 9px;
    }


    .see-registration-header h1 {

        font-size: 31px;

        letter-spacing: -.8px;
    }


    .see-registration-header p {

        font-size: 12px;

        line-height: 1.65;
    }


    /* Card */

    .see-registration-card {

        max-width: 100%;

        padding: 22px;

        border-radius: 15px;
    }


    /* Header */

    .see-registration-card-header {

        gap: 11px;

        margin-bottom: 22px;
    }


    .see-registration-card-icon {

        width: 39px;
        height: 39px;

        border-radius: 10px;

        font-size: 15px;
    }


    .see-registration-card-header h2 {

        font-size: 16px;
    }


    .see-registration-card-header p {

        font-size: 9px;
    }


    /* Labels */

    .see-registration-card .pmpro_form_label {

        font-size: 10px;
    }


    /* Inputs */

    .see-registration-card .pmpro_form_input,
    .see-registration-card input[type="text"],
    .see-registration-card input[type="email"],
    .see-registration-card input[type="password"],
    .see-registration-card input[type="tel"],
    .see-registration-card input[type="number"],
    .see-registration-card select,
    .see-registration-card textarea {

        min-height: 46px;

        padding: 11px 12px;

        font-size: 12px;

        border-radius: 9px;
    }


    /* Button */

    .see-registration-card .pmpro_form_submit
    .pmpro_btn,

    .see-registration-card .pmpro_form_submit
    input[type="submit"],

    .see-registration-card .pmpro_form_submit
    button[type="submit"] {

        min-height: 52px !important;

        font-size: 13px !important;

        border-radius: 10px !important;
    }


    /* Login */

    .see-registration-login {

        flex-wrap: wrap;

        font-size: 10px;
    }


    /* Security */

    .see-registration-security {

        flex-wrap: wrap;

        padding: 0 8px;

        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .see-registration-shell {

        padding-left: 11px;
        padding-right: 11px;
    }


    .see-registration-header h1 {

        font-size: 27px;
    }


    .see-registration-card {

        padding: 19px;

        border-radius: 14px;
    }


    .see-registration-card-header {

        gap: 10px;
    }


    .see-registration-card-header h2 {

        font-size: 15px;
    }


    .see-registration-card .pmpro_form_input,
    .see-registration-card input[type="text"],
    .see-registration-card input[type="email"],
    .see-registration-card input[type="password"] {

        min-height: 45px;

        font-size: 12px;
    }


    .see-registration-card .pmpro_form_submit
    .pmpro_btn,

    .see-registration-card .pmpro_form_submit
    input[type="submit"],

    .see-registration-card .pmpro_form_submit
    button[type="submit"] {

        min-height: 50px !important;

        font-size: 12px !important;
    }

}