/* Mobile: smaller text + full-width content */
@media (max-width: 768px) {
    /* ensure the content area can use the full phone width */
    .page-content.page-content-70 {
        width: 100% !important;
        padding-inline: 12px !important; /* optional comfy side padding */
    }

    /* only shrink the banner text (keep original design) */
    .top-banner {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
        /* make sure children inherit the smaller size and wrap */
        .top-banner .top-banner-section-right,
        .top-banner .top-banner-section-right span,
        .top-banner .top-banner-section-right a {
            font-size: inherit !important;
            white-space: normal !important; /* allow full-width wrapping */
        }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .top-banner {
        font-size: 0.85rem !important;
    }
}


/* Mobile: stack halves + smaller text */
@media (max-width: 768px) {
    /* force one column regardless of current layout */
    .top-banner .top-banner-content {
        display: block !important; /* overrides flex/grid two-columns */
    }

    .top-banner .top-banner-section-half {
        width: 100% !important; /* no longer half width */
        max-width: 100% !important;
        flex: 0 0 100% !important; /* if parent is flex */
        box-sizing: border-box;
        margin-block: 6px; /* small vertical gap */
    }

    /* smaller, wrapping text */
    .top-banner .top-banner-section-right {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        min-width: 0;
    }

        .top-banner .top-banner-section-right span,
        .top-banner .top-banner-section-right a {
            white-space: normal !important;
        }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .top-banner .top-banner-section-right {
        font-size: 0.85rem !important;
    }
}
@media (max-width: 768px) {
    /* Center ONLY the second half (text + next icon) */
    .top-banner .top-banner-section-half:last-child {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px;
        text-align: center;
        width: 100%;
    }

        .top-banner .top-banner-section-half:last-child .top-banner-section-right {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 0.9rem; /* keep smaller text */
            line-height: 1.5;
        }

        .top-banner .top-banner-section-half:last-child .download-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            .top-banner .top-banner-section-half:last-child .download-icon .action-icon {
                width: 24px;
                height: auto;
            }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .top-banner .top-banner-section-half:last-child .top-banner-section-right {
        font-size: 0.85rem;
    }
}
@media (max-width: 768px) {
    /* Only the “عودة الى تفاصيل الاعلان عن المباراة” block */
    .top-banner .top-banner-section-half:last-child {
        display: flex !important;
        flex-direction: column !important; /* put icon under text */
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px;
        width: 100%;
    }

        .top-banner .top-banner-section-half:last-child .top-banner-section-right {
            order: 1; /* text first */
            font-size: 0.9rem; /* keep smaller font on mobile */
            line-height: 1.5;
            width: 100%;
        }

        .top-banner .top-banner-section-half:last-child .download-icon {
            order: 2; /* icon second (under text) */
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .top-banner .top-banner-section-half:last-child .download-icon .action-icon {
                width: 24px;
                height: auto;
            }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .top-banner .top-banner-section-half:last-child .top-banner-section-right {
        font-size: 0.85rem;
    }
}