/* Obsessive Streaming Panel — Frontend styles
   These are the base defaults. The plugin injects inline CSS variables
   (radius, overlay strength, colors, toggles) that override these. */

/* Fallbacks (overridden by plugin’s inline CSS) */
    :root {
            --osp-radius: 14px;
            --osp-border: 3px;
            --osp-overlay: 36%;
            --osp-glaze: .12;
            --osp-watch-text: #ffffff;
            --osp-watch-label: #374151;
            --osp-title-color: #111111;
            --osp-year-color: #6B7280;
        }

/* Grid */
.osp-grid {
    display: grid;
    gap: 16px;
}

.osp-grid.columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.osp-grid.columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .osp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .osp-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Card */
.osp-card {
    position: relative;
    background: #fff;
    border-radius: var(--osp-radius);
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    border: 1px solid #e6e6e6;
}

/* Poster */
.osp-card__poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: var(--osp-radius);
    overflow: hidden;
    border: var(--osp-border) solid rgba(0, 0, 0, .08);
}

/* Kill any theme borders/shadows on images inside our component */
.osp-card__poster,
.osp-card__poster img,
.osp-card__poster .wp-post-image {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
}

.osp-card__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.osp-card__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    background: #f3f4f6;
    color: #9ca3af;
    font-weight: 700;
}

/* Meta */
.osp-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.osp-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--osp-title-color);
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}

.osp-card__year {
    font-size: 12px;
    color: var(--osp-year-color);
    opacity: 1;
}

/* Overlay & brand chip (plugin can disable via inline CSS) */
.osp-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(130deg,
            color-mix(in srgb, var(--svc) var(--osp-overlay), transparent) 0%,
            transparent 60%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.osp-card__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, var(--osp-glaze)) 0%,
            rgba(255, 255, 255, 0) 60%);
}

.osp-card__brand {
    position: absolute;
    right: -2px;
    bottom: -2px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .02em;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--svc) 92%, #fff 8%);
    color: #fff;
    border-radius: 999px;
}

/* Watch row with compact icons (theme-proof links) */
.osp-card__watch {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}

.osp-card__label {
    font-weight: 700;
    color: var(--osp-watch-label);
}

.osp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--osp-watch-text) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    font-weight: 800;
    font-size: 10px;
}

.osp-ico:visited {
    color: var(--osp-watch-text) !important;
}

.osp-ico:hover {
    filter: brightness(.92);
}

/* Compact (widget) variant */
.osp-grid.osp-compact .osp-card {
    padding-bottom: 8px;
}

.osp-grid.osp-compact .osp-card__meta {
    display: none;
}

/* hides title/year if present */
.osp-grid.osp-compact .osp-card__watch {
    justify-content: center;
}

/* center the icons */
.osp-grid.osp-compact .osp-card__label {
    display: none;
}

/* no "Watch:" label */
.osp-grid.osp-compact .osp-ico {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

/* Guard card titles from theme H3 rules */
.osp-grid .osp-card .osp-card__meta .osp-card__title,
.osp-grid .osp-card h3.osp-card__title {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    color: var(--osp-title-color) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
    display: block;
}

/* Some themes inject decorative ::before/::after on headings */
.osp-grid .osp-card .osp-card__meta .osp-card__title::before,
.osp-grid .osp-card .osp-card__meta .osp-card__title::after {
    content: none !important;
}

/* Brand tints for overlays (applied via class on <article>) */
.service-netflix {
    --svc: #e50914;
}

.service-hulu {
    --svc: #1ce783;
}

.service-disneyplus {
    --svc: #113ccf;
}

.service-primevideo {
    --svc: #00a8e1;
}

.service-hbomax {
    --svc: #6d31ed;
}

.service-peacock {
    --svc: #00a1f1;
}

.service-appletv {
    --svc: #000000;
}

.service-paramountplus {
    --svc: #0064ff;
}

.service-youtube {
    --svc: #ff0000;
}

.service-crunchyroll {
    --svc: #f47521;
}

.service-tubi {
    --svc: #ff6b00;
}

.service-viki {
    --svc: #3c9ae9;
}

.service-iqiyi {
    --svc: #23c400;
}

.service-gagaoolala {
    --svc: #00c0ff;
}

.service-roku {
    --svc: #6f2da8;
}

/* Icon backgrounds (one per service) */
.ico-netflix {
    background: #e50914;
}

.ico-hulu {
    background: #1ce783;
    color: #063a16;
}

.ico-disneyplus {
    background: #113ccf;
}

.ico-primevideo {
    background: #00a8e1;
}

.ico-hbomax {
    background: #6d31ed;
}

.ico-peacock {
    background: #00a1f1;
}

.ico-appletv {
    background: #000000;
}

.ico-paramountplus {
    background: #0064ff;
}

.ico-youtube {
    background: #ff0000;
}

.ico-crunchyroll {
    background: #f47521;
}

.ico-tubi {
    background: #ff6b00;
}

.ico-viki {
    background: #3c9ae9;
}

.ico-iqiyi {
    background: #23c400;
    color: #063a16;
}

.ico-gagaoolala {
    background: #00c0ff;
}

.ico-roku {
    background: #6f2da8;
}

/* SAFE RESET for theme image borders inside Streaming Panel */
.osp-card__poster,
.osp-card__poster img,
.osp-card__poster .wp-post-image,
.osp-card__poster a,
.osp-card__poster a img {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Ensure poster image still behaves correctly */
.osp-card__poster img,
.osp-card__poster .wp-post-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Some themes add borders via filter/drop-shadow — neutralize just in our scope */
.osp-card__poster img,
.osp-card__poster .wp-post-image {
    filter: none !important;
}