/* Ads component stylesheet for BestHome.az stabilization phase. */

@media (max-width: 1279px) {
    .ad-rail,
    .left-ad-rail,
    .right-ad-rail,
    .desktop-ad,
    .side-ad,
    .desktop-ad-rail,
    #desktop-left-ads,
    #desktop-right-ads {
        display: none !important;
    }

    .ad-content-grid,
    .ad-content-grid.has-ads,
    .page-with-ads,
    .desktop-ad-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.desktop-ad-layout {
    width: 100%;
}

.desktop-ad-rail {
    display: none;
}

@media (min-width: 1280px) {
    .page-with-ads,
    .desktop-ad-layout {
        --ad-width: 160px;
        --ad-height: 560px;
        display: grid;
        grid-template-columns: var(--ad-width) minmax(0, 1fr) var(--ad-width);
        gap: 14px;
        align-items: stretch;
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 12px;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .page-with-ads > main,
    .desktop-ad-layout > main {
        min-width: 0;
        width: 100%;
        max-width: min(100%, 1280px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-self: center;
    }

    #desktop-left-ads,
    #desktop-right-ads,
    .desktop-ad-rail {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: var(--ad-width) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100% !important;
        padding-top: 28px;
        box-sizing: border-box;
        align-self: stretch !important;
        background-color: transparent !important;
        border-radius: 1rem;
        overflow: hidden;
        z-index: auto !important;
    }

    .desktop-ad-rail.is-loading::before {
        content: '';
        display: block;
        width: 100%;
        height: var(--ad-height);
        border-radius: 1rem;
        border: 1px solid rgba(207, 207, 255, 0.75);
        box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
    }
}

@media (min-width: 1440px) {
    .page-with-ads,
    .desktop-ad-layout {
        --ad-width: 160px;
        --ad-height: 560px;
        grid-template-columns: var(--ad-width) minmax(0, 1fr) var(--ad-width);
        gap: 18px;
        padding: 0 16px;
    }

    .page-with-ads > main,
    .desktop-ad-layout > main {
        max-width: min(100%, 1280px) !important;
    }
}

@media (min-width: 1600px) {
    .page-with-ads,
    .desktop-ad-layout {
        --ad-width: 160px;
        --ad-height: 560px;
        grid-template-columns: var(--ad-width) minmax(0, 1fr) var(--ad-width);
        gap: 24px;
        max-width: 1640px;
    }

    .page-with-ads > main,
    .desktop-ad-layout > main {
        max-width: min(100%, 1280px) !important;
    }
}

.desktop-ad-card {
    width: var(--ad-width);
    max-width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(207, 207, 255, 0.75);
    background-color: rgba(248, 250, 252, 0.88);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.10);
    cursor: pointer;
    transform: translateY(var(--desktop-ad-translate-y, 0px));
    will-change: transform;
    transition: box-shadow 180ms ease;
}
.desktop-ad-card:hover {
    box-shadow: 0 22px 45px rgba(127, 127, 255, 0.18);
}
.desktop-ad-card img,
.desktop-ad-card video {
    display: block;
}
.desktop-ad-card--responsive {
    width: var(--ad-width);
    max-width: 100%;
    position: static !important;
}
.desktop-ad-stage {
    display: grid;
    width: var(--ad-width);
    max-width: 100%;
    height: var(--ad-height);
    overflow: hidden;
    background: transparent;
}
.desktop-ad-layer {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    background: transparent;
    transition: opacity 400ms ease;
}
.desktop-ad-layer.is-visible {
    opacity: 1;
}
.desktop-ad-media {
    width: var(--ad-width) !important;
    height: var(--ad-height) !important;
    max-width: 100%;
    aspect-ratio: var(--ad-width) / var(--ad-height);
    object-fit: var(--ad-object-fit, cover) !important;
    background: transparent;
}
.desktop-ad-label {
    padding: .55rem .65rem;
    font-size: .65rem;
    font-weight: 800;
    color: #475569;
    line-height: 1.2;
}

html[data-theme="dark"] .desktop-ad-layout {
    background: var(--dark-page) !important;
}
html[data-theme="dark"] .desktop-ad-rail.is-loading::before {
    background: var(--dark-surface) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34) !important;
}
html[data-theme="dark"] .desktop-ad-card:hover {
    border-color: rgba(124, 108, 255, .50) !important;
    box-shadow: 0 24px 52px rgba(0, 0, 0, .42), 0 0 0 1px rgba(124, 108, 255, .16) !important;
}
html[data-theme="dark"] .desktop-ad-label {
    color: var(--dark-text-2) !important;
    background: var(--dark-surface) !important;
}

/* Auth stabilization: keep auth panels compact without changing existing IDs/classes. */
#tab-admin-login,
#tab-register,
#tab-forgot-password,
#tab-reset-password {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (max-width: 640px) {
    #tab-admin-login,
    #tab-register,
    #tab-forgot-password,
    #tab-reset-password {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: .75rem;
        padding-right: .75rem;
    }
}