/*
 * Component Styles: Buttons, cards, forms, modals, badges, alerts, toasts
 * Reusable UI building blocks for the membership video theme
 */

/* Requirement: display-only WebP <picture> wrappers must not alter existing thumbnail layouts.
   Logic: display: contents lets the fallback <img> keep the same card/gate/dashboard sizing rules. */
.yisekan-picture {
    display: contents;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

/* Primary CTA button - accent colored */
.btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.btn--primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

/* Requirement: highlight membership/pricing CTAs as distinct conversion-focused actions. */
/* Approach: keep shared .btn sizing while using a warmer gradient + stronger glow for quick visual scan. */
/* Assumption: stronger contrast is reserved for primary purchase paths, not dense utility button groups. */
.btn--pricing {
    color: #fff;
    border-color: var(--color-accent-warm);
    background: linear-gradient(135deg, var(--color-accent-warm) 0%, var(--accent) 100%);
    box-shadow: var(--shadow-pricing);
}
.btn--pricing:hover,
.btn--pricing.is-active {
    color: #fff;
    border-color: #ff7b49;
    background: linear-gradient(135deg, #ff7b49 0%, var(--accent-hover) 100%);
    box-shadow: 0 10px 22px rgba(255, 77, 77, 0.34);
}
.btn--pricing:focus-visible {
    outline: 2px solid rgba(255, 123, 73, 0.55);
    outline-offset: 2px;
}

/* Large button variant */
.btn--lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
}

/* Small button variant */
.btn--sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
}

/* Full width button */
.btn--block {
    display: flex;
    width: 100%;
}

/* Ghost/outline button */
.btn--ghost {
    background: transparent;
    border-color: var(--color-text-secondary);
    color: var(--color-text-secondary);
}
.btn--ghost:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

/* Success state */
.btn--success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* Disabled state */
.btn:disabled,
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* === Video Card === */
.video-card {
    position: relative;
    background: var(--color-bg-elevated);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Thumbnail wrapper with aspect ratio */
/* display:block required — <a> is inline by default, collapsing padding-top trick */
.video-card__thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 default aspect ratio */
    overflow: hidden;
    background: var(--color-bg);
}
.video-card__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.video-card:hover .video-card__thumb img {
    transform: scale(1.05);
}

/* Hover GIF preview overlay (main.js appends into .video-card__thumb / .featured-card__thumb).
   Requirement: animated preview covers the static thumb but stays under the duration badge,
   fading in once the first GIF has preloaded. Positioned absolute like the thumb <img> rules. */
.video-card__gif {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none; /* Clicks still hit the card link */
}
.video-card__gif.is-visible {
    opacity: 1;
}
/* Badges (duration/content/category) must render above the GIF layer on both card types */
.video-card__duration,
.video-card__content-badge,
.featured-card__cat {
    z-index: 1;
}

/* Duration badge overlay on thumbnail */
.video-card__duration {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
}

.video-card__content-badge {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-bg);
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

/* Lock overlay for gated content */
.video-card__lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.video-card__lock-icon {
    width: 32px;
    height: 32px;
    opacity: 0.8;
}

