/* ==========================================================
   contact.css — تواصل معنا (3 أزرار روابط: اتصال / واتساب / الموقع)
   ========================================================== */
:root {
    --ebmnt1-contact-bg: var(--ebmnt1-color-white);
    --ebmnt1-contact-text-color: var(--ebmnt1-color-text-muted);
    --ebmnt1-contact-gap: 1.25rem;
    --ebmnt1-contact-card-bg: var(--ebmnt1-color-surface-light);
    --ebmnt1-contact-card-border: var(--ebmnt1-color-line-light);
    --ebmnt1-contact-card-shadow: var(--ebmnt1-color-shadow);
    --ebmnt1-contact-title-color: var(--ebmnt1-color-secondary);
    --ebmnt1-contact-title-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --ebmnt1-contact-sub-color: var(--ebmnt1-color-text-muted);
    --ebmnt1-contact-arrow-color: var(--ebmnt1-color-secondary);
    --ebmnt1-contact-arrow-bg: var(--ebmnt1-color-white);
    --ebmnt1-contact-phone-icon-bg: var(--ebmnt1-color-primary);
    --ebmnt1-contact-phone-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-contact-phone-hover-bg: var(--ebmnt1-color-primary);
    --ebmnt1-contact-whatsapp-icon-bg: var(--ebmnt1-color-whatsapp);
    --ebmnt1-contact-whatsapp-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-contact-whatsapp-hover-bg: var(--ebmnt1-color-whatsapp);
    --ebmnt1-contact-map-icon-bg: var(--ebmnt1-color-secondary);
    --ebmnt1-contact-map-icon-color: var(--ebmnt1-color-helper);
    --ebmnt1-contact-map-hover-bg: var(--ebmnt1-color-secondary);
    --ebmnt1-contact-hover-title-color: var(--ebmnt1-color-white);
    --ebmnt1-contact-hover-sub-color: var(--ebmnt1-color-text-muted-on-dark);
}

.ebmnt1-contact {
    background-color: var(--ebmnt1-contact-bg);
}

.ebmnt1-contact__text {
    max-width: 40rem;
    color: var(--ebmnt1-contact-text-color);
}

.ebmnt1-contact__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-contact-gap);
}

.ebmnt1-contact__link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.1em 1.25em;
    text-align: start;
    background-color: var(--ebmnt1-contact-card-bg);
    border: 1px solid var(--ebmnt1-contact-card-border);
    border-radius: var(--ebmnt1-layout-radius-card);
    transition: transform var(--ebmnt1-layout-transition), box-shadow var(--ebmnt1-layout-transition);
}

.ebmnt1-contact__link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: var(--ebmnt1-contact-link-hover-bg);
    transform: translateY(101%);
    transition: transform 0.4s ease;
}

.ebmnt1-contact__link:hover {
    transform: translateY(-0.375rem);
    box-shadow: 0 1rem 2rem var(--ebmnt1-contact-card-shadow);
}

.ebmnt1-contact__link:hover::before {
    transform: none;
}

.ebmnt1-contact__link--phone { --ebmnt1-contact-link-hover-bg: var(--ebmnt1-contact-phone-hover-bg); }
.ebmnt1-contact__link--whatsapp { --ebmnt1-contact-link-hover-bg: var(--ebmnt1-contact-whatsapp-hover-bg); }
.ebmnt1-contact__link--map { --ebmnt1-contact-link-hover-bg: var(--ebmnt1-contact-map-hover-bg); }

.ebmnt1-contact__icon {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 50%;
}

.ebmnt1-contact__link--phone .ebmnt1-contact__icon {
    color: var(--ebmnt1-contact-phone-icon-color);
    background-color: var(--ebmnt1-contact-phone-icon-bg);
}

.ebmnt1-contact__link--whatsapp .ebmnt1-contact__icon {
    color: var(--ebmnt1-contact-whatsapp-icon-color);
    background-color: var(--ebmnt1-contact-whatsapp-icon-bg);
}

.ebmnt1-contact__link--map .ebmnt1-contact__icon {
    color: var(--ebmnt1-contact-map-icon-color);
    background-color: var(--ebmnt1-contact-map-icon-bg);
}

.ebmnt1-contact__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.ebmnt1-contact__title {
    font-size: var(--ebmnt1-contact-title-size);
    font-weight: 700;
    color: var(--ebmnt1-contact-title-color);
    transition: color var(--ebmnt1-layout-transition);
}

.ebmnt1-contact__sub {
    font-size: 0.95rem;
    color: var(--ebmnt1-contact-sub-color);
    transition: color var(--ebmnt1-layout-transition);
}

.ebmnt1-contact__link:hover .ebmnt1-contact__title {
    color: var(--ebmnt1-contact-hover-title-color);
}

.ebmnt1-contact__link:hover .ebmnt1-contact__sub {
    color: var(--ebmnt1-contact-hover-sub-color);
}

.ebmnt1-contact__arrow {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--ebmnt1-contact-arrow-color);
    background-color: var(--ebmnt1-contact-arrow-bg);
    border-radius: 50%;
    transition: transform var(--ebmnt1-layout-transition);
}

.ebmnt1-contact__link:hover .ebmnt1-contact__arrow {
    transform: translateX(-0.375rem);
}

@media (min-width: 1024px) {
    .ebmnt1-contact__list {
        flex-direction: row;
    }
}