/* Telerm Core Web Vitals safeguards.
 * These rules reserve layout space only. AdSense markup, slot IDs,
 * responsive behavior and loading scripts remain unchanged.
 */
html {
    scrollbar-gutter: stable;
}

.topbar,
.topbar .logo,
.topbar .logo > a {
    min-height: 60px;
}

.topbar .logo > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.topbar .logo img {
    display: block;
    width: auto;
    height: 60px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    object-fit: contain;
}

.coupon-card .card-thumb {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    margin-inline: auto;
}

.coupon-card .card-thumb img {
    display: block;
    width: 80px !important;
    height: 80px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.telerm-ad-placement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 250px;
    contain: layout style;
}

.telerm-ad-placement--display {
    min-height: 250px;
}

.telerm-ad-placement--in-feed,
.telerm-ad-placement--in-article {
    min-height: 280px;
}

.telerm-ad-placement--multiplex {
    min-height: 320px;
}

.telerm-ad-placement > .adsbygoogle,
.telerm-ad-placement > ins.adsbygoogle {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
}

@media (max-width: 575px) {
    .telerm-ad-placement--display,
    .telerm-ad-placement--in-article {
        min-height: 280px;
    }

    .telerm-ad-placement--in-feed {
        min-height: 320px;
    }

    .telerm-ad-placement--multiplex {
        min-height: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Reserve the final mobile height of the featured subscription panel while
 * the Arabic web font is loading, so the featured card stays in place. */
@media (max-width: 575px) {
    .featured-subscription {
        min-height: 184px;
    }

    .featured-subscription__text {
        min-height: 96px;
    }
}

/* The above-the-fold featured card must be stable immediately; its previous
 * fade-in translated the whole card outside the viewport and generated CLS. */
.col-md-12 > a > .coupon-card.wow {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}