/* Card text content */
.video-card__body {
    padding: var(--space-md);
}
.video-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card__excerpt {
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Requirement: category labels need fast visual recognition across cards and pricing.
   Approach: shared CSS variables let PHP provide admin-managed colors while each surface controls layout. */
.category-label {
    --category-label-bg: var(--color-accent);
    --category-label-text: #fff;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--category-label-bg);
    color: var(--category-label-text);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.video-card__meta .category-label {
    min-width: 0;
}

/* Requirement: two-column phone post lists need denser card interiors without changing desktop cards.
   Approach: scope compact spacing to .video-grid so featured, playlist, and standalone card contexts keep their existing rhythm.
   Edge case: long titles/taxonomy labels wrap inside the card instead of widening either grid column. */
@media (max-width: 480px) {
    .video-grid .video-card {
        min-width: 0;
    }

    .video-grid .video-card__body {
        padding: var(--space-sm);
    }

    .video-grid .video-card__title {
        font-size: var(--font-size-xs);
        overflow-wrap: anywhere;
    }

    .video-grid .video-card__excerpt {
        display: none;
    }

    .video-grid .video-card__meta {
        gap: 4px;
        margin-top: var(--space-xs);
        font-size: 11px;
        line-height: var(--line-height-tight);
        flex-wrap: wrap;
    }

    .video-grid .video-card__duration,
    .video-grid .video-card__content-badge {
        right: 6px;
        bottom: 6px;
        padding: 2px 5px;
    }
}

/* === Playlist Cards === */
.playlist-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.playlist-card {
    background: var(--color-bg-elevated);
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.playlist-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.playlist-card__thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--color-bg);
}

.playlist-card__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-card__count {
    position: absolute;
    right: var(--space-sm);
    bottom: var(--space-sm);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.playlist-card__body {
    padding: var(--space-md);
}

.playlist-card__title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.playlist-card__desc {
    margin-top: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.playlist-card__meta {
    margin-top: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

@media (min-width: 640px) {
    .playlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .playlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === Homepage Curated Section Variants === */
/* Requirement: each curated section supports style presets and 1/2 row display without breaking mobile layout.
   Approach: use dedicated grid modifiers (type + style) so homepage layout can diverge from global video/playlist grids.
   Assumption: PHP clamps item count per section to each style's per-row limits, CSS handles only visual arrangement.
   Side effect: curated sections can have denser desktop columns while preserving existing card components. */
.homepage-curated-section {
    position: relative;
}

.homepage-curated-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.homepage-curated-section--compact .homepage-curated-grid {
    gap: var(--space-md);
}

.homepage-curated-section--compact .video-card__body,
.homepage-curated-section--compact .playlist-card__body {
    padding: var(--space-sm);
}

.homepage-curated-section--spotlight .homepage-curated-grid > :first-child {
    position: relative;
    border-color: rgba(255, 77, 77, 0.55);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.homepage-curated-grid--playlist .playlist-card__title {
    font-size: var(--font-size-base);
}

.homepage-curated-grid--playlist .playlist-card__desc {
    -webkit-line-clamp: 2;
}

@media (min-width: 640px) {
    .homepage-curated-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .homepage-curated-grid--video.homepage-curated-grid--standard {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .homepage-curated-grid--video.homepage-curated-grid--spotlight {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .homepage-curated-grid--video.homepage-curated-grid--compact {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .homepage-curated-grid--playlist.homepage-curated-grid--standard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .homepage-curated-grid--playlist.homepage-curated-grid--spotlight {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homepage-curated-grid--playlist.homepage-curated-grid--compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .homepage-curated-section--type-category.homepage-curated-section--spotlight .homepage-curated-grid > :first-child {
        grid-column: span 2;
    }
}

/* === Taxonomy Index Hub (分類 / 標籤 pages) === */
/* Requirement: taxonomy cards should preview the latest video thumbnail for each category/tag.
   Approach: split cards into media + body blocks, keep aspect ratio stable, and reuse existing hover language.
   Assumption: media is always present because helper falls back to default-thumb image.
   Side effect: cards become taller to improve browse confidence before entering archives. */
.taxonomy-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

.taxonomy-hub-card {
    display: block;
    overflow: hidden;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    transition: transform var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.taxonomy-hub-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.taxonomy-hub-card__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-tertiary);
}

.taxonomy-hub-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.taxonomy-hub-card:hover .taxonomy-hub-card__thumb {
    transform: scale(1.04);
}

.taxonomy-hub-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 88px;
    padding: var(--space-md);
}

.taxonomy-hub-card__name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.taxonomy-hub-card__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.taxonomy-hub-card--tag {
    border-color: rgba(255, 77, 77, 0.25);
}

.taxonomy-hub-card--tag .taxonomy-hub-card__name {
    letter-spacing: 0.01em;
}

@media (min-width: 640px) {
    .taxonomy-hub--categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .taxonomy-hub--tags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .taxonomy-hub--categories {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .taxonomy-hub--tags {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* === Forms === */
.form-group {
    margin-bottom: var(--space-lg);
}
.form-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.form-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}
.form-input:focus {
    border-color: var(--color-border-focus);
}
.form-input::placeholder {
    color: var(--color-text-muted);
}

textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-input--error {
    border-color: var(--color-error);
}
.form-error {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
}

/* === Badges === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    line-height: 1.5;
}
.badge--pending  { background: var(--color-pending);      color: #fff; }
/* .badge--tier: color applied via inline style (admin-configurable per tier) */
.badge--tier     { /* background + color set inline by yisekan_tier_badge() */ }
.badge--active   { background: var(--color-success);      color: #fff; }
.badge--expired  { background: var(--color-error);        color: #fff; }

/* === Alerts / Notices === */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
    border-left: 4px solid;
}
.alert--info {
    background: rgba(33, 150, 243, 0.1);
    border-color: var(--color-info);
    color: var(--color-info);
}
.alert--success {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}
.alert--warning {
    background: rgba(255, 152, 0, 0.1);
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.alert--error {
    background: rgba(244, 67, 54, 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

/* === Modal === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
.modal {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.modal__close:hover {
    color: var(--color-text);
}
.modal__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}

/* Requirement: PayPal new-tab handoff must provide accessible recovery controls on the original page. */
/* Approach: use the shared modal shell with compact centered copy and explicit status/dashboard actions. */
.paypal-handoff-modal {
    text-align: center;
}
.paypal-handoff-modal__spinner {
    margin: 0 auto var(--space-lg);
}
.paypal-handoff-modal__message {
    color: var(--color-text-secondary);
    line-height: var(--line-height);
    margin-bottom: var(--space-lg);
}
.paypal-handoff-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
}
.paypal-handoff-modal__actions .btn {
    min-width: min(220px, 100%);
}

@media (min-width: 480px) {
    .paypal-handoff-modal__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* === Required Terms Confirmation Popup === */
/* Requirement: first-time browsers must confirm Terms before entering the public site.
   Approach: reuse the modal shell but remove all optional close paths and keep the action button explicit. */
.terms-popup {
    padding: var(--space-md);
}

/* Requirement: browsers that already accepted Terms must not see a flash during new-page navigation.
   Approach: the head bootstrap marks the HTML element before the footer modal paints, while main.js still owns runtime state. */
html.yisekan-terms-accepted .terms-popup[data-terms-popup] {
    display: none !important;
    opacity: 0;
    visibility: hidden;
}

.terms-popup__dialog {
    max-width: 560px;
    border: 1px solid rgba(255, 77, 77, 0.35);
    box-shadow: var(--shadow-lg);
}

.terms-popup__eyebrow {
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
}

.terms-popup__title {
    margin-bottom: var(--space-md);
}

.terms-popup__body {
    display: grid;
    gap: var(--space-sm);
    max-height: min(42vh, 320px);
    overflow-y: auto;
    padding-right: var(--space-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
}

.terms-popup__body ul,
.terms-popup__body ol {
    list-style: revert;
    padding-left: var(--space-lg);
}

.terms-popup__body a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terms-popup__canonical {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
}

.terms-popup__canonical a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terms-popup__accept {
    width: 100%;
    margin-top: var(--space-lg);
}

@media (max-width: 520px) {
    .terms-popup {
        align-items: flex-end;
        padding: var(--space-sm);
    }

    .terms-popup__dialog {
        width: 100%;
        max-height: calc(100svh - var(--space-md));
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
        padding: var(--space-lg);
    }

    .terms-popup__body {
        max-height: 48svh;
    }
}

/* === Tabs === */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Requirement: tabs overflow area needs a visual hint that more tabs exist off-screen.
       Approach: fade the right edge to signal horizontal scrollability.
       Note: only fades the right side; left is kept solid since tabs start from the left. */
    -webkit-mask-image: linear-gradient(to right, black 95%, transparent);
    mask-image: linear-gradient(to right, black 95%, transparent);
}
.tabs__tab {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    font-family: var(--font-family);
}
.tabs__tab:hover {
    color: var(--color-text);
}
.tabs__tab.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.tabs__panel {
    display: none;
}
.tabs__panel.is-active {
    display: block;
}

/* === Loading Spinner === */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--color-text-secondary);
}

/* === Pagination === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.pagination a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.pagination .current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

/* === Filter/Sort Toolbar (template-parts/filter-toolbar.php) === */
/* Requirement: sort + duration pill groups above listing grids; pills mirror the pagination
   button idiom (elevated background, border, accent active state) so listing controls feel
   like one family. Mobile: groups wrap and each group scrolls horizontally instead of
   overflowing the container. */
.filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.filter-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    max-width: 100%;
    overflow-x: auto;              /* Narrow screens: swipe within the group, no page overflow */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-toolbar__group::-webkit-scrollbar {
    display: none;
}
.filter-toolbar__pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;                /* Pills keep their width inside the scrollable group */
    height: 34px;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    transition: all var(--transition-fast);
}
.filter-toolbar__pill:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.filter-toolbar__pill--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}
.filter-toolbar__pill:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* === Search Bar === */
/* Requirement: header search must stay usable without forcing horizontal overflow on narrow viewports.
   Approach: make the search form a shrinkable flex item with bounded width instead of a fixed max-only box. */
.search-bar {
    position: relative;
    width: min(300px, 42vw);
    min-width: 120px;
    flex: 1 1 auto;
}
.search-bar__input {
    width: 100%;
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    padding-right: 40px;
    font-size: var(--font-size-sm);
    color: var(--fg-1);
    background: var(--bg-page);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-full);
    outline: none;
    font-family: var(--font-family);
    transition: border-color var(--transition-fast);
}
.search-bar__input:focus {
    border-color: var(--border-focus);
}
.search-bar__btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

@media (max-width: 640px) {
    .search-bar {
        width: min(180px, 38vw);
        min-width: 96px;
    }

    .search-bar__input {
        padding-left: var(--space-sm);
    }
}

/* Requirement: tablet header search must share the 64px top row with logo and account controls without overflow.
   Approach: use a bounded, shrinkable width while navigation occupies its own rail below. */
@media (min-width: 768px) and (max-width: 1199px) {
    .search-bar {
        width: clamp(140px, 24vw, 260px);
        min-width: 0;
    }
}

/* === Tooltip === */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    color: #fff;
    background: #333;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--color-text-secondary);
}
.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
    opacity: 0.65;
}
.empty-state__icon svg {
    width: 100%;
    height: 100%;
}
.empty-state__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

/* === Toast Notifications === */
/* CSS-class-based toasts — JS only adds className + .is-visible */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-family);
    color: #fff;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.toast--info    { background: var(--color-info); }
.toast--success { background: var(--color-success); }
.toast--warning { background: var(--color-warning); color: #000; }
.toast--error   { background: var(--color-error); }

/* === Membership Gate === */
/* Lock overlay shown when user cannot access gated video content */
.membership-gate {
    position: relative;
    width: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

/* Clear poster background — image shown unblurred */
.gate-backdrop {
    position: relative;
    width: 100%;
}
.gate-backdrop__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lock overlay with semi-transparent scrim for text readability */
.gate-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    text-align: center;
    color: #fff;
    /* Requirement: increase center opacity from 0.7 to 0.85 so overlay text meets WCAG contrast ratio.
       Approach: darken the radial-gradient centre without changing the outer fade to preserve aesthetics. */
    background: var(--scrim-radial);
}
.gate-content__icon {
    margin-bottom: var(--space-md);
    color: var(--accent);
    filter: drop-shadow(0 0 12px rgba(255, 77, 77, 0.5));
}
.gate-content__icon svg {
    display: block;
}
.membership-gate__context {
    display: grid;
    gap: 4px;
    width: min(100%, 520px);
    margin: 0 auto var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--tint-white-20);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.34);
    color: #fff;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.membership-gate__context-kicker,
.membership-gate__context-meta {
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}
.membership-gate__context-title {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}
.gate-content__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.gate-content__desc {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin-bottom: var(--space-lg);
}

/* Requirement: gate title and text need a drop shadow for readability on varied poster backgrounds.
   Approach: text-shadow adds a soft dark halo so text is legible regardless of image brightness. */
.gate-content__title,
.gate-content__desc {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Requirement: guest gate now exposes both subscribe and login actions in one area.
   Approach: use responsive wrapping + constrained widths so two CTAs remain readable on mobile.
   Assumption: one-button states (subscribed upsell gate) should keep centered alignment unchanged.
   Side effect: gate action group now has consistent spacing even when only one button is shown. */
.gate-content__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.membership-gate__actions {
    max-width: min(100%, 460px);
}
.gate-content__actions .btn {
    min-width: 170px;
}
.gate-content__login-btn {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.gate-content__login-btn:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}
@media (max-width: 480px) {
    .membership-gate {
        overflow: visible;
    }
    .gate-backdrop {
        min-height: 380px;
    }
    .gate-content {
        overflow-y: auto;
        justify-content: flex-start;
        padding: var(--space-lg) var(--space-md);
        min-height: 100%;
        max-height: 100%;
    }
    .gate-content__title {
        font-size: var(--font-size-lg);
    }
    .gate-content__desc {
        margin-bottom: var(--space-md);
    }
    .membership-gate__context {
        width: 100%;
        margin-bottom: var(--space-sm);
        padding: var(--space-sm);
    }
    .gate-content__actions .btn {
        width: 100%;
        min-width: 0;
    }
    .gate-pricing-mini {
        width: 100%;
        gap: var(--space-sm);
    }
    .gate-pricing-mini__item {
        flex: 1 1 120px;
        min-width: 0;
    }
}

/* Mini pricing cards shown to unsubscribed users */
.gate-pricing-mini {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}
.gate-pricing-mini__item {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: inherit;
    text-decoration: none;
}
.gate-pricing-mini__label {
    font-size: var(--font-size-xs);
    opacity: 0.7;
}
.gate-pricing-mini__price {
    font-size: var(--font-size-lg);
    font-weight: 700;
}
.gate-pricing-mini__period {
    font-size: 0.6em;
    opacity: 0.7;
}

/* === User Navigation Dropdown === */
.user-nav {
    position: relative;
}
.user-nav__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
    color: var(--color-text);
    font-family: var(--font-family);
}
.user-nav__trigger:hover {
    background: var(--color-bg-hover);
}
.user-nav__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.user-nav__name {
    font-size: var(--font-size-sm);
    display: none; /* Hidden on mobile, shown on desktop */
}

/* Dropdown panel — shown on hover (desktop) or .is-open (touch) */
.user-nav__dropdown {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    min-width: 200px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.user-nav:hover .user-nav__dropdown,
.user-nav.is-open .user-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-nav__header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.user-nav__email {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-nav__item {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.user-nav__item:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}
.user-nav__item--logout {
    border-top: 1px solid var(--color-border);
    color: var(--color-error);
}
.user-nav__item--logout:hover {
    color: var(--color-error);
}

@media (min-width: 1200px) {
    .user-nav__name {
        display: block;
    }
}

/* === Auth Card (login/register page) === */
.auth-card {
    max-width: 420px;
    margin: var(--space-2xl) auto;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
}
.auth-form {
    margin-top: var(--space-lg);
}
.auth-remember {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.auth-remember input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* Requirement: checkout signup must present a clear, touch-friendly agreement to the assigned Terms page. */
.checkout-terms__agreement {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
    cursor: pointer;
}

.checkout-terms__agreement input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15em;
    flex: 0 0 auto;
    accent-color: var(--color-accent);
}

.checkout-terms__agreement a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.checkout-terms__unavailable {
    margin-bottom: var(--space-lg);
}

/* === Crypto Payment Modal === */
.crypto-modal {
    max-width: 560px;
}

.crypto-network-hint {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height);
}

.crypto-network-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

/* Requirement: crypto network selection buttons need a minimum tap height (WCAG 2.5.5, 44px touch target).
   Approach: enforce min-height on the existing button so short copy lines still meet the requirement. */
.crypto-network-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    white-space: normal;
    min-height: 44px;
}

.crypto-network-btn.is-active {
    border-color: var(--color-accent);
    background: rgba(255, 77, 77, 0.12);
    box-shadow: var(--shadow-glow);
}

.crypto-network-label-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.crypto-network-title {
    font-weight: 700;
}

.crypto-network-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: rgba(255, 77, 77, 0.16);
    border: 1px solid var(--color-accent);
    color: #fff;
}

.crypto-network-fee {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.crypto-payment-info {
    margin-top: var(--space-lg);
}

.crypto-currencies {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.crypto-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.crypto-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.crypto-step {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.25;
}

.crypto-step.is-active {
    color: var(--color-text-primary);
    border-color: rgba(255, 77, 77, 0.45);
    background: rgba(255, 77, 77, 0.08);
}

.crypto-step__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
}

.crypto-pay-panel,
.crypto-verify-panel {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
}

.crypto-panel-heading {
    margin-bottom: var(--space-md);
}

.crypto-section-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.crypto-panel-heading h4 {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.35;
}

.crypto-pay-main {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: stretch;
}

.crypto-copy-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.crypto-amount-card,
.crypto-address-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.18);
}

.crypto-field-row {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.crypto-field-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.crypto-field-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.crypto-address {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}
.crypto-address-card code,
.crypto-address code {
    flex: 1;
    font-size: var(--font-size-xs);
    word-break: break-all;
    background: var(--color-bg);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.crypto-amount {
    font-size: clamp(1.25rem, 4vw, 1.65rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.2;
}

.crypto-instructions {
    margin: var(--space-md) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height);
}

.crypto-hash-form {
    margin-top: var(--space-md);
}

.crypto-hash-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--font-size-sm);
}

.crypto-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.crypto-status-message {
    margin-top: var(--space-md);
    margin-bottom: 0;
}

.crypto-confirm-hint {
    margin-top: var(--space-sm);
    margin-bottom: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* QR code image — centered, white background for scanners */
.crypto-qr-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
}
.crypto-qr {
    width: 200px;
    height: 200px;
    background: #fff;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

@media (min-width: 640px) {
    .crypto-network-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .crypto-stepper {
        grid-template-columns: 1fr;
    }

    .crypto-pay-main {
        grid-template-columns: 1fr;
    }

    .crypto-copy-actions,
    .crypto-amount-card .btn,
    .crypto-address-card .btn {
        width: 100%;
    }

    .crypto-qr {
        width: min(220px, 100%);
        height: auto;
        aspect-ratio: 1;
    }
}

/* === Homepage Design System Hero === */
/* Requirement: apply the supplied YiseKan webpage design to the live homepage while preserving existing featured/latest queries.
   Approach: render a full-bleed hero from the first resolved featured post, then keep all actions as normal pricing/post links. */
.homepage-hero {
    position: relative;
    width: 100vw;
    min-height: 430px;
    margin: calc(-1 * var(--space-xl)) calc(50% - 50vw) var(--space-2xl);
    overflow: hidden;
    background: var(--bg-page);
}

.homepage-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.62);
}

.homepage-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 15, 15, 0.96) 0%, rgba(15, 15, 15, 0.68) 56%, rgba(15, 15, 15, 0.22) 100%),
        linear-gradient(180deg, rgba(15, 15, 15, 0) 62%, var(--bg-page) 100%);
}

