/* 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;
        --desktop-top-gap: 28px;
        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;
        padding-top: var(--desktop-top-gap) !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: var(--desktop-top-gap);
        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;
    }
}

/* Admin host logged-out login should own the full viewport, overriding shared auth sizing. */
html.is-admin-host:not(.admin-authenticated) body,
html.is-admin-host:not(.admin-authenticated) main,
html.is-admin-host:not(.admin-authenticated) #tab-admin-login {
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.is-admin-host:not(.admin-authenticated),
html.is-admin-host:not(.admin-authenticated) body {
    max-width: none !important;
    overflow-x: hidden !important;
    background: #050a19 !important;
}

html.is-admin-host:not(.admin-authenticated) main,
html.is-admin-host:not(.admin-authenticated) main.flex-grow,
html.is-admin-host:not(.admin-authenticated) #desktop-ad-layout {
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.is-admin-host:not(.admin-authenticated) #tab-admin-login {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        linear-gradient(rgba(4, 8, 20, .55), rgba(4, 8, 20, .72)),
        url('/uploads/loginpage.jpg') center center / cover no-repeat !important;
}

html.is-admin-host:not(.admin-authenticated) .admin-login-brand,
html.is-admin-host:not(.admin-authenticated) #tab-register,
html.is-admin-host:not(.admin-authenticated) #tab-forgot-password,
html.is-admin-host:not(.admin-authenticated) #tab-reset-password,
html.is-admin-host:not(.admin-authenticated) .google-signin-btn,
html.is-admin-host:not(.admin-authenticated) #tab-admin-login .flex.justify-between.text-xs {
    display: none !important;
}

html.is-admin-host:not(.admin-authenticated) #tab-admin-login .glass-card {
    margin: 0 auto !important;
    max-width: 420px !important;
    width: min(420px, calc(100vw - 32px)) !important;
}

html.is-admin-host.admin-auth-loading #tab-admin-login,
html.is-admin-host.admin-auth-loading #tab-admin-dashboard,
html.is-admin-host.admin-auth-loading .admin-shell-sidebar,
html.is-admin-host.admin-auth-loading .admin-shell-topbar {
    display: none !important;
}

html.is-admin-host.admin-auth-loading body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #050a19;
}

html.is-admin-host:not(.admin-authenticated) #tab-admin-login.hidden {
    display: none !important;
}

/* The actual admin sidebar DOM is aside.admin-shell-sidebar > nav#admin-subtabs-container.admin-subtabs. */
html.is-admin-host.admin-authenticated .admin-shell-sidebar {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html.is-admin-host.admin-authenticated .admin-sidebar-brand {
    flex: 0 0 auto;
}

html.is-admin-host.admin-authenticated #admin-subtabs-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 24px;
}

html.is-admin-host.admin-authenticated #admin-sidebar-user-card,
html.is-admin-host.admin-authenticated .admin-sidebar-user {
    flex: 0 0 auto;
}

html.is-admin-host .admin-listing-management-card__thumb--placeholder {
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, rgba(148, 163, 184, .18), rgba(15, 23, 42, .34)) !important;
    color: rgba(226, 232, 240, .72) !important;
    font-size: 1.35rem !important;
}