/* =========================================================
   CODEWORD HACKATHON
   MENTOR / JUDGE REGISTRATION
   COMPLETE RESPONSIVE CSS
   ========================================================= */


/* =========================================================
   ROOT THEME
   ========================================================= */

:root {

    --purple: #4F46D8;
    --purple-dark: #3932B8;
    --purple-deep: #2E279B;
    --purple-light: #756FF0;
    --purple-soft: #F0EEFF;

    --orange: #F6A623;
    --orange-dark: #D98C08;
    --orange-light: #FFD071;
    --orange-soft: #FFF5E5;

    --dark: #172033;
    --dark-2: #202A3D;

    --text: #344054;
    --text-medium: #475467;
    --muted: #667085;

    --white: #FFFFFF;

    --background: #F5F7FB;

    --border: #E1E6EF;
    --border-light: #EEF1F6;

    --green: #16834B;
    --green-soft: #ECFDF3;

    --red: #D92D20;
    --red-soft: #FEF3F2;

    --shadow:
        0 25px 55px rgba(23, 32, 51, 0.10),
        0 10px 25px rgba(79, 70, 216, 0.07);

    --shadow-purple:
        0 18px 40px rgba(79, 70, 216, 0.16);
}


/* =========================================================
   GLOBAL
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    min-width: 320px;
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Poppins",
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:

        radial-gradient(
            circle at 8% 10%,
            rgba(79, 70, 216, 0.12),
            transparent 29%
        ),

        radial-gradient(
            circle at 92% 85%,
            rgba(246, 166, 35, 0.12),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            #F8F9FD 0%,
            #F3F5FA 50%,
            #FFFFFF 100%
        );

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;
}


button,
input,
select,
textarea {
    font-family: inherit;
}


button {
    -webkit-tap-highlight-color: transparent;
}


::selection {
    background: var(--purple);
    color: #FFFFFF;
}


/* =========================================================
   MENTOR SECTION
   ========================================================= */

.mentor-section {

    position: relative;

    width: 100%;

    min-height: calc(100vh - 80px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        110px
        20px
        80px;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.mentor-section::before {

    content: "";

    position: absolute;

    width: 390px;

    height: 390px;

    left: -190px;

    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(79, 70, 216, 0.13),
            transparent 70%
        );

    pointer-events: none;
}


.mentor-section::after {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    right: -180px;

    bottom: 30px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(246, 166, 35, 0.13),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.mentor-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 820px;

    padding:
        43px
        43px
        40px;

    border:
        1px solid
        rgba(
            225,
            230,
            239,
            0.95
        );

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(248, 249, 253, 0.98)
        );

    box-shadow:

        inset
            0 1px 0
            rgba(
                255,
                255,
                255,
                0.95
            ),

        0
            7px 0
            rgba(
                79,
                70,
                216,
                0.035
            ),

        var(--shadow);

    overflow: hidden;

    animation:
        mentorCardAppear
        0.55s
        ease both;
}


@keyframes mentorCardAppear {

    from {

        opacity: 0;

        transform:
            translateY(22px)
            scale(0.98);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   TOP COLOR STRIP
   ========================================================= */

.mentor-container::before {

    content: "";

    position: absolute;

    top: 0;

    left: 30px;

    right: 30px;

    height: 5px;

    border-radius:
        0
        0
        10px
        10px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--purple-light) 50%,
            var(--orange)
        );

    box-shadow:
        0
        5px
        17px
        rgba(
            79,
            70,
            216,
            0.18
        );
}


/* =========================================================
   BOTTOM 3D EDGE
   ========================================================= */

.mentor-container::after {

    content: "";

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: -7px;

    height: 11px;

    border-radius:
        0
        0
        18px
        18px;

    background:
        linear-gradient(
            90deg,
            var(--purple-dark),
            var(--purple),
            var(--orange)
        );

    opacity: 0.20;

    z-index: -1;
}


/* =========================================================
   HEADING
   ========================================================= */

.mentor-container h2 {

    margin:
        0 0 12px;

    color:
        var(--dark);

    text-align:
        center;

    font-size:
        clamp(
            25px,
            4vw,
            34px
        );

    line-height:
        1.25;

    font-weight:
        800;

    letter-spacing:
        -0.6px;
}


/* Heading accent */