.homepage-hero__inner {
    position: relative;
    min-height: inherit;
    display: flex;
    align-items: flex-end;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
}

.homepage-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 680px;
}

.homepage-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.homepage-hero__kicker,
.homepage-hero__duration {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
}

.homepage-hero__kicker {
    background: var(--accent);
    color: var(--fg-on-accent);
}

.homepage-hero__cat.category-label {
    min-height: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.homepage-hero__duration {
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
}

.homepage-hero__title {
    max-width: 620px;
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.18;
    color: var(--fg-1);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
}

.homepage-hero__title a {
    color: inherit;
}

.homepage-hero__title a:hover {
    color: var(--accent-hover);
}

.homepage-hero__excerpt {
    max-width: 560px;
    margin: 0;
    color: var(--fg-2);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.64);
}

.homepage-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.homepage-hero__secondary svg {
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .homepage-hero {
        min-height: 520px;
        margin-top: calc(-1 * var(--space-2xl));
    }

    .homepage-hero__inner {
        align-items: center;
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .homepage-hero__title {
        font-size: var(--font-size-3xl);
    }
}

@media (max-width: 480px) {
    .homepage-hero {
        min-height: 410px;
        margin-bottom: var(--space-xl);
    }

    .homepage-hero__content {
        gap: var(--space-sm);
    }

    .homepage-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .homepage-hero__primary,
    .homepage-hero__secondary {
        width: 100%;
    }
}

/* === Featured Videos Grid (homepage showcase) === */
/* Requirement: desktop featured showcase must read as one balanced hero rail, not a ragged card list.
   Approach: keep the existing mobile/tablet grid, then switch desktop to a 6-column lead-card rail.
   Edge case: the 8-card target uses a horizontal final rail card so the last slot fills without inflating row height. */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
}

