/* =====================================================
   THINKORA LABS
   CONTACT MODAL
===================================================== */


/* =====================================================
   MODAL CONTAINER
===================================================== */

.tl-contact-modal {

    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.tl-contact-modal.active {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}



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

.tl-contact-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(8, 11, 18, 0.34);

    backdrop-filter: blur(7px);

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



/* =====================================================
   DIALOG
===================================================== */

.tl-contact-dialog {

    position: relative;

    z-index: 2;

    width: min(560px, 100%);

    max-height: calc(100vh - 50px);

    overflow-y: auto;

    background: #ffffff;

    border: 1px solid rgba(8, 11, 18, 0.08);

    border-radius: 20px;

    box-shadow:
        0 30px 80px rgba(8, 11, 18, 0.18);

    transform:
        translateY(15px)
        scale(0.98);

    transition:
        transform 0.28s ease;
}


.tl-contact-modal.active
.tl-contact-dialog {

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



/* =====================================================
   CONTENT
===================================================== */

.tl-contact-content {

    position: relative;

    padding: 48px 50px 45px;
}



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

.tl-contact-close {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 20;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    pointer-events: auto;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background 0.2s ease;
}


.tl-contact-close:hover {

    background: #f3f5f8;
}


.tl-contact-close span {

    position: absolute;

    width: 17px;

    height: 1.3px;

    background: var(--tl-black);

    transition:
        background 0.2s ease;
}


.tl-contact-close span:first-child {

    transform: rotate(45deg);
}


.tl-contact-close span:last-child {

    transform: rotate(-45deg);
}


.tl-contact-close:hover span {

    background: var(--tl-blue);
}



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

.tl-contact-eyebrow {

    display: block;

    margin-bottom: 14px;

    color: var(--tl-blue);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.14em;
}



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

.tl-contact-content h2 {

    margin: 0;

    color: var(--tl-black);

    font-family:
        "Libre Baskerville",
        Georgia,
        serif;

    font-size: clamp(31px, 5vw, 43px);

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: -0.035em;
}



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

.tl-contact-intro {

    max-width: 430px;

    margin: 17px 0 35px;

    color: var(--tl-gray);

    font-size: 13px;

    line-height: 1.8;
}



/* =====================================================
   CONTACT DETAILS
===================================================== */

.tl-contact-detail {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 25px;
}


.tl-contact-label {

    color: #999fa9;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.14em;
}


.tl-contact-value {

    color: var(--tl-black);

    font-size: 13px;

    line-height: 1.7;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


a.tl-contact-value:hover {

    color: var(--tl-blue);
}


.tl-contact-value address,
address.tl-contact-value {

    font-style: normal;
}



/* =====================================================
   DIVIDER
===================================================== */

.tl-contact-divider {

    width: 100%;

    height: 1px;

    margin: 30px 0 27px;

    background: var(--tl-border);
}



/* =====================================================
   BOTTOM
===================================================== */

.tl-contact-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}



/* =====================================================
   SOCIAL LINKS
===================================================== */

.tl-social-links {

    display: flex;

    align-items: center;

    gap: 10px;
}


.tl-social-link {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--tl-black);

    background: #ffffff;

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


.tl-social-link:hover {

    color: var(--tl-blue);

    background: #f7f9ff;

    border-color:
        rgba(0, 61, 223, 0.18);

    transform: translateY(-2px);
}


.tl-social-link svg {

    width: 16px;

    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.tl-social-dot {

    fill: currentColor;

    stroke: none;
}



/* =====================================================
   NEWSLETTER
===================================================== */

.tl-newsletter-btn {

    min-height: 40px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 0 15px 0 18px;

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

    border-radius: 7px;

    background: var(--tl-black);

    color: #ffffff;

    cursor: pointer;

    font-size: 10px;

    letter-spacing: 0.01em;

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


.tl-newsletter-btn:hover {

    background: var(--tl-blue);

    border-color: var(--tl-blue);

    transform: translateY(-1px);
}


.tl-newsletter-arrow {

    font-size: 15px;

    line-height: 1;

    transition:
        transform 0.2s ease;
}


.tl-newsletter-btn:hover
.tl-newsletter-arrow {

    transform: translateX(3px);
}



/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 600px) {

    .tl-contact-modal {

        padding: 15px;

    }


    .tl-contact-dialog {

        width: 100%;

        max-height: calc(100vh - 30px);

        border-radius: 17px;

    }


    .tl-contact-content {

        padding: 42px 27px 30px;

    }


    .tl-contact-bottom {

        align-items: stretch;

        flex-direction: column;

        gap: 20px;

    }


    .tl-social-links {

        gap: 8px;

    }


    .tl-social-link {

        width: 36px;

        height: 36px;

    }


    .tl-newsletter-btn {

        width: 100%;

        justify-content: space-between;

    }

}



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

@media (max-width: 420px) {

    .tl-contact-content {

        padding:
            40px
            22px
            27px;

    }


    .tl-contact-content h2 {

        font-size: 30px;

    }


    .tl-contact-intro {

        font-size: 12px;

        margin-bottom: 30px;

    }


    .tl-contact-detail {

        margin-bottom: 22px;

    }

}



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

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

    .tl-contact-modal,
    .tl-contact-dialog,
    .tl-contact-close,
    .tl-social-link,
    .tl-newsletter-btn {

        transition: none;

    }

}