/* Video Masonry Block Styles */
/* Uses WordPress theme CSS custom properties for colors,
   so the plugin integrates with any theme's palette. */

/* ===== Theme-Aware Color Variables (Fallbacks for non-block themes) ===== */
:root {
    --jsi-fg:            var(--wp--preset--color--foreground, #111);
    --jsi-bg:            var(--wp--preset--color--background, #fff);
    --jsi-primary:       var(--wp--preset--color--primary, #106ebe);
    --jsi-secondary:     var(--wp--preset--color--secondary, #d5dce3);
    --jsi-tertiary:      var(--wp--preset--color--tertiary, #f0ede4);
    --jsi-btn-bg:        var(--wp--custom--elements--button--color--background, var(--jsi-primary));
    --jsi-btn-text:      var(--wp--custom--elements--button--color--text, #fff);
    --jsi-btn-hover-bg:  var(--wp--custom--elements--button--hover--color--background, var(--jsi-fg));
    --jsi-btn-hover-text:var(--wp--custom--elements--button--hover--color--text, #fff);
    --jsi-btn-radius:    var(--wp--custom--elements--button--border--radius, 2rem);
    --jsi-input-radius:  var(--wp--custom--elements--input--border--radius, 4px);
    --jsi-input-border:  var(--wp--custom--elements--input--border--color, var(--jsi-fg));
    --jsi-muted:         color-mix(in srgb, var(--jsi-fg) 55%, transparent);
    --jsi-border:        color-mix(in srgb, var(--jsi-fg) 12%, transparent);
    --jsi-surface:       color-mix(in srgb, var(--jsi-fg) 4%, var(--jsi-bg));
}

/* Break out of theme content-size constraint — align-full approach */
.justshortit-video-masonry {
    margin: 2rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    max-width: none !important;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 2rem;
    box-sizing: border-box;
}

/* Block themes with global padding: use negative-margin approach */
.has-global-padding > .justshortit-video-masonry,
.has-global-padding .alignfull .justshortit-video-masonry {
    width: auto;
    position: static;
    left: auto;
    transform: none;
    margin-right: calc(var(--wp--style--root--padding-right, 2rem) * -1);
    margin-left: calc(var(--wp--style--root--padding-left, 2rem) * -1);
    padding-right: var(--wp--style--root--padding-right, 2rem);
    padding-left: var(--wp--style--root--padding-left, 2rem);
}

/* ===== Filters ===== */
.justshortit-video-masonry .masonry-filters {
    background: var(--jsi-surface) !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px !important;
    margin-bottom: 2rem;
    border: 1px solid var(--jsi-border) !important;
    box-sizing: border-box !important;
}

.justshortit-video-masonry .masonry-filters *,
.justshortit-video-masonry .masonry-filters *::before,
.justshortit-video-masonry .masonry-filters *::after {
    box-sizing: border-box !important;
}

.justshortit-video-masonry .filters-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: flex-end !important;
}

.justshortit-video-masonry .filter-group {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 180px;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}

.justshortit-video-masonry .filter-group label {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.4rem !important;
    color: var(--jsi-muted) !important;
    display: block !important;
}

.justshortit-video-masonry .filter-group input,
.justshortit-video-masonry .filter-group select {
    padding: 0.5rem 0.75rem !important;
    border: 1px solid var(--jsi-border) !important;
    border-radius: var(--jsi-input-radius) !important;
    font-size: 0.875rem !important;
    background: var(--jsi-bg) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--jsi-fg) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Restore select dropdown arrow */
.justshortit-video-masonry .filter-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6rem center !important;
    background-size: 16px !important;
    padding-right: 2rem !important;
}

.justshortit-video-masonry .filter-group input:focus,
.justshortit-video-masonry .filter-group select:focus {
    outline: none !important;
    border-color: var(--jsi-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jsi-primary) 15%, transparent) !important;
}

.justshortit-video-masonry .filter-actions {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: flex-end !important;
    flex-shrink: 0;
}

.justshortit-video-masonry .apply-filters {
    background: var(--jsi-btn-bg) !important;
    color: var(--jsi-btn-text) !important;
    border: 1px solid transparent !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: var(--jsi-input-radius) !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.2s;
    white-space: nowrap;
}

.justshortit-video-masonry .apply-filters:hover {
    background: var(--jsi-btn-hover-bg) !important;
    color: var(--jsi-btn-hover-text) !important;
}

.justshortit-video-masonry .reset-filters {
    background: transparent !important;
    color: var(--jsi-muted) !important;
    border: 1px solid var(--jsi-border) !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: var(--jsi-input-radius) !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s;
    white-space: nowrap;
}

.justshortit-video-masonry .reset-filters:hover {
    background: var(--jsi-surface) !important;
    color: var(--jsi-fg) !important;
    border-color: color-mix(in srgb, var(--jsi-fg) 25%, transparent) !important;
}

/* ===== Masonry Grid ===== */
.masonry-videos {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .masonry-videos {
        grid-template-columns: repeat(var(--columns-tablet, 2), 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 600px) {
    .masonry-videos {
        grid-template-columns: repeat(var(--columns-mobile, 1), 1fr);
        gap: 1rem;
    }
}

/* ===== Video Cards ===== */
.video-card {
    background: var(--jsi-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Card link wrapper */
.video-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ===== Thumbnail ===== */
.video-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #1a1a2e;
}

.video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.08);
    filter: brightness(0.85);
}

.video-placeholder-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Overlay with duration and play icon */
.video-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.play-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--jsi-primary) 90%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--jsi-primary) 40%, transparent);
}

.play-icon svg {
    margin-left: 3px;
}

.video-card:hover .play-icon {
    opacity: 1;
    transform: scale(1);
}

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.4;
    z-index: 2;
    backdrop-filter: blur(4px);
}