/* Shared card base - matches .video-card hover/shadow pattern while allowing desktop row spans to stretch. */
.featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-bg-elevated);
    border: 1px solid var(--border-hairline);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.featured-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 77, 77, 0.45);
    box-shadow: var(--shadow-lg);
}

.featured-card--large {
    grid-column: 1 / -1;
}

/* Thumbnail wrapper - aspect-ratio keeps card media stable without padding hacks. */
.featured-card__thumb {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--color-bg);
}
.featured-card__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}
.featured-card:hover .featured-card__thumb img {
    transform: scale(1.05);
}

/* Duration badge reuses .video-card__duration (already absolute-positioned) */

/* Category pill badge - overlay on large card thumbnail */
.featured-card__cat {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 11px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #fff;
    background: rgba(255, 77, 77, 0.92); /* Accent color semi-transparent */
    border-radius: var(--radius-full);
    z-index: 1;
}

.featured-card__cat.category-label {
    background: var(--category-label-bg);
    color: var(--category-label-text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.featured-card__content-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-bg);
    background: rgba(255, 255, 255, 0.88);
    border-radius: var(--radius-full);
    z-index: 1;
}

/* Card body content */
.featured-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px 18px;
}

.featured-card__body > a {
    min-width: 0;
}

/* Requirement: compact cards should not show long empty body gaps when the desktop grid stretches rows.
   Logic: keep category meta anchored to the bottom while titles/excerpts remain naturally clamped. */
