/* =========================================================
   YT Feed Pro v3.1 — Public Styles
   ========================================================= */

.ytfp-feed {
    --ytfp-bg:       #ffffff;
    --ytfp-text:     #333333;
    --ytfp-accent:   #ff0000;
    --ytfp-radius:   8px;
    --ytfp-gap:      16px;
    --ytfp-cols:     3;
    --ytfp-cols-mob: 1;
    background: var(--ytfp-bg);
    color:      var(--ytfp-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}
.ytfp-feed *, .ytfp-feed *::before, .ytfp-feed *::after { box-sizing: border-box; }

/* ---- Grid ---- */
.ytfp-grid {
    display: grid;
    grid-template-columns: repeat(var(--ytfp-cols), minmax(0, 1fr));
    gap: var(--ytfp-gap);
}
@media (max-width: 768px) {
    .ytfp-grid { grid-template-columns: repeat(var(--ytfp-cols-mob), minmax(0, 1fr)); }
}

/* ---- Shorts grid: narrower columns for portrait cards ---- */
.ytfp-grid--shorts {
    grid-template-columns: repeat(var(--ytfp-cols), minmax(0, 1fr));
}
@media (max-width: 768px) {
    .ytfp-grid--shorts { grid-template-columns: repeat(2, 1fr); }
}

/* ---- List layout ---- */
.ytfp-layout-list .ytfp-grid { grid-template-columns: 1fr; }
.ytfp-layout-list .ytfp-card--list { flex-direction: row; }
.ytfp-layout-list .ytfp-thumb-wrap { flex: 0 0 280px; max-width: 280px; }
.ytfp-layout-list .ytfp-card-body  { flex: 1; padding: 16px; }
@media (max-width: 600px) {
    .ytfp-layout-list .ytfp-card--list { flex-direction: column; }
    .ytfp-layout-list .ytfp-thumb-wrap { flex: none; max-width: 100%; }
}

/* ---- Featured layout ---- */
.ytfp-featured-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ytfp-gap); }
.ytfp-featured-main .ytfp-card { height: 100%; }
.ytfp-featured-list { display: flex; flex-direction: column; gap: var(--ytfp-gap); }
.ytfp-featured-list .ytfp-card { flex-direction: row; }
.ytfp-featured-list .ytfp-thumb-wrap { flex: 0 0 120px; }
.ytfp-featured-list .ytfp-card-body  { flex: 1; padding: 10px; }
.ytfp-featured-list .ytfp-title      { font-size: 13px; }
@media (max-width: 768px) {
    .ytfp-featured-layout { grid-template-columns: 1fr; }
    .ytfp-featured-list .ytfp-card { flex-direction: column; }
    .ytfp-featured-list .ytfp-thumb-wrap { flex: none; width: 100%; }
}

/* ---- Card ---- */
.ytfp-card {
    background: var(--ytfp-bg);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--ytfp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ytfp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Shorts card: remove horizontal stretch, let portrait thumb drive height */
.ytfp-card--short { height: 100%; }

/* ---- Thumbnail wrapper ---- */
.ytfp-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

/* Shorts use 9:16 portrait ratio */
.ytfp-thumb-wrap--short {
    aspect-ratio: 9 / 16;
}

/* Button / link fills entire thumb area */
.ytfp-thumb-link,
.ytfp-thumb-btn {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

/* Thumbnail image */
.ytfp-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
    pointer-events: none;
}

/* Short portrait crop — center the 16:9 frame vertically */
.ytfp-thumb--short {
    object-fit: cover;
    object-position: center center;
}

.ytfp-card:hover .ytfp-thumb { transform: scale(1.05); }

/* ---- YouTube-style play button ---- */
.ytfp-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background .2s;
    pointer-events: none;
}
.ytfp-play-btn svg {
    opacity: 0;
    transform: scale(.88);
    transition: opacity .22s, transform .22s;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.ytfp-card:hover .ytfp-play-btn { background: rgba(0,0,0,.2); }
.ytfp-card:hover .ytfp-play-btn svg { opacity: 1; transform: scale(1); }

/* ---- YouTube logo (landscape) ---- */
.ytfp-yt-logo {
    position: absolute;
    bottom: 7px;
    left: 7px;
    display: flex;
    pointer-events: none;
    opacity: .9;
}
.ytfp-yt-logo svg { width: 42px; height: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

/* ---- Shorts badge ---- */
.ytfp-shorts-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: .3px;
    pointer-events: none;
}

/* ---- Card body ---- */
.ytfp-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}

.ytfp-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ytfp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ytfp-title a {
    color: inherit;
    text-decoration: none;
}
.ytfp-title a:hover { color: var(--ytfp-accent); }

.ytfp-title-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--ytfp-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.ytfp-title-btn:hover { color: var(--ytfp-accent); }

.ytfp-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ytfp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #999;
}
.ytfp-meta-item svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    fill: currentColor;
}

