@use "../abstracts/variables" as vars;

/* ===========================
   Location 2
   =========================== */
.location2 {
    position: relative;
    background-color: vars.$color-white;

    &__subtitle {
        font-family: vars.$font-family-base;
        font-weight: 600;
        font-size: vars.rem(14);
        line-height: 100%;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        display: block;
        margin-bottom: vars.rem(16);
    }

    &__title {
        font-family: vars.$font-family-base;
        font-weight: 800;
        font-size: clamp(vars.rem(28), 4vw + 1rem, vars.rem(48));
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: vars.$color-heading;
        margin-bottom: vars.rem(24);
    }

    &__desc {
        font-family: vars.$font-family-base;
        font-weight: 500;
        font-size: vars.rem(16);
        line-height: vars.rem(28);
        color: vars.$color-text2;
        margin-bottom: vars.rem(40);
    }

    &__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: vars.rem(10);
        background-color: #EFF4F9; // Light grey bg from image
        padding: vars.rem(10);
        border-radius: vars.rem(12);
        margin-bottom: vars.rem(40);
        width: fit-content;

        @media (max-width: 575px) {
            width: 100%;
        }
    }

    &__tab-item {
        padding: vars.rem(12) vars.rem(24);
        border-radius: vars.rem(50);
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(16);
        color: vars.$color-heading;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        background: transparent;

        @media (max-width: 575px) {
            padding: vars.rem(5) vars.rem(5);
            font-size: vars.rem(12);
        }

        &--active {
            background-color: vars.$color-white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        &:hover {
            color: #0073E6;
        }
    }

    &__button {
        display: inline-flex;
        align-items: center;
        background-color: #0073E6;
        color: vars.$color-white;
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: vars.rem(16);
        text-transform: uppercase;
        padding: vars.rem(18) vars.rem(35);
        border-radius: vars.rem(100);
        text-decoration: none;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        z-index: 1;

        // The dark shape at the end
        &::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: vars.rem(60);
            height: 100%;
            background-color: #000;
            clip-path: ellipse(40% 100% at 100% 50%);
            z-index: -1;
            transition: all 0.3s ease;
        }

        i {
            margin-left: vars.rem(15);
            font-size: vars.rem(18);
            position: relative;
            z-index: 2;
        }

        &:hover {
            background-color: #000;
            color: vars.$color-white;

            &::after {
                width: 100%;
                clip-path: ellipse(100% 100% at 50% 50%);
            }
        }
    }

    &__map-wrapper {
        position: relative;
        border-radius: vars.rem(20);
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        background-color: #f0f0f0;

        iframe {
            width: 100%;
            height: auto;
            display: block;
            min-height: vars.rem(407);
            object-fit: cover;
        }
    }

    &__info-box {
        position: absolute;
        bottom: vars.rem(0);
        left: vars.rem(0);
        background-color: vars.$color-white;
        padding: vars.rem(30);
        border-radius: 15px;
        width: vars.rem(300);
        box-shadow: 0px 0px 30px 0px #0000001A;
        z-index: 5;

        @media (max-width: 575px) {
            width: 80%;
            padding: vars.rem(20);
        }
    }

    &__info-address {
        font-family: vars.$font-family-base;
        font-weight: 500;
        font-size: vars.rem(16);
        line-height: 28px;
        color: #000000;
        margin-bottom: vars.rem(15);
        border-bottom: 1px solid #eee;
        padding-bottom: vars.rem(15);
    }

    &__info-phone {
        font-family: vars.$font-family-base;
        font-weight: 500;
        font-size: 16px;
        line-height: 28px;
        color: #000000;
        margin-bottom: vars.rem(20);
        display: block;
        text-decoration: none;
    }

    &__info-link {
        font-family: vars.$font-family-base;
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 2%;
        text-transform: uppercase;
        color: #878C8F;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: vars.rem(10);
        transition: color 0.3s ease;

        &:hover {
            color: #0073E6;
        }
    }

    &__pin {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;

        .pin-main {
            font-size: vars.rem(50);
            color: #0073E6;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-10px);
            }

            60% {
                transform: translateY(-5px);
            }
        }
    }
}