@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   ENGZCTA — Call / WhatsApp CTA Bar
   Namespace  : engzcta
============================================================ */

.engzcta {

    /* عام للسكشن */
    --engzcta-bg:            #0275d8;
    --engzcta-text:          #ffffff;
    --engzcta-title:         #ffffff;
    --engzcta-border:        #ffffff;


    --engzcta-btn-bg:        transparent;
    --engzcta-btn-border:    #ffffff;
    --engzcta-btn-text:      #ffffff;

    --engzcta-circle-bg:     var(--engzcta-bg);
    --engzcta-circle-border: #ffffff;
    --engzcta-icon:          #ffffff;


    --engzcta-padding-top:    0.5rem;
    --engzcta-padding-bottom: 1.5rem;
}

.engzcta--white {
    --engzcta-bg:            #ffffff;
    --engzcta-text:          #0275d8;
    --engzcta-title:         #0275d8;
    --engzcta-border:        #0275d8;

    --engzcta-btn-bg:        transparent;
    --engzcta-btn-border:    #0275d8;
    --engzcta-btn-text:      #0275d8;

    --engzcta-circle-bg:     var(--engzcta-bg);
    --engzcta-circle-border: #0275d8;
    --engzcta-icon:          #0275d8;
}

/* 2. Reset داخل الـ namespace */
.engzcta,
.engzcta *,
.engzcta *::before,
.engzcta *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 3. Base Styles — Mobile */
.engzcta {
    direction: rtl;
    font-family: "El Messiri", sans-serif;
    background-color: var(--engzcta-bg);
    color: var(--engzcta-text);
    padding-top: var(--engzcta-padding-top);
    padding-bottom: var(--engzcta-padding-bottom);
    padding-inline: 1.25rem;
    width: 100%;
}

.engzcta__container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    max-width: 500px;
    margin-inline: auto;
}


.engzcta__btn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex: 1 1 50%;
    min-width: 0;
    background-color: #fff;
    border: 0.2rem solid var(--engzcta-btn-border);
    border-radius: 6rem;
    padding-block: 0.3rem;

    padding-inline-start: 1rem;
    padding-inline-end: 3.4rem;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.engzcta__btn:hover,
.engzcta__btn:focus-visible {
    transform: translateY(-0.125rem);
    opacity: 0.92;
}

.engzcta__icon-circle {
    position: absolute;
    z-index: 1;
   
    inset-inline-end: -0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    background-color: var(--engzcta-circle-bg);
    border: 0.2rem solid var(--engzcta-circle-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.engzcta__icon {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--engzcta-icon);
}


.engzcta__icon--fa {
    width: auto;
    height: auto;
    font-size: 1.3rem;
    line-height: 1;
}

.engzcta__btn-text {
    font-weight: 900;
    font-size: clamp(0.9rem, 6vw, 1rem);
    color: #0174d8;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
}


@media (max-width: 350px) { 
  .engzcta__btn-text {
    font-weight: 700;
    font-size: 0.7rem;

}
}
@media (min-width: 481px) { /* Small Tablet 481 → 600 */
    .engzcta__container {
        gap: 1.75rem;
    }

    .engzcta__btn {
   
        padding-inline-start: 1.5rem;
        padding-inline-end: 3.8rem;
    }
}

@media (min-width: 601px) { /* Medium Tablet 601 → 768 */
    .engzcta__container {
        justify-content: center;
        gap: 2rem;
    }

    .engzcta__btn {
   
        padding-inline-start: 2.25rem;
    }
}

@media (min-width: 769px) { /* Large Tablet 769 → 1024 */
    .engzcta {
        --engzcta-padding-top: 2rem;
        --engzcta-padding-bottom: 2rem;
    }

    .engzcta__icon-circle {
        width: 3.4rem;
        height: 3.4rem;
    }

    .engzcta__btn-text {
        font-size: 1rem;
    }
}

@media (min-width: 1025px) { 
    .engzcta__container {
        gap: 2.5rem;
    }

    .engzcta__btn {
        padding-block: 0.25rem;
       
        padding-inline-start: 3rem;
    }
}

@media (min-width: 1281px) { 
    .engzcta {
        --engzcta-padding-top: 3rem;
        --engzcta-padding-bottom: 3rem;
    }
}

@media (min-width: 1441px) { 
    .engzcta__icon-circle {
        width: 3.7rem;
        height: 3.7rem;
    }

    .engzcta__icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .engzcta__icon--fa {
        font-size: 1.5rem;
    }

    .engzcta__btn-text {
        font-size: 1.1rem;
    }
}