/* ==================================================
   NX CONTACT FORM
   XPENG TRUE WHITE GLASS
================================================== */


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

.nx-contact-form {

    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 1rem !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

}


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

.nx-contact-field {

    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border-radius: .625rem !important;

}


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

.nx-contact-form
.nx-contact-field
input {

    width: 100% !important;

    min-height: 3.5rem !important;

    display: block !important;

    margin: 0 !important;

    padding: .875rem 1rem !important;

    box-sizing: border-box !important;

    /*
       TRUE GLASS
       Jangan pakai background putih solid.
    */

    background:
        rgba(255, 255, 255, .16)
        !important;

    /*
       WHITE GLASS BORDER
    */

    border:
        1px solid
        rgba(255, 255, 255, .42)
        !important;

    border-radius:
        .625rem
        !important;

    /*
       GLASS DEPTH
    */

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .55),

        inset 0 -1px 0
        rgba(0, 0, 0, .06),

        0 .75rem 2rem
        rgba(0, 0, 0, .08)
        !important;

    /*
       BLUR
    */

    backdrop-filter:
        blur(1.25rem)
        saturate(120%)
        !important;

    -webkit-backdrop-filter:
        blur(1.25rem)
        saturate(120%)
        !important;

    color:
        #151918
        !important;

    font-family:
        inherit
        !important;

    font-size:
        .9375rem
        !important;

    line-height:
        1.4
        !important;

    font-weight:
        400
        !important;

    outline:
        none
        !important;

    appearance:
        none
        !important;

    -webkit-appearance:
        none
        !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease
        !important;

}


/* ==================================================
   TOP GLASS HIGHLIGHT
================================================== */

.nx-contact-field::before {

    content: "" !important;

    position: absolute !important;

    top: 1px !important;

    left: 10% !important;
    right: 10% !important;

    height: 1px !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .70),
            transparent
        )
        !important;

    opacity: .7 !important;

}


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

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

.nx-contact-form
.nx-contact-field
input::placeholder {

    color:
        rgba(255, 255, 255, .72)
        !important;

    opacity:
        1 !important;

}


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

.nx-contact-form
.nx-contact-field
input:hover {

    background:
        rgba(255, 255, 255, .22)
        !important;

    border-color:
        rgba(255, 255, 255, .62)
        !important;

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .70),

        0 1rem 2.25rem
        rgba(0, 0, 0, .10)
        !important;

}


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

.nx-contact-form
.nx-contact-field
input:focus {

    background:
        rgba(255, 255, 255, .24)
        !important;

    border-color:
        #9DE404
        !important;

    box-shadow:

        0 0 0 .1875rem
        rgba(157, 228, 4, .10),

        inset 0 1px 0
        rgba(255, 255, 255, .75),

        0 1rem 2rem
        rgba(0, 0, 0, .10)
        !important;

    outline:
        none !important;

}


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

.nx-contact-form
.nx-contact-submit {

    width: 100% !important;

    min-height: 3.5rem !important;

    display: inline-flex !important;

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

    margin: 0 !important;

    padding: .875rem 1.5rem !important;

    box-sizing: border-box !important;

    border:
        1px solid #9DE404
        !important;

    border-radius:
        .625rem
        !important;

    background:
        #9DE404
        !important;

    background-image:
        none !important;

    color:
        #111111
        !important;

    font-family:
        inherit !important;

    font-size:
        .8125rem !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    letter-spacing:
        .06em !important;

    text-transform:
        uppercase !important;

    cursor:
        pointer !important;

    box-shadow:
        0 .75rem 1.5rem
        rgba(0, 0, 0, .16)
        !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease
        !important;

}


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

.nx-contact-form
.nx-contact-submit:hover {

    background:
        #9DE404
        !important;

    color:
        #111111
        !important;

    border-color:
        #9DE404
        !important;

    transform:
        translateY(-1px)
        !important;

    box-shadow:
        0 1rem 2rem
        rgba(0, 0, 0, .22)
        !important;

}


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

.nx-contact-form
.nx-contact-submit:active {

    transform:
        translateY(0)
        !important;

}


/* ==================================================
   RESPONSE
================================================== */

.nx-contact-form
.nx-contact-response {

    width: 100% !important;

    min-height: 1.25rem !important;

    margin: .25rem 0 0 !important;

    color:
        rgba(21, 25, 24, .65)
        !important;

    font-size:
        .8125rem !important;

    line-height:
        1.5 !important;

}


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

@media (max-width: 767px) {

    .nx-contact-form {

        gap:
            .875rem !important;

    }

    .nx-contact-form
    .nx-contact-field
    input {

        min-height:
            3.25rem !important;

        padding:
            .8125rem .875rem !important;

    }

    .nx-contact-form
    .nx-contact-submit {

        min-height:
            3.25rem !important;

    }

}