/* ===== Card Content ===== */
.video-content {
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.video-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-title a {
    color: var(--jsi-fg);
    text-decoration: none;
    transition: color 0.2s;
}

.video-title a:hover {
    color: var(--jsi-primary);
}

.video-description {
    color: var(--jsi-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ===== Meta Info ===== */
.video-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--jsi-border);
}

.video-meta-primary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--jsi-muted);
    flex-wrap: wrap;
}

.video-director {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: color-mix(in srgb, var(--jsi-fg) 70%, transparent);
}

.video-year {
    color: color-mix(in srgb, var(--jsi-fg) 45%, transparent);
    font-weight: 500;
}

.video-year::before {
    content: "·";
    margin-right: 0.75rem;
    color: var(--jsi-border);
}

.video-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.genre-tag {
    background: var(--jsi-tertiary);
    color: color-mix(in srgb, var(--jsi-fg) 70%, transparent);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: background 0.2s;
}

.video-card:hover .genre-tag {
    background: var(--jsi-secondary);
    color: #fff;
}

.video-card:hover .genre-tag a {
    color: #fff;
}

/* ===== Star Rating ===== */
.video-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 0.15rem;
}

.video-rating .star {
    font-size: 0.85rem;
    line-height: 1;
}

.video-rating .star-full {
    color: #f5c518;
}

.video-rating .star-half {
    color: #f5c518;
    opacity: 0.6;
}

.video-rating .star-empty {
    color: #555;
}

/* ===== Tags ===== */
.video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.insight-tag {
    background: color-mix(in srgb, var(--jsi-primary) 12%, transparent);
    color: var(--jsi-primary);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: background 0.2s;
}

.video-card:hover .insight-tag {
    background: color-mix(in srgb, var(--jsi-primary) 20%, transparent);
}

/* ===== Load More ===== */
.load-more-container {
    text-align: center;
    margin-top: 2.5rem;
}

.load-more-videos {
    background: var(--jsi-btn-bg);
    color: var(--jsi-btn-text);
    border: none;
    padding: 0.85rem 2.5rem;
    border-radius: var(--jsi-btn-radius);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--jsi-btn-bg) 30%, transparent);
}

.load-more-videos:hover {
    background: var(--jsi-btn-hover-bg);
    color: var(--jsi-btn-hover-text);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--jsi-btn-hover-bg) 40%, transparent);
}

.load-more-videos:active {
    transform: translateY(0);
}