.featured-card .video-card__meta {
    margin-top: auto;
    padding-top: var(--space-sm);
}

/* Large card: bigger title for hero emphasis */
.featured-card--large .featured-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Compact cards: standard title size for the supporting manual/automatic picks */
.featured-card--compact .featured-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card--compact .featured-card__body {
    padding: var(--space-sm);
}

/* Excerpt text - secondary color, 3-line clamp */
.featured-card__excerpt {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--fg-2);
    line-height: var(--line-height);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .featured-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-lg);
    }

    .featured-card--large {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .featured-grid--showcase {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        align-items: stretch;
    }

    .featured-grid--showcase .featured-card--large {
        grid-column: span 2;
        grid-row: span 2;
        align-self: start;
    }

    .featured-grid--showcase .featured-card--large .featured-card__thumb {
        flex: 0 0 auto;
        min-height: 0;
        height: clamp(260px, 26vw, 360px);
        aspect-ratio: auto;
    }

    .featured-grid--showcase .featured-card--large .featured-card__body {
        flex: 0 0 auto;
        padding: 20px 24px 24px;
    }

    .featured-grid--showcase .featured-card--large .featured-card__title {
        font-size: var(--font-size-xl);
    }

    .featured-grid--showcase .featured-card--compact .featured-card__thumb {
        aspect-ratio: 16 / 10;
    }

    /* Requirement: the 8-card desktop showcase must fill the final rail slot without making row 2 taller.
       Approach: the last card spans two columns but becomes a horizontal card, preserving thumbnail scale. */
    .featured-card--support-wide {
        grid-column: span 2;
        flex-direction: row;
    }

    .featured-card--support-wide .featured-card__thumb {
        width: 46%;
        min-width: 150px;
        aspect-ratio: 1 / 1;
        flex: 0 0 46%;
    }

    .featured-card--support-wide .featured-card__body {
        flex: 1 1 auto;
        padding: var(--space-sm) var(--space-md);
    }

    .featured-card--support-wide .featured-card__title {
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 480px) {
    .featured-grid {
        gap: var(--space-sm);
    }

    .featured-card--compact .featured-card__title {
        overflow-wrap: anywhere;
    }

    .featured-card--compact .video-card__meta {
        margin-top: var(--space-xs);
        font-size: 10px;
    }
}

/* === Popular Tag Grid (homepage) === */
.tag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.tag-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    /* Requirement: YiseKan Design System keeps browse cards on flat dark surfaces.
       Logic: reserve gradients for pricing CTAs and video gate scrims so tag cards do not compete with thumbnails. */
    background: var(--bg-surface);
    border-radius: var(--card-radius);
    border: 1px solid var(--border-hairline);
    text-align: center;
    transition: all var(--transition-base);
}
.tag-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.tag-card__name {
    font-size: var(--font-size-lg);
    font-weight: var(--weight-semibold);
    color: var(--fg-1);
}
.tag-card__count {
    font-size: var(--font-size-sm);
    color: var(--fg-2);
    margin-top: var(--space-xs);
}

