/* ===== Preview mode UI (EPPR2-3142) =====
 * Paywall bottom sheet + share/download "subscribe" modals.
 * Font-family is intentionally inherited so Tamil (and other locales) render
 * with the publication's own font stack; only weights/sizes/colours are set.
 * Sizes/neutral colours mirror the Figma TM pilot (get_variable_defs).
 *
 * Brand colour is the per-publication --brand-button-color from css/theme.css,
 * resolved via the data-theme attribute the preview modules set on the sheet
 * and modal scrim. The #b10442 fallback (TM) covers a pub not yet themed.
 * Hover states derive from the brand via `filter`, so one colour per pub is
 * enough.
 */

/* ---- Paywall overlay + bottom sheet ---- */
/* The scrim dims and blocks ALL reader interaction (clicks/swipes hit it, not
 * the reader); the sheet sits pinned to the bottom. Sheet content is
 * constrained to a centred column so it keeps the mobile (375px Figma)
 * proportions instead of stretching on desktop. */
.preview-paywall-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.5);
}

.preview-paywall-sheet {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f7f3f4;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 12px rgba(50, 50, 58, 0.12);
}

.preview-paywall-sheet > * {
    width: 100%;
    max-width: 480px;
}

.preview-paywall-sheet__header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.preview-paywall-sheet__title {
    margin: 0;
    flex: 1 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: #212529;
}

.preview-paywall-sheet__benefits {
    margin: 0;
    padding-left: 24px;
    list-style: disc;
    font-size: 16px;
    line-height: 24px;
    color: #616161;
}

.preview-paywall-sheet__benefits li + li {
    margin-top: 2px;
}

/* Shared button shapes ---------------------------------------------------- */
.preview-btn-subscribe,
.preview-btn-outline,
.preview-link-login {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    width: 100%;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Solid subscribe (paywall sheet) — pub brand */
.preview-btn-subscribe {
    background: var(--brand-button-color, #b10442);
    color: #fafafa;
    border: none;
}

.preview-btn-subscribe:hover,
.preview-btn-subscribe:focus {
    filter: brightness(0.9);
}

/* Ghost login link (paywall sheet) — pub brand */
.preview-link-login {
    background: none;
    border: none;
    color: var(--brand-button-color, #b10442);
    min-height: 24px;
    padding: 4px;
}

.preview-link-login:hover,
.preview-link-login:focus {
    text-decoration: underline;
}

/* Outline CTA (share / download modals) — pub brand */
.preview-btn-outline {
    background: #fff;
    color: var(--brand-button-color, #b10442);
    border: 1px solid var(--brand-button-color, #b10442);
}

.preview-btn-outline:hover,
.preview-btn-outline:focus {
    background: #f5f5f5;
}

/* ---- Modal scrim + card (share / download) ---- */
.preview-scrim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}

.preview-modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 4px rgba(50, 50, 58, 0.2);
}

.preview-modal__header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.preview-modal__title {
    margin: 0;
    flex: 1 0 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #212529;
}

.preview-modal__close,
.preview-paywall-sheet__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    color: #212529;
    cursor: pointer;
}

.preview-modal__body {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #616161;
}

.preview-modal__footer {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
}