.load-more-videos:disabled {
    background: var(--jsi-secondary);
    color: var(--jsi-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ===== Loading ===== */
.loading-indicator {
    text-align: center;
    padding: 2rem;
    display: none;
}

.loading-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid var(--jsi-border);
    border-top: 3px solid var(--jsi-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 0.75rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== Video Modal ===== */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
}

.video-modal {
    background: #1a1a1a;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 100001;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.video-container {
    position: relative;
    width: 80vw;
    max-width: 1200px;
    height: 45vw;
    max-height: 675px;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-info {
    padding: 1.25rem 1.5rem;
    color: #fff;
}

.video-info h3 {
    margin: 0 0 0.5rem 0;
    color: #fff;
    font-weight: 700;
}

.video-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 0.9rem;
}

/* ===== No Results ===== */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--jsi-muted);
    grid-column: 1 / -1;
}

.no-results h3 {
    margin-bottom: 0.5rem;
    color: var(--jsi-fg);
    font-size: 1.25rem;
}

.no-results p {
    font-size: 0.95rem;
}

/* ===== Film Detail Page ===== */
/* Film detail: match theme's full-width layout via alignfull negative-margin */
.jsi-film-detail-page {
    max-width: none !important;
    width: auto !important;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--jsi-fg);
    box-sizing: border-box;
}

/* Block themes: break out like alignfull, then re-pad */
.has-global-padding > .jsi-film-detail-page,
.has-global-padding .alignfull .jsi-film-detail-page {
    margin-right: calc(var(--wp--style--root--padding-right, 1rem) * -1);
    margin-left: calc(var(--wp--style--root--padding-left, 1rem) * -1);
    padding-right: var(--wp--style--root--padding-right, 1rem);
    padding-left: var(--wp--style--root--padding-left, 1rem);
}

/* Constrain children to 1000px centered */
.jsi-film-detail-page > * {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.jsi-film-detail-page *,
.jsi-film-detail-page *::before,
.jsi-film-detail-page *::after {
    box-sizing: border-box;
}

/* Reset theme overrides on common elements inside film detail */
.jsi-film-detail-page a {
    text-decoration: none;
    border: none;
    box-shadow: none;
    background: none;
}

.jsi-film-detail-page span {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.jsi-film-detail-page svg {
    display: inline-block;
    vertical-align: middle;
    max-width: none;
    max-height: none;
    fill: currentColor;
}

.jsi-film-detail-page h1,
.jsi-film-detail-page h2,
.jsi-film-detail-page h3 {
    margin-top: 0;
    letter-spacing: normal;
    text-transform: none;
}

.jsi-film-detail-page p {
    margin-top: 0;
}

.jsi-film-detail-page ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jsi-film-detail-page li {
    margin: 0;
    padding: 0;
}

/* ===== Film Detail — Back Link ===== */

.jsi-film-detail-page .jsi-film-back {
    margin-bottom: 1.5rem;
}

.jsi-film-detail-page .jsi-film-back a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem;
    color: var(--jsi-muted) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
    padding: 0;
    margin: 0;
    line-height: 1.4;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

.jsi-film-detail-page .jsi-film-back a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.jsi-film-detail-page .jsi-film-back a:hover {
    color: var(--jsi-primary) !important;
}

.jsi-film-detail-page .jsi-film-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .jsi-film-detail-page .jsi-film-player {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.jsi-film-detail-page .jsi-film-player iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    aspect-ratio: 16 / 9;
}

.jsi-film-detail-page .jsi-film-player-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jsi-film-detail-page .jsi-film-info {
    background: var(--jsi-bg);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.jsi-film-detail-page .jsi-film-info h1 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    color: var(--jsi-fg) !important;
    line-height: 1.2 !important;
    text-align: left;
    border: none;
}

.jsi-film-detail-page .jsi-film-info-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--jsi-border);
    flex-direction: row !important;
}

