/* ==========================================================
   contact — الأرنب والجواب + 3 كاردات (هاتف / واتساب / الموقع) كل كارد لينك
   ========================================================== */

:root {
    --ebmnt1-contact-background: var(--ebmnt1-color-helper-beige);
    --ebmnt1-contact-title-color: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-contact-subtitle-color: var(--ebmnt1-color-text);
    --ebmnt1-contact-bubble-background: var(--ebmnt1-color-helper-bubble);
    --ebmnt1-contact-bubble-text-color: var(--ebmnt1-color-white);
    --ebmnt1-contact-panel-background: var(--ebmnt1-color-white);
    --ebmnt1-contact-panel-border-color: var(--ebmnt1-color-helper-beige-border);
    --ebmnt1-contact-panel-title-color: var(--ebmnt1-color-text);
    --ebmnt1-contact-card-background: var(--ebmnt1-color-white);
    --ebmnt1-contact-card-border-color: var(--ebmnt1-color-helper-pink-soft);
    --ebmnt1-contact-card-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-contact-card-title-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-contact-card-value-color: var(--ebmnt1-color-text);
    --ebmnt1-contact-card-arrow-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-contact-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-contact-icon-background-phone: var(--ebmnt1-color-primary);
    --ebmnt1-contact-icon-background-whatsapp: var(--ebmnt1-color-whatsapp);
    --ebmnt1-contact-icon-background-location: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-contact-extra-background: var(--ebmnt1-color-helper-sky);
    --ebmnt1-contact-extra-text-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-contact-extra-icon-color: var(--ebmnt1-color-helper-sky-strong);
    --ebmnt1-contact-font-size-title: clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
    --ebmnt1-contact-font-size-card-title: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
    --ebmnt1-contact-font-size-card-value: clamp(0.88rem, 0.82rem + 0.3vw, 1.05rem);
}

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

.ebmnt1-contact__layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6em;
}

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

.ebmnt1-contact__subtitle {
    color: var(--ebmnt1-contact-subtitle-color);
}

/* الأرنب + الفقاعة */
.ebmnt1-contact__mascot {
    position: relative;
    width: min(100%, 22rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ebmnt1-contact__bubble {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.6rem 1.4rem;
    border-radius: 55% 45% 50% 50% / 60% 55% 45% 40%;
    background-color: var(--ebmnt1-contact-bubble-background);
    box-shadow: 0.5rem -0.3rem 0 -0.15rem var(--ebmnt1-contact-bubble-background), -0.4rem 0.4rem 0 -0.2rem var(--ebmnt1-contact-bubble-background);
    color: var(--ebmnt1-contact-bubble-text-color);
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    transform: translate(2.4rem, 1.4rem);
    animation: ebmnt1-contact-bubble-bob 4s ease-in-out infinite;
}

.ebmnt1-contact__rabbit {
    width: 100%;
    height: auto;
    animation: ebmnt1-contact-rabbit-wave 5s ease-in-out infinite;
    transform-origin: 50% 90%;
}

.ebmnt1-contact__panel {
    width: 100%;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8em;
    padding: clamp(1rem, 0.8rem + 1.5vw, 1.8rem);
    border-radius: 1.4rem;
    background-color: var(--ebmnt1-contact-panel-background);
    border: 2px solid var(--ebmnt1-contact-panel-border-color);
}

/* عنوان بشكل legend داخل حدود اللوحة مثل "Contact Us" في التصميم */
.ebmnt1-contact__panel {
    position: relative;
    margin-top: 0.9rem;
    padding-top: 1.6rem;
}

.ebmnt1-contact__panel-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -52%);
    padding-inline: 0.8em;
    background-color: var(--ebmnt1-contact-background);
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    font-weight: 500;
    color: var(--ebmnt1-contact-panel-title-color);
    white-space: nowrap;
}

.ebmnt1-contact__card {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.8em 1em;
    border-radius: 1rem;
    background-color: var(--ebmnt1-contact-card-background);
    border: 2px solid var(--ebmnt1-contact-card-border-color);
    text-align: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ebmnt1-contact__card:hover {
    transform: translateX(-0.3rem) translateY(-0.2rem);
    box-shadow: 0 0.8rem 1.2rem -0.8rem var(--ebmnt1-contact-card-shadow-color);
    border-color: var(--ebmnt1-contact-card-arrow-color);
}

.ebmnt1-contact__card-head {
    display: flex;
    align-items: center;
    gap: 0.8em;
}

.ebmnt1-contact__card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: var(--ebmnt1-contact-icon-color);
    font-size: 1.25rem;
}

.ebmnt1-contact__card-icon i {
    color: var(--ebmnt1-contact-icon-color);
}

.ebmnt1-contact__card--phone .ebmnt1-contact__card-icon { background-color: var(--ebmnt1-contact-icon-background-phone); }
.ebmnt1-contact__card--whatsapp .ebmnt1-contact__card-icon { background-color: var(--ebmnt1-contact-icon-background-whatsapp); }
.ebmnt1-contact__card--location .ebmnt1-contact__card-icon { background-color: var(--ebmnt1-contact-icon-background-location); }

.ebmnt1-contact__card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.ebmnt1-contact__card-title {
    font-size: var(--ebmnt1-contact-font-size-card-title);
    color: var(--ebmnt1-contact-card-title-color);
}

.ebmnt1-contact__card-value {
    font-size: var(--ebmnt1-contact-font-size-card-value);
    color: var(--ebmnt1-contact-card-value-color);
}

.ebmnt1-contact__card-value--ltr {
    direction: ltr;
    text-align: start;
    unicode-bidi: plaintext;
}

.ebmnt1-contact__card-arrow {
    color: var(--ebmnt1-contact-card-arrow-color);
}

.ebmnt1-contact__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-size: var(--ebmnt1-contact-font-size-card-value);
    color: var(--ebmnt1-contact-extra-text-color);
}

.ebmnt1-contact__extra-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    background-color: var(--ebmnt1-contact-extra-background);
    color: var(--ebmnt1-contact-extra-text-color);
    font-weight: 700;
    direction: ltr;
}

.ebmnt1-contact__extra-link i {
    color: var(--ebmnt1-contact-extra-icon-color);
}

@keyframes ebmnt1-contact-bubble-bob {
    0%, 100% { transform: translate(2.4rem, 1.4rem); }
    50% { transform: translate(2.4rem, 0.9rem); }
}

@keyframes ebmnt1-contact-rabbit-wave {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ebmnt1-contact__bubble,
    .ebmnt1-contact__rabbit { animation: none; }
}

@media (min-width: 768px) {
    .ebmnt1-contact__layout {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3em;
    }

    .ebmnt1-contact__panel {
        flex: 1;
    }

    .ebmnt1-contact__mascot {
        flex: 0 0 min(40%, 22rem);
    }
}