.mentor-container h2::after {

    content: "";

    display: block;

    width: 62px;

    height: 4px;

    margin:
        13px
        auto
        0;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--orange)
        );
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.mentor-container > p {

    max-width:
        620px;

    margin:
        0
        auto
        31px;

    color:
        var(--muted);

    text-align:
        center;

    font-size:
        14px;

    line-height:
        1.7;

    font-weight:
        450;
}


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

.mentor-form {

    display:
        grid;

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

    gap:
        21px
        20px;

    width:
        100%;
}


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

.form-group {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

    min-width:
        0;
}


/* =========================================================
   LABEL
   ========================================================= */

.form-group label {

    margin:
        0 0 8px;

    color:
        var(--dark-2);

    font-size:
        12px;

    line-height:
        1.4;

    font-weight:
        700;

    letter-spacing:
        0.15px;
}


/* Required marker */

.form-group label::after {

    /*
       The existing HTML already contains *.
       This rule intentionally does not add another marker.
    */

    content:
        "";
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================= */

.form-group input,
.form-group select,
.form-group textarea {

    width:
        100%;

    min-width:
        0;

    padding:
        13px
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    outline:
        none;

    color:
        var(--dark);

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F9FAFD
        );

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1.5;

    box-shadow:

        inset
            0 1px 0
            rgba(
                255,
                255,
                255,
                0.95
            ),

        0
            4px 0
            rgba(
                79,
                70,
                216,
                0.035
            ),

        0
            8px
            18px
            rgba(
                23,
                32,
                51,
                0.035
            );

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}


/* =========================================================
   INPUT PLACEHOLDER
   ========================================================= */

.form-group input::placeholder,
.form-group textarea::placeholder {

    color:
        #98A2B3;

    opacity:
        1;
}


/* =========================================================
   INPUT HOVER
   ========================================================= */

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {

    border-color:
        rgba(
            79,
            70,
            216,
            0.32
        );

    transform:
        translateY(-1px);
}


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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        var(--purple);

    background:
        #FFFFFF;

    box-shadow:

        0
            0
            0
            4px
            rgba(
                79,
                70,
                216,
                0.10
            ),

        0
            8px
            20px
            rgba(
                79,
                70,
                216,
                0.08
            );

    transform:
        translateY(-1px);
}


/* =========================================================
   SELECT
   ========================================================= */

.form-group select {

    min-height:
        48px;

    padding-right:
        42px;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    background-image:

        linear-gradient(
            45deg,
            transparent 50%,
            var(--purple) 50%
        ),

        linear-gradient(
            135deg,
            var(--purple) 50%,
            transparent 50%
        );

    background-position:

        calc(100% - 21px) 21px,
        calc(100% - 15px) 21px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:
        no-repeat;
}


.form-group select option {

    color:
        var(--dark);

    background:
        #FFFFFF;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.form-group textarea {

    min-height:
        125px;

    resize:
        vertical;

    line-height:
        1.7;
}


/* =========================================================
   FILE INPUT
   ========================================================= */

.form-group input[type="file"] {

    min-height:
        50px;

    padding:
        8px;

    cursor:
        pointer;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F9FAFD
        );
}


/* File button */

.form-group input[type="file"]::file-selector-button {

    margin-right:
        10px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(
            79,
            70,
            216,
            0.25
        );

    border-radius:
        9px;

    background:
        var(--purple-soft);

    color:
        var(--purple-dark);

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.2s ease;
}


.form-group input[type="file"]::file-selector-button:hover {

    background:
        var(--purple);

    color:
        #FFFFFF;

    border-color:
        var(--purple);
}


/* =========================================================
   NUMBER INPUT
   ========================================================= */

.form-group input[type="number"] {

    appearance:
        textfield;

    -moz-appearance:
        textfield;
}


.form-group input[type="number"]::-webkit-inner-spin-button,
.form-group input[type="number"]::-webkit-outer-spin-button {

    opacity:
        1;
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.error-message {

    min-height:
        17px;

    margin:
        5px
        2px
        0;

    color:
        var(--red);

    font-size:
        11px;

    line-height:
        1.45;

    font-weight:
        550;

    word-break:
        break-word;

    transition:
        opacity 0.2s ease;
}


/* =========================================================
   VALIDATION STATES
   Works with existing JS inline border colors
   ========================================================= */

.form-group input[style*="border-color: red"],
.form-group select[style*="border-color: red"],
.form-group textarea[style*="border-color: red"] {

    border-color:
        var(--red) !important;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            217,
            45,
            32,
            0.08
        ) !important;
}