.jsi-film-detail-page .jsi-film-meta-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    background: var(--jsi-tertiary) !important;
    color: color-mix(in srgb, var(--jsi-fg) 70%, transparent) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.jsi-film-detail-page .jsi-film-meta-badge svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.jsi-film-detail-page .jsi-film-meta-badge.director {
    background: color-mix(in srgb, var(--jsi-primary) 12%, var(--jsi-bg)) !important;
    color: color-mix(in srgb, var(--jsi-primary) 80%, var(--jsi-fg)) !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.duration {
    background: #fff3cd !important;
    color: #856404 !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.year {
    background: #d4edda !important;
    color: #155724 !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.genre {
    background: var(--jsi-tertiary) !important;
    color: color-mix(in srgb, var(--jsi-fg) 75%, transparent) !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.country {
    background: color-mix(in srgb, var(--jsi-primary) 10%, var(--jsi-bg)) !important;
    color: color-mix(in srgb, var(--jsi-primary) 65%, var(--jsi-fg)) !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.rating {
    background: #fff8e1 !important;
    color: #f57f17 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.rating .star {
    font-size: 0.85rem !important;
    line-height: 1 !important;
    display: inline !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.rating .star-full {
    color: #f5c518 !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.rating .star-half {
    color: #f5c518 !important;
    opacity: 0.6;
}

.jsi-film-detail-page .jsi-film-meta-badge.rating .star-empty {
    color: #ccc !important;
}

.jsi-film-detail-page .jsi-film-meta-badge.rating .rating-value {
    font-size: 0.75rem !important;
    margin-left: 3px;
    color: var(--jsi-muted) !important;
    display: inline !important;
}

.jsi-film-detail-page .jsi-film-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 0;
}

.jsi-film-detail-page .jsi-film-tag {
    background: color-mix(in srgb, var(--jsi-primary) 8%, transparent) !important;
    color: var(--jsi-primary) !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    transition: background 0.2s;
    display: inline-block !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.jsi-film-detail-page .jsi-film-tag:hover {
    background: color-mix(in srgb, var(--jsi-primary) 16%, transparent) !important;
}

.jsi-film-detail-page .jsi-film-description {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--jsi-fg);
    margin-bottom: 1.5rem;
}

.jsi-film-detail-page .jsi-film-description p {
    margin: 0 0 1rem;
}

.jsi-film-detail-page .jsi-film-extra-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--jsi-border);
}

.jsi-film-detail-page .jsi-film-extra-section h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--jsi-fg) !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
}

.jsi-film-detail-page .jsi-film-extra-section p {
    color: var(--jsi-muted);
    line-height: 1.7;
    margin: 0;
}

.jsi-film-detail-page .jsi-film-awards-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem;
}

.jsi-film-detail-page .jsi-film-awards-list li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem !important;
    background: #fffbeb !important;
    border-radius: 8px;
    border-left: 3px solid #f59e0b !important;
}

.jsi-film-detail-page .jsi-award-name {
    font-weight: 600 !important;
    color: var(--jsi-fg) !important;
}

.jsi-film-detail-page .jsi-award-year {
    color: var(--jsi-muted) !important;
    font-size: 0.85rem !important;
}

.jsi-film-detail-page .jsi-film-not-found {
    text-align: center;
    padding: 4rem 2rem;
}

.jsi-film-detail-page .jsi-film-not-found h2 {
    font-size: 1.5rem !important;
    color: var(--jsi-fg) !important;
    margin-bottom: 1rem;
}

.jsi-film-detail-page .jsi-film-not-found a {
    display: inline-block !important;
    background: var(--jsi-btn-bg) !important;
    color: var(--jsi-btn-text) !important;
    padding: 0.75rem 2rem !important;
    border-radius: var(--jsi-btn-radius) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: background 0.2s;
}

.jsi-film-detail-page .jsi-film-not-found a:hover {
    background: var(--jsi-btn-hover-bg) !important;
    color: var(--jsi-btn-hover-text) !important;
}

/* ── Related Films ── */
.jsi-film-detail-page .jsi-related-films {
    margin-top: 2.5rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid var(--jsi-border) !important;
}

.jsi-film-detail-page .jsi-related-films h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--jsi-fg) !important;
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
}

.jsi-film-detail-page .jsi-related-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem !important;
}

.jsi-film-detail-page .jsi-related-card {
    display: block !important;
    text-decoration: none !important;
    background: var(--jsi-surface) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    border: none !important;
}

