/* ==========================================================
   ebmnt1-button.css — الأزرار المشتركة
   ========================================================== */

:root {
    --ebmnt1-button-text-color: var(--ebmnt1-color-white);
    --ebmnt1-button-icon-color: var(--ebmnt1-color-white);
    --ebmnt1-button-primary-background: var(--ebmnt1-color-primary);
    --ebmnt1-button-primary-background-hover: var(--ebmnt1-color-primary-dark);
    --ebmnt1-button-secondary-background: var(--ebmnt1-color-secondary);
    --ebmnt1-button-secondary-background-hover: var(--ebmnt1-color-secondary-dark);
    --ebmnt1-button-whatsapp-background: var(--ebmnt1-color-whatsapp);
    --ebmnt1-button-whatsapp-background-hover: var(--ebmnt1-color-whatsapp-dark);
    --ebmnt1-button-outline-text-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-button-outline-border-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-button-outline-background-hover: var(--ebmnt1-color-helper-pink-soft);
    --ebmnt1-button-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-button-stitch-color: rgba(255, 255, 255, 0.75);
    --ebmnt1-button-font-size: clamp(0.78rem, 0.7rem + 0.4vw, 1rem);
}

.ebmnt1-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.7em 1.4em;
    border-radius: 999px;
    border: 2px solid transparent;
    font-size: var(--ebmnt1-button-font-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ebmnt1-button-text-color);
    cursor: pointer;
    box-shadow: 0 0.35em 0 -0.1em var(--ebmnt1-button-shadow-color);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.ebmnt1-button i {
    color: var(--ebmnt1-button-icon-color);
    font-size: 1.15em;
}

.ebmnt1-button:hover {
    transform: translateY(-0.2em) rotate(-1deg);
    box-shadow: 0 0.6em 0 -0.15em var(--ebmnt1-button-shadow-color);
}

.ebmnt1-button:active {
    transform: translateY(0.05em);
    box-shadow: none;
}

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

.ebmnt1-button--primary:hover {
    background-color: var(--ebmnt1-button-primary-background-hover);
}

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

.ebmnt1-button--secondary:hover {
    background-color: var(--ebmnt1-button-secondary-background-hover);
}

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

.ebmnt1-button--whatsapp:hover {
    background-color: var(--ebmnt1-button-whatsapp-background-hover);
}

.ebmnt1-button--outline {
    background-color: transparent;
    color: var(--ebmnt1-button-outline-text-color);
    border-color: var(--ebmnt1-button-outline-border-color);
    box-shadow: none;
}

.ebmnt1-button--outline i {
    color: var(--ebmnt1-button-outline-text-color);
}

.ebmnt1-button--outline:hover {
    background-color: var(--ebmnt1-button-outline-background-hover);
}

/* أزرار مخيّطة (stitched) مأخوذة من تصميم الخدمات */
.ebmnt1-button--stitched {
    border-radius: 0.5rem;
    outline: 2px dashed var(--ebmnt1-button-stitch-color);
    outline-offset: -0.35rem;
    box-shadow: 0 0.3em 0.6em -0.3em var(--ebmnt1-button-shadow-color);
}

.ebmnt1-button--small {
    padding: 0.5em 0.9em;
    font-size: clamp(0.72rem, 0.68rem + 0.25vw, 0.88rem);
}

.ebmnt1-button--block {
    width: 100%;
}

/* حجم مدمج حتى يظهر زرّان جنب بعض في شاشة 320 */
.ebmnt1-button--compact {
    padding: 0.6em 0.9em;
    gap: 0.4em;
    font-size: clamp(0.72rem, 0.62rem + 0.5vw, 1rem);
}

@media (min-width: 425px) {
    .ebmnt1-button--compact {
        padding: 0.7em 1.3em;
    }
}