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

.ebtb8 {
    --ebtb8-bg: #f7f9f5;
    --ebtb8-text: #33342e;
    --ebtb8-border: #e3e8dc;

    --ebtb8-contact-icon: #6b7d5f;
    --ebtb8-contact-icon-hover: #c98a63;
    --ebtb8-contact-text: #33342e;
    --ebtb8-contact-text-hover: #6b7d5f;

    --ebtb8-announce-icon: #c98a63;
    --ebtb8-announce-text: #4a5343;

    --ebtb8-hours-icon: #6b7d5f;
    --ebtb8-hours-text: #6f7268;

    --ebtb8-social-icon: #6b7d5f;
    --ebtb8-social-icon-hover: #ffffff;
    --ebtb8-social-bg: #eef2ea;
    --ebtb8-social-bg-hover: #7d9270;
    --ebtb8-social-border: transparent;

    --ebtb8-close-icon: #6b7d5f;
    --ebtb8-close-icon-hover: #ffffff;
    --ebtb8-close-bg: #ffffff;
    --ebtb8-close-bg-hover: #c98a63;

    --ebtb8-padding-top: 0.2rem;
    --ebtb8-padding-bottom: 0.2rem;
}

*, .ebtb8 *, .ebtb8 *::before, .ebtb8 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@keyframes ebtb8-rise {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.ebtb8 {
    position: relative;
    width: 100%;
    background: var(--ebtb8-bg);
    color: var(--ebtb8-text);
    font-family: "El Messiri", sans-serif;
    padding-top: var(--ebtb8-padding-top);
    padding-bottom: var(--ebtb8-padding-bottom);
    overflow: hidden;
    animation: ebtb8-rise 0.7s ease-out both;
}

.ebtb8--hidden {
    display: none;
}

.ebtb8__shape-1,
.ebtb8__shape-2 {
    position: absolute;
    border-radius: 50%;
    background: var(--ebtb8-border);
    opacity: 0.5;
    pointer-events: none;
}
.ebtb8__shape-1 {
    width: 6rem;
    height: 6rem;
    top: -3rem;
    inset-inline-start: -2rem;
}
.ebtb8__shape-2 {
    width: 4rem;
    height: 4rem;
    bottom: -2.5rem;
    inset-inline-end: 8%;
}

.ebtb8__container {
    max-width: 100%;
    margin: 0 auto;
    padding-inline: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
}

/* الإعلان — أول عنصر بصريًا */
.ebtb8__announcement {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: #ffffff;
    border-radius: 999rem;
    padding: 0.4rem 1rem;
    text-align: center;
    width: 100%;
}
.ebtb8__announce-icon {
    color: var(--ebtb8-announce-icon);
    font-size: 0.75em;
}
.ebtb8__announcement-item {
    display: none;
    color: var(--ebtb8-announce-text);
    font-size: clamp(0.7rem, 2.6vw, 0.8rem);
    font-weight: 500;
}
.ebtb8__announcement-item.ebtb8--active {
    display: inline-block;
}

/* التواصل */
.ebtb8__contact {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ebtb8__contact-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--ebtb8-contact-text);
    background: var(--ebtb8-social-bg);
    border-radius: 999rem;
    padding: 0.3rem 0.75rem;
    font-size: clamp(0.65rem, 2.4vw, 0.74rem);
    transition: color 0.25s ease;
}
.ebtb8__contact-item:hover {
    color: var(--ebtb8-contact-text-hover);
}
.ebtb8__contact-icon {
    color: var(--ebtb8-contact-icon);
    font-size: 0.85em;
    transition: color 0.25s ease;
}
.ebtb8__contact-item:hover .ebtb8__contact-icon {
    color: var(--ebtb8-contact-icon-hover);
}


.ebtb8__meta {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ebtb8__hours {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: clamp(0.65rem, 2.4vw, 0.74rem);
    color: var(--ebtb8-hours-text);
    background: var(--ebtb8-social-bg);
    border-radius: 999rem;
    padding: 0.3rem 0.75rem;
}
.ebtb8__hours-icon {
    color: var(--ebtb8-hours-icon);
    font-size: 0.85em;
}

.ebtb8__socials {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
}
.ebtb8__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--ebtb8-social-bg);
    border: none;
    color: var(--ebtb8-social-icon);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}
.ebtb8__social-link:hover {
    background: var(--ebtb8-social-bg-hover);
    color: var(--ebtb8-social-icon-hover);
}



/* ============ Breakpoints ============ */
@media (min-width: 481px) {
    .ebtb8__announcement { width: auto; order: 2; }
    .ebtb8__contact { order: 1; }
}

@media (min-width: 601px) {
    .ebtb8__container { padding-inline: 1.8rem; gap: 1rem; }
}

@media (min-width: 769px) {
    .ebtb8__container { justify-content: space-between; flex-wrap: nowrap; }
    .ebtb8__contact { order: 1; }
    .ebtb8__announcement { order: 2; flex: 1 1 auto; max-width: 26rem; }
    .ebtb8__meta { order: 3; }
    .ebtb8__close { position: static; margin-inline-start: 0.4rem; }
}

@media (min-width: 1025px) {
    .ebtb8__container { padding-inline: 2.2rem; }
    .ebtb8__social-link { width: 2.1rem; height: 2.1rem; }
}

@media (min-width: 1281px) {
    .ebtb8__container { max-width: 90rem; gap: 1.4rem; }
}

@media (min-width: 1441px) {
    .ebtb8__container { padding-inline: 2.8rem; }
}

@media (min-width: 1921px) {
    .ebtb8__container { max-width: 110rem; }
    .ebtb8__announcement-item { font-size: 0.9rem; }
}