/**
 * File Path: assets/css/mbs-front-pro.css
 * PRO-tier front-end styles (slider, flip, filter, popup, author hero); enqueued only when mbs_is_pro().
 * All .mbs-wrapper-scoped rules use native CSS nesting (Chrome 112+, Firefox 117+, Safari 16.5+);
 * filter and popup @media queries are nested inside their components.
 * Unscoped components (.mbs-author-hero, .mbs-series-banner) remain flat per compat.css §9.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* ==========================================================================
   PRO Layouts and Popup Modal — all .mbs-wrapper-scoped
   ========================================================================== */
.mbs-wrapper {

    /* ── PRO layout base wrappers ────────────────────────────────────────── */

    .mbs-layout-slider,
    .mbs-layout-flip,
    .mbs-layout-filter,
    .mbs-layout-popup {
        margin: 20px 0;
    }

    /* ── Shared card styling for PRO layouts ─────────────────────────────── */

    .mbs-slider-slide,
    .mbs-flip-card,
    .mbs-filter-card,
    .mbs-popup-trigger {
        border: 1px solid var(--mbs-border);
        border-radius: 8px;
        overflow: hidden;
        background: var(--mbs-card-bg);
    }

    /* ── FILTER LAYOUT (Story 9-8) ───────────────────────────────────────── */
    /* Filter bar, filter buttons, filter grid, no-results message.           */

    .mbs-layout-filter {

        /* Filter bar container */
        .mbs-filter-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--mbs-border);

            @media (max-width: 600px) {
                gap: 6px;
            }
        }

        /* Group label (e.g. "Genre", "Series", "Author") */
        .mbs-filter-group-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--mbs-text-light);
            padding: 0 4px;
            margin-left: 8px;

            &:first-of-type {
                margin-left: 0;
            }
        }

        /* Filter buttons */
        .mbs-filter-btn {
            display: inline-flex;
            align-items: center;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.4;
            border: 1px solid var(--mbs-border);
            border-radius: 20px;
            background: transparent;
            color: var(--mbs-text);
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

            &:hover {
                background: var(--mbs-accent);
                border-color: var(--mbs-accent);
                color: #fff;
            }

            &:focus-visible,
            &:focus {
                outline: 2px solid var(--mbs-accent);
                outline-offset: 2px;
            }

            &.mbs-filter-active,
            &[aria-pressed="true"] {
                background: var(--mbs-button-bg);
                border-color: var(--mbs-button-bg);
                color: var(--mbs-button-text);
            }

            @media (max-width: 600px) {
                font-size: 12px;
                padding: 5px 11px;
            }
        }

        /* Filter grid */
        .mbs-filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 24px;

            @media (max-width: 600px) {
                grid-template-columns: 1fr;
            }
        }

        /* Cards hidden by JS get display:none via jQuery .hide() (inline style) —
           no CSS rule needed. jQuery manages visibility entirely via inline style. */

        /* No-results message */
        .mbs-filter-no-results {
            grid-column: 1 / -1;
            text-align: center;
            color: var(--mbs-text-light);
            font-size: 15px;
            padding: 32px 0;
            margin: 0;
        }
    }

    /* ── POPUP LAYOUT (Story 9-9) ────────────────────────────────────────── */
    /* Trigger grid and trigger button — layout-scoped.                        */

    .mbs-layout-popup {

        /* Popup grid — thumbnails that trigger the modal */
        .mbs-popup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;

            @media (max-width: 520px) {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
                gap: 14px;
            }
        }

        /* Trigger button — styled like a card, not a native button.
           Base border/radius/bg from shared card rule above (specificity 0,2,0);
           these layout-specific overrides carry specificity 0,3,0. */
        .mbs-popup-trigger {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            padding: 0;
            background: var(--mbs-card-bg);
            border: 1px solid var(--mbs-border);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            text-align: left;
            transition: box-shadow 0.2s ease, transform 0.15s ease;

            &:hover,
            &:focus-visible,
            &:focus {
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            &:focus-visible,
            &:focus {
                outline: 2px solid var(--mbs-accent);
                outline-offset: 2px;
            }
        }

        /* Title hint shown below the cover thumbnail */
        .mbs-popup-title-hint {
            display: block;
            padding: 8px 10px;
            font-size: 13px;
            font-weight: 600;
            color: var(--mbs-text);
            line-height: 1.3;
        }
    }

    /* ── POPUP MODAL — overlay + dialog (wrapper-scoped, not layout-scoped) ─ */
    /* position:fixed is viewport-relative; these rules live on .mbs-wrapper   */
    /* to preserve MBS selector scoping without restricting visual placement.   */

    /* Hidden by default via [hidden] attribute set in PHP */
    .mbs-popup-modal {
        position: fixed;
        inset: 0;
        z-index: 100000;
        display: flex;
        align-items: center;
        justify-content: center;

        &[hidden] {
            display: none;
        }
    }

    .mbs-popup-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        cursor: pointer;
    }

    /* Dialog box */
    .mbs-popup-dialog {
        position: relative;
        z-index: 1;
        background: var(--mbs-card-bg, #fff);
        border-radius: 10px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        width: min(680px, calc(100vw - 32px));
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 24px;

        @media (max-width: 520px) {
            padding: 18px 16px;
        }
    }

    /* Close button */
    .mbs-popup-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--mbs-border);
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        color: var(--mbs-text-light);
        cursor: pointer;
        padding: 0;
        transition: background 0.15s ease, color 0.15s ease;

        &:hover,
        &:focus-visible,
        &:focus {
            background: var(--mbs-text);
            color: #fff;
            border-color: var(--mbs-text);
        }

        &:focus-visible,
        &:focus {
            outline: 2px solid var(--mbs-accent);
            outline-offset: 2px;
        }
    }

    /* Body: cover image + details side by side */
    .mbs-popup-body {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        margin-top: 8px;

        @media (max-width: 520px) {
            flex-direction: column;
        }
    }

    .mbs-popup-cover {
        flex-shrink: 0;
        width: 140px;

        .mbs-popup-cover-img {
            display: block;
            width: 140px;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        @media (max-width: 520px) {
            width: 100px;

            .mbs-popup-cover-img {
                width: 100px;
            }
        }
    }

    .mbs-popup-details {
        flex: 1;
        min-width: 0;
    }

    /* Typography inside dialog */
    .mbs-popup-book-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--mbs-text);
        margin: 0 0 6px 0;
        padding-right: 40px; /* avoid close-button overlap */
        line-height: 1.3;

        @media (max-width: 520px) {
            font-size: 17px;
            padding-right: 36px;
        }
    }

    .mbs-popup-author {
        font-size: 14px;
        color: var(--mbs-text-light);
        margin: 0 0 4px 0;
    }

    .mbs-popup-meta {
        font-size: 13px;
        color: var(--mbs-text-light);
        margin: 0 0 12px 0;
    }

    .mbs-popup-teaser {
        font-size: 14px;
        color: var(--mbs-text);
        line-height: 1.6;
        margin: 0 0 16px 0;
    }

    /* Formats list */
    .mbs-popup-formats {
        list-style: none;
        margin: 0 0 16px 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;

        li {
            font-size: 12px;
            font-weight: 500;
            padding: 3px 10px;
            background: var(--mbs-surface-muted, #f3f4f6);
            border: 1px solid var(--mbs-border);
            border-radius: 12px;
            color: var(--mbs-text);
        }
    }

    /* Buy links row */
    .mbs-popup-buy-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    /* Full-page link */
    .mbs-popup-full-link {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        color: var(--mbs-link);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        padding-bottom: 1px;
        transition: opacity 0.15s ease;

        &:hover {
            opacity: 0.75;
        }
    }
}


/* ── DISPLAY-2: Bestseller Badge ─────────────────────────────────────────── */
.mbs-bestseller-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 3px;
	background: var(--mbs-bestseller-gold, #F59E0B);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
	vertical-align: middle;
}

/* On archive cards: overlay on cover */
.mbs-book-card .mbs-bestseller-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
	z-index: 2;
}

/* Ensure cover link wrapper is relative */
.mbs-book-card__cover-link {
	position: relative;
	display: block;
}