.cg-carousel{position:relative;overflow:hidden}.cg-carousel__container{position:relative;left:0}.cg-carousel__track{position:relative;display:grid;grid-auto-columns:100%;grid-auto-flow:column}.cg-carousel__slide{box-sizing:border-box;position:relative;width:100%}@-webkit-keyframes slideIn{100%{left:0}}@keyframes slideIn{100%{left:0}}@-webkit-keyframes slideOutLeft{100%{left:-100%}}@keyframes slideOutLeft{100%{left:-100%}}@-webkit-keyframes slideOutRight{100%{left:100%}}@keyframes slideOutRight{100%{left:100%}}
/* EmbedPress — Google Reviews
 *
 * Google-authentic UI. NO cards: reviews are a clean vertical list separated by
 * hairline dividers (matches Google's own review panel). Class names are a
 * stable contract shared with the Pro stylesheet/JS — only add, never rename.
 * Layout variants: .ep-google-reviews--{list|grid|carousel} (free) and Pro's
 * .ep-gr--preset-{masonry|slider|badge|spotlight|knowledge} / .ep-gr--dark.
 */

.ep-google-reviews {
    --ep-gr-text: #202124;
    --ep-gr-heading: #202124;
    --ep-gr-muted: #5f6368;
    --ep-gr-divider: #e8eaed;
    --ep-gr-card-border: #eef1f6;
    --ep-gr-card-fill: #f7f9fc;
    --ep-gr-card-fill-hover: #eef2f8;
    --ep-gr-star: #fbbc04;
    --ep-gr-star-empty: #dadce0;
    --ep-gr-link: #1a73e8;
    --ep-gr-bg: #ffffff;
    --ep-gr-accent: #1a73e8;
    --ep-gr-gap: 0px;
    --ep-gr-clamp: 5;
    /* Structural controls (set inline by the renderer from the columns/gap/
       max-width settings). Fallbacks here keep standalone CSS sane. */
    --ep-gr-columns: 3;
    --ep-gr-max-width: none;

    color: var(--ep-gr-text);
    font-family: "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    max-width: var(--ep-gr-max-width);
    margin-inline: auto; /* center when capped via max-width */
}
.ep-google-reviews *,
.ep-google-reviews *::before,
.ep-google-reviews *::after { box-sizing: border-box; }

/* ── Style isolation (CSS cascade layer) ──────────────────────────────────
 * The widget must look identical on EVERY theme/builder. We put a neutralizing
 * reset for the tags we render INSIDE a named @layer. Layered styles always
 * lose to unlayered styles in the cascade — but crucially, ALL of our widget
 * CSS that follows is UNLAYERED, so it always beats both this reset AND any
 * theme rule that is itself layered. For unlayered theme rules, the reset's
 * own specificity (a real `.ep-google-reviews tag` selector) plus our class
 * rules below handle the realistic cases (themes styling generic tags in
 * post content). Scoped to elements WE emit — never users' embedded content.
 */
@layer ep-gr-reset {
    .ep-google-reviews :is(div, span, p, a, img, time, button, article, header, h1, h2, h3, h4, ul, ol, li) {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        outline: none;
        text-decoration: none;
        list-style: none;
        float: none;
        max-width: none;
        text-transform: none;
        letter-spacing: normal;
        text-shadow: none;
        font-family: inherit;
        color: inherit;
    }
    .ep-google-reviews button { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; }
    .ep-google-reviews img { max-width: 100%; height: auto; vertical-align: middle; }
    .ep-google-reviews a { color: var(--ep-gr-link); }
}

/* ── Summary header ──────────────────────────────────────────────────────── */
.ep-gr-summary { margin-bottom: 8px; }
.ep-gr-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
/* Header alignment (the "Header alignment" control). */
.ep-gr-summary--align-center .ep-gr-summary-head,
.ep-gr-summary--align-right .ep-gr-summary-head { flex-wrap: wrap; }
.ep-gr-summary--align-center .ep-gr-summary-place { text-align: center; flex: 1 1 100%; }
.ep-gr-summary--align-right .ep-gr-summary-place { text-align: right; flex: 1 1 100%; }
.ep-gr-summary--align-center .ep-gr-summary-rating { justify-content: center; }
.ep-gr-summary--align-right .ep-gr-summary-rating { justify-content: flex-end; }
.ep-gr-summary--align-center .ep-gr-summary-head { justify-content: center; }
.ep-gr-summary--align-right .ep-gr-summary-head { justify-content: flex-end; }
.ep-gr-summary-name {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--ep-gr-heading);
}
.ep-gr-summary-address {
    font-size: 14px;
    color: var(--ep-gr-muted);
    margin-top: 4px;
}
.ep-gr-write-review {
    flex: 0 0 auto;
    border: 1px solid var(--ep-gr-divider);
    background: none;
    color: var(--ep-gr-link);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.ep-gr-write-review:hover { background: rgba(26, 115, 232, 0.06); text-decoration: none; }
.ep-gr-summary-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.ep-gr-summary-score {
    font-size: 44px;
    font-weight: 400;
    line-height: 1;
    color: var(--ep-gr-heading);
}
.ep-gr-summary-count { font-size: 15px; color: var(--ep-gr-text); }

/* ── Star rows (half-star fill overlay) ──────────────────────────────────── */
.ep-gr-stars,
.ep-gr-starrow {
    position: relative;
    display: inline-block;
    line-height: 1;
    font-size: 15px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.ep-gr-stars--lg .ep-gr-starrow,
.ep-gr-stars.ep-gr-stars--lg { font-size: 24px; letter-spacing: 2px; }
.ep-gr-starrow-track { color: var(--ep-gr-star-empty); }
.ep-gr-starrow-fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
    color: var(--ep-gr-star);
    white-space: nowrap;
}
/* SVG star glyphs inherit the row's color (track = empty, fill = gold) via
   currentColor, and size to the row's font-size via em so --lg still scales. */
.ep-gr-star-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.12em;
}
.ep-gr-starrow-track .ep-gr-star-svg { color: var(--ep-gr-star-empty); }
.ep-gr-starrow-fill .ep-gr-star-svg { color: var(--ep-gr-star); }

/* Legacy discrete stars (back-compat) */
.ep-gr-star { font-size: 15px; color: var(--ep-gr-star-empty); }
.ep-gr-star.is-filled { color: var(--ep-gr-star); }