@media (min-width: 640px) {
    .tag-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .tag-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* === Archive/Search Sidebar === */
/* Requirement: sidebar should expose "Most Visited Videos" and "All Video Tags" with existing design tokens.
   Approach: use two stacked card sections with compact lists/chips so the side column stays scannable.
   Assumption: sidebar width remains in the 260-320px range from layout.css desktop breakpoint.
   Side effect: long video/tag names are ellipsized to prevent overflow. */
.archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.archive-sidebar__section {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: var(--space-md);
}

.archive-sidebar__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.archive-sidebar__video-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.archive-sidebar__video-item {
    border-top: 1px solid var(--color-border);
}

.archive-sidebar__video-item:first-child {
    border-top: none;
}

.archive-sidebar__video-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm) 0;
    color: var(--color-text);
}

.archive-sidebar__video-link:hover .archive-sidebar__video-name {
    color: var(--color-accent);
}

.archive-sidebar__video-name {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-sidebar__video-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.archive-sidebar__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.archive-sidebar__tag-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    max-width: 100%;
}

.archive-sidebar__tag-link:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.archive-sidebar__tag-link span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-sidebar__tag-count {
    color: var(--color-text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.archive-sidebar__empty {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* === Footer Section === */
.footer-section__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}
.footer-section__desc {
    margin-bottom: var(--space-sm);
}
.footer-links li {
    margin-bottom: var(--space-sm);
}
.footer-links a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}
.footer-links a:hover {
    color: var(--color-accent);
}
.footer-note {
    white-space: pre-line;
}

/* Requirement: canonical legal links stay visible outside admin-customizable footer section limits. */
.footer-legal__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs) var(--space-md);
}

.footer-legal__links a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.footer-legal__links a:hover,
.footer-legal__links a:focus-visible {
    color: var(--color-accent);
}

@media (min-width: 640px) {
    .footer-legal__links {
        justify-content: flex-end;
    }
}

/* === FAQ / Contact Page === */
/* Requirement: FAQ/contact page needs a clear mobile-first structure with form + FAQ blocks.
   Approach: scope styles under .support-page to avoid regressions on pricing FAQ blocks.
   Assumption: form fields continue reusing shared .form-* tokens for consistency. */
.support-page {
    display: grid;
    gap: var(--space-2xl);
}

.support-page__header {
    margin-bottom: calc(var(--space-lg) * -1);
}

.support-page__faq,
.support-page__contact {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: var(--space-xl);
}

.support-page .section__title {
    margin-bottom: var(--space-lg);
}

.support-page .faq-list {
    display: grid;
    gap: var(--space-md);
}

.support-page .faq-item {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.01);
}

.support-page .faq-item__q {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.support-page .faq-item__a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height);
}

.support-form__message {
    min-height: 160px;
}

.support-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (max-width: 640px) {
    .support-page__faq,
    .support-page__contact {
        padding: var(--space-lg);
    }
}

/* === Entry Content (page.php default styling) === */
.entry-content {
    color: var(--color-text-secondary);
    line-height: var(--line-height);
}
.entry-content h2, .entry-content h3 {
    color: var(--color-text);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}
.entry-content p {
    margin-bottom: var(--space-md);
}
.entry-content a {
    color: var(--color-accent);
}
.entry-content img {
    border-radius: var(--radius-sm);
    margin: var(--space-md) 0;
}

/* === Comments (comments.php) ===
   Requirement: optional WordPress comments must feel native to the dark membership theme when enabled.
   Approach: reuse existing card, form, and button tokens while keeping the whole surface conditional in PHP. */
.comments-area {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}
.comments-area__title,
.comment-reply-title {
    color: var(--color-text);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-lg);
}
.comment-list {
    display: grid;
    gap: var(--space-md);
    list-style: none;
    margin: 0 0 var(--space-xl);
    padding: 0;
}
.comment-list .children {
    list-style: none;
    margin: var(--space-md) 0 0 var(--space-lg);
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-border);
}
.comment-body {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.comment-author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text);
    font-weight: 600;
}
.comment-author .avatar {
    border-radius: 50%;
}
.comment-metadata,
.comment-metadata a {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.comment-content {
    color: var(--color-text-secondary);
    line-height: var(--line-height);
    margin-top: var(--space-sm);
}
.reply {
    margin-top: var(--space-sm);
}
.comment-reply-link {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.comments-area__closed {
    color: var(--color-text-muted);
}
.comment-form {
    display: grid;
    gap: var(--space-md);
}
.comment-form p {
    margin: 0;
}
.comment-form label {
    display: block;
    margin-bottom: var(--space-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    min-height: 44px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: var(--space-sm) var(--space-md);
}
.comment-form textarea {
    resize: vertical;
}
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
.comment-form-cookies-consent label {
    margin: 0;
}
.comments-area__submit {
    justify-self: flex-start;
}

@media (max-width: 640px) {
    .comment-body {
        padding: var(--space-sm);
    }

    .comment-list .children {
        margin-left: var(--space-sm);
        padding-left: var(--space-sm);
    }
}

/* === Checkout Page (page-checkout.php) === */
/* Requirement: single-step plan-aware checkout combining plan summary + auth/payment */

/* Back navigation link */
/* === Checkout Wizard Layout ===
   Requirement: checkout uses a stepped wizard (Plan → Account → Payment).
   Approach: single container with wizard-panel sections controlled by JS. */
.checkout-wizard {
    max-width: min(820px, 100%);
    margin: 0 auto;
}

/* Auth section (guest flow, wizard Step 2) */
.checkout-auth {
    margin-bottom: var(--space-2xl);
}
.checkout-auth__heading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}
.checkout-auth-card {
    max-width: min(820px, 100%);
}

/* Payment step heading */
.checkout-payment__heading {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

/* === Wizard Stepper ===
   Requirement: checkout flow needs a visual progress indicator showing current step.
   Approach: horizontal numbered steps connected by lines, 3 states: done/active/pending.
   Mobile: labels hide below 480px, only circles + connectors remain. */
.wizard-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-2xl);
    padding: 0 var(--space-md);
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.wizard-step__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    background: transparent;
    transition: all var(--transition-base);
    flex-shrink: 0;
}
.wizard-step__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition-base);
}
/* Done state: accent fill with checkmark */
.wizard-step--done .wizard-step__circle {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.wizard-step--done .wizard-step__label {
    color: var(--color-text-secondary);
}
/* Active state: accent border with accent text */
.wizard-step--active .wizard-step__circle {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.25);
}
.wizard-step--active .wizard-step__label {
    color: var(--color-text);
    font-weight: 600;
}
/* Connector line between steps */
.wizard-connector {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin: 0 var(--space-sm);
    min-width: 24px;
    max-width: 80px;
    transition: background var(--transition-base);
}
/* Connector fills accent when preceding step is done */
.wizard-connector--done {
    background: var(--color-accent);
}

