/* ==========================================================
   cta-fixed.css — CTA ثابت (واتساب + اتصال) أسفل يسار الشاشة
   ========================================================== */
:root {
    --ebmnt1-ctafixed-gap: 0.6rem;
    --ebmnt1-ctafixed-offset: 1rem;
    --ebmnt1-ctafixed-z: 90;
    --ebmnt1-ctafixed-bg: rgba(22, 26, 45, 0.82);
    --ebmnt1-ctafixed-border: var(--ebmnt1-color-glass-border);
    --ebmnt1-ctafixed-shadow: rgba(0, 0, 0, 0.35);
    --ebmnt1-ctafixed-text-color: var(--ebmnt1-color-white);
    --ebmnt1-ctafixed-text-size: 0.95rem;
    --ebmnt1-ctafixed-whatsapp-icon-bg: var(--ebmnt1-color-whatsapp);
    --ebmnt1-ctafixed-whatsapp-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-ctafixed-whatsapp-pulse: var(--ebmnt1-color-whatsapp);
    --ebmnt1-ctafixed-phone-icon-bg: var(--ebmnt1-color-helper);
    --ebmnt1-ctafixed-phone-icon-color: var(--ebmnt1-color-helper-text);
    --ebmnt1-ctafixed-phone-pulse: var(--ebmnt1-color-helper);
}

.ebmnt1-ctafixed {
    position: fixed;
    z-index: var(--ebmnt1-ctafixed-z);
    bottom: var(--ebmnt1-ctafixed-offset);
    inset-inline-end: var(--ebmnt1-ctafixed-offset);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ebmnt1-ctafixed-gap);
    transition: transform 0.4s ease, opacity 0.4s ease;
    animation: ebmnt1CtaIn 0.7s ease 1.2s backwards;
}

.ebmnt1-ctafixed.ebmnt1-is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(150%);
}

.ebmnt1-ctafixed__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4rem 1.1rem 0.4rem 0.4rem;
    font-size: var(--ebmnt1-ctafixed-text-size);
    font-weight: 700;
    color: var(--ebmnt1-ctafixed-text-color);
    background-color: var(--ebmnt1-ctafixed-bg);
    border: 1px solid var(--ebmnt1-ctafixed-border);
    border-radius: var(--ebmnt1-layout-radius-pill);
    box-shadow: 0 0.5rem 1.25rem var(--ebmnt1-ctafixed-shadow);
    backdrop-filter: blur(14px);
    transition: transform var(--ebmnt1-layout-transition);
}

.ebmnt1-ctafixed__button:hover {
    transform: translateX(0.375rem) scale(1.03);
}

.ebmnt1-ctafixed__icon {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border-radius: 50%;
}

.ebmnt1-ctafixed__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ebmnt1-ctafixed-pulse);
    animation: ebmnt1CtaPulse 2.5s ease-out infinite;
}

.ebmnt1-ctafixed__button--whatsapp .ebmnt1-ctafixed__icon {
    --ebmnt1-ctafixed-pulse: var(--ebmnt1-ctafixed-whatsapp-pulse);
    color: var(--ebmnt1-ctafixed-whatsapp-icon-color);
    background-color: var(--ebmnt1-ctafixed-whatsapp-icon-bg);
}

.ebmnt1-ctafixed__button--phone .ebmnt1-ctafixed__icon {
    --ebmnt1-ctafixed-pulse: var(--ebmnt1-ctafixed-phone-pulse);
    color: var(--ebmnt1-ctafixed-phone-icon-color);
    background-color: var(--ebmnt1-ctafixed-phone-icon-bg);
}

.ebmnt1-ctafixed__button--phone .ebmnt1-ctafixed__icon::after {
    animation-delay: 1.2s;
}

@keyframes ebmnt1CtaPulse {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.6); opacity: 0; }
}

@keyframes ebmnt1CtaIn {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: none; }
}

/* الشاشات الصغيرة: أيقونات فقط، ويتمدد الزر للنص عند اللمس/التركيز */
@media (max-width: 767px) {
    .ebmnt1-ctafixed__label {
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        opacity: 0;
        transition: max-width 0.35s ease, opacity 0.35s ease;
    }

    .ebmnt1-ctafixed__button {
        padding-inline-end: 0.4rem;
    }

    .ebmnt1-ctafixed__button:hover,
    .ebmnt1-ctafixed__button:focus-visible {
        padding-inline-end: 1.1rem;
    }

    .ebmnt1-ctafixed__button:hover .ebmnt1-ctafixed__label,
    .ebmnt1-ctafixed__button:focus-visible .ebmnt1-ctafixed__label {
        max-width: 9rem;
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .ebmnt1-ctafixed {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }
}
