/* =============================================================================
   ads.css: Google ads for guests and Standard accounts (js/ads.js).
   Every ad carries the word "Advertisement" (one of the two labels Google
   allows), sits in its own box and keeps clear of buttons. Follows
   docs/design/DESIGN-RULES.md: plain labels, standard buttons.
   ============================================================================= */

/* An ad that isn't showing takes no room (the attribute alone can lose to a
   display rule elsewhere) */
.mm-ad[hidden] { display: none !important; }

.mm-ad {
    display: block;
    box-sizing: border-box;
    padding: 12px 14px 14px;
    border: 1px solid var(--stroke, rgba(255, 255, 255, 0.06));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

/* The same plain, muted label as the house ad's "Ad" tag (css/swipe.css) */
.mm-ad-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #9CA3AF);
}

/* Room for the ad while it loads, so the page doesn't jump */
.mm-ad-slot {
    display: block;
    width: 100%;
    min-height: 90px;
}
.mm-ad-unit { width: 100%; }

/* Swipe page: under the full-screen deck, well away from Like and Pass */
.mm-ad--banner {
    position: relative;
    z-index: 1;
    width: min(970px, calc(100% - 32px));
    margin: 40px auto 32px;
}

/* Garage: between the totals and the saved cars, with clear space on both
   sides (free members' totals row ends in a link tile to Pricing) */
.mm-ad--garage {
    width: 100%;
    margin: 32px 0;
}

/* ---------- The ad card in the swipe deck ----------
   A Google ad is never dragged: the card stays put, Like and Pass step aside
   and one "Next car" button (below the card, with a gap) moves on. */
.sw-card.sw-ad-real.is-top {
    cursor: default;
    touch-action: auto;
}
.sw-ad-real .sw-stamp,
.sw-ad-real .sw-wash { display: none; }

.sw-ad-real .sw-ad-body {
    justify-content: center;
    gap: 10px;
    padding: 44px 16px 24px;
}
/* The label sits in the top corner like the house ad's "Ad" tag */
.sw-ad-real .sw-ad-tag { margin: 0; }
.sw-ad-real .sw-ad-slot {
    width: 100%;
    max-width: 336px;
    min-height: 200px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}
.sw-ad-real .sw-ad-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-tertiary, #8A919E);
}

/* A standard secondary button (DESIGN-RULES.md), as wide as Like and Pass together */
.sw-next-ad {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 62px;
    padding: 0 28px;
    border-radius: var(--radius-btn, 10px);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
    background: transparent;
    color: var(--text, #F9FAFB);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--dur-short, 150ms) var(--ease-out, ease-out),
        border-color var(--dur-short, 150ms) var(--ease-out, ease-out);
}
.sw-next-ad:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--field-border, #6B7280); }
.sw-next-ad:disabled { opacity: 0.4; cursor: not-allowed; }

.sw-actions.is-ad .sw-btn { display: none; }
.sw-actions.is-ad .sw-next-ad { display: inline-flex; }
.sw-deck-col.is-ad .sw-hint { visibility: hidden; }

@media (max-width: 640px) {
    .sw-next-ad { height: 64px; }
    .mm-ad--banner { margin-top: 32px; }
}