.form-group input[style*="#10b981"] {

    border-color:
        var(--green) !important;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            22,
            131,
            75,
            0.07
        ) !important;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.mentor-submit-btn {

    position:
        relative;

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        55px;

    margin-top:
        5px;

    padding:
        13px
        22px;

    border:
        1px solid
        rgba(
            79,
            70,
            216,
            0.70
        );

    border-radius:
        14px;

    outline:
        none;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-light)
        );

    color:
        #FFFFFF;

    font-size:
        14px;

    font-weight:
        800;

    letter-spacing:
        0.15px;

    cursor:
        pointer;

    box-shadow:

        inset
            0 1px 1px
            rgba(
                255,
                255,
                255,
                0.35
            ),

        0
            6px 0
            var(--purple-dark),

        0
            14px
            25px
            rgba(
                79,
                70,
                216,
                0.18
            );

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.25s ease,
        opacity 0.2s ease;
}


/* Button glass highlight */

.mentor-submit-btn::before {

    content:
        "";

    position:
        absolute;

    top:
        2px;

    left:
        15%;

    width:
        70%;

    height:
        38%;

    border-radius:
        999px;

    background:
        linear-gradient(
            to bottom,
            rgba(
                255,
                255,
                255,
                0.25
            ),
            rgba(
                255,
                255,
                255,
                0.02
            )
        );

    pointer-events:
        none;
}


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

.mentor-submit-btn:hover:not(:disabled) {

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            var(--purple-dark),
            var(--purple)
        );

    box-shadow:

        inset
            0 1px 2px
            rgba(
                255,
                255,
                255,
                0.40
            ),

        0
            8px 0
            var(--purple-deep),

        0
            18px
            30px
            rgba(
                79,
                70,
                216,
                0.23
            );
}


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

.mentor-submit-btn:active:not(:disabled) {

    transform:
        translateY(4px);

    box-shadow:

        0
            2px 0
            var(--purple-deep),

        0
            7px
            13px
            rgba(
                79,
                70,
                216,
                0.13
            );
}


/* =========================================================
   BUTTON DISABLED
   ========================================================= */

.mentor-submit-btn:disabled {

    background:
        linear-gradient(
            135deg,
            #A6ADBA,
            #7A8494
        );

    border-color:
        #7A8494;

    color:
        #FFFFFF;

    cursor:
        not-allowed;

    opacity:
        0.72;

    box-shadow:

        0
            5px 0
            #596474,

        0
            10px
            18px
            rgba(
                23,
                32,
                51,
                0.08
            );
}


/* =========================================================
   SUCCESS POPUP
   The JavaScript creates this dynamically.
   ========================================================= */

body > div[style*="position:fixed"] {

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);
}


/* Popup white card */

body > div[style*="position:fixed"] > div {

    border:
        1px solid
        var(--border) !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F8F9FD
        ) !important;

    box-shadow:

        0
            30px
            70px
            rgba(
                23,
                32,
                51,
                0.20
            ),

        inset
            0 1px 0
            rgba(
                255,
                255,
                255,
                0.95
            ) !important;

    position:
        relative;

    overflow:
        hidden;

    animation:
        popupAppear
        0.3s
        ease;
}


@keyframes popupAppear {

    from {

        opacity:
            0;

        transform:
            translateY(15px)
            scale(0.96);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* Popup top accent */

body > div[style*="position:fixed"] > div::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        20px;

    right:
        20px;

    height:
        4px;

    border-radius:
        0
        0
        10px
        10px;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--orange)
        );
}


/* =========================================================
   RESPONSIVE - 900PX
   ========================================================= */

@media (max-width: 900px) {

    .mentor-container {

        max-width:
            760px;

        padding:
            38px
            35px
            35px;
    }
}


/* =========================================================
   RESPONSIVE - 768PX
   ========================================================= */

