/* =========================================================
   CUSTOMER CARE POPUP
========================================================= */


.customer-care-overlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--space-4);

    background:
        rgba(20,30,20,.55);

    backdrop-filter: blur(5px);

    z-index: var(--z-modal);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--transition);

}


.customer-care-overlay.active {

    opacity: 1;

    pointer-events: auto;

}


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


.customer-care-card {

    width:100%;

    max-width:480px;

    background:var(--card);

    border:

        1px solid

        var(--border-light);


    border-radius:

        var(--radius-xl);


    box-shadow:

        var(--shadow-lg);


    padding:

        var(--space-6);


    transform:

        translateY(30px)

        scale(.96);


    transition:

        transform var(--transition);

}


.customer-care-overlay.active 
.customer-care-card {

    transform:

        translateY(0)

        scale(1);

}



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


.customer-care-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:var(--space-3);

}


.customer-care-header h2 {

    margin-bottom:

        var(--space-2);

}



.customer-care-close {

    width:36px;

    height:36px;

    padding:0;

    border-radius:

        var(--radius-round);


    background:

        var(--surface-alt);

    color:

        var(--text);


}



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


.customer-care-form {

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}



.customer-care-form label {

    font-size:

        var(--font-size-sm);

    font-weight:

        600;

    color:

        var(--primary);

}



.customer-care-form input {

    width:100%;

    padding:

        var(--space-3);


    border:

        1px solid

        var(--border);


    border-radius:

        var(--radius);


    background:

        var(--surface);


}



.customer-care-form input:focus {

    outline:none;

    border-color:

        var(--accent);

}



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


.customer-care-actions {

    display:flex;

    gap:

        var(--space-3);

    margin-top:

        var(--space-4);

}



.customer-care-actions button {

    flex:1;

}



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


@media(max-width:600px){


.customer-care-card {

    padding:

        var(--space-5);


}


.customer-care-actions {

    flex-direction:column;

}


}