/* ==================================================
   NX PREMIUM FORM
   Parent class: nx-premium-form
================================================== */

.nx-premium-form{
    width:100%;
}

/* Form wrapper */
.nx-premium-form .cool-form__wrapper{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Field group */
.nx-premium-form .cool-form__field-group{
    margin:0;
}

/* Hilangkan ruang helper saat tidak ada error */
.nx-premium-form .mdc-text-field-helper-line{
    min-height:0;
    padding:0;
}

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

.nx-premium-form .mdc-text-field{
    width:100%;
    min-height:72px;
    padding:0;
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;

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

/* Input dasar */
.nx-premium-form .mdc-text-field__input{
    width:100%;
    height:72px;
    border:0;
    outline:0;
    background:transparent;

    font-family:inherit;
    font-size:16px;
    font-weight:500;
    line-height:1.4;
    color:#1a1e1d;
    caret-color:#1a1e1d;
}

/* Override padding bawaan Cool Form */
.nx-premium-form
.cool-form__field-group
input.mdc-text-field__input.cool-form__field:not(.iti__tel-input){
    padding:0 28px !important;
}

/* Placeholder */
.nx-premium-form .mdc-text-field__input::placeholder{
    color:#8c8f8e;
    opacity:1;
}

/* ==================================================
   MDC OUTLINE
================================================== */

.nx-premium-form .mdc-notched-outline__leading,
.nx-premium-form .mdc-notched-outline__notch,
.nx-premium-form .mdc-notched-outline__trailing{
    border-color:#d9dcdb !important;
    border-width:1px !important;
}

/* Radius kiri */
.nx-premium-form .mdc-notched-outline__leading{
    width:18px;
    border-radius:18px 0 0 18px !important;
}

/* Radius kanan */
.nx-premium-form .mdc-notched-outline__trailing{
    border-radius:0 18px 18px 0 !important;
}

/* Floating label */
.nx-premium-form .mdc-floating-label{
    left:28px !important;
    color:#6f7472 !important;

    font-family:inherit;
    font-size:15px;
    font-weight:500;

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

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

.nx-premium-form .mdc-text-field--focused{
    background:#ffffff;
    box-shadow:
        0 16px 40px rgba(18,24,22,.08),
        0 4px 12px rgba(18,24,22,.04);
}

.nx-premium-form
.mdc-text-field--focused
.mdc-notched-outline__leading,
.nx-premium-form
.mdc-text-field--focused
.mdc-notched-outline__notch,
.nx-premium-form
.mdc-text-field--focused
.mdc-notched-outline__trailing{
    border-color:#1a1e1d !important;
    border-width:1.5px !important;
}

.nx-premium-form
.mdc-text-field--focused
.mdc-floating-label{
    color:#1a1e1d !important;
}

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

.nx-premium-form .mdc-text-field--textarea{
    min-height:170px;
    align-items:flex-start;
}

.nx-premium-form
.mdc-text-field--textarea
.mdc-text-field__resizer{
    width:100%;
    height:100%;
}

.nx-premium-form textarea.mdc-text-field__input{
    width:100%;
    min-height:170px;
    height:170px;
    padding:28px !important;
    resize:none;
}

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

.nx-premium-form .cool-form__submit-group{
    width:100%;
    margin-top:4px;
}

.nx-premium-form .cool-form__button{
    position:relative;

    width:100%;
    min-height:72px;
    padding:18px 28px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:0;
    border-radius:18px;

    background:#1a1e1d;
    color:#ffffff;

    font-family:inherit;
    font-size:16px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.01em;

    cursor:pointer;
    overflow:hidden;

    box-shadow:
        0 14px 34px rgba(18,24,22,.16),
        0 4px 10px rgba(18,24,22,.10);

    transition:
        transform .35s cubic-bezier(.19,1,.22,1),
        box-shadow .35s ease,
        background-color .35s ease;
}

/* Highlight */
.nx-premium-form .cool-form__button::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,.16) 50%,
        transparent 75%
    );

    transform:translateX(-120%);
    transition:transform .65s cubic-bezier(.19,1,.22,1);
}

.nx-premium-form .cool-form__button-text,
.nx-premium-form .cool-form-button-icon{
    position:relative;
    z-index:1;
}

.nx-premium-form .cool-form__button:hover{
    transform:translateY(-2px);
    background:#303433;

    box-shadow:
        0 20px 44px rgba(18,24,22,.20),
        0 6px 14px rgba(18,24,22,.12);
}

.nx-premium-form .cool-form__button:hover::before{
    transform:translateX(120%);
}

.nx-premium-form .cool-form__button:active{
    transform:translateY(0);
}

/* ==================================================
   ERROR STATE
================================================== */

.nx-premium-form
.mdc-text-field--invalid
.mdc-notched-outline__leading,
.nx-premium-form
.mdc-text-field--invalid
.mdc-notched-outline__notch,
.nx-premium-form
.mdc-text-field--invalid
.mdc-notched-outline__trailing{
    border-color:#E6E2F1 !important;
}

.nx-premium-form .mdc-text-field-helper-text{
    margin-top:7px;
    padding-left:8px;

    color:#d44343;
    font-size:13px;
}

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

@media (max-width:767px){

    .nx-premium-form .cool-form__wrapper{
        gap:14px;
    }

    .nx-premium-form .mdc-text-field{
        min-height:64px;
        border-radius:16px;
    }

    .nx-premium-form .mdc-text-field__input{
        height:64px;
        font-size:15px;
    }

    .nx-premium-form
    .cool-form__field-group
    input.mdc-text-field__input.cool-form__field:not(.iti__tel-input){
        padding:0 24px !important;
    }

    .nx-premium-form .mdc-floating-label{
        left:24px !important;
    }

    .nx-premium-form .mdc-notched-outline__leading{
        border-radius:16px 0 0 16px !important;
    }

    .nx-premium-form .mdc-notched-outline__trailing{
        border-radius:0 16px 16px 0 !important;
    }

    .nx-premium-form .mdc-text-field--textarea{
        min-height:150px;
    }

    .nx-premium-form textarea.mdc-text-field__input{
        min-height:150px;
        height:150px;
        padding:24px !important;
    }

    .nx-premium-form .cool-form__button{
        min-height:64px;
        border-radius:16px;
    }
}