@media (max-width: 768px) {

    .mentor-section {

        min-height:
            calc(
                100vh - 70px
            );

        align-items:
            flex-start;

        padding:
            95px
            15px
            55px;
    }


    .mentor-container {

        max-width:
            650px;

        padding:
            34px
            27px
            30px;

        border-radius:
            23px;
    }


    .mentor-container::before {

        left:
            22px;

        right:
            22px;
    }


    .mentor-container h2 {

        font-size:
            28px;
    }


    .mentor-container > p {

        font-size:
            13px;

        margin-bottom:
            26px;
    }


    .mentor-form {

        grid-template-columns:
            1fr;

        gap:
            17px;
    }


    .mentor-submit-btn {

        grid-column:
            1;

        min-height:
            53px;
    }


    .form-group input,
    .form-group select,
    .form-group textarea {

        padding:
            12px
            14px;

        font-size:
            13px;
    }
}


/* =========================================================
   RESPONSIVE - 576PX
   ========================================================= */

@media (max-width: 576px) {

    .mentor-section {

        padding:
            88px
            11px
            45px;
    }


    .mentor-container {

        width:
            100%;

        padding:
            29px
            19px
            25px;

        border-radius:
            20px;
    }


    .mentor-container::before {

        left:
            16px;

        right:
            16px;

        height:
            4px;
    }


    .mentor-container h2 {

        font-size:
            23px;

        letter-spacing:
            -0.3px;
    }


    .mentor-container h2::after {

        width:
            50px;

        height:
            3px;

        margin-top:
            10px;
    }


    .mentor-container > p {

        font-size:
            12px;

        line-height:
            1.65;

        margin-bottom:
            23px;
    }


    .mentor-form {

        gap:
            15px;
    }


    .form-group label {

        margin-bottom:
            6px;

        font-size:
            11px;
    }


    .form-group input,
    .form-group select,
    .form-group textarea {

        min-height:
            47px;

        padding:
            11px
            13px;

        border-radius:
            11px;

        font-size:
            12px;
    }


    .form-group textarea {

        min-height:
            110px;
    }


    .form-group input[type="file"] {

        min-height:
            48px;

        padding:
            7px;
    }


    .form-group input[type="file"]::file-selector-button {

        padding:
            8px
            10px;

        font-size:
            10px;
    }


    .error-message {

        font-size:
            10px;

        min-height:
            15px;
    }


    .mentor-submit-btn {

        min-height:
            50px;

        margin-top:
            3px;

        border-radius:
            12px;

        font-size:
            12px;

        box-shadow:

            inset
                0 1px 1px
                rgba(
                    255,
                    255,
                    255,
                    0.30
                ),

            0
                5px 0
                var(--purple-dark),

            0
                11px
                20px
                rgba(
                    79,
                    70,
                    216,
                    0.16
                );
    }
}


/* =========================================================
   RESPONSIVE - 400PX
   ========================================================= */

@media (max-width: 400px) {

    .mentor-section {

        padding:
            78px
            8px
            35px;
    }


    .mentor-container {

        padding:
            25px
            14px
            22px;

        border-radius:
            18px;
    }


    .mentor-container::before {

        left:
            12px;

        right:
            12px;
    }


    .mentor-container h2 {

        font-size:
            21px;
    }


    .mentor-container > p {

        font-size:
            11px;
        }


    .form-group input,
    .form-group select,
    .form-group textarea {

        min-height:
            45px;

        padding:
            10px
            11px;

        font-size:
            11px;

        border-radius:
            10px;
    }


    .form-group textarea {

        min-height:
            100px;
    }


    .form-group label {

        font-size:
            10px;
    }


    .error-message {

        font-size:
            9.5px;
    }


    .mentor-submit-btn {

        min-height:
            48px;

        font-size:
            11px;
    }
}


/* =========================================================
   RESPONSIVE - 340PX
   ========================================================= */

@media (max-width: 340px) {

    .mentor-section {

        padding:
            72px
            6px
            30px;
    }


    .mentor-container {

        padding:
            22px
            11px
            20px;

        border-radius:
            16px;
    }


    .mentor-container h2 {

        font-size:
            19px;
    }


    .mentor-container > p {

        font-size:
            10px;
    }


    .form-group input,
    .form-group select,
    .form-group textarea {

        font-size:
            10.5px;
    }


    .form-group input[type="file"]::file-selector-button {

        margin-right:
            5px;

        padding:
            7px
            8px;

        font-size:
            9px;
    }


    .mentor-submit-btn {

        min-height:
            46px;

        font-size:
            10.5px;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.mentor-submit-btn:focus-visible {

    outline:
        3px solid
        rgba(
            79,
            70,
            216,
            0.20
        );

    outline-offset:
        2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}