/**
 * File Path: assets/css/admin/appearance/appearance-live-preview.css
 * Live preview — realistic mock book card
 * Component of mbs-admin-settings-appearance.css — extracted Session 100.
 * Enqueued by MBS_Tab_Appearance with dep: mbs-admin-settings-appearance.
 */

/* ------------------------------------------------ */
/* LIVE PREVIEW — realistic mock book card        */
/* ------------------------------------------------ */

.mbs-appearance-preview {
    position: sticky;
    top: 46px; /* clears WP admin bar */
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 20px 20px 24px;
}

@media (max-width: 1499px) {
    .mbs-appearance-preview {
        position: static;
    }
}

.mbs-appearance-preview-label {
    margin: 0 0 14px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #646970;
}

/* The preview book card — styled to look like a real Context-3 book item. */
.mbs-preview-card {
    background: var(--mbs-card-bg, #ffffff);
    border: 1px solid var(--mbs-border, #ECF0F1);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 200px;       /* keeps cover in ratio; prevents overflow on wide columns */
    margin-left: auto;
    margin-right: auto;
}

.mbs-preview-cover-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, var(--mbs-slate, #5a6472), var(--mbs-mist, #9aabba));
    overflow: hidden;
}

.mbs-preview-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mbs-preview-cover-wrap .mbs-preview-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.mbs-preview-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.mbs-preview-badge-pro {
    background: var(--mbs-pro-bg, #ede8f4);
    color: var(--mbs-pro-text, #5a3a72);
}

.mbs-preview-body {
    padding: 14px 16px 32px; /* bottom padding clears the watermark */
    position: relative;
}

.mbs-preview-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--mbs-navy-dark, #1a2b50);
    line-height: 1.3;
}

.mbs-preview-author {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--mbs-slate, #5a6472);
    font-style: italic;
}

.mbs-preview-stars {
    color: var(--mbs-star, #f5a623);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    line-height: 1;
}

.mbs-preview-excerpt {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: var(--mbs-slate, #5a6472);
    line-height: 1.5;
}

.mbs-preview-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mbs-preview-link {
    color: var(--mbs-link, #4AABB8);
    font-size: 12px;
    text-decoration: underline;
    cursor: default;
}

.mbs-preview-link:hover,
.mbs-preview-link:focus {
    color: var(--mbs-accent, #4AABB8);
    text-decoration: underline;
}

.mbs-preview-button {
    background: var(--mbs-button-bg, #2c3e6b);
    color: var(--mbs-button-text, #ffffff);
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
    cursor: default;
    line-height: 1.5;
}

.mbs-preview-button:disabled {
    opacity: 1; /* override browser disabled gray — we want tokens to show */
}

.mbs-preview-watermark {
    position: absolute;
    bottom: 8px;
    right: 12px;
    color: var(--mbs-watermark-text, #9aabba);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    pointer-events: none;
}

/* Secondary display — PRO badge variant + decorative palette. Makes the
   tokens that don't appear naturally in the book-card mock (navy /
   lavender / teal-pale / lavender-pale / beige / mist) visible and
   reactive to user changes. */
.mbs-preview-extras {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed #dcdcde;
}

.mbs-preview-palette {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.mbs-chip {
    font-size: 10px;
    padding: 6px 6px;
    text-align: center;
    border-radius: 3px;
    color: #1a2b50;
    letter-spacing: 0.02em;
    border: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbs-chip-navy          { background: var(--mbs-navy, #2c3e6b);          color: #fff; }
.mbs-chip-lavender      { background: var(--mbs-lavender, #c8b4d4); }
.mbs-chip-teal-pale     { background: var(--mbs-teal-pale, #d4eef1); }
.mbs-chip-lavender-pale { background: var(--mbs-lavender-pale, #ede8f4); }
.mbs-chip-beige         { background: var(--mbs-beige, #f4f0e8); }
.mbs-chip-mist          { background: var(--mbs-mist, #9aabba);          color: #fff; }

/* -- Preview section label + element rows (Phase 3.2) -------------------- */

.mbs-preview-section {
    margin-top: 12px;
}

.mbs-preview-section-label {
    margin: 0 0 4px 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #646970;
}

/* Theme Pill preview — live-wired to lavender tokens (PRO) */
.mbs-preview-theme-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--mbs-lavender-pale, #ede9fe);
    color: #5b21b6;
    border: 1px solid var(--mbs-lavender, #c4b5fd);
}

/* Coming Soon badge preview — live-wired to coming-soon tokens (PRO) */
.mbs-preview-coming-soon {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--mbs-coming-soon-bg, #F59E0B);
    color: var(--mbs-coming-soon-text, #FFFFFF);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Signup Widget preview swatch — live-wired to beige token (PRO) */
.mbs-preview-signup-widget {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--mbs-slate, #5a6472);
    background: var(--mbs-beige, #f4f0e8);
    border: 1px solid var(--mbs-border, #E0D8C8);
}

/* Author filter button preview — live-wired to slate/teal-pale tokens (PRO) */
.mbs-preview-author-filter-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--mbs-border, #ECF0F1);
    border-radius: 4px;
    background: transparent;
    color: var(--mbs-slate, #5a6472);
    cursor: default;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mbs-preview-author-filter-btn:hover {
    background: var(--mbs-teal-pale, #d4eef1);
    border-color: var(--mbs-link, #4AABB8);
    color: var(--mbs-navy-dark, #1a2b50);
}

/* -- Book Picker -- above live preview card --------------------------------- */

.mbs-preview-book-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #646970;
}

.mbs-preview-book-picker label {
    margin: 0;
    white-space: nowrap;
    font-weight: 600;
}

.mbs-preview-book-picker select {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
    max-width: 100%;
}

/* ==========================================================================
   Admin live preview — dark mode readability fixes
   Applies when data-mbs-theme="dark" is set on #mbs-live-preview by JS.
   Targets: palette chips, theme pill text, signup widget text,
   author filter button legibility.
   ========================================================================== */

/* Chip text — base rule uses color:#1a2b50 which is invisible on dark bgs */
#mbs-live-preview[data-mbs-theme="dark"] .mbs-chip {
    color: #ECF0F1;
}

/* Chip-specific overrides for chips that already declare color:#fff */
#mbs-live-preview[data-mbs-theme="dark"] .mbs-chip-navy,
#mbs-live-preview[data-mbs-theme="dark"] .mbs-chip-mist {
    color: #fff;
}

/* Theme pill — text hardcoded #5b21b6 (dark purple) invisible on dark bg */
#mbs-live-preview[data-mbs-theme="dark"] .mbs-preview-theme-pill {
    color: #C4B5FD;
    border-color: #7C3AED;
}

/* Author filter button — mid-gray text + transparent bg needs lift */
#mbs-live-preview[data-mbs-theme="dark"] .mbs-preview-author-filter-btn {
    color: #CBD5E0;
    border-color: #4A5568;
    background: transparent;
}

/* Signup widget text — slate token goes mid-gray in dark mode */
#mbs-live-preview[data-mbs-theme="dark"] .mbs-preview-signup-widget {
    color: #CBD5E0;
}

/* Preview section labels — keep legible on dark card bg */
#mbs-live-preview[data-mbs-theme="dark"] .mbs-preview-section-label {
    color: #9AABBA;
}