/* ── Review list (NO cards — hairline dividers) ──────────────────────────── */
.ep-google-reviews--list .ep-gr-items { display: block; }
.ep-gr-review {
    padding: 22px 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.ep-google-reviews--list .ep-gr-review + .ep-gr-review {
    border-top: 1px solid var(--ep-gr-divider);
}

.ep-gr-review-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ep-gr-avatar {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f3f4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    overflow: hidden;
}
.ep-gr-avatar--placeholder { background: linear-gradient(135deg, #4285f4, #1a73e8); }
.ep-gr-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ep-gr-meta { flex: 1; min-width: 0; }
.ep-gr-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--ep-gr-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-gr-reviewer-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ep-gr-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-gr-dot { opacity: 0.7; }
/* Google "G" source badge, top-right of each review card. */
.ep-gr-source {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.ep-gr-source svg { display: block; }

.ep-gr-stars-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
}
.ep-gr-date { font-size: 13px; color: var(--ep-gr-muted); }

/* ── Review text + read-more clamp ───────────────────────────────────────── */
.ep-gr-body { margin: 0; }
.ep-gr-text {
    color: var(--ep-gr-text);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: var(--ep-gr-clamp);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ep-gr-body.is-expanded .ep-gr-text {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
.ep-gr-readmore {
    margin-top: 2px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ep-gr-link);
}
.ep-gr-readmore:hover { text-decoration: underline; }
.ep-gr-readmore .ep-gr-readmore-less { display: none; }
.ep-gr-body.is-expanded .ep-gr-readmore .ep-gr-readmore-more { display: none; }
.ep-gr-body.is-expanded .ep-gr-readmore .ep-gr-readmore-less { display: inline; }

/* ── Photo strip (horizontal thumbnails, like Google) ────────────────────── */
.ep-gr-photos {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow: hidden;
    flex-wrap: wrap;
}
.ep-gr-photo {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    border-radius: 10px;
    overflow: hidden;
    background: #e8eaed;
}
.ep-gr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-gr-photo--more::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

/* ── Owner response ──────────────────────────────────────────────────────── */
.ep-gr-owner {
    margin-top: 12px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 8px;
}
.ep-gr-owner-head { font-size: 12px; font-weight: 600; color: var(--ep-gr-heading); margin-bottom: 3px; }
.ep-gr-owner-text { font-size: 13px; line-height: 1.5; color: var(--ep-gr-muted); }

/* ── Like / thanks action row ────────────────────────────────────────────── */
.ep-gr-rev-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    color: var(--ep-gr-muted);
}
.ep-gr-rev-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.ep-gr-rev-like svg { display: block; }
.ep-gr-thanks-icon { font-size: 14px; }

/* ── Footer (View on Google) ─────────────────────────────────────────────── */
.ep-gr-footer { margin-top: 18px; }
.ep-gr-view-on-google {
    display: inline-block;
    color: var(--ep-gr-link);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}
.ep-gr-view-on-google:hover { text-decoration: underline; }

/* ── Grid layout (FLAT bordered boxes, EQUAL height) ─────────────────────── */
/* Real CSS grid with stretch rows so every box in a row matches the tallest —
   uniform, tidy. The read-more clamp keeps that tallest box bounded. Flat look:
   a hairline border, no shadow (that's what sets it apart from Card). */
.ep-google-reviews--grid .ep-gr-items {
    display: grid;
    grid-template-columns: repeat(var(--ep-gr-columns, 3), minmax(0, 1fr));
    gap: var(--ep-gr-gap, 20px);
    align-items: stretch;
}
.ep-google-reviews--grid .ep-gr-review {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background: var(--ep-gr-bg, #fff);
    border: 1px solid var(--ep-gr-divider);
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.18s ease;
}
.ep-google-reviews--grid .ep-gr-review:hover { border-color: #c6ccd8; }
/* Push the actions/footer to the card bottom so equal-height cards align. */
.ep-google-reviews--grid .ep-gr-rev-actions,
.ep-google-reviews--card .ep-gr-rev-actions { margin-top: auto; }

/* ── Card layout (FILLED boxes, EQUAL height — Essential Addons style) ───── */
/* Same equal-height grid. Distinct from the flat Grid layout via a soft FILLED
   surface + rounder corners (no shadow), with a subtle lift on hover. */
.ep-google-reviews--card .ep-gr-items {
    display: grid;
    grid-template-columns: repeat(var(--ep-gr-columns, 3), minmax(0, 1fr));
    gap: var(--ep-gr-gap, 24px);
    align-items: stretch;
}
.ep-google-reviews--card .ep-gr-review {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background: var(--ep-gr-card-fill, #f7f9fc);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 22px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.ep-google-reviews--card .ep-gr-review:hover {
    background: var(--ep-gr-card-fill-hover, #eef2f8);
    transform: translateY(-3px);
}

/* ── Carousel (real slider; controls added by JS) ────────────────────────── */
.ep-google-reviews--carousel {
    position: relative;
    /* Reserve a side gutter so the arrows sit clear of the cards instead of
       overlapping the review content. The .ep-gr-viewport lives inside this
       padding; the arrows are placed in the gutter (see .ep-gr-carousel-prev/next).
       Dots now sit in normal flow under the viewport (no bottom padding needed). */
    padding-inline: 48px;
}
/* The stationary .ep-gr-viewport (inserted by google-reviews.js) clips; the
   .ep-gr-items track inside it is what JS translates. overflow:hidden MUST live
   on the viewport, NOT the moving track — otherwise the clip box travels with
   the translate and the next page renders blank. */
.ep-google-reviews--carousel .ep-gr-viewport {
    overflow: hidden;
    width: 100%;
}
.ep-google-reviews--carousel .ep-gr-items {
    display: flex;
    align-items: flex-start; /* don't stretch short slides to the tallest one */
    width: 100%;
    will-change: transform;
}
/* Per-view = the "Columns" control. Each slide is 100%/columns of the viewport
   (the JS perView() measures the same ratio to compute pages). On phones we
   force a single slide regardless of the column setting. */
.ep-google-reviews--carousel .ep-gr-review {
    flex: 0 0 100%;
    max-width: 100%;
    /* Gap between carousel slides is applied as horizontal padding INSIDE each
       slide (half the gap per side → a full gap between adjacent cards). The
       slide's outer box stays flex-basis:100%/perView, so the JS percentage
       translate + perView ratio are unaffected. The visible card is .ep-gr-review
       content; box-sizing keeps padding inside the basis. Default 20px to match
       the grid/card layouts when no Gap is set. */
    padding: 22px calc(var(--ep-gr-gap, 20px) / 2);
    border: 0;
}
/* Tighter, CONSISTENT text clamp across the card layouts (carousel/grid/card +
   the Pro masonry/bubble presets) so a verbose review never towers over the
   short ones — every card starts the same height and "Read more" reveals the
   rest on click. Photo strips are height-limited for the same reason. */
.ep-google-reviews--carousel .ep-gr-text,
.ep-google-reviews--grid .ep-gr-text,
.ep-google-reviews--card .ep-gr-text,
.ep-gr--preset-masonry .ep-gr-text,
.ep-gr--preset-bubble .ep-gr-text { -webkit-line-clamp: 4; }
.ep-google-reviews--carousel .ep-gr-text { -webkit-line-clamp: 3; }
.ep-google-reviews--carousel .ep-gr-photos { max-height: 84px; overflow: hidden; }
@media (min-width: 700px) {
    .ep-google-reviews--carousel .ep-gr-review {
        flex-basis: calc(100% / var(--ep-gr-columns, 2));
        max-width: calc(100% / var(--ep-gr-columns, 2));
        padding-inline: 16px;
    }
}
.ep-gr-carousel-arrow {
    position: absolute;
    /* Center on the viewport. Dots occupy ~30px at the bottom (now in flow), so
       the viewport's vertical middle is a touch above the root's middle. */
    top: calc(50% - 16px);
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ep-gr-divider);
    background: #fff;
    color: var(--ep-gr-heading);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.ep-gr-carousel-arrow:hover { background: #f8f9fa; }
/* Centered within the carousel's 48px side gutter, clear of the cards. */
.ep-gr-carousel-prev { inset-inline-start: 6px; }
.ep-gr-carousel-next { inset-inline-end: 6px; }
/* In normal flow directly under the viewport so the dots follow the per-page
   height (the viewport flexes per page) instead of being pinned to a growing
   root bottom and leaving a gap. */
.ep-gr-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}
.ep-gr-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ep-gr-star-empty);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ep-gr-carousel-dot.is-active { background: var(--ep-gr-accent); transform: scale(1.2); }

/* ── States ──────────────────────────────────────────────────────────────── */
.ep-google-reviews--empty,
.ep-google-reviews--error {
    padding: 16px;
    border: 1px dashed var(--ep-gr-divider);
    border-radius: 10px;
    color: var(--ep-gr-muted);
    text-align: center;
}
.ep-google-reviews--error { border-color: #fad2cf; color: #c5221f; background: #fce8e6; }

/* "No place chosen yet" — a calm editor-only prompt, not an error. */
.ep-google-reviews--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px;
    border: 1px dashed var(--ep-gr-divider, #dcdfe6);
    border-radius: 12px;
    background: #f7f8fb;
    color: var(--ep-gr-muted, #6b7280);
    text-align: center;
}
.ep-google-reviews--placeholder .ep-gr-placeholder-icon { color: var(--ep-gr-accent, #5b4e96); }
.ep-google-reviews--placeholder strong { color: var(--ep-gr-heading, #25396f); font-size: 14px; }
.ep-google-reviews--placeholder span { font-size: 13px; max-width: 360px; }

/* Tablet: cap a high column count at 2 so cards stay readable. These are CSS
   Grid containers, so the responsive override MUST use grid-template-columns —
   `column-count` is a multi-column (columns) property and is a no-op on a grid,
   which is why the grid/card/bubble layouts previously never collapsed and cards
   got cut off in narrow containers. */
@media (max-width: 900px) and (min-width: 601px) {
    .ep-google-reviews--grid .ep-gr-items,
    .ep-google-reviews--card .ep-gr-items {
        grid-template-columns: repeat(min(2, var(--ep-gr-columns, 3)), minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .ep-google-reviews--grid .ep-gr-items,
    .ep-google-reviews--card .ep-gr-items {
        grid-template-columns: 1fr;
    }
    /* Tighter gutter on mobile so the single card keeps usable width. */
    .ep-google-reviews--carousel { padding-inline: 38px; }
    .ep-gr-carousel-prev { inset-inline-start: 2px; }
    .ep-gr-carousel-next { inset-inline-end: 2px; }
}

/* --- "Load more" button (FREE, AJAX pagination) --- */
.ep-gr-loadmore-wrap { text-align: center; margin-top: 18px; }
.ep-gr-loadmore {
    display: inline-block;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ep-gr-accent, #5b4e96);
    background: transparent;
    border: 1.5px solid var(--ep-gr-accent, #5b4e96);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}
.ep-gr-loadmore:hover { background: var(--ep-gr-accent, #5b4e96); color: #fff; }
.ep-gr-loadmore.is-loading { opacity: .6; cursor: default; }
.ep-gr-loadmore:disabled { cursor: default; }
.ep-gr--dark .ep-gr-loadmore { color: #e6e8eb; border-color: #3a4150; }
.ep-gr--dark .ep-gr-loadmore:hover { background: var(--ep-gr-accent, #5b4e96); border-color: var(--ep-gr-accent, #5b4e96); }

/* --- Pro-layout upsell — rendered INLINE in the content (not a modal) when an
   editor picks a Pro layout without Pro. Reuses EmbedPress's pro__alert card
   design tokens (#131F4D / #7C8DB5 / #5B4E96, 20px radius) but is self-contained
   here so it styles correctly in every GR context (frontend, Gutenberg SSR
   preview, AND the Elementor editor, where settings.css isn't loaded). --- */
.ep-gr-pro-upsell { display: block; }
.ep-gr-pro-upsell .ep-gr-pro-upsell__card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e6e8f0;
    border-radius: 20px;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}
.ep-gr-pro-upsell__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1eefb;
    border-radius: 50%;
    margin-bottom: 18px;
}
.ep-gr-pro-upsell .ep-gr-pro-upsell__card h2 {
    font-size: 22px;
    font-weight: 600;
    color: #131F4D;
    margin: 0 0 10px;
    padding: 0;
}
.ep-gr-pro-upsell .ep-gr-pro-upsell__card p {
    font-size: 14px;
    font-weight: 400;
    color: #7C8DB5;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 380px;
}
.ep-gr-pro-upsell .ep-gr-pro-upsell__btn {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: #5B4E96;
    padding: 11px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
}
.ep-gr-pro-upsell .ep-gr-pro-upsell__btn:hover { background: #4a3f7d; }
.ep-gr-pro-upsell .ep-gr-pro-upsell__note {
    font-size: 12px;
    color: #9aa3bd;
    margin: 14px 0 0 !important;
}

/* ── Loading state (place added, reviews still being fetched in the background)
   The frontend poller (google-reviews.js initPoller) self-refreshes the block
   when the job finishes — see GoogleReviewsRenderer::render_loading. ─────────── */
.ep-google-reviews--loading {
    border: 1px solid var(--ep-gr-card-border);
    border-radius: 12px;
    padding: 18px;
    background: #fff;
}
.ep-gr-loading-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.ep-gr-loading-text { display: flex; flex-direction: column; gap: 3px; }
.ep-gr-loading-text strong { font-size: 14px; color: var(--ep-gr-heading); font-weight: 600; }
.ep-gr-loading-text span { font-size: 12.5px; color: var(--ep-gr-muted); line-height: 1.5; max-width: 560px; }

.ep-gr-spinner {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid var(--ep-gr-divider);
    border-top-color: var(--ep-gr-link);
    border-radius: 50%;
    animation: ep-gr-spin 0.7s linear infinite;
}
@keyframes ep-gr-spin { to { transform: rotate(360deg); } }

.ep-gr-skeletons { display: flex; flex-direction: column; gap: 14px; }
.ep-gr-skel-card {
    border: 1px solid var(--ep-gr-card-border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ep-gr-skel-row { display: flex; align-items: center; gap: 10px; }
.ep-gr-skel-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ep-gr-skel {
    display: block;
    background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 37%, #eef1f6 63%);
    background-size: 400% 100%;
    animation: ep-gr-shimmer 1.4s ease infinite;
    border-radius: 6px;
}
.ep-gr-skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.ep-gr-skel-line { height: 11px; width: 100%; }
.ep-gr-skel-line--xs { width: 30%; }
.ep-gr-skel-line--sm { width: 45%; }
.ep-gr-skel-line--md { width: 70%; }
@keyframes ep-gr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Admin-only fetch-failed notice (visitors get nothing server-side). */
.ep-google-reviews--fetch-failed { text-align: left; }
.ep-google-reviews--fetch-failed p { margin: 0 0 8px; }
.ep-google-reviews--fetch-failed a { color: var(--ep-gr-link); }
.ep-google-reviews--fetch-failed .ep-gr-admin-only-note { color: var(--ep-gr-muted); font-size: 12px; }

/* ── Dark theme + accent (FREE — mirrors Essential Addons' free Business
   Reviews). The theme/accent controls are free, so the full dark-mode token
   set lives here, not only in the Pro stylesheet. Pro's google-reviews-pro.css
   keeps the PREMIUM-LAYOUT (masonry/badge/etc.) dark variants. ─────────────── */
.ep-google-reviews[data-ep-gr-accent] .ep-gr-starrow-fill,
.ep-google-reviews[data-ep-gr-accent] .ep-gr-star.is-filled {
    color: var(--ep-gr-accent);
}
.ep-google-reviews.ep-gr--dark {
    --ep-gr-text: #e8eaed;
    --ep-gr-heading: #ffffff;
    --ep-gr-muted: #9aa0a6;
    --ep-gr-divider: #3c4043;
    --ep-gr-card-border: #34373c;
    --ep-gr-card-bg: #26282c;
    --ep-gr-card-fill: #26282c;
    --ep-gr-card-fill-hover: #2d3035;
    --ep-gr-star-empty: #5f6368;
    --ep-gr-link: #8ab4f8;
    --ep-gr-bg: #202124;
    background: #202124;
    padding: 20px;
    border-radius: 12px;
}
.ep-gr--dark.ep-google-reviews--card .ep-gr-review,
.ep-gr--dark.ep-google-reviews--grid .ep-gr-review {
    background: var(--ep-gr-card-bg, #26282c);
    border-color: var(--ep-gr-card-border, #34373c);
}
.ep-gr--dark .ep-gr-write-review { border-color: #5f6368; }
.ep-gr--dark .ep-gr-owner { background: #2a2f37; }
.ep-gr--dark .ep-gr-photo { background: #2a2f37; }
.ep-gr--dark .ep-gr-avatar--placeholder { background: linear-gradient(135deg, #4285f4, #1a73e8); }
.ep-gr--dark .ep-gr-carousel-arrow { background: #2a2f37; border-color: #3c4043; color: #e8eaed; }
.ep-gr--dark .ep-gr-carousel-arrow:hover { background: #353b45; }

/**
 * @package     EmbedPress
 * @author      EmbedPress <help@embedpress.com>
 * @copyright   Copyright (C) 2018 EmbedPress. All rights reserved.
 * @license     GPLv2 or later
 * @since       1.0
 */
.embedpress-wrapper {
    position: relative;
}

.ose-dailymotion.responsive,
.ose-kickstarter.responsive,
.ose-rutube.responsive,
.ose-ted.responsive,
.ose-vimeo.responsive,
.ose-youtube.responsive,
.ose-ustream.responsive,
.ose-google-docs.responsive,
.ose-animatron.responsive,
.ose-amcharts.responsive,
.ose-on-aol-com.responsive,
.ose-animoto.responsive,
.ose-soundcloud.responsive,
.ose-videojug.responsive,
.ose-facebook.responsive,
.ose-issuu.responsive {
    overflow: hidden;
    position: relative;
    height: auto;
}

.ose-dailymotion.responsive iframe,
.ose-kickstarter.responsive iframe,
.ose-rutube.responsive iframe,
.ose-ted.responsive iframe,
.ose-vimeo.responsive iframe,
.ose-vine.responsive iframe,
.ose-youtube.responsive iframe,
.ose-ustream.responsive iframe,
.ose-google-docs.responsive iframe,
.ose-animatron.responsive iframe,
.ose-amcharts.responsive iframe,
.ose-on-aol-com.responsive iframe,
.ose-animoto.responsive iframe,
.ose-soundcloud.responsive iframe,
.ose-videojug.responsive iframe,
.ose-issuu.responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* 16:9 aspect ratio */
.ose-dailymotion.responsive,
.ose-kickstarter.responsive,
.ose-rutube.responsive,
.ose-ted.responsive,
.ose-vimeo.responsive,
.ose-youtube.responsive,
.ose-animatron.responsive,
.ose-amcharts.responsive,
.ose-on-aol-com.responsive,
.ose-animoto.responsive,
.ose-videojug.responsive {
    padding-bottom: 56.25%;
}

/* 1:1 aspect ratio */
.ose-vine.responsive {
    padding-bottom: 100%;
}

/* Mixed aspect ratio */
.ose-ustream.responsive {
    padding-bottom: 63.3%;
}

.ose-google-docs.responsive {
    padding-bottom: 62.6%;
}

.ose-google-docs.ose-google-docs-drawings.responsive {
    padding-bottom: 74.5%;
}

.ose-google-docs.ose-google-docs-document.responsive,
.ose-google-docs.ose-google-docs-forms.responsive,
.ose-google-docs.ose-google-docs-spreadsheets.responsive {
    padding-bottom: 142%;
}

.ose-soundcloud.responsive {
    padding-bottom: 155px;
}

.ose-issuu.responsive iframe {
    z-index: 2;
}

.ose-issuu.responsive {
    padding-bottom: 31.25%;
}

.ose-issuu>div>div>div:last-child {
    width: 100% !important;
    z-index: 0;
    position: absolute;
    bottom: 0;
}

.ose-mixcloud.responsive iframe {
    width: 100%;
}

/* Fix scrolling on iOS devices */
.ose-google-docs.responsive {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.ose-facebook.responsive iframe {
    padding-bottom: 0;
    width: 100%;
}

.elementor-widget iframe {
    max-height: 100% !important;
}

.elementor-cbutton-preview-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 30px;
    background: #fbf6f6;
}

@media only screen and (max-width: 800px) {

    .elementor-widget-embedpres_elementor .embedpress-facebook-vid-iframe,
    .embedpress-gutenberg-wrapper .embedpress-facebook-vid-iframe,
    .embedpress-facebook-vid-iframe {
        max-height: inherit !important;
    }

    .ep-first-video iframe {
        max-height: 100% !important;
    }

    .ep-youtube__content__block .youtube__content__body .content__wrap:not(.youtube-carousel) {
        grid-template-columns: repeat(auto-fit, minmax(calc(50% - 30px), 1fr)) !important;
    }
}

@media only screen and (max-width: 500px) {

    .elementor-widget-embedpres_elementor .embedpress-facebook-vid-iframe,
    .embedpress-gutenberg-wrapper .embedpress-facebook-vid-iframe,
    .embedpress-facebook-vid-iframe {
        max-height: 390px !important;
    }

    .ep-youtube__content__block .youtube__content__body .content__wrap:not(.youtube-carousel) {
        grid-template-columns: repeat(auto-fit, minmax(calc(100% - 30px), 1fr)) !important;
    }
}

.ose-matterport .embera-embed-responsive, .ose-matterport .embera-embed-responsive iframe {
    width: 100%;
    height: 100%;
}

.ose-flourish iframe {
    border: none;
}

.ose-deviantart img, .ose-deviantart a, .ose-deviantart div {
    width: 100%;
    height: 100%;
}

/*Meetup Event styling starts */
.ose-meetup {
    overflow: auto !important;
    text-align: left;
    display: block !important;
    margin: auto;
}

.ose-meetup img {
    height: auto;
}

article.embedpress-event div#sponsors {
    display: none;
}

.embedpress-event .link {
    color: #0098ab;
}

.embedpress-event .visibility--a11yHide {
    border: 0;
    clip: rect(0 0 0 0);
    position: absolute;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
}

.embedpress-event .text--small {
    font-size: 14px;
    margin: 0;
}

.embedpress-event .flex {
    display: flex;
    box-sizing: border-box;
}

.embedpress-event .flex--wrap {
    flex-wrap: wrap;
}

.embedpress-event .flex--row {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}

.embedpress-event .flex-item {
    flex-basis: 0;
    flex-grow: 1;
    width: auto;
    min-width: 0;
    /*padding-left: 16px;*/
    box-sizing: border-box;
}

.embedpress-event .flex-item--shrink {
    flex-basis: auto;
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
}

.embedpress-event .flex--row>.flex-item:first-child {
    padding-left: 0;
}

.embedpress-event .text--bold {
    font-weight: 700;
}

.embedpress-event h1,
.embedpress-event h2,
.embedpress-event h3,
.embedpress-event h4,
.embedpress-event h5,
.embedpress-event h6 {
    font-size: inherit;
}

.embedpress-event .ep-event--title {
    font-size: 32px;
    font-weight: 700;
}

.embedpress-event .ep-event--date {
    color: #757575;
    font-weight: 400;
    font-size: 16px;
}

/*Host*/
.embedpress-event .ep-event--host {
    margin-top: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.ep-event--host .avatar-print {
    border-radius: 50%;
    height: 50px;
    width: 50px;
}

.embedpress-event img.avatar--person {
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align: middle;
}

.event-info-hosts-text {
    padding-left: 20px;
    font-size: 16px;
    font-weight: 400;
}

.embedpress-event .event-description {
    margin-top: 20px;
}

.text--sectionTitle {
    font-size: 20px;
    line-height: 28px;
}

.ep-event--attendees {
    margin-top: 50px;
}

.ep-event--attendees>.flex {
    margin-bottom: 20px;
}

.ep-event--attendees .gridList {
    list-style: none;
    margin: 0 -16px 0 0;
    padding: 0;
}

.ep-event--attendees .gridList-item {
    width: auto;
}

.ep-event--attendees .gridList--autoHeight--has4>.gridList-item {
    flex: 0 0 50%;
    max-width: 50%;
}

.ep-event--attendees .groupMember-name {
    line-height: 1.2 !important;
}

.ep-event--attendees .avatar--person {
    margin-bottom: 15px;
    display: inline-block;
    border-radius: 50%;
}

.ep-event--attendees img.avatar-print {
    border-radius: 50%;
}

.ep-event--attendees .groupMember-role {
    font-size: 12px;
    color: #757575;
    padding-top: 2px;
    margin: 0;
}

.ep-event--attendees .groupMember {
    min-height: 100%;
    min-width: 128px;
    padding-left: 8px;
    padding-right: 8px;
}

.embedpress-event .align--center {
    text-align: center;
}

.embedpress-event .card {
    background: #fff;
    background-clip: padding-box;
    background-size: cover;
    border: 1px solid rgba(46, 62, 72, .12);
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    min-height: 100%;
    padding: 16px 16px 18px;
    position: relative;
    white-space: normal;
}

.embedpress-event .card--hasHoverShadow {
    transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1);
}

.embedpress-event .ep-event-group-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(46, 62, 72, .12);
}

.embedpress-event .ep-event-group--name {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    width: 70%;
    word-break: break-word;
}

.embedpress-event .ep-event-group--image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 56px;
    height: 56px;
    border-radius: 4px;
}

.embedpress-event .ep-event-time-location {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 20px 0 20px;
    border: 1px solid rgba(46, 62, 72, .12);
}

.embedpress-event .ep-event-time-location .ep-event-datetime,
.embedpress-event .ep-event-time-location .ep-event-location {
    padding-bottom: 20px;
}

.embedpress-event .ep-event-location .wrap--singleLine--truncate,
.embedpress-event .ep-event-time-location .ep-event-datetime {
    font-size: 15px;
    line-height: 1.5;
    color: #2e3e48;
    font-style: normal;
    margin: 0;
}

.embedpress-event .ep-event-location address {
    font-style: normal;
    margin: 0;
}

.embedpress-event .ep-event-location .venueDisplay-venue-address {
    font-style: normal;
    color: #757575;
    margin: 0;
}

.embedpress-event .ep-event-location p {
    line-height: 20px;
}

.ep-event--attendees .gridList-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 1rem;
    margin: 0;
    vertical-align: top;
    width: 50%;
}

.gridList-itemInner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    padding: 0 16px 16px 0;
}

/*Youtube subscribe button*/
.embedpress-yt-subscribe {
    display: flex;
    align-items: center;
    align-content: start;
    text-align: center;
    gap: 1rem;
    max-width: 600px;
    width: 100%;
}

.embedpress-yt-subscribe .embedpress-yt-subscribe.dark {
    color: #ffffff;
}

.embedpress-yt-subscribe .embedpress-yt-sub-text {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* Meetup styling for new markup*/
.dewqijm {
    height: 100%;
    margin-right: 10px;
}

.dewqijm img[src^="image"] {
    display: none;
}

.dewqijm img[src^="http"] {
    height: 56px !important;
    width: 56px !important;
}

.dewqijm>div>div {
    display: none;
}

.embedpress-event .sticky button {
    display: none;
}

.embedpress-event .items-center {
    align-items: center;
}

/*Media query*/
@media only screen and (min-width: 530px) {
    .ep-event--attendees .gridList--autoHeight--has4>.gridList-item {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media only screen and (min-width: 640px) {
    .embedpress-event .card {
        padding: 18px 18px 20px;
    }

    .ep-event--attendees .gridList--autoHeight--has4>.gridList-item {
        flex: 0 0 25%;
        max-width: 25%;
    }
}




/**
* NFT card frontend style
*/

.ose-opensea {
    height: 100% !important;
    width: calc(100% - 40px) !important;
    max-height: 100% !important;
}

.ose-github {
    overflow: auto;
}

.ep_nft_content_wrap.ep_nft__wrapper {
    display: grid;
}

.ep_nft_content_wrap.ep_nft__wrapper,
.ep_nft_content_wrap.ep_nft_list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.ep_nft_content_wrap .ep_nft_item {
    padding-top: 15px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    background-color: #ffffff;
    border-radius: 10px;
    transition: background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .09);
    overflow: hidden;
    padding: 15px;
    position: relative;
    transition: .3s ease-in-out;
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-grid .ep_nft_item {
    display: flex;
    flex-direction: column;
}

.ep_nft_content_wrap.ep_nft_list .ep_nft_item {
    justify-content: flex-start;
    align-items: flex-start;
}

.ep_nft_content_wrap.ep_nft__wrapper.preset-3 .ep_nft_item .ep_nft_content {
    background-color: #edecf6e6;
}

.ep_nft_content_wrap .ep_nft_thumbnail {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.ep_nft_content_wrap .ep_nft_thumbnail img {
    height: 340px;
    border-radius: 5px;
    width: 100%;
    object-fit: cover;
}

.ep_nft_content .ep_nft_title {
    color: #333333;
    font-size: 16px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 15px;
    font-weight: 600;
    word-break: break-all;
}

.ep_nft_content {
    text-align: left;
}

.ep_nft_content .ep_nft_price {
    color: #333333;
    font-size: 14px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    display: flex;
    font-weight: 600;
}

.ep_nft_content .ep_nft_price:first-child {
    margin-bottom: 10px;
}

span.eb_nft_currency {
    max-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.eb_nft_currency svg {
    width: 100%;
    height: auto;
}

.ep_nft_content .ep_nft_price_wrapper {
    min-height: 20px;
}


.ep_nft_content .ep_nft_creator {
    color: #333333;
    font-size: 14px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ep_nft_content .ep_nft_creator a {
    color: #3080E2;
    font-size: 14px;
    text-decoration: none;
    word-break: break-all;
    text-decoration: none;
}

.ep_nft_content .ep_nft_creator img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.ep_nft_content .ep_nft_button button {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
}

.ep_nft_content .ep_nft_button button a {
    background-color: #3080E2;
    color: #ffffff;
    font-size: 14px;
    padding-top: 15px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 15px;
    transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s;
}

.ep_nft_content .ep_nft_button button:hover a {
    background-color: rgb(46, 142, 238);
    color: #ffffff;
}

.ep-nft-gallery-wrapper .ep_nft_content_wrap.ep_nft__wrapper.ep-preset-1 .ep_nft_item:hover .ep_nft_button {
    opacity: 1;
    transform: translate(0);
    visibility: visible;
}


.ep-nft-gallery-wrapper.ep-nft-gallery-r1a5mbx .ep_nft_button a.ep-details-btn:hover {
    background-color: rgb(46, 142, 238);
    color: #ffffff;
}

.ep-nft-gallery-wrapper .ep_nft_content_wrap.ep_nft__wrapper.ep-preset-1 .ep_nft_item:hover .ep_nft_button {
    opacity: 1;
    transform: translate(0);
    visibility: visible;
}

.ep-nft-gallery-wrapper .ep_nft_content_wrap.ep_nft__wrapper.ep-preset-1 .ep_nft_item .ep_nft_button {
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    transform: translateY(30px);
    visibility: hidden;
    width: 100%;
    transition: 0.3s;
}

.ep-nft-gallery-wrapper.ep-nft-gallery-r1a5mbx .ep-nft-single-item-wraper .ep_nft_button {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.ep-nft-gallery-wrapper.ep-nft-gallery-r1a5mbx .ep_nft_button a {
    background-color: #3080E2;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 20px;
    transition: border 0.5s, border-radius 0.5s, box-shadow 0.5s;
    display: block;
    text-align: center;
    font-weight: 500;
    text-decoration: none;
}

.ep-nft-gallery-wrapper.ep-nft-gallery-r1a5mbx .ep_nft_button span.ep-nft-rank {
    color: #a88484;
    border-color: #a88484;
}

/* mimmikcssStart */


/* NFT List item CSS */

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item {
    display: flex;
    gap: 15px;
    align-items: center;
    border-radius: 10px;
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_thumbnail {
    width: 55%;
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_content {
    width: calc(45% - 15px);
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_content .ep_nft_price.ep_nft_last_sale {
    margin-bottom: 15px;
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items .ep_nft_item .ep_nft_thumbnail svg {
    border-radius: 10px;
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_thumbnail img {
    height: 260px;
}

.ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_button a {
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-grid.ep-preset-2 .ep_nft_content .ep_nft_price:last-child {
    margin-bottom: 15px;
}

.alignleft .ose-opensea,
.alignright .ose-opensea,
.aligncenter .ose-opensea {
    max-width: calc(100% - 40px) !important;
}

.embedpress-gutenberg-wrapper.alignright, .embedpress-gutenberg-wrapper.alignleft {
    width: 100%;
}

.embedpress-gutenberg-wrapper.alignright .ep-embed-content-wraper>div {
    float: right;
}

.embedpress-gutenberg-wrapper.aligncenter.ep-content-share-enabled .ep-embed-content-wraper {
    justify-content: center;
}

.embedpress-gutenberg-wrapper.alignright.ep-content-share-enabled .ep-embed-content-wraper {
    justify-content: right;
}

.embedpress-gutenberg-wrapper.alignleft.ep-content-share-enabled .ep-embed-content-wraper {
    justify-content: left;
}

.embedpress-gutenberg-wrapper.aligncenter {
    text-align: center;
    clear: both;
}

.theme-twentytwentythree footer.wp-block-template-part {
    clear: both;
}

/* mimmikcssEnd */

@media all and (max-width: 1024px) {

    /* tabcssStart */
    .ep_nft_content_wrap.ep_nft__wrapper,
    .ep_nft_content_wrap.ep_nft_list {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .alignleft .ose-opensea,
    .alignright .ose-opensea,
    .aligncenter .ose-opensea {
        max-width: 100% !important;
    }

    /* tabcssEnd */

}

@media all and (max-width: 991px) {

    /* tabcssStart */
    .ose-opensea {
        min-width: 100% !important;
        max-width: calc(100% - 40px) !important;
    }



    .ep_nft_content_wrap.ep_nft__wrapper,
    .ep_nft_content_wrap.ep_nft_list {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* tabcssEnd */

}

@media all and (max-width: 767px) {

    /* mobcssStart */
    .ep_nft_content_wrap.ep_nft__wrapper,
    .ep_nft_content_wrap.ep_nft_list {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    /* mobcssEnd */

}


/* NFT Single item CSS */
.ep-nft-single-item-wraper.ep_nft_content_wrap .ep_nft_item {
    box-shadow: none;
}

.ep-nft-rank-wraper {
    margin-bottom: 16px;
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.ep-nft-rank-wraper.ep-empty-label span {
    margin-left: 0px;
}

span.ep-nft-rank {
    padding: 2px 8px;
    border-radius: 7px;
    margin-left: 10px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    background: transparent !important;
    border: 1px solid #ddd;
    color: #333;
}

.ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_content {
    width: calc(55% - 15px);
}

.ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_thumbnail {
    width: 45%;
    height: 100%;
}

.ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_thumbnail img {
    height: 100%;
}

.ep-nft-single-item-wraper span.eb_nft_label {
    color: #333;
    /* margin-bottom: -10px; */
}

.ep-nft-single-item-wraper .ep_nft_content .ep_nft_price {
    display: flex;
    flex-direction: column;
    margin-right: 45px;
}

.ep-nft-single-item-wraper span.eb_nft_price {
    font-size: 30px;
    line-height: normal;
}

.ep-nft-single-item-wraper .ep_nft_content .ep_nft_creator img {
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

.ep-nft-single-item-wraper .ep-usd-price {
    bottom: 0;
    font-size: 12px;
}

.ep-nft-single-item-wraper span.eb_nft_label {
    /* margin-bottom: -14px; */
    font-size: 15px;
}

.ep-nft-single-item-wraper .ep_nft_content .ep_nft_title {
    margin-bottom: 10px;
    font-size: 24px;
}

.ep-nft-single-item-wraper .CollectionLink--name svg {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.ep-nft-single-item-wraper a.CollectionLink--link {
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 15px;
    display: block;
    color: #3080E2;
}

.ep-nft-single-item-wraper sub.verified-icon {
    bottom: -5px;
    left: 4px;
}

/* toggle */
.ep-nft-single-item-wraper .ep-accordion {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-top: 15px;
    display: block;
}

.ep-nft-single-item-wraper .ep-toggle {
    display: none;
}

.ep-nft-single-item-wraper .ep-option {
    position: relative;
}

.ep-nft-single-item-wraper .ep-content {
    padding: 1em;
    border-top: 1px solid #ddd;
}

.ep-nft-single-item-wraper .ep-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.2s;
}

.ep-nft-single-item-wraper .ep-title {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.2s;
    padding: 1em;
    display: flex;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    align-items: center;
}

.ep-nft-single-item-wraper label.ep-title svg {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

.ep-nft-single-item-wraper .ep-asset-detail-item {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.ep-nft-single-item-wraper .ep-asset-detail-item span {
    word-break: break-word;
    max-width: 75%;
}

.ep-nft-single-item-wraper .ep-content {
    display: block;
}

.ep-nft-single-item-wraper .ep-content p {
    margin: 0;
    padding: 0.5em 1em 1em;
    font-size: 0.9em;
    line-height: 1.5;
}

.ep-nft-single-item-wraper .ep-toggle:checked+.ep-title+.ep-content {
    display: none;
    background: transparent;
}



.ep-nft-single-item-wraper .ep_nft_content .ep_nft_price_wrapper {
    display: flex;
}

.ep-nft-single-item-wraper .ep-toggle+.ep-title:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    background: transparent;
    text-indent: -9999px;
    border-top: 2px solid #bfbfbf;
    border-left: 2px solid #bfbfbf;
    transition: all 250ms ease-in-out;
    text-decoration: none;
    color: transparent;
    right: 15px;
    top: 50%;
    transform: rotate(45deg) translate(-20%, -5%);
}

.ep-nft-single-item-wraper .ep-toggle:checked+.ep-title:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    background: transparent;
    text-indent: -9999px;
    border-top: 2px solid #bfbfbf;
    border-left: 2px solid #bfbfbf;
    transition: all 250ms ease-in-out;
    text-decoration: none;
    color: transparent;
    right: 15px;
    top: 50%;
    transform: rotate(225deg) translate(80%, 20%);
}

.ep-nft-single-item-wraper .ep-toggle:checked+.ep-title:after {
    display: none;
}

.ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items .ep_nft_item .ep_nft_button span.ep-nft-rank {
    pointer-events: none;
}

.ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-nft-single-item-wraper.ep-grid .ep_nft_content {
    margin-bottom: 20px;
}

.elementor-widget-embedpres_elementor .ep-nft-gallery-wrapper .ep-loadmore-wrapper button, .embedpress-gutenberg-wrapper .ep-nft-gallery-wrapper .ep-loadmore-wrapper button {
    display: none;
}

@media screen and (max-width: 1024px) {

    .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper, .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft_list {
        grid-template-columns: repeat(1, 1fr) !important;
    }

}

@media screen and (max-width: 991px) {

    .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper, .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft_list {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item {
        align-items: unset;
        flex-direction: column;
    }

    .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_thumbnail {
        width: 100%;
    }

    .ep-nft-single-item-wraper.ep_nft_content_wrap.ep_nft__wrapper.nft_items.ep-list .ep_nft_item .ep_nft_content {
        width: 100%;
    }
}

@media screen and (max-width: 537px) {
    .ep-nft-single-item-wraper sub.ep-usd-price {
        margin-bottom: 15px;
        display: block;
    }

    .ose-google-drive iframe {
        height: 250px !important;

    }

    .ose-nrk-radio iframe {
        height: 400px !important;
    }

}

.emebedpress-unit-percent iframe {
    width: 100% !important;
}


/* Locked content form */

.password-form-container {
    width: 350px;
    text-align: center;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #f4eded;
    background-color: #f9f9ff;
    max-width: 100%;
    margin: auto;
}

.password-form-container h2 {
    font-size: 22px;
    margin-bottom: 15px;
    font-family: system-ui;
}

.password-form-container p {
    font-size: 12px;
    font-family: sans-serif;
    line-height: 1.4em;
    margin-bottom: 15px;
}

form.password-form {
    margin-bottom: 2px;
}

.password-form-container input[type="password"] {
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 12px;
    font-size: 20px;
    color: #6354a5;
    outline: none;
    border: 1px solid #ddd;
    outline: 0;
    padding-left: 50px;
    font-family: sans-serif;
    height: 42px;
}

.password-form-container input[type="password"]::placeholder {
    color: #e0d1d1;
    font-size: 14px;
}

.password-field {
    position: relative;
}

.password-field span {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    width: 40px;
    background: #DED7FC;
    border-radius: 4px;
}

.password-field svg {
    width: 22px;
}

.password-form-container input[type="submit"] {
    padding: 12px 20px;
    background-color: #6354a5;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    font-family: sans-serif;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-weight: initial;
    white-space: normal;
    word-break: break-all;
    min-height: 42px;
}

.password-form-container button:hover {
    background-color: #0062cc;
    box-shadow: 0px 0px 10px #007bff;
}

.password-form-container .error-message {
    color: #ff0000;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.4em;
}

.password-form-container .error-message.hidden {
    display: none;
}

p.need-access-message {
    margin-bottom: 2px;
    margin-top: 13px;
}

.wp-block-embed__wrapper {
    display: inline-block;
    width: 100%;
    max-width: 100% !important;
}

.wp-block-embed__wrapper.position-right-wraper, .wp-block-embed__wrapper.position-right-wraper {
    max-width: calc(100% - 40px) !important;
}

.ep-elementor-content {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.ep-elementor-content.source-opensea {
    display: block;
}

/* social share css */
.wp-block-embedpress-embedpress>div, .ep-gutenberg-content {
    position: relative;
    clear: both;
}

.gutenberg-pdf-wraper {
    position: relative;
    width: 100%;
}

.wp-block-embedpress-embedpress-pdf.aligncenter .main-content-wraper {
    justify-content: center;
}

.wp-block-embedpress-embedpress-pdf.alignleft .main-content-wraper {
    justify-content: left;
}

.wp-block-embedpress-embedpress-pdf.alignright .main-content-wraper {
    justify-content: right;
}

.presentationModeEnabledIosDevice {
    position: fixed;
    left: 0;
    top: 0;
    border: 0;
    height: 100% !important;
    width: 100% !important;
    z-index: 999999;
    min-width: 100% !important;
    min-height: 100% !important;
}

.ep-embed-content-wraper {
    width: 100%;
}

.embedpress-gutenberg-wrapper.popup_button, .embedpress-elements-wrapper.popup_button {
    display: none !important;
}

.elementor-element-edit-mode .embedpress-elements-wrapper.popup_button {
    display: block !important;
}

.ep-content-share-enabled .ep-embed-content-wraper {
    display: flex !important;
}

.ep-content-share-enabled .ep-embed-content-wraper.hidden {
    display: none !important;
}

.ep-share-position-right .ep-embed-content-wraper {
    flex-direction: row;
}

.ep-content-share-enabled .ep-embed-content-wraper>div:first-child {
    width: 100%;
}

.ep-share-position-left .ep-embed-content-wraper {
    flex-direction: row-reverse;
}

.ep-share-position-bottom .ep-embed-content-wraper {
    flex-direction: column;
}

.ep-share-position-top .ep-embed-content-wraper {
    flex-direction: column-reverse;
}

.ep-fixed-width .gutenberg-pdf-wraper {
    display: inline-block;
}

.ep-percentage-width .embedpress-inner-iframe {
    width: 100%;
}

/* social share css */

.ep-social-share {
    display: flex;
    align-items: center;
}

.ep-social-share.share-position-right {
    right: -40px;
    top: 0;
    flex-direction: column;
}

.ep-social-share.share-position-left {
    left: 0px;
    top: 0;
    flex-direction: column;
}

.ep-social-share.share-position-bottom, .ep-social-share.share-position-top {
    justify-content: center;
}

.embedpress-gutenberg-wrapper .ep-social-share.share-position-left, .ep-elementor-content .ep-social-share.share-position-left {
    left: -40px;
}

.ep-social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}

.ep-social-icon:hover {
    opacity: 0.8;
}

.ep-social-share svg {
    width: 20px;
    height: auto;
}

a.ep-social-icon.pinterest svg {
    height: 25px;
}

.ep-social-share .facebook {
    background-color: #3b5998;
}

.ep-social-share .facebook svg {
    width: 40px;
}

.ep-social-share .twitter {
    background-color: #000000;
}

a.ep-social-icon.twitter:focus-visible {
    box-shadow: none;
    border: none;
    outline: none;
}

.ep-social-share .pinterest {
    background-color: #bd081c;
}

.ep-social-share .linkedin {
    background-color: #0077b5;
}

.ep-social-share .instagram {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.ep-social-share .reddit {
    background-color: #ff4500;
}

.ep-social-icon i {
    margin-right: 0;
}

.ep-content-locked .watermark {
    display: none !important;
}

.ep-content-protection-enabled .watermark {
    display: none !important;
}

.embedpress-pro-control.not-active {
    pointer-events: none;
}

.pro__alert__wrap .pro__alert__card h2 {
    font-size: 22px;
    font-weight: 600;
    color: #131f4d;
    margin-bottom: 8px;
}

.pro__alert__wrap .pro__alert__card p {
    font-size: 14px;
    font-weight: 400;
    color: #7c8db5;
    margin-top: 0;
    margin-bottom: 20px;
}

.pro__alert__wrap .pro__alert__card p a {
    text-decoration: underline;
    font-weight: 700;
    color: #131f4d;
}

.pro__alert__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f0edf9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pro__alert__btn {
    display: inline-block;
    background: #5b4e96;
    color: #fff !important;
    padding: 12px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s;
}

.pro__alert__btn:hover {
    background: #4a3f7e;
    color: #fff !important;
}

.pro__alert__close {
    background: none !important;
    border: none !important;
    color: #7c8db5 !important;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
    text-decoration: none !important;
    padding: 5px 10px !important;
}

.pro__alert__close:hover {
    color: #131f4d !important;
}

.emebedpress-unit-percent, .ep-elementor-content.ep-percentage-width {
    width: 100%;
}

/* Documents viewer style */
[data-theme-mode='dark'] {
    --viewer-primary-color: #343434;
    --viewer-icons-hover-bgcolor: #453838;

}

[data-theme-mode='light'] {
    --viewer-primary-color: #f2f2f6;
    --viewer-icons-color: #343434;
    --viewer-icons-hover-bgcolor: #e5e1e9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --viewer-primary-color: #343434;
        --viewer-icons-color: #f2f2f6;
        --viewer-icons-hover-bgcolor: #453838;

    }
}

@media (prefers-color-scheme: light) {
    :root {
        --viewer-primary-color: #f2f2f6;
        --viewer-icons-color: #343434;
        --viewer-icons-hover-bgcolor: #e5e1e9;

    }
}

.ep-file-download-option-masked::after, .ep-external-doc-icons {
    background: var(--viewer-primary-color);
}

.ep-external-doc-icons svg path {
    fill: var(--viewer-icons-color);
}

.ep-doc-draw-icon svg path {
    fill: var(--viewer-primary-color);
    stroke: var(--viewer-icons-color);
}

.ep-external-doc-icons svg:hover svg path {
    fill: var(--viewer-icons-color);
    stroke: var(--viewer-icons-color);
}

.ep-external-doc-icons svg:hover {
    background-color: var(--viewer-icons-hover-bgcolor);
}

.ep-file-download-option-masked {
    position: relative;
}

.ep-file-download-option-masked {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ep-file-download-option-masked .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 15px);
    height: calc(100% - 45px);
    background-color: rgb(66 23 23 / 0%);
    pointer-events: unset;
    z-index: 1;
    user-select: none;
    max-width: 800px;
    margin: 0 auto;
}


.ep-file-download-option-masked.ep-file-xls .overlay {
    height: calc(100% - 78px);
}

.ep-file-download-option-masked iframe {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.wp-block-embedpress-document.embedpress-document-embed iframe {
    border: none !important;
    box-shadow: none !important;
}

.ep-file-download-option-masked.enabled-text-copy {
    pointer-events: all;
}

.embed-download-disabled {
    width: 200px;
    height: 22px;
    background: #444444;
    position: absolute;
    right: 2px;
    bottom: 8px;
    opacity: 0;
    pointer-events: none;
}

.cui-toolbar-button-right {
    display: none !important;
}

.ndfHFb-c4YZDc-Wrql6b {
    display: none;
}

.ep-external-doc-icons {
    position: absolute;
    display: flex;
    flex-direction: revert;
    background: var(--viewer-primary-color);
    border-radius: 6px;
    z-index: 2;
    bottom: -18px;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 10px;
}

.ep-external-doc-icons svg {
    width: 22px;
    height: 22px;
    cursor: pointer;
    transition: 0.3s;
    padding: 5px;
    border-radius: 4px;
}

.block-editor-block-list__block .ep-gutenberg-file-doc .ep-external-doc-icons svg {
    width: 22px;
    height: 22px;
}

.block-editor-block-list__block .ep-gutenberg-file-doc .ep-doc-download-icon svg, .block-editor-block-list__block .ep-gutenberg-file-doc .ep-doc-fullscreen-icon svg {
    width: 20px !important;
}

.ep-doc-minimize-icon svg, .ep-doc-fullscreen-icon svg {
    padding: 6px;
}

.ep-external-doc-icons svg:hover {
    border-radius: 4px;
}

.ep-doc-draw-icon.active svg {
    background: var(--viewer-icons-hover-bgcolor);
}

.ep-doc-download-icon, .ep-doc-print-icon, .ep-doc-fullscreen-icon, .ep-doc-popup-icon, .ep-doc-draw-icon, .ep-doc-minimize-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* background: var(--viewer-primary-color); */
}

.ep-file-download-option-masked.fullscreen-enabled iframe,
.elementor .elementor-element.elementor-element .embedpress-document-embed .fullscreen-enabled iframe, .embedpress-document-embed .fullscreen-enabled iframe {
    width: 100% !important;
    height: 100% !important;
}

.ep-file-download-option-masked.fullscreen-enabled {
    overflow: visible;
}

.ep-file-download-option-masked.fullscreen-enabled .embed-download-disabled {
    display: none;
}

.ep-file-download-option-masked.fullscreen-enabled::after {
    display: block;
}

.embedpress-document-embed {
    position: relative;
    /* The inline style sets a FIXED height equal to the embed (e.g. 400px),
       but the iframe carries its own height too — so the badge + "Powered By"
       line rendered inside this wrapper spilled BELOW the fixed box and
       overlapped the next block. The viewer keeps its height via the iframe;
       the wrapper grows to contain its trailing content. (fbs-82395) */
    height: auto !important;
}

.position-right-wraper .main-content-wraper, .position-left-wraper .main-content-wraper {
    display: flex;
}

.position-left-wraper .main-content-wraper {
    display: flex;
    flex-direction: row-reverse;
}

.position-top-wraper .main-content-wraper {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
}

.position-bottom-wraper .main-content-wraper {
    justify-content: center;

}

/* .embedpress-document-embed .ep-social-share {
    position: absolute;
}

.embedpress-document-embed .ep-social-share.share-position-top {
    position: static;
} */



.ep-file-download-option-masked.ep-file-link.fullscreen-enabled iframe {
    margin-left: 22%;
}

.ep-file-download-option-masked::after {
    position: absolute;
    width: 100%;
    height: 30px;
    background: var(--viewer-primary-color);
    z-index: 1;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
}

.ep-file-download-option-masked.ep-file-docx::after {
    bottom: 0;
}

.ep-file-download-option-masked.ep-file-docx.ep-powered-by-enabled::after {
    bottom: 0px;
    background: white;
    height: 22px;
}

.ep-file-download-option-masked.ep-file-docx.ep-powered-by-enabled.fullscreen-enabled::after {
    bottom: 0;
}


canvas.ep-doc-canvas {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    clear: both;
    margin: auto;
    display: none;
}

/* .ep-file-download-option-masked::after, .ep-file-download-option-masked iframe {
    pointer-events: none;
    user-select: none;
    opacity: 0;
  } */

/* custom player css */
:root {
    /* --plyr-color-main: #3700ff85; */
    --plyr-control-icon-size: 15px;
    --plyr-range-track-height: 3px;
    --plyr-range-thumb-height: 10px;

}

.plyr--audio .plyr--full-ui input[type=range] {
    color: red !important;
}

.ep-embed-content-wraper input[type=range]::-webkit-slider-runnable-track {
    box-shadow: none;
}

.ep-embed-content-wraper input[type=range]::-moz-range-track {
    box-shadow: none;
}

a.plyr__controls__item.plyr__control {
    border-radius: inherit;
    color: inherit !important;
}

.plyr-initialized button:focus {
    background-color: var(--plyr-color-main);
}

.custom-player-preset-1 .plyr__controls {
    background: var(--plyr-color-main) !important;
    padding: 0 !important;
}

.custom-player-preset-1 button.plyr__control {
    border-radius: 0;
}

.custom-player-preset-1 a.plyr__controls__item.plyr__control {
    border-radius: inherit;
}

.custom-player-preset-1 button.plyr__control.plyr__control--overlaid[data-plyr="play"], .custom-player-preset-2 button.plyr__control.plyr__control--overlaid[data-plyr="play"] {
    width: 100px !important;
    text-align: center;
    display: flex;
    align-items: center !important;
    justify-content: center;
    height: 60px;
}

.custom-player-preset-1 button.plyr__control.plyr__control--overlaid[data-plyr="play"] svg, .custom-player-preset-2 button.plyr__control.plyr__control--overlaid[data-plyr="play"] svg {
    width: 22px;
    height: 22px;
}

.custom-player-preset-1 .plyr__control:focus {
    border: none;
}

.custom-player-preset-2 a.plyr__controls__item.plyr__control, .custom-player-preset-2 button.plyr__control.plyr__control--overlaid[data-plyr="play"], .preset-default a.plyr__controls__item.plyr__control {
    border-radius: 4px;
}

.plyr--audio .plyr__control:focus-visible, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
    color: var(--plyr-audio-control-color-hover, #fff) !important;
}

.custom-player-preset-3 .plyr__controls, .custom-player-preset-4 .plyr__controls {
    background: var(--plyr-color-main) !important;
    padding: 0 !important;
}


.custom-player-preset-4 button.plyr__control.plyr__control--overlaid {
    display: none !important;
}

/* Progress bar visibility — Plyr's default `--plyr-range-fill-background`
   resolves to `--plyr-color-main`, which we also paint as the controls-bar
   background on most presets. That makes the played-fill invisible against
   the bar (same color on same color). Force the played-fill to white and
   bump the buffered-track contrast so the progress bar stays readable on
   every preset/color combo. Site owners can override via the same CSS vars. */
.ep-embed-content-wraper[data-playerid] {
    --plyr-range-fill-background: #ffffff;
    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.35);
}

/* Overite plyr css  */
figure .plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
    padding-bottom: inherit !important;
}

.plyr {
    background-color: black;
}

.plyr--fullscreen-fallback {
    width: 100% !important;
    max-height: 100vh !important;
    height: 100% !important;
}

.pip-mode {
    position: fixed !important;
    width: 320px !important;
    height: 180px !important;
    top: calc(100% - 200px) !important;
    left: calc(100% - 340px) !important;
    z-index: 9999;
    border-radius: 15px !important;

}

.plyr [data-plyr="pip"] {
    display: block !important;
}

.pip-mode .plyr__video-wrapper {
    pointer-events: none;

}

.pip-mode .pip-play {
    display: none;
}

.pip-mode .pip-play, .pip-mode .pip-pause {
    opacity: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0000004a;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    cursor: pointer;
}

.pip-mode .pip-close {
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    background: #0000004a;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    cursor: pointer;
}

.pip-mode:hover .pip-play, .pip-mode:hover .pip-close, .pip-mode:hover .pip-pause {
    opacity: 1 !important;
}

.pip-mode .overlay-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.pip-mode iframe {
    pointer-events: none !important;
}

/* Frontend-only fade-in: opacity:0 is set inline by save.js so the
   Gutenberg editor (which renders via edit.js without the inline style)
   stays visible while toggling Custom Player on/off. initplyr.js sets
   opacity:1 once Plyr finishes initialising; the helper.js editor path
   also adds .plyr-initialized as a CSS-driven safety net. */
[data-playerid].plyr-initialized,
[data-playerid].audio.plyr-initialized {
    opacity: 1;
}

.plyr--paused.plyr__poster-enabled .plyr__poster {
    display: block !important;
    opacity: 1;
    background-size: cover;
}

@media only screen and (max-width: 767px) {
    .plyr__controls [data-plyr="restart"], .plyr__controls [data-plyr="rewind"], .plyr__controls [data-plyr="fast-forward"], .plyr__controls [data-plyr="pip"] {
        display: none !important;
    }

    .plyr__video-wrapper iframe {
        max-height: 100% !important;
    }

    .plyr__controls .plyr__volume input[type=range] {
        max-width: 40px;
        min-width: 40px;
    }
}

/* Instagram profile info design  */
/* Base styles for the profile header */
.ep-insta-profile-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #ddd;
    justify-content: center;
    gap: 30px;
    padding-bottom: 30px;
}

/* Styling for the container holding the tabs */
.posts-tab-options {
    text-align: center;
    margin: 0;
}

/* Styling for the tabs */
.posts-tab-options .tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    border-radius: 5px;
    gap: 25px;
    padding: 0;
}

.posts-tab-options .tabs svg {
    width: 15px;
    height: 15px;
}

li[data-media-type="ALL"] svg {
    width: 12px;
    height: 12px;
}

.posts-tab-options .tabs li {
    margin-right: 15px;
    cursor: pointer;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.posts-tab-options .tabs li:last-child {
    margin-right: 0;
}

/* Styling for the active tab */
.posts-tab-options .tabs li.active {
    /* border-top: 1px solid rgb(115,115,115); */
    position: relative;
    color: rgb(115, 115, 115);

}

.posts-tab-options .tabs li svg {
    border-radius: 2px;
}

.posts-tab-options .tabs li.active svg {
    color: rgb(115, 115, 115);
}

.posts-tab-options .tabs li:hover, .posts-tab-options .tabs li:hover svg, .posts-tab-options .tabs li:hover .fill-color {
    color: rgb(115, 115, 115);
}

.posts-tab-options .tabs li:hover .fill-color, .posts-tab-options .tabs li.active .fill-color {
    fill: rgb(115, 115, 115) !important;
}

.posts-tab-options .tabs li.active::after {
    content: '';
    position: absolute;
    top: -1px;
    height: 1px;
    width: 100%;
    background-color: rgb(115, 115, 115);
    left: 0;
    right: 0;
}

/* Styles for the profile image and change photo button */
.ep-insta-profile-image {
    margin-right: 16px;
}

.ep-insta-posts-count {
    margin-right: 15px;
}

.ep-insta-profile-image img {
    width: 120px;
    height: 120px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 3px solid #037bff;
}

.change-photo-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.change-photo-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* Styles for the profile username and edit profile button */
.ep-insta-username-section {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.ep-insta-profile-link {
    text-decoration: none;
}

.ep-insta-username {
    font-size: 18px;
    font-weight: bold;
    margin-right: 12px;
}

.ep-insta-edit-profile-link {
    text-decoration: none;
    color: #3897f0;
    font-weight: bold;
}

/* Styles for the profile stats */
.ep-insta-profile-stats {
    display: flex;
    margin-bottom: 8px;
}

.ep-insta-profile-stats .stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.ep-insta-profile-stats .stats-list li {
    margin-right: 24px;
    font-size: 14px;
}

/* Styles for the profile bio */
.ep-insta-bio-section {
    margin-bottom: 12px;
    text-align: left;
}

section.ep-insta-profile-details div:last-child {
    margin: 0;
}


.ep-insta-bio {
    font-size: 14px;
}

a.ep-insta-edit-profile-link {
    padding: 8px 15px;
    background: #efefef;
    text-decoration: none !important;
    border-radius: 7px;
    color: #222;
    font-size: 12px;
    font-weight: 500;
}

span.ep-insta-count {
    font-weight: 600;
}

a.ep-insta-followers-link {
    text-decoration: none !important;
}


/* Hover effect for the edit profile button */

a.ep-insta-profile-link, a.ep-insta-profile-link h2 {
    font-size: 20px;
    text-decoration: none !important;
    margin: 0;
    margin-right: 15px;
}

/* Instagram feed layout design */
.embedpress-insta-container {
    overflow: hidden;
    position: relative;
}

.ose-instagram-feed {
    max-height: 100% !important;
    height: 100% !important;
}


.insta-grid .embedpress-insta-container .insta-gallery, .insta-justify .ose-instagram-feed .insta-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Set 3 columns */
    gap: 15px;
    grid-auto-flow: row;
    /* Ensure items flow in rows */
}


.insta-carousel .embedpress-insta-container .insta-gallery {
    grid-auto-columns: calc(25% + 0px);
    gap: 0px;
    left: 0px;
}

.insta-masonry .embedpress-insta-container .insta-gallery {
    column-count: 3;
    gap: .5em;
    margin: auto;
    width: 100%;
    display: inherit;
}


.insta-grid .embedpress-insta-container .insta-gallery-item {
    position: relative;
    color: #fff;
    cursor: pointer;
    height: 350px;
}

.embedpress-insta-container .insta-gallery-item:hover {
    cursor: pointer;
}

.insta-masonry .embedpress-insta-container .insta-gallery .insta-gallery-item {
    height: auto;
    margin-bottom: .5em;
}


.insta-masonry .embedpress-insta-container .insta-gallery .insta-gallery-item video.insta-gallery-image {
    height: 550px;
    margin-bottom: -13px;
}

.embedpress-insta-container .insta-gallery-item .insta-gallery-item-info,
.embedpress-insta-container .insta-gallery-item .insta-gallery-item-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
}

.insta-masonry .embedpress-insta-container .insta-gallery-item .insta-gallery-item-info {
    height: calc(100% + 4px);
}


.embedpress-insta-container .insta-gallery-item:hover .insta-gallery-item-info,
.embedpress-insta-container .insta-gallery-item:hover .insta-gallery-item-info {
    opacity: 1;
    visibility: visible;
}

.embedpress-insta-container .insta-gallery-item-info ul {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    height: 100%;
}

.embedpress-insta-container .insta-gallery-item-info li {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    font-weight: 600;
    gap: 5px;
}

.embedpress-insta-container .insta-gallery-item-likes {
    margin-right: 2.2rem;
}

.embedpress-insta-container .insta-gallery-item-type {
    position: absolute;
    right: 1rem;
    top: 1rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, .1);
}

.embedpress-insta-container .insta-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 320px;
}

.insta-masonry .embedpress-insta-container .insta-gallery-image {
    margin-bottom: -13px;
}

.insta-gallery-item-info svg {
    width: 40px;
    height: 40px;
}

.insta-item-reaction-count {
    display: flex;
}

.insta-item-reaction-count .insta-gallery-item-likes, .insta-item-reaction-count .insta-gallery-item-comments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.insta-gallery-item-info .insta-item-reaction-count svg {
    width: 25px;
    height: 25px;
}

.insta-gallery-item-type svg {
    width: 25px;
    height: 25px;
}

.insta-gallery-item-type svg.insta-video-icon {
    width: 22px;
    height: 22px;
}

.cg-carousel__btns.hidden {
    display: none;
}

.cg-carousel__btns {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
}

.ep-embed-content-wraper.insta-carousel .cg-carousel__btns {
    top: calc(50% - 16px);
}

.ep-embed-content-wraper.insta-carousel .insta-gallery-item-permalink {
    display: flex;
    align-content: center;
}

.cg-carousel__btns button {
    background: #262323;
    border: 0;
    border-radius: 50px;
    width: 35px;
    height: 35px;
    display: inline-grid;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

button#js-carousel__prev-1 {
    position: absolute;
    left: 30px;
    /* top: 50%;
    transform: translateY(-50%); */
    z-index: 1;
    padding: 8px 15px;

}

button#js-carousel__next-1 {
    position: absolute;
    right: 30px;
    /* top: 50%;
    transform: translateY(-50%); */
    z-index: 1;
    padding: 8px 15px;

}

.embedpress-popup-block.embedpress-popup-img {
    position: relative;
    height: 100%;
    display: flex;
    background: #000;
}

.popup-carousel, .cg-carousel__track {
    height: 100%;
}

.popup-container .popup-carousel .cg-carousel__track {
    align-items: center;
    background-color: #000;
}

.popup-container .popup-carousel {
    background-color: #000;
}



button.js-carousel__prev-1 {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;

}

button.js-carousel__next-1 {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;

}

.cg-carousel__btn svg {
    width: 16px;
    height: 16px;
}

.load-more-button-container, .load-more-button-container button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.load-more-button-container button {
    border-style: solid;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
    color: #ffffff;
    border-color: #037bff;
    background-color: #037bff;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 15px;
    padding-left: 30px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 30px;
}


/* Popup design for instafeed */


.popup-container {
    display: flex;
    width: 100%;
}

/* Wrapper */
.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Popup Container */
.popup {
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 90vh;
    max-width: 90vw;
    width: auto;
    background: #fff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.popup .popup-container {
    max-height: 90vh;
    overflow: hidden;
}

.popup-container .popup-md-9.white {
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.popup-md-3.red {
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.embedpress-popup-img,
.embedpress-popup-img img,
.popup-carousel,
.popup-carousel .cg-carousel__slide {
    max-height: 90vh;
}

.embedpress-popup-img img,
img.popup-media-image,
video.popup-media-image {
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* .popup>div {
    height: calc(100% - 100px);
} */

/* .popup-md-3.red {
    display: flex;
    align-items: center;
} */

.popup-container .popup-md-9.white {
    width: 60%;
    overflow: hidden;
}

.popup-md-3.red {
    width: 40%;
}

/* Image Block */
.embedpress-popup-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

video.popup-media-image {
    height: auto;
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

img.popup-media-image {
    height: auto;
}

/* Header */
.embedpress-popup-header, .embedpress-hashtag-header {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    justify-content: space-between;
    border-bottom: 1px solid #f4e9e9;
}

.hashtag-container {
    border-bottom: 1px solid #f4e9e9;
}

.embedpress-hashtag-header {
    border: none;
    max-width: 350px;
    margin: auto;
}

.embedpress-hashtag-username {
    font-weight: bold;
}

.embedpress-popup-header-img img, .embedpress-hashtag-header-img img {
    border-radius: 50% !important;
    margin-right: 10px;
    width: 30px;
    height: 30px !important;
    object-fit: cover;
    border: 2px solid #037bff !important;
}

.embedpress-popup-header-img a, .embedpress-hashtag-header-img a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.embedpress-popup-username {
    color: #005293;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none !important;
}

img.embedpress-hashtag-round {
    border-radius: 50px !important;
}

.insta-followbtn a {
    text-decoration: none !important;
    padding: 6px 15px;
    background: #007bff;
    border-radius: 5px;
    color: #fff !important;
    font-size: 14px;
    font-weight: normal;
    border: 0;
}

/* Text */
.embedpress-popup-block.embedpress-popup-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    height: 100%;
    background-color: #fff;
    /* max-height: calc(100% - 67px);
    margin-top: 33px; */
}

.embedpress-popup-text {
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    letter-spacing: 0.04em;
    line-height: 1.8rem;
    padding: 10px;
    flex: auto;
    border-bottom: 1px solid #f4e9e9;
    text-align: left;
    max-height: calc(100vh - 235px);
    overflow: auto;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* Stats */
.embedpress-popup-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10px;
}

.embedpress-popup-stats .embedpress-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    position: relative;
}

.embedpress-popup-stats .embedpress-inline a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #000;
    text-decoration: none;
    font-weight: 400;
}

.embedpress-popup-stats .embedpress-inline a svg {
    width: 20px;
    height: 20px;
}

/* Share Buttons */

.embedpress-popup-share-buttons {
    padding: 10px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
}

.embedpress-popup-share-buttons a {
    color: #007bff;
}

.embedpress-href.embedpress-popup-share {
    cursor: pointer;
    color: #ca379d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.embedpress-popup-share-buttons {
    background: #f4f9ff;
    position: absolute;
    top: -50px;
    left: -55px;
    gap: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    opacity: 0;
    margin-bottom: -10px;
    transition: 0.3s;
}

.embedpress-popup-share-buttons.show {
    visibility: visible;
    opacity: 1;
    margin-bottom: 0;
}

.embedpress-popup-share-buttons::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #f4f9ff transparent transparent transparent;
}

.embedpress-popup-share-buttons::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #f4f9ff transparent transparent transparent;
    z-index: 1 !important;
}

.embedpress-popup-share-buttons::after {
    content: "";
    position: absolute;
    bottom: -16.1px;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #e7eaef transparent transparent transparent;
}

.embedpress-popup-share-buttons span {
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.embedpress-popup-share-buttons span svg {
    width: 16px !important;
    height: 16px !important;
}

.embedpress-popup-share-buttons span.dashicons.dashicons-linkedin {
    color: #0077b5;
}

.embedpress-popup-share-buttons span.dashicons.dashicons-facebook {
    color: #1877F2;
}

.embedpress-popup-share-buttons span.dashicons.dashicons-pinterest {
    color: #E60023;
}

span.tag-wrapper a {
    font-weight: bold;
    text-decoration: none !important;
}

.embedpress-href.embedpress-popup-share svg {
    width: 20px;
    height: 20px;
}

.embedpress-popup-instagram-buttons svg {
    width: 18px !important;
    height: 20px !important;
}

.embedpress-popup-stats .embedpress-inline {
    transition: 0.3s;
}

.embedpress-popup-stats .embedpress-inline:hover svg, .embedpress-popup-stats .embedpress-inline a:hover, .embedpress-popup-stats .embedpress-inline:hover, .embedpress-href:hover svg .st0 {
    color: rgb(115, 115, 115) !important;
    /* stroke: rgb(115, 115, 115); */
}

.embedpress-inline.embedpress-popup-instagram-buttons a:hover svg path {
    stroke: rgb(115, 115, 115);
}

.embedpress-inline.popup-like-button a:hover svg {
    color: rgb(115, 115, 115);
    fill: rgb(115, 115, 115);
}

.embedpress-href.embedpress-popup-share:hover svg {
    fill: rgb(115, 115, 115);
}

/* Date */
.date-post {
    padding: 10px;
    font-size: 12px;
    color: #8e8e8e;
}

div.popup-close {
    position: absolute;
    top: 50px;
    right: 50px;
    color: white;
    z-index: 15566555655;
    cursor: pointer;
    padding: 15px;
    background: #643535;
    border-radius: 50px;
    height: 10px;
    width: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    cursor: pointer;
}

.load-spin {
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: spin 2s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}


.loader {
    margin: auto;
    border: 5px solid #EAF0F6;
    border-radius: 50%;
    border-top: 5px solid #FF7A59;
    width: 30px;
    height: 30px;
    animation: spinner 4s linear infinite;
}

.sponsored-youtube-video {
    height: 100%;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 1200px) {

    .popup-container .popup-md-9.white {
        width: 50%;
    }

    .popup-container .popup-md-3 {
        width: 50%;
    }

}

@media screen and (max-width: 991px) {
    .popup-container {
        flex-direction: column;
        overflow-y: auto;
    }

    .popup-container .popup-md-9.white {
        width: 100%;
        max-height: 55vh;
    }

    .popup-container .popup-md-3 {
        width: 100%;
        max-height: none;
    }

    .embedpress-popup-img img,
    img.popup-media-image,
    video.popup-media-image {
        max-height: 55vh;
    }

    .embedpress-popup-text {
        max-height: 300px;
    }

}

@media screen and (max-width: 768px) {
    .insta-grid .embedpress-insta-container .insta-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .popup {
        width: 94vw;
        max-width: 94vw;
        max-height: 94vh;
        border-radius: 14px;
    }

    .popup-container {
        width: 100%;
        max-height: 94vh;
    }

    .popup .popup-container {
        max-height: 94vh;
    }

    .popup-container .popup-md-9.white {
        width: 100%;
        max-height: 55vh;
        background: #000;
    }

    .embedpress-popup-img,
    .embedpress-popup-block.embedpress-popup-img {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .embedpress-popup-img img,
    img.popup-media-image,
    video.popup-media-image {
        width: 100%;
        max-width: 100%;
        max-height: 55vh;
        object-fit: contain;
    }

    .embedpress-popup-header,
    .embedpress-hashtag-header {
        padding: 12px 14px;
    }

    .embedpress-popup-text {
        max-height: 220px;
        padding: 12px 14px;
        line-height: 1.55;
        letter-spacing: 0.01em;
    }

    .embedpress-popup-stats {
        padding: 12px 14px;
        gap: 18px;
    }

    .embedpress-popup-stats .embedpress-inline a svg,
    .embedpress-popup-instagram-buttons svg {
        width: 22px !important;
        height: 22px !important;
    }

    div.popup-close {
        top: 12px;
        right: 12px;
        padding: 12px;
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

@media screen and (max-width: 420px) {
    .insta-grid .embedpress-insta-container .insta-gallery {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .ep-insta-profile-header {
        flex-direction: column;
    }

    .popup {
        max-width: 100vw;
        max-height: 100vh;
        width: 100%;
        height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .popup-container,
    .popup .popup-container {
        max-height: 100vh;
        height: 100%;
    }

    .popup-container .popup-md-9.white {
        max-height: 45vh;
    }

    .embedpress-popup-img img,
    img.popup-media-image,
    video.popup-media-image {
        max-height: 45vh;
    }

    .embedpress-popup-text {
        max-height: none;
        flex: 1 1 auto;
    }

    .insta-followbtn {
        display: none;
    }

    .embedpress-popup-share-buttons {
        left: auto;
        right: -10px;
    }
}

/* youtube channel css */

.ep-player-wrap .hide {
    display: none;
}

.ep-gdrp-content {
    background: #222;
    padding: 50px 30px;
    color: #fff;
}

.ep-gdrp-content a {
    color: #fff;
}

.ep-youtube__content__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 10px;
}

.ep-loader-wrap {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.ep-youtube__content__pagination .ep-prev,
.ep-youtube__content__pagination .ep-next {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 30px;
    padding: 0 20px;
    height: 40px;
    transition: .3s;
    display: flex;
    align-items: center;
}

.ep-youtube__content__pagination .ep-prev:hover,
.ep-youtube__content__pagination .ep-next:hover {
    background-color: #5B4E96;
    color: #fff;
}

.ep-youtube__content__pagination .ep-page-numbers {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ep-youtube__content__pagination .ep-page-numbers>span {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 30px;
    display: inline-block;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active__current_page {
    background: #5B4E96;
    color: #fff;
}

.ep-youtube__content__block .youtube__content__body .content__wrap:not(.youtube-carousel) {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}


[data-source-id] .layout-list .ep-youtube__content__block .youtube__content__body .content__wrap {
    grid-template-columns: repeat(auto-fit, minmax(calc(100% - 30px), 1fr)) !important;
}

[data-youtube-channel-carousel].ep-youtube__content__block {
    position: relative
}

.ep-youtube__content__block .item {
    cursor: pointer;
    white-space: initial;
}

.ep-youtube__content__block .youtube-carousel .item {
    margin: 10px;
}

.ep-youtube__content__block .item:hover .thumb .play-icon {
    opacity: 1;
    top: 50%;
}

.ep-youtube__content__block .item:hover .thumb:after {
    opacity: .4;
    z-index: 0;
}

.ep-youtube__content__block .thumb {
    padding-top: 56.25%;
    margin-bottom: 5px;
    position: relative;
    background-color: #222;
    background-size: contain !important;
    border-radius: 12px;
    overflow: hidden;
}

figure .ep-youtube__content__block .thumb {
    background-color: #222 !important;
}

.ep-youtube__content__block .thumb:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    background: #000;
    opacity: 0;
    transition: opacity .3s ease;
}

.ep-youtube__content__block .thumb:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    background: #222;
    z-index: -1;
}

.ep-youtube__content__block .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ep-youtube__content__block .thumb .play-icon {
    width: 50px;
    height: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .3s ease;
    z-index: 2;
}

.ep-youtube__content__block .thumb .play-icon img {
    width: 100;
}

.ep-youtube__content__block .body p {
    margin-bottom: 0;
    font-size: 15px;
    text-align: left;
    line-height: 1.5;
    font-weight: 400;
}

.ep-youtube__content__block.loading .ep-youtube__content__pagination {
    display: none;
}

.ep-youtube__content__block .ep-loader {
    display: none;
}

.ep-youtube__content__block.loading .ep-loader {
    display: block;
}

.ep-loader img {
    width: 20px;
}

.is_mobile_device {
    display: none !important;
}


.is_mobile_devic.ep-page-numbers {
    gap: 5px;
}

@media only screen and (max-width: 480px) {
    .is_desktop_device {
        display: none !important;
    }

    .ep-youtube__content__pagination .ep-page-numbers>span {
        width: 35px;
        height: 35px;
    }

    .ep-youtube__content__pagination .ep-prev, .ep-youtube__content__pagination .ep-next {
        height: 35px;
    }

    .is_mobile_device {
        display: flex !important;
        ;
    }

    .ep-youtube__content__pagination .ep-page-numbers {
        gap: 5px;
    }
}

/* Youtube Advance layout style */
.embedded-youtube-channel .ose-youtube {
    height: 100% !important;
    max-height: 100% !important;
}

.ep-embed-content-wraper.embedded-youtube-channel .ose-youtube, .ep-youtube-channel .ose-youtube {
    height: 100% !important;
    max-height: 100% !important;
}

.ose-youtube .channel-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
}

.ose-youtube .profile-picture {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-right: 20px;
}

.ose-youtube .channel-info {
    flex-grow: 1;
    text-align: left;
}

.ose-youtube .info-description {
    margin-bottom: 20px;
}



.ose-youtube .channel-name {
    font-size: 24px;
    margin: 0;
}

.ose-youtube .channel-details {
    margin: 5px 0;
}

.ose-youtube .more-info {
    text-decoration: none;
}

.ose-youtube .subscribe-button {
    background-color: red;
    border: none;
    padding: 10px 20px 10px 12px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    /* display: inline; */
    text-decoration: none !important;
    color: white;
    font-weight: 600;
}

.ose-youtube .subscribe-button svg {
    height: 20px;
    width: 20px;
    margin-right: 5px;
}

.ose-youtube .subscribe-button:hover {
    background-color: #ff6868;
}

#videoPopup.video-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
}

.video-popup-content {
    position: absolute;
    left: 50%;
    top: calc(50% + 30px);
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

.video-popup-inner-content {
    width: 100%;
    height: 100%;
    max-height: 90vh;
    overflow: auto !important;
    border: 1px solid #333;
    border-radius: 8px;
    background: #000;
    box-sizing: border-box;
    padding: 20px;

}

.video-popup-content iframe {
    width: 700px !important;
    height: 420px !important;
    max-width: 100%;
    max-height: 100%;
}

#videoPopup.video-popup .close {
    position: absolute;
    top: -25px;
    right: -30px;
    color: #fff;
    font-size: 35px;
}

#videoPopup.video-popup .close:hover,
#videoPopup.video-popup .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

#videoPopup.video-popup .popup-controls {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    /* Allow clicks to pass through to iframe */
}

#videoPopup.video-popup .nav-icon {
    pointer-events: auto;
    /* Enable click events */
    color: white;
    font-size: 50px;
    cursor: pointer;
    user-select: none;
}

#videoPopup.video-popup .prev-icon {
    position: absolute;
    left: -60%;
    top: 50%;
    transform: translate(0, -50%);
    padding: 10px;
}

#videoPopup.video-popup .next-icon {
    position: absolute;
    right: -60%;
    top: 50%;
    transform: translate(0, -50%);
    padding: 10px;
}

#videoDescription {
    color: #fff;
    font-size: 14px;
}


.youtube-video-description {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0 20px;
    bottom: no;
    max-width: 700px;
    text-align: left;
}

.youtube-video-header h1 {
    font-size: 20px;
    margin: 0 0 10px 0;
    color: #fff;
}

.youtube-video-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.youtube-video-meta span {
    margin-right: 10px;
}

.youtube-video-body {
    max-height: 200px;
    overflow: auto;
}

.youtube-video-body p {
    font-size: 15px;
    margin: 0 0 20px 0;
    color: #ddd;
}

.youtube-video-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
}

.youtube-video-link {
    font-size: 16px;
    color: #0073aa;
    text-decoration: none;
}

.youtube-video-link:hover {
    text-decoration: underline;
}

.youtube-video-stats {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 18px;
}

.youtube-video-stats svg {
    height: 12px;
    width: 14px;
}

.youtube-video-stats span {
    margin-right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dad2d2;
}

.youtube-video-stats i {
    margin-right: 5px;
}

/* grid item description */

.youtube-body-content .description-container {
    display: flex;
    /* background-color: #ffffff; */
    border-radius: 4px;
    max-width: 600px;
    text-align: left;
    margin-top: 10px;
}

.youtube-body-content.body {
    width: 100%;
}

.youtube-body-content .thumbnail {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    margin-right: 10px;
}

.youtube-body-content .thumbnail img {
    border-radius: 50%;
    margin-right: 10px;
    width: 30px;
    height: 30px;
}

.youtube-body-content .details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 30px);
}

.youtube-body-content .title {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 4px;
    line-height: 1.4;
}

.youtube-body-content .channel,
.youtube-body-content .views,
.youtube-body-content .time {
    font-size: 14px;
    color: #606060;
}

.youtube-body-content .channel {
    margin-bottom: 4px;
}

/* Youtube List layout design */

.ep-player-wrap.layout-gallery .ep-first-video iframe {
    border-radius: 15px;
}

.ep-player-wrap.layout-list .ep-youtube__content__block .item {
    display: flex;
    width: 100%;
    gap: 20px;
}

.ep-player-wrap.layout-list .ep-youtube__content__block .thumb {
    padding-top: 20.25%;
    min-width: 250px;
    max-width: 300px;
}

/* Youtube Carousel Css */
[data-youtube-channel-carousel] .youtube-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

[data-youtube-channel-carousel] .youtube-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

[data-youtube-channel-carousel] .youtube-carousel .item {
    min-width: calc(33.3333% - 20px);
    /* Adjust this value to show more or fewer items */
    box-sizing: border-box;
}



[data-youtube-channel-carousel] button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    box-shadow: none;
    background-color: #000000ba;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
}

[data-youtube-channel-carousel] button.preview {
    left: -100px;

}

.carousel-controls button.next {
    right: -100px;
}


/* full calender style overide */

.fc-list-table .fc-event, .fc-list-table .fc-event:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.fc-list-table .fc-event, .fc-list-table .fc-event-dot {
    background-color: transparent !important;
}

.fc table.fc-list-table {
    table-layout: inherit !important;
}

.fc-list-table .fc-event {
    display: table-row !important;
}

@media screen and (max-width: 1400px) {
    .ose-youtube .video-popup-content iframe {
        height: 305px !important;
    }

    .ose-youtube .prev-icon {
        left: -50%
    }

    .ose-youtube .next-icon {
        right: -50%
    }
}

@media screen and (max-width: 1200px) {
    .ose-youtube .video-popup-content iframe {
        height: 305px !important;
    }

    .ose-youtube .prev-icon {
        left: -40%
    }

    .ose-youtube .next-icon {
        right: -40%
    }
}

@media screen and (max-width: 992px) {
    .ose-youtube .video-popup-content iframe {
        height: 305px !important;
    }

    .ose-youtube .prev-icon {
        left: -40%
    }

    .ose-youtube .next-icon {
        right: -40%
    }
}


@media screen and (max-width: 576px) {
    .ose-youtube .prev-icon {
        left: -26%
    }

    .ose-youtube .next-icon {
        right: -26%
    }
}

@media screen and (max-width: 580px) {
    .ose-youtube .prev-icon {
        left: -18%;
    }

    .ose-youtube .next-icon {
        right: -18%;
    }
}



.youtube-video-body {
    display: none;
}


.video-popup-content {
    width: 100%;
    max-width: 720px;
    margin: auto;
}

@media (max-width: 1024px) {
    .youtube-carousel .item {
        min-width: calc(50% - 20px) !important;
        /* Show 2 items */
    }
}

@media (max-width: 768px) {
    .youtube-carousel .item {
        min-width: calc(100% - 20px) !important;
        /* Show 1 item */
    }

    [data-youtube-channel-carousel] button.preview {
        left: 0 !important;
    }

    [data-youtube-channel-carousel] button.next {
        right: 0;
    }

    .video-popup-content {
        width: calc(100% - 40px);
        margin: auto;
    }

    .video-popup-content iframe {
        max-height: 300px;
    }

    #videoPopup.video-popup .close {
        top: -25px;
        transform: translate(0%, -50%);
        right: unset;
    }


}

@media (max-width: 580px) {
    .ep-first-video {
        margin-bottom: 20px;
    }

    .video-popup-content iframe {
        max-height: 220px;
    }

    .ep-player-wrap .ep-youtube__content__block .item {
        gap: 15px;
    }

    .ep-embed-content-wraper .ep-youtube__content__block .youtube__content__body .content__wrap {
        gap: 30px !important;
    }

    .ose-youtube .profile-picture {
        width: 80px;
        height: 80px;
    }

    .ose-youtube .channel-header {
        gap: 10px;
        align-items: start;
        padding: 0;

    }

    .description-container {
        margin-top: 0px;
    }

    .description-container p.description {
        display: none;
    }

    .ep-player-wrap.layout-list .ep-youtube__content__block .item {
        flex-direction: column;
    }

    .ep-player-wrap.layout-list .ep-youtube__content__block .thumb {
        min-width: 100%;
        min-height: 200px;
    }

}

.ep-google-photos-gallery-grid .ose-google-photos,
.ep-google-photos-gallery-masonary .ose-google-photos,
.ep-google-photos-gallery-justify .ose-google-photos {
    height: 100% !important;
    max-height: 100% !important;
}



.pa-carousel-widget.jx-carousel-widget, .pa-gallery-player-widget, .ose-google-photos {
    position: relative;
}

.pa-carousel-widget.jx-carousel-widget::after, .pa-gallery-player-widget::after {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    content: '';
    top: 10px;
    background: transparent;
}

/* Google Photos Visit Button Styles */
/* .ep-google-photos-visit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1000;
    transition: background-color 0.2s;
    text-decoration: none;
} */

.ep-google-photos-visit-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    text-decoration: none;
}

.ep-google-photos-visit-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}




/* Leons style */
/* Basic styling */
.photos-gallery-grid, .photos-gallery-masonry, .photos-gallery-justify {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.photos-gallery-grid .photo-item, .photos-gallery-masonary .photo-item {
    width: 100%;
    height: 200px;
    background-color: #f1efef;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
}


/* masonary */

.photos-gallery-masonary {
    columns: 250px;
    gap: 3px;
    position: relative;
    width: 100%;
}

.photos-gallery-masonary .photo-item {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin-bottom: 3px;
    cursor: pointer;
}

.photos-gallery-masonary .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* grid */


.photos-gallery-grid {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    position: relative;
}

.photos-gallery-grid .photo-item {
    border-radius: 10px;
    text-align: center;
    height: 280px;
    cursor: pointer;
}

.photos-gallery-grid .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* justify */
/* .photos-gallery-justify {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
}

.photos-gallery-justify .photo-item {
    flex: 1 0 auto;
    width: auto;
    height: 250px;

}

.photos-gallery-justify .photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} */


.photos-gallery-justify {
    display: flex;
    flex-wrap: wrap;
}

.photos-gallery-justify .photo-item {
    cursor: pointer;
    height: auto;
}

.photos-gallery-justify .photo-item:hover {
    opacity: 0.9;
}

.photos-gallery-justify .photo-item img {
    user-select: none;
    width: 100%;
    vertical-align: middle;
}

.photos-gallery-justify::after {
    content: "";
    flex-grow: 99999;
    min-width: calc(100vw / 4);
}

@media (max-width: 460px) {
    .photos-gallery-justify {
        flex-direction: column;
    }

    .photos-gallery-justify .photo-item {
        width: 100% !important;
    }
}



/* Popup styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    /* Must sit above Elementor popups (default modal z-index 9999) so the
       gallery lightbox is visible when the gallery is inside a popup. */
    z-index: 999999;
    transition: 0.5s ease;

}

.popup-overlay .popup {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: black;
}

.popup-overlay .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    border-radius: 50%;
}

.popup-overlay .prev-btn,
.popup-overlay .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    display: flex;
}

.popup-overlay:hover .prev-btn, .popup-overlay:hover .next-btn {
    opacity: 1;
    visibility: visible;

}

.popup-overlay .prev-btn {
    left: 10px;
}

.popup-overlay .next-btn {
    right: 10px;
}

.popup-overlay img#popup-image {
    width: 100%;
    height: auto;
    max-height: 100vh;
}

.popup-overlay .prev-btn:hover,
.popup-overlay .next-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


@media (max-width: 1024px) {

    .photos-gallery-grid .photo-item {
        width: 100%;
        height: 150px !important;
    }


    /* masonary */

    .photos-gallery-masonary {
        columns: 200px !important;
    }

    /* grid */


    .photos-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }

}

.ose-codesandbox .embera-embed-responsive.embera-embed-responsive-rich.embera-embed-responsive-provider-codesandbox {
    width: 100%;
    height: 100%;
}

.ose-codesandbox .embera-embed-responsive.embera-embed-responsive-rich.embera-embed-responsive-provider-codesandbox iframe {
    width: 100%;
    height: 100%;
}


@media (max-width: 767px) {

    .popup-overlay .prev-btn,
    .popup-overlay .next-btn {
        font-size: 20px;
        padding: 5px;
    }
}

.getty div:last-child {
    padding: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
}



/* .ose-google-docs-sheets, .ose-google-docs-slides, .ose-google-docs-forms, .ose-google-docs-document, .ose-google-drawings, .ose-google-maps, .ose-google-photos, .main-content-wraper {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    max-width: fit-content!important;
}  */
/* Auto Resume Playback prompt */
.ep-embed-content-wraper {
    position: relative;
}

.ep-resume-prompt {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #fff;
    font-family: inherit;
}

.ep-resume-prompt__inner {
    background: rgba(20, 20, 20, 0.95);
    padding: 24px 28px;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ep-resume-prompt__msg {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.4;
}

.ep-resume-prompt__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ep-resume-prompt__btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ep-resume-prompt__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ep-resume-prompt__btn--primary {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-resume-prompt__btn--primary:hover {
    filter: brightness(1.15);
}

/* Custom End Screen */
.ep-end-screen {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #fff;
    font-family: inherit;
    text-align: center;
}

.ep-end-screen__inner {
    padding: 24px 28px;
    max-width: 90%;
}

.ep-end-screen__msg {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.4;
}

.ep-end-screen__countdown {
    margin: 12px 0 0;
    font-size: 13px;
    opacity: 0.8;
}

.ep-end-screen__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.ep-end-screen__btn,
a.ep-end-screen__btn,
a.ep-end-screen__btn:hover,
a.ep-end-screen__btn:focus,
a.ep-end-screen__btn:visited {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: background 0.15s ease;
}

.ep-end-screen__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Primary CTA — match the `a.ep-end-screen__btn` specificity from above so
 * the modifier actually wins on background / border-color when rendered as
 * an <a>. Without these `a.` selectors, theme-link rules + the base `a.`
 * selector list above out-specifies the modifier and the primary button
 * looks identical to the secondary Replay/Cancel buttons. */
.ep-end-screen__btn--primary,
a.ep-end-screen__btn--primary,
a.ep-end-screen__btn--primary:hover,
a.ep-end-screen__btn--primary:focus,
a.ep-end-screen__btn--primary:visited {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
    color: #fff;
    margin-bottom: 4px;
}

.ep-end-screen__btn--primary:hover,
a.ep-end-screen__btn--primary:hover {
    filter: brightness(1.15);
    background: var(--plyr-color-main, #5b4e96);
}

/* Advanced Privacy Mode click-to-load overlay */
.ep-embed-content-wraper.ep-privacy-pending iframe {
    visibility: hidden;
}

.ep-privacy-overlay {
    position: absolute;
    inset: 0;
    z-index: 11;
    background: #000 center/cover no-repeat;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
}

.ep-privacy-overlay--has-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.ep-privacy-overlay__play,
.ep-privacy-overlay__play:hover,
.ep-privacy-overlay__play:focus,
.ep-privacy-overlay__play:active {
    position: relative;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.15s ease;
}

.ep-privacy-overlay__play:hover {
    transform: scale(1.06);
    background: transparent;
}

.ep-privacy-overlay__msg {
    position: relative;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.4;
    max-width: 480px;
    opacity: 0.95;
}

/* Timed CTA */
.ep-timed-cta-stack {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    max-width: calc(100% - 32px);
    pointer-events: none;
}

.ep-timed-cta {
    position: relative;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    border-radius: 6px;
    padding: 12px 40px 12px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    max-width: 100%;
    font-family: inherit;
    pointer-events: auto;
    animation: ep-timed-cta-in 0.25s ease-out;
}

@keyframes ep-timed-cta-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ep-timed-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.ep-timed-cta__headline {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.ep-timed-cta__btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    background: var(--plyr-color-main, #5b4e96);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.ep-timed-cta__btn:hover {
    color: #fff;
    filter: brightness(1.15);
}

.ep-timed-cta__close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.ep-timed-cta__close:hover {
    color: #fff;
}

/* Pro feature overlays (email capture, end screen, resume prompt, action lock,
   privacy mode, timed CTA, chapters) all use position:absolute;inset:0 and so
   need the wrapper to be a positioning context. Scope to wrappers that have
   the custom player attached so other embeds (PDF, audio, etc.) are unaffected. */
.ep-embed-content-wraper[data-playerid] {
    position: relative;
}

.ep-embed-content-wraper.ep-has-chapters {
    position: relative;
}

.ep-chapter-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 8;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    transition: opacity 0.2s ease;
}

.ep-chapter-label--hidden {
    opacity: 0;
    pointer-events: none;
}

.ep-chapter-label__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.ep-chapter-label__caret {
    font-size: 10px;
    opacity: 0.8;
}

.ep-chapter-list {
    position: absolute;
    top: 50px;
    left: 12px;
    z-index: 9;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    border-radius: 6px;
    width: 280px;
    max-width: calc(100% - 24px);
    max-height: 60%;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: none;
}

.ep-chapter-list--open {
    display: block;
}

.ep-chapter-list__item {
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ep-chapter-list__item:last-child {
    border-bottom: 0;
}

.ep-chapter-list__item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ep-chapter-list__item--active {
    background: rgba(255, 255, 255, 0.12);
}

.ep-chapter-list__time {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 48px;
}

.ep-chapter-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

/* YouTube-style segmented progress bar (drawn by initplyr.js when chapters are configured). */
.plyr__progress.ep-chapters-split input[type="range"] {
    /* Make Plyr's native track invisible so our segments are the only visible bar.
       The input itself stays interactive (seek + thumb). */
    color: transparent;
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-webkit-slider-runnable-track {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-moz-range-track {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-moz-range-progress {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-ms-fill-lower {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split input[type="range"]::-ms-fill-upper {
    background: transparent !important;
}

.plyr__progress.ep-chapters-split .plyr__progress__buffer {
    display: none;
}

.ep-chapter-bar {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.ep-chapter-seg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 5px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    overflow: hidden;
    transition: height 0.12s ease-out, background 0.12s ease-out;
}

.ep-chapter-seg__fill {
    height: 100%;
    width: 0%;
    /* Prefer --plyr-range-fill-background (we override it to white at the
       wrapper level so the fill stays visible on every preset/color combo).
       Fall through to --plyr-color-main and a sane default. Without this
       order, sites that set a playerColor get a fill that exactly matches
       the purple controls-bar background — fill becomes invisible. */
    background: var(--plyr-range-fill-background, var(--plyr-color-main, #5b4e96));
    border-radius: 2px;
}

/* Grow all segments slightly when the user is interacting with the bar
   (YouTube does this — bar feels chunkier on hover). */
.plyr__progress:hover .ep-chapter-seg,
.plyr__progress:focus-within .ep-chapter-seg {
    height: 8px;
}

/* The currently-hovered chapter brightens (no extra height — keeps the
   bar from looking taller than the volume slider). */
.ep-chapter-seg--hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Chapter title appended inside Plyr's own seek tooltip on mousemove.
   Override Plyr's max-width:120px / nowrap so the title isn't clipped. */
.ep-embed-content-wraper.ep-has-chapters .plyr__progress .plyr__tooltip {
    max-width: 240px;
    white-space: normal;
    text-align: center;
}

.ep-chapter-tooltip-title {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Email Capture */
.ep-lead-form {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #fff;
    font-family: inherit;
}

.ep-lead-form__inner {
    background: rgba(20, 20, 20, 0.97);
    border-radius: 8px;
    padding: 24px 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.ep-lead-form__headline {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.ep-lead-form__field {
    margin-bottom: 12px;
    text-align: left;
}

.ep-lead-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.ep-lead-form .ep-lead-form__input,
.ep-lead-form input.ep-lead-form__input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.ep-lead-form .ep-lead-form__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

/* Gutenberg + Chrome autofill both repaint the input with their own light
   background (and dark text), which crushes the white placeholder we set
   above. Lock the colors so the placeholder stays visible in both. */
.ep-lead-form .ep-lead-form__input:-webkit-autofill,
.ep-lead-form .ep-lead-form__input:-webkit-autofill:hover,
.ep-lead-form .ep-lead-form__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}

.ep-lead-form__input:focus {
    outline: none;
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-lead-form__error {
    margin: 4px 0 12px;
    color: #ff6b6b;
    font-size: 13px;
}

.ep-lead-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.ep-lead-form__btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}

.ep-lead-form__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ep-lead-form__btn--primary {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-lead-form__btn--primary:hover {
    filter: brightness(1.15);
}

.ep-lead-form__btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* Action Lock */
.ep-action-lock {
    position: absolute;
    inset: 0;
    z-index: 13;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: inherit;
    text-align: center;
}

.ep-action-lock__inner {
    max-width: 460px;
    width: 100%;
}

.ep-action-lock__headline {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.ep-action-lock__message {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.85;
}

.ep-action-lock__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.ep-action-lock__btn {
    padding: 9px 18px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s ease, background 0.15s ease;
}

.ep-action-lock__btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.ep-action-lock__btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

.ep-action-lock__btn--primary {
    background: var(--plyr-color-main, #5b4e96);
    border-color: var(--plyr-color-main, #5b4e96);
}

.ep-action-lock__btn--primary:hover {
    filter: brightness(1.15);
}

.ep-action-lock__btn--facebook {
    background: #1877f2;
    border-color: #1877f2;
}

.ep-action-lock__btn--twitter {
    background: #000;
    border-color: #000;
}

.ep-action-lock__btn--linkedin {
    background: #0a66c2;
    border-color: #0a66c2;
}

/* Country Restriction fallback */
.ep-country-restricted {
    background: #f5f5f7;
    border: 1px solid #e0e0e4;
    border-radius: 6px;
    padding: 32px 20px;
    text-align: center;
    color: #444;
    font-family: inherit;
}

.ep-country-restricted__inner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Public-facing view + download count badge for PDF / Document embeds */
.ep-view-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    color: #444;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    width: -moz-fit-content;
    width: fit-content;
}

.ep-view-count__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ep-view-count [hidden] {
    display: none !important;
}

.ep-view-count__icon {
    flex-shrink: 0;
    opacity: 0.75;
}

.ep-view-count__label {
    white-space: nowrap;
}

.ep-view-count__sep {
    opacity: 0.4;
}

@media (prefers-color-scheme: dark) {
    .ep-view-count {
        color: #ddd;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   View-count badge positioning (fbs-82395)
   The badge always stays OUTSIDE the embed — it never overlays the PDF or its
   toolbar. The modifiers only control which side of the embed it sits on
   (above / below) and its horizontal alignment (left / center / right).
   Default (no modifier) = below + left, the original placement, so existing
   posts render unchanged. Alignment is done in-flow on a full-width row, so
   nothing is absolutely positioned over the embed.
   ────────────────────────────────────────────────────────────────────────── */
.ep-view-count[class*="ep-view-count--pos-"] {
    display: flex;
    width: 100%;
}

/* Horizontal alignment within the badge's own full-width row. */
.ep-view-count--pos-below-left,
.ep-view-count--pos-above-left {
    justify-content: flex-start;
}

.ep-view-count--pos-below-center,
.ep-view-count--pos-above-center {
    justify-content: center;
}

.ep-view-count--pos-below-right,
.ep-view-count--pos-above-right {
    justify-content: flex-end;
}

/* 'Above' variants sit before the embed; drop the default top margin and add
   a bottom gap instead so the spacing mirrors the 'below' placement. */
.ep-view-count--pos-above-left,
.ep-view-count--pos-above-center,
.ep-view-count--pos-above-right {
    margin-block-start: 0;
    margin-block-end: 8px;
}

/* Editor preview: the badge renders as the last child of the content wraper,
   so for 'above' variants flip it to the top with flex order. The frontend
   inserts the node before the embed directly (see ep-view-count.js), so this
   rule is editor-only and harmless on the front end. */
.main-content-wraper:has(> .ep-view-count--pos-above-left),
.main-content-wraper:has(> .ep-view-count--pos-above-center),
.main-content-wraper:has(> .ep-view-count--pos-above-right),
.ep-embed-content-wraper:has(.ep-view-count--pos-above-left),
.ep-embed-content-wraper:has(.ep-view-count--pos-above-center),
.ep-embed-content-wraper:has(.ep-view-count--pos-above-right) {
    display: flex;
    flex-direction: column;
}

.ep-view-count--pos-above-left,
.ep-view-count--pos-above-center,
.ep-view-count--pos-above-right {
    order: -1;
}

/* ──────────────────────────────────────────────────────────────────────────
   YouTube Playlist — scoped playlist layouts (fbs-72610)
   Two layouts live here: Queue (default, immersive player+sidebar) and
   Theatre (player on top + horizontal card strip). Both render inside
   .ep-yt-playlist[data-layout="…"] so they share one CSS reset and design
   tokens, isolating them from theme/plugin styles that would otherwise
   bleed in via universal selectors.
   ────────────────────────────────────────────────────────────────────────── */
/* All playlist layouts take their container's full width; strip the
   wrapper's inline width:600px / height:550px / display:inline-block. */
.ose-youtube.has-layout-queue,
.ose-youtube.has-layout-queue .ep-player-wrap.layout-queue,
.ose-youtube.has-layout-theatre,
.ose-youtube.has-layout-theatre .ep-player-wrap.layout-theatre,
.ose-youtube.has-layout-library,
.ose-youtube.has-layout-library .ep-player-wrap.layout-library,
.ose-youtube.has-layout-spotlight,
.ose-youtube.has-layout-spotlight .ep-player-wrap.layout-spotlight,
.ose-youtube.has-layout-cinema,
.ose-youtube.has-layout-cinema .ep-player-wrap.layout-cinema,
.ose-youtube.has-layout-magazine,
.ose-youtube.has-layout-magazine .ep-player-wrap.layout-magazine {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0;
    background: transparent;
}

.ep-player-wrap.layout-queue .ep-first-video,
.ep-player-wrap.layout-theatre .ep-first-video,
.ep-player-wrap.layout-library .ep-first-video,
.ep-player-wrap.layout-spotlight .ep-first-video,
.ep-player-wrap.layout-cinema .ep-first-video,
.ep-player-wrap.layout-magazine .ep-first-video {
    display: none;
}

/* === SCOPED RESET + DESIGN TOKENS ====================================== */
/* Anything inside .ep-yt-playlist gets reverted to user-agent defaults so
   the theme's universal selectors (font-family on *, paddings on li, etc.)
   stop leaking into our layout. We then layer the design tokens back on
   the wrapper and re-apply only the properties we need. */
.ep-yt-playlist {
    --epyp-bg: #0f0f0f;
    --epyp-surface: #181818;
    --epyp-surface-2: #212121;
    --epyp-border: #2a2a2a;
    --epyp-text: #f1f1f1;
    --epyp-text-dim: #aaa;
    --epyp-accent: #ff0000;
    --epyp-focus: #3ea6ff;
    --epyp-radius: 12px;
    --epyp-radius-sm: 6px;
    --epyp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    box-sizing: border-box;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    color: var(--epyp-text);
    font-family: var(--epyp-font);
    line-height: 1.4;
    background: var(--epyp-bg);
    border-radius: var(--epyp-radius);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}

/* Reset every descendant so themed `li`/`a`/`button`/`img`/etc. styles
   stop interfering. `all: revert` reverts to user-agent defaults, then we
   re-set box-sizing + font + line-height. */
.ep-yt-playlist * {
    all: revert;
    box-sizing: border-box;
    font-family: var(--epyp-font);
    line-height: 1.4;
}

.ep-yt-playlist *::before,
.ep-yt-playlist *::after {
    box-sizing: border-box;
}

.ep-yt-playlist a {
    color: inherit;
    text-decoration: none;
}

.ep-yt-playlist button {
    font: inherit;
    cursor: pointer;
}

.ep-yt-playlist img, .ep-yt-playlist svg {
    display: block;
    max-width: 100%;
}

.ep-yt-playlist ol, .ep-yt-playlist ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* === QUEUE LAYOUT ===================================================== */
.ep-yt-playlist[data-layout="queue"][data-playlist-id] {
    /* Default queue height; overridden by an inline --epq-h on the wrapper
       when the user configures a block/widget height. Declared here (not on
       .ep-yt-queue) so the inline override actually cascades down. */
    --epq-h: 480px;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: var(--epq-h);
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__player {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: #000;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    max-width: 100% !important;
    max-height: 100% !important;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__list {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: var(--epyp-surface);
    border-left: 1px solid var(--epyp-border);
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__header {
    flex: 0 0 auto;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--epyp-border);
    background: var(--epyp-surface-2);
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--epyp-text);
    line-height: 1.3;
    margin: 0 0 4px;
    word-break: break-word;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__title:hover {
    color: #fff;
    text-decoration: underline;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--epyp-text-dim);
    margin-bottom: 8px;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__sep {
    opacity: .6;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__position-current {
    color: #fff;
    font-weight: 500;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__controls button {
    background: transparent;
    border: 0;
    color: var(--epyp-text-dim);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    transition: background .15s, color .15s;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__controls button:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__controls button[aria-pressed="true"] {
    color: var(--epyp-focus);
    background: rgba(62, 166, 255, .12);
}

.ep-yt-playlist .ep-yt-queue__icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* CSS-mask icons — survive simple_html_dom case-normalization (Pro pipeline
   lowercases SVG `viewBox` → `viewbox`, which browsers ignore). Using
   mask-image with currentColor lets us keep aria-pressed color swaps. */
.ep-yt-playlist .ep-yt-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

.ep-yt-playlist .ep-yt-icon--loop {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='17 1 21 5 17 9'/><path d='M3 11V9a4 4 0 0 1 4-4h14'/><polyline points='7 23 3 19 7 15'/><path d='M21 13v2a4 4 0 0 1-4 4H3'/></svg>");
}

.ep-yt-playlist .ep-yt-icon--shuffle {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 3 21 3 21 8'/><line x1='4' y1='20' x2='21' y2='3'/><polyline points='21 16 21 21 16 21'/><line x1='15' y1='15' x2='21' y2='21'/><line x1='4' y1='4' x2='9' y2='9'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 3 21 3 21 8'/><line x1='4' y1='20' x2='21' y2='3'/><polyline points='21 16 21 21 16 21'/><line x1='15' y1='15' x2='21' y2='21'/><line x1='4' y1='4' x2='9' y2='9'/></svg>");
}

.ep-yt-playlist .ep-yt-icon--chev-left {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

.ep-yt-playlist .ep-yt-icon--chev-right {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

.ep-yt-playlist .ep-yt-icon--prev {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='19 20 9 12 19 4 19 20'/><line x1='5' y1='19' x2='5' y2='5'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='19 20 9 12 19 4 19 20'/><line x1='5' y1='19' x2='5' y2='5'/></svg>");
}

.ep-yt-playlist .ep-yt-icon--next {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 4 15 12 5 20 5 4'/><line x1='19' y1='5' x2='19' y2='19'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='5 4 15 12 5 20 5 4'/><line x1='19' y1='5' x2='19' y2='19'/></svg>");
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__items {
    padding: 6px 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__items::-webkit-scrollbar {
    width: 8px;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__items::-webkit-scrollbar-track {
    background: transparent;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__items::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__items::-webkit-scrollbar-thumb:hover {
    background: #5e5e5e;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item {
    display: grid;
    grid-template-columns: 24px 92px 1fr;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    cursor: pointer;
    align-items: center;
    transition: background .12s;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item:hover {
    background: rgba(255, 255, 255, .06);
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item.is-active {
    background: rgba(255, 255, 255, .1);
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item.is-active .ep-yt-queue__item-index {
    color: transparent;
    background-repeat: no-repeat;
    background-position: center;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item-index {
    text-align: center;
    color: var(--epyp-text-dim);
    font-size: 12px;
    line-height: 1;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item-thumb {
    width: 92px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    background-color: #000;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item-title {
    color: var(--epyp-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item-channel {
    color: var(--epyp-text-dim);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-yt-playlist .ep-yt-queue__loader,
.ep-yt-playlist .ep-yt-theatre__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    color: var(--epyp-text-dim);
    font-size: 12px;
}

.ep-yt-playlist .ep-yt-queue__loader[hidden],
.ep-yt-playlist .ep-yt-theatre__loader[hidden] {
    display: none;
}

.ep-yt-playlist .ep-yt-queue__spinner,
.ep-yt-playlist .ep-yt-theatre__spinner,
.ep-yt-playlist .ep-yt-library__spinner,
.ep-yt-playlist .ep-yt-spotlight__spinner,
.ep-yt-playlist .ep-yt-cinema__spinner,
.ep-yt-playlist .ep-yt-magazine__spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    box-sizing: border-box;
    border: 2px solid #4a4a4a;
    border-top-color: var(--epyp-text);
    border-radius: 50%;
    animation: ep-yt-playlist-spin .8s linear infinite;
}

@keyframes ep-yt-playlist-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue {
        --epq-h: auto;
        flex-direction: column;
        height: auto;
    }

    .ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__player {
        aspect-ratio: 16/9;
        height: auto;
        flex: 0 0 auto;
    }

    .ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__list {
        flex: 0 0 auto;
        border-left: 0;
        border-top: 1px solid var(--epyp-border);
        height: 360px;
        max-height: 360px;
    }
}

/* === THEATRE LAYOUT =================================================== */
/* Large player on top with title/meta strip, then a horizontal scrolling
   row of cards (prev/next arrows on each end). Visual reference: Netflix /
   YouTube channel "Up Next" row. */
.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre {
    display: flex;
    flex-direction: column;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__player {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    max-width: 100% !important;
    max-height: 100% !important;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__meta {
    padding: 14px 18px;
    background: var(--epyp-surface-2);
    border-bottom: 1px solid var(--epyp-border);
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--epyp-text);
    margin: 0;
    word-break: break-word;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__title:hover {
    text-decoration: underline;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__playicon {
    color: var(--epyp-accent);
    font-size: 14px;
    line-height: 1;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--epyp-text-dim);
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__sep {
    opacity: .6;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__position-current {
    color: #fff;
    font-weight: 500;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__controls button {
    background: transparent;
    border: 0;
    color: var(--epyp-text-dim);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    transition: background .15s, color .15s;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__controls button:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__controls button[aria-pressed="true"] {
    color: var(--epyp-focus);
    background: rgba(62, 166, 255, .12);
}

.ep-yt-playlist .ep-yt-theatre__icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__strip-wrap {
    position: relative;
    padding: 14px 8px;
    background: var(--epyp-bg);
    /* Clamp wrap to the playlist container width — without min-width:0 the
       flex-overflowing strip can push the parent grid wider on each item
       append, making infinite-scroll grow the page. */
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre {
    /* Same defense on the layout's own column: a flex item with intrinsic
       cards needs min-width:0 so it doesn't expand its container. */
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__strip::-webkit-scrollbar {
    height: 8px;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__strip::-webkit-scrollbar-track {
    background: transparent;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__strip::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card {
    flex: 0 0 168px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-snap-align: start;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--epyp-radius-sm);
    transition: background .12s, transform .12s;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card:hover {
    background: rgba(255, 255, 255, .05);
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card.is-active {
    background: rgba(255, 255, 255, .1);
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--epyp-radius-sm);
    overflow: hidden;
    background: #000;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card-num {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 22px;
    text-align: center;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card.is-active .ep-yt-theatre__card-num {
    background: var(--epyp-accent);
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    color: var(--epyp-text);
    line-height: 1.3;
    word-break: break-word;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card-channel {
    font-size: 11px;
    color: var(--epyp-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .7);
    color: #fff;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background .15s, opacity .15s;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__nav:hover {
    background: rgba(0, 0, 0, .85);
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__nav--prev {
    left: 8px;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__nav--next {
    right: 8px;
}

.ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__nav[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__meta {
        padding: 10px 14px;
    }

    .ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__title {
        font-size: 15px;
    }

    .ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__card {
        flex: 0 0 132px;
    }

    .ep-yt-playlist[data-layout="theatre"][data-playlist-id] .ep-yt-theatre__nav {
        width: 30px;
        height: 30px;
    }
}

/* ============================================================
 * Pro playlist layouts (library / spotlight / cinema / magazine)
 * All scoped under .ep-yt-playlist so they share the queue/theatre
 * dark-frame look without leaking into other plugins. JS contract
 * for selectors lives in static/js/ep-yt-queue.js (SELECTORS table).
 * ============================================================ */

/* Stronger reset across ALL playlist layouts. The `.ep-yt-playlist *`
 * `all: revert` rule above resets to UA defaults — but themes commonly
 * target `.entry-content h2`, `.entry-content p`, `.wp-block-post-content a`
 * (specificity 0,2,1), and a `.ep-yt-playlist *` selector is only 0,1,1,
 * so theme rules re-leak into our shells.
 *
 * Fix: use `[data-layout]` (always present on our wrapper) + `:is()` to
 * lift the reset to specificity 0,3,1 — beats every typical theme rule
 * (`.entry-content h2`, `.wp-block-post-content a`, etc.). No `!important`
 * needed: our per-layout styling rules below also live under `[data-layout=...]`
 * so they win cleanly. */
.ep-yt-playlist[data-layout][data-playlist-id] :is(h1, h2, h3, h4, h5, h6, p, a, button, ol, ul, li, span, article, aside, header, footer, section, div) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    text-shadow: none;
    list-style: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: inherit;
    font-style: normal;
    text-align: left;
    box-shadow: none;
}

.ep-yt-playlist[data-layout][data-playlist-id] :is(img) {
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    margin: 0;
    filter: none;
}

/* Browser default `[hidden]` is `display:none`, but the per-layout
 * loader rules below set display:flex/block which wins on specificity.
 * Restore the hide here so loaders only show during fetch. Same for
 * the library modal which is shown via .hidden attribute toggling. */
.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__loader[hidden],
.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__loader[hidden],
.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__loader[hidden],
.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__loader[hidden],
.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__modal[hidden] {
    display: none !important;
}

/* Loader should NOT reflow the container when it appears — that makes the
 * embed visibly grow on every fetch. Float it over the bottom of the
 * scrolling list / grid / rail instead. Each loader's immediate parent
 * is made position:relative so this absolute anchor resolves there. */
.ep-yt-playlist .ep-yt-queue__loader,
.ep-yt-playlist .ep-yt-theatre__loader,
.ep-yt-playlist .ep-yt-library__loader,
.ep-yt-playlist .ep-yt-spotlight__loader,
.ep-yt-playlist .ep-yt-cinema__loader,
.ep-yt-playlist .ep-yt-magazine__loader {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    padding: 0;
    background: linear-gradient(to top, rgba(15, 15, 15, .95) 55%, rgba(15, 15, 15, 0));
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #aaa;
    font-size: 12px;
}

/* The `[data-layout][data-playlist-id] :is(span,…) { font-size: inherit }`
 * reset inflates the loader's inner text span to the player's inherited size.
 * Pin it at matching specificity so "Loading more…" stays 12px. */
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-queue__loader-text,
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-theatre__loader-text,
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-library__loader-text,
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-spotlight__loader-text,
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-cinema__loader-text,
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-magazine__loader-text {
    font-size: 12px;
    line-height: 1;
}

.ep-yt-playlist .ep-yt-queue__list,
.ep-yt-playlist .ep-yt-theatre__strip-wrap,
.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library,
.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-wrap,
.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__overlay-inner,
.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-wrap {
    position: relative;
}

/* Shared icon button — the queue/theatre __controls rules predate the
 * `.ep-yt-icon-btn` class and only style by descendant `button`. The 4
 * Pro layouts use the class, so define the look once for everything
 * carrying it. Browser default `<button>` chrome would otherwise leak
 * through (gray fill, border, beige hover) and clash with the dark theme. */
.ep-yt-playlist .ep-yt-icon-btn {
    background: transparent;
    border: 0;
    color: #aaa;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s;
    font: inherit;
    line-height: 1;
}

.ep-yt-playlist .ep-yt-icon-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ep-yt-playlist .ep-yt-icon-btn[aria-pressed="true"] {
    color: #3ea6ff;
    background: rgba(62, 166, 255, .15);
}

/* Cinema's "Queue" / library's "Close (×)" want auto width + padding. */
.ep-yt-playlist .ep-yt-cinema__open-queue,
.ep-yt-playlist .ep-yt-cinema__close-queue,
.ep-yt-playlist .ep-yt-library__modal-close {
    width: auto;
    min-width: 30px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: 13px;
    color: #fff;
}

/* Cinema "Queue" — icon + label pill, sized to match the round icon buttons.
 * Scoped with the layout attributes so font-size beats the
 * `[data-layout][data-playlist-id] :is(button,…) { font-size: inherit }` reset,
 * which would otherwise inflate the label to the player's inherited size. */
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-cinema__open-queue {
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
}

.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-cinema__open-queue-label {
    font-size: 13px;
    line-height: 1;
}

/* The `[data-layout][data-playlist-id] :is(span,…)` reset forces
 * background-color:initial on icon spans, which beats `.ep-yt-icon`'s
 * currentColor (the mask then reveals nothing). Re-assert the icon fill at
 * matching specificity so the masked glyph is visible. */
.ep-yt-playlist[data-layout][data-playlist-id] .ep-yt-icon {
    background-color: currentColor;
}

.ep-yt-playlist .ep-yt-cinema__open-queue .ep-yt-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.ep-yt-playlist .ep-yt-icon--queue {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%273%27%20y1%3D%276%27%20x2%3D%2716%27%20y2%3D%276%27/%3E%3Cline%20x1%3D%273%27%20y1%3D%2712%27%20x2%3D%2716%27%20y2%3D%2712%27/%3E%3Cline%20x1%3D%273%27%20y1%3D%2718%27%20x2%3D%2710%27%20y2%3D%2718%27/%3E%3Cpolygon%20points%3D%2716%2016%2022%2019%2016%2022%2016%2016%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23000%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%273%27%20y1%3D%276%27%20x2%3D%2716%27%20y2%3D%276%27/%3E%3Cline%20x1%3D%273%27%20y1%3D%2712%27%20x2%3D%2716%27%20y2%3D%2712%27/%3E%3Cline%20x1%3D%273%27%20y1%3D%2718%27%20x2%3D%2710%27%20y2%3D%2718%27/%3E%3Cpolygon%20points%3D%2716%2016%2022%2019%2016%2022%2016%2016%27/%3E%3C/svg%3E");
}

.ep-yt-playlist .ep-yt-library__modal-close {
    font-size: 28px;
    padding: 0 8px;
}

/* ---- Library --------------------------------------------- */
.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0f0f0f;
    color: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;
    font-family: Roboto,"Roboto Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid #2a2a2a;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__title {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__title:hover {
    color: #fff;
    text-decoration: underline;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__meta {
    color: #aaa;
    font-size: 13px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__sep {
    color: #555;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 16px;
    max-height: 640px;
    overflow-y: auto;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__grid::-webkit-scrollbar {
    width: 8px;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__grid::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    background: #181818;
    border-radius: 10px;
    padding: 8px;
    transition: background .15s ease;
    color: #f1f1f1;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card:hover {
    background: #242424;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card.is-active {
    background: #2d2d2d;
    outline: 2px solid #3ea6ff;
    outline-offset: -2px;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    opacity: 0;
    transition: opacity .15s ease;
    background: rgba(0, 0, 0, .35);
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card:hover .ep-yt-library__card-play {
    opacity: 1;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__card-channel {
    font-size: 12px;
    color: #aaa;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__loader {
    padding: 16px;
    text-align: center;
    color: #aaa;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__modal[hidden] {
    display: none;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__modal-inner {
    position: relative;
    width: min(1000px, 100%);
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__modal-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ep-yt-playlist[data-layout="library"][data-playlist-id] .ep-yt-library__modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 32px;
}

/* ---- Spotlight ------------------------------------------- */
/* Stage on top (player + hero text), rail of cards below.
 * Single-column at every width so it never crams a rail next to a
 * 16:9 player in a constrained post-content column. */
.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #0f0f0f;
    color: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;
    font-family: Roboto,"Roboto Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__player {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__hero {
    padding: 16px 20px;
    border-bottom: 1px solid #2a2a2a;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__hero-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__hero-desc {
    margin: 0 0 10px;
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 13px;
    flex-wrap: wrap;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__sep {
    color: #555;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__controls {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-wrap {
    display: flex;
    flex-direction: column;
    background: #181818;
    min-height: 0;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-header {
    padding: 12px 14px;
    border-bottom: 1px solid #2a2a2a;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-title {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail::-webkit-scrollbar {
    width: 8px;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s ease;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-card:hover {
    background: rgba(255, 255, 255, .05);
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-card.is-active {
    background: rgba(255, 255, 255, .1);
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-thumb-wrap {
    position: relative;
    width: 120px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-num {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 2px;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-card-title {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="spotlight"][data-playlist-id] .ep-yt-spotlight__rail-card-channel {
    color: #aaa;
    font-size: 12px;
}

/* ---- Cinema ---------------------------------------------- */
.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema {
    position: relative;
    background: #000;
    color: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;
    font-family: Roboto,"Roboto Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__player {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #0f0f0f;
    border-top: 1px solid #2a2a2a;
    flex-wrap: wrap;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__title {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__sub {
    color: #aaa;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__sep {
    color: #555;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__controls {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__open-queue {
    background: rgba(255, 255, 255, .1);
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__open-queue:hover {
    background: rgba(255, 255, 255, .2);
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 90%);
    background: rgba(15, 15, 15, .96);
    border-left: 1px solid #2a2a2a;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__overlay.is-open {
    transform: translateX(0);
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__overlay-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #2a2a2a;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__overlay-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__close-queue {
    font-size: 24px;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__items {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__items::-webkit-scrollbar {
    width: 8px;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__items::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item {
    display: grid;
    grid-template-columns: 28px 110px 1fr;
    gap: 8px;
    padding: 6px;
    align-items: center;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item:hover {
    background: rgba(255, 255, 255, .05);
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item.is-active {
    background: rgba(255, 255, 255, .1);
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item-index {
    color: #aaa;
    font-size: 12px;
    text-align: center;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item-thumb {
    width: 110px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: #000;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item-title {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="cinema"][data-playlist-id] .ep-yt-cinema__item-channel {
    color: #aaa;
    font-size: 12px;
}

/* ---- Magazine -------------------------------------------- */
.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine {
    background: #0f0f0f;
    color: #f1f1f1;
    border-radius: 12px;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid #2a2a2a;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__player {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-body {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-eyebrow {
    color: #ff4040;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    font-weight: 700;
    font-family: Roboto,"Roboto Fallback", sans-serif;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-title {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-desc {
    margin: 0;
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
    max-height: 4.8em;
    overflow: hidden;
    transition: max-height .25s ease;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-desc.is-expanded {
    max-height: 40em;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__readmore {
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: #3ea6ff;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    font-family: Roboto,"Roboto Fallback", sans-serif;
    font-weight: 600;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__readmore:hover {
    text-decoration: underline;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 13px;
    font-family: Roboto,"Roboto Fallback", sans-serif;
    flex-wrap: wrap;
    margin-top: auto;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__sep {
    color: #555;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__controls {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-wrap {
    padding: 16px 20px 20px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-header {
    margin-bottom: 12px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-label {
    color: #aaa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-family: Roboto,"Roboto Fallback", sans-serif;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail::-webkit-scrollbar {
    height: 8px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-item {
    flex: 0 0 220px;
    scroll-snap-align: start;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px;
    border-radius: 8px;
    transition: background .15s ease;
    font-family: Roboto,"Roboto Fallback", sans-serif;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-item:hover {
    background: rgba(255, 255, 255, .05);
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-item.is-active {
    background: rgba(255, 255, 255, .1);
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-thumb-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-card-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-card-channel {
    color: #aaa;
    font-size: 12px;
}

.ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__loader {
    font-family: Roboto,"Roboto Fallback", sans-serif;
}

@media (max-width: 600px) {
    .ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-title {
        font-size: 20px;
    }

    .ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__hero-body {
        padding: 16px 16px;
    }

    .ep-yt-playlist[data-layout="magazine"][data-playlist-id] .ep-yt-magazine__rail-item {
        flex: 0 0 160px;
    }
}
/* ===========================================
   EmbedPress PDF Lightbox — Thumbnail + Lightbox
   =========================================== */

/* Book Card Container */
.ep-pdf-thumbnail-card {
    display: inline-block;
    text-align: center;
    max-width: 100%;
    cursor: pointer;
}

/* Book Wrap */
.ep-pdf-thumbnail-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

/* The book "cover" */
.ep-pdf-thumbnail-wrap .ep-pdf-thumbnail-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

/* Thumbnail Canvas & Image */
.ep-pdf-thumbnail-canvas,
.ep-pdf-thumbnail-custom {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Loading shimmer */
.ep-pdf-thumbnail-canvas[data-loading="true"] {
    background: linear-gradient(90deg, #f5f3ef 25%, #ece8e1 50%, #f5f3ef 75%);
    background-size: 200% 100%;
    animation: epLightboxShimmer 1.5s infinite;
    min-height: 280px;
    min-width: 200px;
}

@keyframes epLightboxShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fallback placeholder */
.ep-pdf-thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 280px;
    min-width: 200px;
    background: #f9f7f4;
    color: #999;
}

/* Hover overlay */
.ep-pdf-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.ep-pdf-thumbnail-card:hover .ep-pdf-thumbnail-overlay {
    background: rgba(0, 0, 0, 0.4);
}

/* Open/play icon circle */
.ep-pdf-thumbnail-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ep-pdf-thumbnail-card:hover .ep-pdf-thumbnail-icon-circle {
    opacity: 1;
    transform: scale(1);
}

.ep-pdf-thumbnail-icon-circle svg {
    width: 24px;
    height: 24px;
    fill: #333;
    margin-left: 2px;
}

/* Editor: show play icon always (no hover in editor) */
.block-editor-block-list__layout .ep-pdf-thumbnail-overlay {
    background: rgba(0, 0, 0, 0.25);
}

.block-editor-block-list__layout .ep-pdf-thumbnail-icon-circle {
    opacity: 1;
    transform: scale(1);
}

.block-editor-block-list__layout .ep-pdf-thumbnail-card {
    cursor: default;
}

/* ===========================================
   Trigger Elements (Button / Link / Text)
   =========================================== */

/* Shared trigger styles */
.ep-pdf-trigger {
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Button style */
.ep-pdf-trigger--button {
    background: #5b4e96;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(91, 78, 150, 0.3);
}

.ep-pdf-trigger--button:hover {
    background: #4a3f7e;
    box-shadow: 0 4px 12px rgba(91, 78, 150, 0.4);
    transform: translateY(-1px);
}

/* Link style */
.ep-pdf-trigger--link {
    color: #5b4e96;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ep-pdf-trigger--link:hover {
    color: #4a3f7e;
    text-decoration-thickness: 2px;
}

/* Text style */
.ep-pdf-trigger--text {
    color: #333;
    font-size: 15px;
}

.ep-pdf-trigger--text:hover {
    color: #5b4e96;
}

/* ===========================================
   Lightbox Overlay
   =========================================== */
.ep-pdf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
}

.ep-pdf-lightbox.ep-pdf-lightbox--open {
    display: flex;
}

.ep-pdf-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: epLightboxFadeIn 0.25s ease-out;
}

@keyframes epLightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Close Button */
.ep-pdf-lightbox__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
    padding: 0;
}

.ep-pdf-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Viewer Container */
.ep-pdf-lightbox__viewer {
    width: 90vw;
    height: 90vh;
    max-width: 1400px;
    position: relative;
}

.ep-pdf-lightbox__iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
    background: #fff;
}



/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 1024px) {
    .ep-pdf-lightbox__viewer {
        width: 95vw;
        height: 90vh;
    }
}

@media (max-width: 767px) {
    .ep-pdf-lightbox__viewer {
        width: 100vw;
        height: 85vh;
        border-radius: 0;
    }

    .ep-pdf-lightbox__iframe {
        border-radius: 0;
    }

    .ep-pdf-thumbnail-icon-circle {
        width: 44px;
        height: 44px;
    }

    .ep-pdf-thumbnail-icon-circle svg {
        width: 20px;
        height: 20px;
    }
}

:where(html.wpc-bgl255) .ep-yt-playlist[data-layout="queue"][data-playlist-id] .ep-yt-queue__item.is-active .ep-yt-queue__item-index{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}