@media (max-width: 479px) {
    .wizard-step__label {
        display: none;
    }
    .wizard-connector {
        min-width: 20px;
    }
}

/* === Order Summary Strip ===
   Requirement: show selected tier + price throughout checkout so user never loses context.
   Desktop: single-line bar. Mobile: collapsible. */
.order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-2xl);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.order-summary__left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}
.order-summary__badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.order-summary__tier-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-summary__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.order-summary__amount {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
}
.order-summary__interval {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.order-summary__duration {
    /* Requirement: checkout must show "訂閱時長" and the actual tier length beside the order total. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    white-space: normal;
}
.order-summary__duration-label {
    color: var(--color-text-secondary);
    font-weight: 600;
}
.order-summary__duration-value {
    color: var(--color-warning);
    font-weight: 700;
}

/* Requirement: checkout order summary labels an active campaign price so the total is explainable. */
.order-summary__campaign {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-accent);
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.32);
    border-radius: var(--radius-full);
    overflow-wrap: anywhere;
}

/* Requirement: checkout must preserve locked-video purchase context after the pricing handoff.
   Approach: reuse the order-summary visual language but keep this strip narrower and text-wrapping. */
.checkout-context {
    display: grid;
    gap: 4px;
    margin: calc(-1 * var(--space-lg)) 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid rgba(255, 77, 77, 0.28);
    border-radius: var(--radius-lg);
    background: rgba(255, 77, 77, 0.08);
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.checkout-context__kicker,
.checkout-context__meta {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}
.checkout-context__title {
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
}

/* Requirement: checkout coupon input sits directly under the order summary on a flat elevated surface.
   Approach: reuse the summary card language; the struck original price renders inside the summary amount. */
.checkout-coupon {
    display: grid;
    gap: var(--space-xs);
    margin: calc(-1 * var(--space-lg)) 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.checkout-coupon__row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}

.checkout-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}

.checkout-coupon__apply {
    flex-shrink: 0;
    min-height: 44px;
    white-space: nowrap;
}

.checkout-coupon__feedback {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
    color: var(--color-success);
    overflow-wrap: anywhere;
}

.checkout-coupon__feedback--error {
    color: var(--color-accent);
}

/* Struck original price beside the discounted order total after a coupon applies. */
.order-summary__original {
    margin-right: var(--space-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

/* Requirement: checkout summary bars must not overflow on mobile when tier names or prices are long.
   Approach: allow wrap and split left/right groups into stacked rows below 640px. */
@media (max-width: 640px) {
    .order-summary {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: var(--space-sm);
    }

    .order-summary__left {
        width: 100%;
    }

    .order-summary__tier-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .order-summary__right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .crypto-order-reminder {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .checkout-context {
        margin-top: calc(-1 * var(--space-md));
        padding: var(--space-md);
    }
}

/* === Wizard Step Content Panels ===
   Requirement: only one step visible at a time, smooth transitions. */
.wizard-panel {
    display: none;
}
.wizard-panel.is-active {
    display: block;
    animation: wizardFadeIn var(--transition-base) ease;
}
@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Payment Method Cards (Step 3) ===
   Requirement: payment methods must stay readable when PayPal/USDT labels appear beside the auth form.
   Approach: wider card track plus a fixed icon/content/check grid prevents arbitrary provider-name breaks. */
.payment-method-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-md);
    width: 100%;
    max-width: min(760px, 100%);
}
.payment-method-picker {
    width: 100%;
}
.payment-method-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    min-height: 100%;
    min-width: 0;
    padding: var(--space-lg);
    overflow: hidden;
    /* Requirement: checkout method cards must respect the design-system flat surface rule.
       Logic: keep provider color as border/icon affordance and remove decorative card gradients. */
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    text-align: left;
}
.payment-method-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.checkout-auth-methods {
    margin: 0 auto var(--space-lg);
    max-width: min(760px, 100%);
}
.checkout-auth-method.is-selected {
    border-color: var(--method-color);
    box-shadow: 0 0 16px rgba(255, 77, 77, 0.18);
}
.payment-method-card.is-selected {
    border-color: var(--method-color);
    box-shadow: 0 18px 42px var(--method-glow, rgba(255, 77, 77, 0.18));
}
.payment-method-card--paypal {
    --method-color: #1a7ccc;
    --method-soft: rgba(26, 124, 204, 0.16);
    --method-border: rgba(26, 124, 204, 0.42);
    --method-glow: rgba(26, 124, 204, 0.26);
}
.payment-method-card--paypal:hover,
.payment-method-card--paypal:focus-visible {
    border-color: var(--method-color);
    box-shadow: 0 0 16px rgba(26, 124, 204, 0.25);
}
.payment-method-card--crypto {
    --method-color: #29a37b;
    --method-soft: rgba(41, 163, 123, 0.16);
    --method-border: rgba(41, 163, 123, 0.42);
    --method-glow: rgba(41, 163, 123, 0.26);
}
.payment-method-card--crypto:hover,
.payment-method-card--crypto:focus-visible {
    border-color: var(--method-color);
    box-shadow: 0 0 16px rgba(41, 163, 123, 0.25);
}
.payment-method-card__top,
.payment-method-card__trust,
.payment-method-card__cta {
    position: relative;
    z-index: 1;
}
.payment-method-card__top {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 28px;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
}
.payment-method-card__icon-shell {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: var(--method-color);
    background: var(--method-soft, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--method-border, rgba(255, 255, 255, 0.14));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.payment-method-card__icon-shell svg,
.payment-method-card__check svg {
    width: 26px;
    height: 26px;
}
.payment-method-card__content {
    min-width: 0;
    flex: 1;
}
.payment-method-card__label-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.payment-method-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--line-height-tight);
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: manual;
}
.payment-method-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--method-soft, rgba(255, 255, 255, 0.08));
    color: var(--method-color);
    border: 1px solid var(--method-border, rgba(255, 255, 255, 0.14));
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
}
.payment-method-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
}
.payment-method-card__check {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: #fff;
    background: var(--method-color);
    opacity: 0;
    transform: scale(0.78);
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.payment-method-card.is-selected .payment-method-card__check {
    opacity: 1;
    transform: scale(1);
}
.payment-method-card__trust {
    padding-left: calc(54px + var(--space-md));
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height);
    overflow-wrap: break-word;
}
.payment-method-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: var(--space-xs);
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: var(--method-color);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 800;
    line-height: 1.2;
}