.jsi-film-detail-page .jsi-related-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

.jsi-film-detail-page .jsi-related-thumb {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important;  /* 16:9 */
    overflow: hidden !important;
    background: #1a1a1a !important;
}

.jsi-film-detail-page .jsi-related-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.jsi-film-detail-page .jsi-related-placeholder {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2a2a2a !important;
}

.jsi-film-detail-page .jsi-related-duration {
    position: absolute !important;
    bottom: 6px !important;
    right: 6px !important;
    background: rgba(0,0,0,0.8) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.jsi-film-detail-page .jsi-related-info {
    padding: 0.6rem 0.75rem !important;
}

.jsi-film-detail-page .jsi-related-info h4 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--jsi-fg) !important;
    margin: 0 0 0.2rem !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.jsi-film-detail-page .jsi-related-director {
    font-size: 0.75rem !important;
    color: var(--jsi-muted) !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
    .jsi-film-detail-page {
        padding: 1rem;
    }

    .jsi-film-detail-page .jsi-film-info {
        padding: 1.25rem;
    }

    .jsi-film-detail-page .jsi-film-info h1 {
        font-size: 1.5rem !important;
    }

    .jsi-film-detail-page .jsi-film-info-meta {
        gap: 0.5rem !important;
    }

    .jsi-film-detail-page .jsi-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .justshortit-video-masonry .masonry-filters {
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .justshortit-video-masonry .filters-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    .justshortit-video-masonry .filter-group {
        flex: unset !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    /* Search spans full width */
    .justshortit-video-masonry .filter-group:first-child {
        grid-column: 1 / -1;
    }

    /* Hide labels on mobile — inputs/selects have placeholders */
    .justshortit-video-masonry .filter-group label {
        display: none !important;
    }

    .justshortit-video-masonry .filter-group input,
    .justshortit-video-masonry .filter-group select {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .justshortit-video-masonry .filter-actions {
        grid-column: 1 / -1;
        display: flex !important;
        gap: 0.5rem !important;
    }

    .justshortit-video-masonry .apply-filters,
    .justshortit-video-masonry .reset-filters {
        flex: 1;
        padding: 0.45rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
    }

    .video-container {
        width: 95vw;
        height: 53vw;
    }

    .video-modal {
        margin: 0.5rem;
        border-radius: 8px;
    }

    .play-icon {
        width: 44px;
        height: 44px;
    }

    .play-icon svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .video-modal-overlay {
        padding: 0.5rem;
    }

    .video-container {
        width: 100%;
        height: 56vw;
    }
}

/* ===== Search Results — Film Carousel ===== */
.jsi-search-films-section {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem;
    background: var(--jsi-surface);
    border: 1px solid var(--jsi-border);
    border-radius: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.jsi-search-films-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.jsi-search-films-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--jsi-fg) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jsi-search-films-title svg {
    color: var(--jsi-primary);
    flex-shrink: 0;
}

/* Carousel arrows */
.jsi-carousel-arrows {
    display: flex;
    gap: 0.35rem;
}

.jsi-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--jsi-border);
    background: var(--jsi-bg);
    color: var(--jsi-fg);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.jsi-carousel-arrow:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--jsi-primary);
    color: var(--jsi-bg);
    border-color: var(--jsi-primary);
}

.jsi-carousel-arrow:disabled,
.jsi-carousel-arrow[aria-disabled="true"] {
    opacity: 0.3 !important;
    cursor: default !important;
    pointer-events: none !important;
    background: var(--jsi-bg) !important;
    color: var(--jsi-fg) !important;
    border-color: var(--jsi-border) !important;
}

/* Scrollable track */
.jsi-search-carousel-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--jsi-border) transparent;
}

.jsi-search-carousel-wrap::-webkit-scrollbar {
    height: 6px;
}

.jsi-search-carousel-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.jsi-search-carousel-wrap::-webkit-scrollbar-thumb {
    background: var(--jsi-border);
    border-radius: 3px;
}

.jsi-search-carousel {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem; /* room for scrollbar */
}

