/* Site ads — responsive banner placements */
.site-ad {
    --site-ad-margin-top: 1rem;
    --site-ad-margin-bottom: 1rem;
    --site-ad-aspect-ratio: 6;
    display: block;
    box-sizing: border-box;
    margin-top: var(--site-ad-margin-top);
    margin-bottom: var(--site-ad-margin-bottom);
}

.site-ad.container {
    margin-left: auto;
    margin-right: auto;
}

.site-ad--width-narrow {
    max-width: 800px;
}

.site-ad--width-custom {
    max-width: var(--site-ad-max-width, 100%);
}

/* عرض کامل فقط وقتی bootstrap container روی بنر نیست */
.site-ad.site-ad--width-full:not(.container) {
    width: 100%;
    max-width: 100%;
}

.site-ad__link {
    display: block;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
}

.site-ad__link:hover,
.site-ad__link:focus-visible {
    transform: none;
    border: none;
    box-shadow: none;
    outline: none;
}

.site-ad__picture {
    display: block;
    width: 100%;
    position: relative;
    background: none;
    border: none;
}

.site-ad.is-img-loading .site-ad__picture {
    aspect-ratio: var(--site-ad-aspect-ratio);
    min-height: 72px;
}

.site-ad__spinner {
    display: none;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    pointer-events: none;
    box-sizing: border-box;
    width: var(--spinner-size-sm, 1.5rem);
    height: var(--spinner-size-sm, 1.5rem);
    border-radius: 50%;
    border: var(--spinner-border-sm, 2px) solid var(--loader-track, #e9ecef);
    border-left-color: var(--loader-accent, var(--C3, #fed404));
    animation: ng-spinner-spin var(--spinner-duration, 0.75s) linear infinite;
}

.site-ad.is-img-loading .site-ad__spinner {
    display: block;
}

.site-ad__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: none;
    background: none;
}

.site-ad.is-img-loading .site-ad__img {
    opacity: 0;
}