@media (max-width: 520px) {
    .payment-method-card {
        padding: var(--space-md);
    }

    .payment-method-card__top {
        gap: var(--space-sm);
    }

    .payment-method-card__label-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-method-card__trust {
        padding-left: 0;
    }
}

/* === Inline Crypto Payment (replaces modal) ===
   Requirement: crypto payment renders inline within wizard Step 3 instead of a floating modal.
   Approach: reuse existing crypto-* classes but wrap in an inline container. */
.crypto-inline {
    max-width: 560px;
    animation: wizardFadeIn var(--transition-base) ease;
}
.crypto-inline__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.crypto-inline__back:hover {
    color: var(--color-accent);
}
.crypto-inline__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}
.crypto-inline__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    line-height: var(--line-height);
}
/* Order reminder strip inside crypto flow */
.crypto-order-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.crypto-order-reminder__tier {
    font-weight: 600;
    color: var(--color-text);
}
.crypto-order-reminder__price {
    font-weight: 700;
    color: var(--color-accent);
}

/* === Payment Result Card ===
   Requirement: success/cancel pages need structured card layout with receipt, replacing inline styles.
   Approach: centered card with SVG icon, heading, receipt rows, and action buttons. */
.payment-result-card {
    max-width: 560px;
    margin: var(--space-3xl) auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}
.payment-result-card__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-result-card__icon svg {
    width: 100%;
    height: 100%;
}
.payment-result-card__icon--success svg {
    color: var(--color-success);
}
.payment-result-card__icon--processing svg {
    color: var(--color-warning);
}
.payment-result-card__icon--pending svg {
    color: var(--color-warning);
}
.payment-result-card__icon--failed svg {
    color: var(--color-error);
}
/* Subtle pulse for processing state to convey ongoing activity */
.payment-result-card__icon--processing {
    animation: processingPulse 2s ease-in-out infinite;
}
@keyframes processingPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.payment-result-card__icon--cancel svg {
    color: var(--color-text-secondary);
}
.payment-result-card__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.payment-result-card__title--success {
    color: var(--color-success);
}
.payment-result-card__title--processing {
    color: var(--color-warning);
}
.payment-result-card__title--pending {
    color: var(--color-warning);
}
.payment-result-card__title--failed {
    color: var(--color-error);
}
.payment-result-card__title--cancel {
    color: var(--color-text);
}
.payment-result-card__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}
.payment-result-card__message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height);
    margin-bottom: var(--space-xl);
}
.payment-result-card__status {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    margin: calc(var(--space-md) * -1) auto var(--space-xl);
    max-width: 460px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
}
.payment-result-card__status strong {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
}
.payment-result-card__status p {
    margin: 0;
}
.payment-result-card__support-note {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height);
    margin: calc(var(--space-md) * -1) 0 var(--space-lg);
}
/* Receipt table: label-value rows for order details */
.payment-result-card__receipt {
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xl);
    overflow: hidden;
}
.payment-result-card__receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-md);
}
.payment-result-card__receipt-row + .payment-result-card__receipt-row {
    border-top: 1px solid var(--color-border);
}
.payment-result-card__receipt-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.payment-result-card__receipt-value {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}
@media (max-width: 520px) {
    .payment-result-card__receipt-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .payment-result-card__receipt-value {
        text-align: left;
    }
}
.payment-result-card__actions {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}
.payment-result-card__actions .btn {
    min-width: 200px;
    max-width: 100%;
}
.payment-result-card__countdown {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

@media (min-width: 480px) {
    .payment-result-card__actions {
        flex-direction: row;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payment-method-card:hover {
        transform: none;
    }
    .payment-result-card__icon--processing {
        animation: none;
    }
    .wizard-panel.is-active {
        animation: none;
    }
}

/* === Focus Visibility (WCAG 2.4.7) ===
   Requirement: all interactive elements must show visible focus indicator for keyboard users.
   Approach: use :focus-visible to only show outlines for keyboard navigation, not mouse clicks.
   Side effect: mouse users see no outline change; keyboard users get a clear 2px accent ring. */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Remove default outline for mouse users while preserving keyboard focus */
:focus:not(:focus-visible) {
    outline: none;
}

/* Specific focus styles for interactive components that benefit from shadow + inset treatment */
.btn:focus-visible,
.pay-method:focus-visible,
.crypto-network-btn:focus-visible {
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.3);
}

/* Form inputs use inset outline so the ring does not interfere with the border visually */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -1px;
}

/* Tabs use inset outline to stay within the component boundary */
.tabs__tab:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

/* Requirement: featured showcase links need the same visible keyboard focus as regular video cards. */
/* Approach: share the existing card focus ring instead of creating a separate focus style. */
.video-card:focus-visible,
.video-card a:focus-visible,
.featured-card:focus-visible,
.featured-card a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Pagination links */
.pagination a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* === Reduced Motion (WCAG 2.3.3) ===
   Requirement: respect user motion preferences for hover animations.
   Approach: collapse all transition/animation durations to near-zero when user prefers reduced motion.
   Side effect: all transform hover effects (card lifts, image scale) are instant, not removed entirely. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}