/* =========================================================
   MUMSY BRAIDS STUDIO
   SHARED CONTACT MODAL
   contact-modal.css
   ========================================================= */


/* =========================================================
   PREVENT PAGE SCROLL WHEN MODAL IS OPEN
   ========================================================= */

body.contact-modal-open {
    overflow: hidden !important;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.contact-modal {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

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

    padding: 20px !important;

    box-sizing: border-box !important;

    z-index: 999999 !important;

    background:
        rgba(35, 29, 26, 0.72) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity 0.30s ease,
        visibility 0.30s ease !important;
}


/* =========================================================
   OPEN STATE
   ========================================================= */

.contact-modal.active {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


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

.contact-modal-box {
    position: relative !important;

    width:
        min(440px, calc(100vw - 40px)) !important;

    max-height:
        calc(100vh - 40px) !important;

    overflow-y: auto !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        38px 28px 28px !important;

    text-align: center !important;

    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #f8eee4 100%
        ) !important;

    border:
        1px solid
        rgba(177, 138, 69, 0.25) !important;

    border-radius:
        26px !important;

    box-shadow:
        0 35px 90px
        rgba(30, 22, 18, 0.35) !important;

    opacity: 0 !important;

    transform:
        translateY(30px)
        scale(0.92) !important;

    transition:
        opacity 0.30s ease,
        transform 0.45s
        cubic-bezier(.22, 1, .36, 1) !important;
}


/* =========================================================
   POP-OUT ANIMATION
   ========================================================= */

.contact-modal.active
.contact-modal-box {

    opacity: 1 !important;

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


/* =========================================================
   INNER DECORATIVE BORDER
   ========================================================= */

.contact-modal-box::before {

    content: "";

    position: absolute;

    inset: 9px;

    border:
        1px solid
        rgba(177, 138, 69, 0.12);

    border-radius: 20px;

    pointer-events: none;

    z-index: 0;
}


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

.contact-modal-close {

    position: absolute !important;

    top: 14px !important;
    right: 14px !important;

    width: 36px !important;
    height: 36px !important;

    display: flex !important;

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

    padding: 0 !important;

    border: none !important;

    border-radius: 50% !important;

    background:
        rgba(177, 138, 69, 0.10) !important;

    color: #75675e !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size: 25px !important;

    line-height: 1 !important;

    cursor: pointer !important;

    z-index: 20 !important;

    transition:
        background 0.20s ease,
        color 0.20s ease,
        transform 0.25s ease !important;
}


.contact-modal-close:hover {

    background:
        rgba(177, 138, 69, 0.20) !important;

    color:
        #8c6732 !important;

    transform:
        rotate(90deg) !important;
}


/* =========================================================
   MODAL ICON
   ========================================================= */

.contact-modal-icon {

    position: relative;

    z-index: 2;

    width: 54px;
    height: 54px;

    margin:
        0 auto 12px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #8c6732,
            #cba760
        );

    color: #ffffff;

    font-size: 21px;

    box-shadow:
        0 10px 25px
        rgba(150, 111, 54, 0.22);
}


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

.contact-modal-eyebrow {

    position: relative;

    z-index: 2;

    margin:
        0 0 7px;

    color:
        #a47b3e;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.contact-modal-box h2 {

    position: relative;

    z-index: 2;

    margin:
        0;

    color:
        #2d2521;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        27px;

    font-weight:
        500;

    line-height:
        1.25;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.contact-modal-intro {

    position: relative;

    z-index: 2;

    max-width:
        340px;

    margin:
        10px auto 22px;

    color:
        #75675e;

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   CONTACT OPTIONS CONTAINER
   ========================================================= */

.contact-modal-details {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap:
        9px;

    width:
        100%;

    text-align:
        left;
}


/* =========================================================
   CONTACT OPTION
   ========================================================= */

.contact-modal-item {

    display: flex !important;

    align-items: center !important;

    gap:
        13px !important;

    width:
        100% !important;

    padding:
        12px 14px !important;

    box-sizing:
        border-box !important;

    text-decoration:
        none !important;

    color:
        #443a34 !important;

    background:
        rgba(255, 255, 255, 0.78) !important;

    border:
        1px solid
        rgba(177, 138, 69, 0.12) !important;

    border-radius:
        15px !important;

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


.contact-modal-item:hover {

    transform:
        translateY(-2px) !important;

    background:
        #fffdf9 !important;

    box-shadow:
        0 8px 22px
        rgba(60, 45, 35, 0.09) !important;
}


/* =========================================================
   CONTACT OPTION ICON
   ========================================================= */

.contact-modal-item-icon {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        #f5e7d3;

    font-size:
        17px;
}


/* =========================================================
   CONTACT OPTION TITLE
   ========================================================= */

.contact-modal-item strong {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #443a34;

    font-size:
        12px;

    font-weight:
        700;
}


/* =========================================================
   CONTACT OPTION DESCRIPTION
   ========================================================= */

.contact-modal-item small {

    display:
        block;

    color:
        #85776d;

    font-size:
        10px;

    line-height:
        1.4;
}


/* =========================================================
   BOOK APPOINTMENT BUTTON
   ========================================================= */

.contact-modal-book {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    margin-top:
        17px;

    padding:
        13px 18px;

    border:
        none;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #8c6732,
            #cba760 52%,
            #9a7137
        );

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 9px 22px
        rgba(150, 111, 54, 0.22);

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease !important;
}


.contact-modal-book:hover {

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 13px 28px
        rgba(150, 111, 54, 0.30) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.contact-modal-box::-webkit-scrollbar {
    width:
        5px;
}


.contact-modal-box::-webkit-scrollbar-track {
    background:
        transparent;
}


.contact-modal-box::-webkit-scrollbar-thumb {

    background:
        rgba(177, 138, 69, 0.35);

    border-radius:
        10px;
}


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

@media (max-width: 500px) {

    .contact-modal {

        padding:
            14px !important;
    }


    .contact-modal-box {

        width:
            calc(100vw - 28px) !important;

        max-height:
            calc(100vh - 28px) !important;

        padding:
            34px 18px 20px !important;

        border-radius:
            23px !important;
    }


    .contact-modal-box h2 {

        font-size:
            24px !important;
    }


    .contact-modal-intro {

        font-size:
            11px !important;
    }


    .contact-modal-item {

        padding:
            11px 12px !important;
    }


    .contact-modal-item-icon {

        flex-basis:
            38px;

        width:
            38px;

        height:
            38px;
    }

}


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

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

    .contact-modal,
    .contact-modal-box,
    .contact-modal-item,
    .contact-modal-book,
    .contact-modal-close {

        transition:
            none !important;
    }

}