.ytfp-yt-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Custom annotation ---- */
.ytfp-custom-block {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ytfp-has-custom .ytfp-custom-block {
    border-top: 2px solid var(--ytfp-accent);
}
.ytfp-custom-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ytfp-text);
    margin: 0;
    font-style: italic;
}
.ytfp-custom-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ytfp-accent);
    color: #fff !important;
    text-decoration: none !important;
    padding: 7px 14px;
    border-radius: calc(var(--ytfp-radius) / 2);
    font-size: 13px;
    font-weight: 600;
    transition: opacity .2s, transform .1s;
    align-self: flex-start;
}
.ytfp-custom-link:hover { opacity: .88; transform: translateX(2px); }
.ytfp-custom-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- View more on YouTube ---- */
/* ---- Frontend pagination (kicks in at >30 videos) ---- */
.ytfp-pagination-wrap {
    text-align: center;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.ytfp-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ytfp-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 12px 32px;
    border-radius: var(--ytfp-radius);
    font-size: 15px;
    font-weight: 600;
    transition: background .2s, transform .1s, opacity .2s;
    font-family: inherit;
}
.ytfp-load-more-btn:hover { filter: brightness(.9); transform: translateY(-1px); }
.ytfp-load-more-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ytfp-load-more-count { font-weight: 400; opacity: .85; font-size: 13px; }

.ytfp-page-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ytfp-page-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.ytfp-page-dot:hover { background: rgba(0,0,0,.3); transform: scale(1.2); }
.ytfp-page-dot.active { background: var(--ytfp-accent); transform: scale(1.25); }


/* ---- Error ---- */
.ytfp-error {
    background: #fff3f3;
    border-left: 4px solid #ff0000;
    padding: 12px 16px;
    color: #c00;
    border-radius: 4px;
    font-size: 14px;
}



/* =========================================================
   LIGHTBOX
   Structure:
     .ytfp-lightbox           fixed overlay
       .ytfp-lb-backdrop      dark glass — click to close
       .ytfp-lb-close         ✕ button floating OUTSIDE the card
       .ytfp-lb-wrap          modal card
         .ytfp-lb-inner       video | info two-column grid
           .ytfp-lb-video-wrap
             .ytfp-lb-iframe
           .ytfp-lb-info
   ========================================================= */

/* ---- Overlay ---- */
.ytfp-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: none !important;            /* hidden by default — no flash on page load */
    align-items: center !important;
    justify-content: center !important;
    padding: 48px 16px 16px; /* top padding creates space for the close btn above the card */
}

/* [hidden] attribute always forces it gone — beats any cached display rule */
.ytfp-lightbox[hidden] {
    display: none !important;
}

/* Only visible when JS adds the open class */
.ytfp-lightbox.ytfp-lb-open {
    display: flex !important;
}

/* ---- Backdrop ---- */
.ytfp-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ytfp-fade-in .2s ease both;
    cursor: pointer;
}
@keyframes ytfp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ytfp-slide-up {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---- Close button — floats above the card, outside .ytfp-lb-wrap ---- */
.ytfp-lb-close {
    /* Position relative to the overlay (.ytfp-lightbox), not the card */
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 10 !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,.45) !important;
    border-radius: 50% !important;
    background: rgba(20,20,20,.85) !important;
    cursor: pointer !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
    outline-offset: 3px;
    transition: background .18s, border-color .18s;
    /* NO font-size:0 here — that was hiding the X character */
}
.ytfp-lb-close:hover,
.ytfp-lb-close:focus {
    background: rgba(255,255,255,.2) !important;
    border-color: rgba(255,255,255,.85) !important;
}

/* ---- X icon — Unicode × character, always visible ---- */
.ytfp-lb-icon-x {
    display: block !important;
    font-size: 20px !important;
    font-style: normal !important;
    line-height: 1 !important;
    color: #ffffff !important;
    font-weight: 300 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    user-select: none;
    pointer-events: none;
    /* Nudge optical centre */
    margin-top: -1px;
}

/* ---- Modal card ---- */
.ytfp-lb-wrap {
    position: relative;
    z-index: 2;                    /* above backdrop (z:0), below close btn (z:10) */
    width: min(980px, 96vw);
    max-height: calc(94vh - 48px); /* subtract top padding */
    background: #111 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.85);
    animation: ytfp-slide-up .25s cubic-bezier(.22,1,.36,1) both;
    display: flex !important;
    flex-direction: column !important;
}

/* ---- Two-column grid inside card ---- */
.ytfp-lb-inner {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
@media (max-width: 700px) {
    .ytfp-lightbox { padding-top: 52px; }
    .ytfp-lb-inner { grid-template-columns: 1fr !important; overflow-y: auto; }
}

/* ---- Video pane ---- */
.ytfp-lb-video-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    flex-shrink: 0;
    align-self: flex-start;
}
.ytfp-lb-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ---- Info pane ---- */
.ytfp-lb-info {
    padding: 20px;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    background: #1a1a1a !important;
    color: #eee;
    min-height: 0;
}
.ytfp-lb-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff !important;
}
.ytfp-lb-meta {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}
.ytfp-lb-desc {
    font-size: 13px;
    color: #bbb;
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ytfp-lb-custom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ytfp-lb-custom-desc {
    font-size: 13px;
    color: #ddd;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}
.ytfp-lb-custom-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #ff0000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    align-self: flex-start;
    transition: opacity .2s;
}
.ytfp-lb-custom-link:hover { opacity: .85; }
.ytfp-lb-yt-link {
    margin-top: auto;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666 !important;
    text-decoration: none !important;
    border-top: 1px solid #2a2a2a;
    padding-top: 12px;
    transition: color .15s;
}
.ytfp-lb-yt-link:hover { color: #ff4444 !important; }