/* Individual card */
.jsi-carousel-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit !important;
    background: var(--jsi-bg);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--jsi-border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.jsi-carousel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

.jsi-carousel-card:visited {
    color: inherit !important;
}

.jsi-carousel-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
}

.jsi-carousel-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.jsi-carousel-card:hover .jsi-carousel-card-thumb img {
    transform: scale(1.06);
}

.jsi-carousel-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
}

.jsi-carousel-card-dur {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.3;
}

.jsi-carousel-card-body {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.jsi-carousel-card-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--jsi-fg) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jsi-carousel-card:hover .jsi-carousel-card-title {
    color: var(--jsi-primary) !important;
}

.jsi-carousel-card-meta {
    font-size: 0.75rem;
    color: var(--jsi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive */
@media (max-width: 768px) {
    .jsi-search-films-section {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .jsi-carousel-card {
        flex: 0 0 180px;
    }

    .jsi-carousel-card-title {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .jsi-carousel-card {
        flex: 0 0 160px;
    }

    .jsi-carousel-arrows {
        display: none;
    }
}

/* ===== Block Carousel (Top Rated / Newest) ===== */
.jsi-block-carousel {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--jsi-surface);
    border: 1px solid var(--jsi-border);
    border-radius: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    max-width: none !important;
    width: 100%;
}

.jsi-block-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.jsi-block-carousel-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--jsi-fg) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jsi-block-carousel-title svg {
    flex-shrink: 0;
}

.jsi-block-carousel--top-rated .jsi-block-carousel-title svg {
    color: #f0b429;
}

.jsi-block-carousel--newest .jsi-block-carousel-title svg {
    color: var(--jsi-primary);
}

.jsi-block-carousel-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--jsi-border) transparent;
}

.jsi-block-carousel-wrap::-webkit-scrollbar {
    height: 6px;
}

.jsi-block-carousel-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.jsi-block-carousel-wrap::-webkit-scrollbar-thumb {
    background: var(--jsi-border);
    border-radius: 3px;
}

.jsi-block-carousel-track {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

/* Rating badge on top-rated cards */
.jsi-carousel-card-rating {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.82);
    color: #f0b429;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.3;
}

.jsi-carousel-card-rating svg {
    fill: #f0b429;
}

.jsi-block-carousel-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.jsi-block-carousel-all {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--jsi-primary) !important;
    text-decoration: none !important;
    transition: opacity 0.2s;
}

.jsi-block-carousel-all:hover {
    opacity: 0.75;
    text-decoration: underline !important;
}

.jsi-block-carousel-all:visited {
    color: var(--jsi-primary) !important;
}

/* Responsive for block carousels */
@media (max-width: 768px) {
    .jsi-block-carousel {
        padding: 1rem;
    }

    .jsi-block-carousel-title {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .jsi-block-carousel .jsi-carousel-arrows {
        display: none;
    }
}

/* ===== Print ===== */
@media print {
    .masonry-filters,
    .load-more-container,
    .video-modal-overlay {
        display: none !important;
    }
}

/* ===== Editor Styles ===== */
.justshortit-video-masonry-editor {
    border: 2px dashed var(--jsi-border);
    padding: 2rem;
    border-radius: 8px;
    background: var(--jsi-surface);
}

.justshortit-video-masonry-preview h3 {
    margin-top: 0;
    color: var(--jsi-primary);
}

.masonry-preview {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

.masonry-preview.columns-2 { grid-template-columns: repeat(2, 1fr); }
.masonry-preview.columns-3 { grid-template-columns: repeat(3, 1fr); }
.masonry-preview.columns-4 { grid-template-columns: repeat(4, 1fr); }
.masonry-preview.columns-5 { grid-template-columns: repeat(5, 1fr); }

.film-card-preview {
    background: var(--jsi-bg);
    border: 1px solid var(--jsi-border);
    border-radius: 8px;
    overflow: hidden;
}

.film-card-preview .film-thumbnail {
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.film-card-preview .film-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-card-preview h4 {
    margin: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

.film-card-preview .film-meta {
    margin: 0.5rem;
    font-size: 0.8rem;
    color: var(--jsi-muted);
}