/**
 * Yumpu Magazine Library - Enhanced Styles v3.0
 */

/* ========== DEFAULT CSS VARIABLES ========== */
.yumpu-library-widget {
    --primary-color: #6366f1;
    --secondary-color: #8b5cf6;
    --text-color: #374151;
    --heading-color: #111827;
    --meta-color: #6b7280;
    --bg-color: #f9fafb;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --hover-color: #4f46e5;
    --tag-bg: #ede9fe;
    --tag-text: #5b21b6;

    --font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --heading-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size: 16px;

    --border-radius: 12px;
    --card-opacity: 1;
    --spacing: 20px;
    --card-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
    --card-hover-shadow: 0 12px 28px rgba(0,0,0,.18), 0 24px 56px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.10);
    --transition-speed: 0.3s;
    --slide-speed: 30s;
    --widget-size: 1;
    --bg-custom: transparent;
    --text-custom: inherit;
}

/* ========== DARK MODE ========== */
.yumpu-library-widget.dark-mode {
    --text-color: #e5e7eb;
    --heading-color: #f9fafb;
    --meta-color: #9ca3af;
    --bg-color: #111827;
    --card-bg: #1f2937;
    --border-color: #374151;
    --card-shadow: 0 2px 8px rgba(0,0,0,.3);
    --primary-color: #818cf8;
    --hover-color: #6366f1;
    --tag-bg: #312e81;
    --tag-text: #c7d2fe;
}

/* ========== BASE ========== */
.yumpu-library-widget {
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--text-color);
    background: var(--bg-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    transition: background .3s, color .3s;
    box-sizing: border-box;
    overflow: visible;
}

.yumpu-library-widget *, .yumpu-library-widget *::before, .yumpu-library-widget *::after {
    box-sizing: inherit;
}

/* ========== BACKGROUND MODES ========== */
.yumpu-library-widget.transparent-bg {
    background: transparent !important;
}
.yumpu-library-widget.transparent-bg .magazine-card,
.yumpu-library-widget.transparent-bg .compact-card,
.yumpu-library-widget.transparent-bg .magazine-item,
.yumpu-library-widget.transparent-bg .counter-container {
    background: transparent !important;
    box-shadow: none !important;
}
.yumpu-library-widget.transparent-bg .magazine-cover {
    background: transparent !important;
}
.yumpu-library-widget.custom-bg { background: var(--bg-custom) !important; }
.yumpu-library-widget.custom-text-color { --text-color: var(--text-custom); --heading-color: var(--text-custom); }

/* ========== LOADING / ERROR ========== */

/* ── Book page-flip animation ── */
@keyframes yumpu-page-flip {
    0%   { transform: perspective(220px) rotateY(0deg); }
    35%  { transform: perspective(220px) rotateY(-90deg); }
    70%  { transform: perspective(220px) rotateY(-180deg); }
    100% { transform: perspective(220px) rotateY(-180deg); }
}

/* Full-width centring wrapper used when the loader is injected inline
   (e.g. "Searching…" state inside .yumpu-search-results) */
.yumpu-inline-loader-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
}

.yumpu-loading {
    text-align: center;
    color: var(--meta-color);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: opacity 0.25s ease;
}

/* ── Book loader markup ── */
.yumpu-book-loader {
    position: relative;
    width: 72px;
    height: 62px;
    flex-shrink: 0;
}

.yumpu-book-left,
.yumpu-book-right {
    position: absolute;
    top: 0;
    width: 33px;
    height: 62px;
    background: rgba(47,181,180,.13);
    border: 1.5px solid rgba(47,181,180,.38);
}

.yumpu-book-left {
    left: 0;
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.yumpu-book-right {
    right: 0;
    border-left: none;
    border-radius: 0 4px 4px 0;
}

.yumpu-book-spine {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
    width: 6px;
    height: calc(100% + 6px);
    background: #2fb5b4;
    border-radius: 3px;
    z-index: 4;
}

.yumpu-book-page {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 26px;
    height: 56px;
    border-radius: 0 3px 3px 0;
    transform-origin: left center;
    animation: yumpu-page-flip 1.6s ease-in-out infinite;
    backface-visibility: hidden;
}

.yumpu-book-page.page-a {
    z-index: 3;
    background: #ffffff;
    border: 1px solid rgba(47,181,180,.28);
    animation-delay: 0s;
}

.yumpu-book-page.page-b {
    z-index: 2;
    background: #f4fefe;
    border: 1px solid rgba(47,181,180,.18);
    animation-delay: 0.22s;
}

.yumpu-book-page.page-c {
    z-index: 1;
    background: #e8fbfb;
    border: 1px solid rgba(47,181,180,.12);
    animation-delay: 0.44s;
}

/* page lines */
.yumpu-book-page::before {
    content: '';
    position: absolute;
    inset: 6px 4px;
    background: repeating-linear-gradient(
        transparent, transparent 6px,
        rgba(47,181,180,.18) 6px, rgba(47,181,180,.18) 7px
    );
    border-radius: 1px;
}

.yumpu-loading-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.5;
}

/* ── Ring loader ── */
.yumpu-ring-loader {
    animation: yumpu-ring-spin 0.9s linear infinite;
    flex-shrink: 0;
}
@keyframes yumpu-ring-spin {
    to { transform: rotate(360deg); }
}

/* ── Dot pulse spinner ── */
.yumpu-dot-spinner {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.yumpu-dot-spinner span {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2fb5b4;
    animation: yumpu-dot-pulse 1.2s ease-in-out infinite;
}
.yumpu-dot-spinner span:nth-child(2) { animation-delay: 0.2s; }
.yumpu-dot-spinner span:nth-child(3) { animation-delay: 0.4s; }
@keyframes yumpu-dot-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}

/* ── Skeleton loader ── */
@keyframes yumpu-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.yumpu-skeleton {
    background: linear-gradient(90deg,
        var(--border-color, #e5e7eb) 25%,
        color-mix(in srgb, var(--border-color, #e5e7eb) 40%, white) 50%,
        var(--border-color, #e5e7eb) 75%
    );
    background-size: 200% 100%;
    animation: yumpu-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--border-radius);
}
/* Skeleton card — reuse real card styles; override only what's needed */
.yumpu-skeleton-item { pointer-events: none; cursor: default !important; }
.yumpu-skeleton-item .magazine-cover { background: none; }
.yumpu-skeleton-item.magazine-item .magazine-cover {
    background: linear-gradient(90deg,
        var(--border-color, #e5e7eb) 25%,
        color-mix(in srgb, var(--border-color, #e5e7eb) 40%, white) 50%,
        var(--border-color, #e5e7eb) 75%
    );
    background-size: 200% 100%;
    animation: yumpu-shimmer 1.4s ease-in-out infinite;
}
.yumpu-skeleton-line {
    height: .85em;
    border-radius: 4px;
    margin-bottom: 6px;
}
.yumpu-skeleton-line:last-child { margin-bottom: 0; }

/* ── Overflow fix: allow card hover shadows to escape containers ── */
/* !important beats any theme or page-builder overflow:hidden rules  */
.yumpu-container,
.yumpu-search-wrapper,
.yumpu-search-results,
.yumpu-search-results-only { overflow: visible !important; }

/* Give the bottom of search results 40 px of physical breathing room
   so the last-row card shadows are never clipped vertically.
   Negative margin cancels the layout shift so nothing moves.       */
.yumpu-search-results {
    padding-bottom: 40px;
    margin-bottom: -40px;
}

.yumpu-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    border: 2px dashed var(--border-color);
    color: var(--text-color);
}
.yumpu-no-results h2 { color: var(--heading-color); margin: 0 0 16px; font-family: var(--heading-font); }

/* ========== GRID LAYOUT ========== */
.magazines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing);
    overflow: visible;
    /* Give each card physical room to scale into on hover.
       padding adds the buffer; negative margin cancels the layout shift. */
    padding: 30px;
    margin: -30px;
}

/* Fixed columns (responsive) */
.magazines-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.magazines-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.magazines-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.magazines-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.magazines-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
    .magazines-grid[data-cols="6"] { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1024px) {
    .magazines-grid[data-cols="5"],
    .magazines-grid[data-cols="6"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .magazines-grid[data-cols="4"],
    .magazines-grid[data-cols="5"],
    .magazines-grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .magazines-grid[data-cols] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
    .magazines-grid,
    .magazines-grid[data-cols] { grid-template-columns: 1fr !important; }
}

/* ========== LIST LAYOUT ========== */
.magazines-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    overflow: visible;
    padding: 30px;
    margin: -30px;
}

/* ========== SLIDER LAYOUT ========== */
.magazines-slider {
    overflow: hidden;
    position: relative;
    cursor: default;
}

/* ── Slider fade edges ─────────────────────────────────────────────────────────
   Split into two rules so left/right anchors are ALWAYS set,
   regardless of which data-fade variant is active.            */
.magazines-slider::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--slider-fade-width, 80px);
    z-index: 10;
    pointer-events: none;
}
.magazines-slider::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: var(--slider-fade-width, 80px);
    z-index: 10;
    pointer-events: none;
}

/* gradient (default) — blends into the widget background colour */
.magazines-slider[data-fade="gradient"]::before,
.magazines-slider:not([data-fade])::before {
    background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
}
.magazines-slider[data-fade="gradient"]::after,
.magazines-slider:not([data-fade])::after {
    background: linear-gradient(to left, var(--bg-color) 0%, transparent 100%);
}

/* hard — solid colour block (narrower, acts like a curtain) */
.magazines-slider[data-fade="hard"]::before {
    background: var(--bg-color);
}
.magazines-slider[data-fade="hard"]::after {
    background: var(--bg-color);
}

/* vignette — dark shadow regardless of bg colour */
.magazines-slider[data-fade="vignette"]::before {
    background: linear-gradient(to right, rgba(0,0,0,.6) 0%, transparent 100%);
}
.magazines-slider[data-fade="vignette"]::after {
    background: linear-gradient(to left, rgba(0,0,0,.6) 0%, transparent 100%);
}

/* glow — primary colour tint */
.magazines-slider[data-fade="glow"]::before {
    background: linear-gradient(to right, rgba(99,102,241,.4) 0%, transparent 100%);
}
.magazines-slider[data-fade="glow"]::after {
    background: linear-gradient(to left, rgba(99,102,241,.4) 0%, transparent 100%);
}

/* glass — frosted glass blur that blends whatever is behind the slider edges */
.magazines-slider[data-fade="glass"]::before,
.magazines-slider[data-fade="glass"]::after {
    background: transparent;
    /* webkit-mask fades the blur from opaque at the edge to invisible in the middle */
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
    backdrop-filter: blur(12px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.4) brightness(1.05);
}
.magazines-slider[data-fade="glass"]::after {
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
    mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

/* none — disable both edges */
.magazines-slider[data-fade="none"]::before,
.magazines-slider[data-fade="none"]::after {
    display: none;
}

/* ── Opacity / dim fade ─────────────────────────────────────────────────────
   Cards fade via CSS mask-image on the slider itself — no colour blending,
   works perfectly on transparent backgrounds.                             */
.magazines-slider[data-fade="opacity"],
.magazines-slider[data-fade="dim"] {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black var(--slider-fade-width, 80px),
        black calc(100% - var(--slider-fade-width, 80px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black var(--slider-fade-width, 80px),
        black calc(100% - var(--slider-fade-width, 80px)),
        transparent 100%
    );
    overflow: hidden;
}
.magazines-slider[data-fade="opacity"]::before,
.magazines-slider[data-fade="opacity"]::after,
.magazines-slider[data-fade="dim"]::before,
.magazines-slider[data-fade="dim"]::after { display: none; }

/* ── Blur — frosted blur at edges ─────────────────────────────────────────── */
.magazines-slider[data-fade="blur"]::before {
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to right, black 30%, transparent 100%);
    mask-image: linear-gradient(to right, black 30%, transparent 100%);
}
.magazines-slider[data-fade="blur"]::after {
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
    mask-image: linear-gradient(to left, black 30%, transparent 100%);
}

/* ── Spotlight — dark vignette edges, bright centre ──────────────────────── */
.magazines-slider[data-fade="spotlight"]::before {
    background: linear-gradient(to right, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
}
.magazines-slider[data-fade="spotlight"]::after {
    background: linear-gradient(to left, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
}

/* ── Warm — amber glow that fades in at edges ─────────────────────────────── */
.magazines-slider[data-fade="warm"]::before {
    background: linear-gradient(to right, rgba(251,146,60,.55) 0%, rgba(251,146,60,.1) 60%, transparent 100%);
}
.magazines-slider[data-fade="warm"]::after {
    background: linear-gradient(to left, rgba(251,146,60,.55) 0%, rgba(251,146,60,.1) 60%, transparent 100%);
}

/* ── Cool — icy blue-violet tint at edges ─────────────────────────────────── */
.magazines-slider[data-fade="cool"]::before {
    background: linear-gradient(to right, rgba(56,189,248,.5) 0%, rgba(99,102,241,.15) 60%, transparent 100%);
}
.magazines-slider[data-fade="cool"]::after {
    background: linear-gradient(to left, rgba(56,189,248,.5) 0%, rgba(99,102,241,.15) 60%, transparent 100%);
}

/* ── Neon — vivid primary-colour glow that bleeds into the edges ──────────── */
.magazines-slider[data-fade="neon"]::before {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--primary-color) 65%, transparent) 0%,
        color-mix(in srgb, var(--primary-color) 20%, transparent) 50%,
        transparent 100%);
    filter: brightness(1.25) saturate(1.4);
}
.magazines-slider[data-fade="neon"]::after {
    background: linear-gradient(to left,
        color-mix(in srgb, var(--primary-color) 65%, transparent) 0%,
        color-mix(in srgb, var(--primary-color) 20%, transparent) 50%,
        transparent 100%);
    filter: brightness(1.25) saturate(1.4);
}

/* ── Frosted — blur + semi-opaque white tint, softer than pure glass ─────── */
.magazines-slider[data-fade="frosted"]::before {
    background: linear-gradient(to right,
        rgba(255,255,255,.35) 0%,
        rgba(255,255,255,.08) 60%,
        transparent 100%);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
.magazines-slider[data-fade="frosted"]::after {
    background: linear-gradient(to left,
        rgba(255,255,255,.35) 0%,
        rgba(255,255,255,.08) 60%,
        transparent 100%);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
}

/* ── Glass — frosted glass that blends whatever is behind the widget ──────── */
.magazines-slider[data-fade="glass"]::before,
.magazines-slider[data-fade="glass"]::after {
    background: transparent;
    backdrop-filter: blur(12px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.4) brightness(1.05);
}
.magazines-slider[data-fade="glass"]::before {
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
}
.magazines-slider[data-fade="glass"]::after {
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
    mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

/* transparent bg + gradient: avoid blending into transparent bg-color */
.yumpu-library-widget.transparent-bg .magazines-slider[data-fade="gradient"]::before,
.yumpu-library-widget.transparent-bg .magazines-slider:not([data-fade])::before {
    background: linear-gradient(to right, rgba(0,0,0,.45) 0%, transparent 100%);
}
.yumpu-library-widget.transparent-bg .magazines-slider[data-fade="gradient"]::after,
.yumpu-library-widget.transparent-bg .magazines-slider:not([data-fade])::after {
    background: linear-gradient(to left, rgba(0,0,0,.45) 0%, transparent 100%);
}

.slider-track {
    display: flex;
    gap: var(--spacing);
    will-change: transform;
}

.magazines-slider .magazine-card {
    flex: 0 0 260px;
    margin-bottom: 8px; /* room for shadow */
}

/* ========== SHOWCASE LAYOUT ========== */
.magazines-showcase {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    min-height: var(--showcase-height, 420px);
}

.showcase-slides-wrapper {
    position: relative;
    min-height: var(--showcase-height, 420px);
}

/* ── Slide transitions ───────────────────────────────────────────────── */
.showcase-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.showcase-slide.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

/* slide transition override */
.magazines-showcase[data-transition="slide"] .showcase-slide {
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .1s;
    opacity: 1;
}
.magazines-showcase[data-transition="slide"] .showcase-slide.active {
    transform: translateX(0);
}
.magazines-showcase[data-transition="slide"] .showcase-slide.leaving {
    transform: translateX(-100%);
    opacity: 1;
    z-index: 0;
}
.magazines-showcase[data-transition="zoom"] .showcase-slide {
    transform: scale(.96);
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
}
.magazines-showcase[data-transition="zoom"] .showcase-slide.active {
    transform: scale(1);
    opacity: 1;
}

/* ── Base content layout ─────────────────────────────────────────────── */
.showcase-content {
    display: flex;
    min-height: var(--showcase-height, 420px);
    cursor: pointer;
}

/* image on right */
.magazines-showcase[data-img-pos="right"] .showcase-content { flex-direction: row-reverse; }
/* image on top */
.magazines-showcase[data-img-pos="top"] .showcase-content { flex-direction: column; }
.magazines-showcase[data-img-pos="top"] .showcase-image { flex: 0 0 var(--showcase-img-size, 260px); width: 100%; }

.showcase-image {
    flex: 0 0 var(--showcase-img-size, 300px);
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color) 8%, transparent),
        color-mix(in srgb, var(--secondary-color, #8b5cf6) 8%, transparent));
    position: relative;
}
.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.showcase-slide.active .showcase-image img { transform: scale(1.04); }

.showcase-info {
    flex: 1;
    padding: var(--showcase-padding, 40px 40px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    position: relative;
}

/* text alignment */
.magazines-showcase[data-align="center"] .showcase-info { align-items: center; text-align: center; }
.magazines-showcase[data-align="right"]  .showcase-info { align-items: flex-end; text-align: right; }

/* ── Typography ──────────────────────────────────────────────────────── */
.showcase-eyebrow {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-color);
    opacity: .85;
}

.showcase-lang-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    align-self: flex-start;
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.magazines-showcase[data-align="center"] .showcase-lang-badge { align-self: center; }
.magazines-showcase[data-align="right"]  .showcase-lang-badge { align-self: flex-end; }

.showcase-title {
    font-family: var(--heading-font);
    font-size: var(--showcase-title-size, 1.7em);
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1.25;
    margin: 0;
    letter-spacing: -.01em;
}

.showcase-description {
    color: var(--text-color);
    font-size: .9em;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: var(--showcase-desc-lines, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .85;
}

.showcase-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: .78em;
    color: var(--meta-color);
}
.showcase-meta-row .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.showcase-meta-row .meta-sep { opacity: .35; }

.showcase-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: #fff !important;
    text-decoration: none !important;
    padding: 13px 28px;
    border-radius: calc(var(--border-radius) * .8);
    font-weight: 700;
    font-size: .88em;
    letter-spacing: .02em;
    align-self: flex-start;
    margin-top: 4px;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.showcase-read-btn:hover {
    background: var(--hover-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-color) 45%, transparent);
}
.magazines-showcase[data-align="center"] .showcase-read-btn { align-self: center; }
.magazines-showcase[data-align="right"]  .showcase-read-btn { align-self: flex-end; }

/* slide counter badge */
.showcase-counter {
    font-size: .72em;
    font-weight: 600;
    color: var(--meta-color);
    letter-spacing: .06em;
    opacity: .7;
}

/* ── Navigation arrows ───────────────────────────────────────────────── */
.showcase-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--border-color);
    color: var(--heading-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: all .2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.showcase-arrow:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 35%, transparent);
    transform: translateY(calc(-50% - 1px));
}
.showcase-prev { left: 16px; }
.showcase-next { right: 16px; }

/* arrow style: square */
.magazines-showcase[data-arrow-style="square"] .showcase-arrow { border-radius: 8px; }

/* arrow style: minimal (no border, no bg) */
.magazines-showcase[data-arrow-style="minimal"] .showcase-arrow {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--meta-color);
    backdrop-filter: none;
}
.magazines-showcase[data-arrow-style="minimal"] .showcase-arrow:hover {
    background: transparent;
    color: var(--primary-color);
    box-shadow: none;
}

/* arrow style: hidden */
.magazines-showcase[data-arrow-style="hidden"] .showcase-arrow { display: none; }

/* ── Progress dots ───────────────────────────────────────────────────── */
.showcase-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: center;
}

/* dots: default circles */
.showcase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, transform .2s ease, width .2s ease;
}
.showcase-dot.active {
    background: var(--primary-color);
    transform: scale(1.35);
}

/* dots: lines */
.magazines-showcase[data-dot-style="lines"] .showcase-dot {
    width: 24px;
    height: 3px;
    border-radius: 99px;
    transform: none;
}
.magazines-showcase[data-dot-style="lines"] .showcase-dot.active {
    width: 40px;
    transform: none;
}

/* dots: hidden */
.magazines-showcase[data-dot-style="hidden"] .showcase-dots { display: none; }

/* ── VARIANT: classic (default — image left, info right) ─────────────── */
/* (base styles above already implement classic, no extra CSS needed)     */

/* ── VARIANT: hero — full bleed image with text overlay ─────────────── */
.magazines-showcase[data-variant="hero"] {
    min-height: var(--showcase-height, 500px);
}
.magazines-showcase[data-variant="hero"] .showcase-content {
    position: relative;
    min-height: var(--showcase-height, 500px);
}
.magazines-showcase[data-variant="hero"] .showcase-image {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
}
.magazines-showcase[data-variant="hero"] .showcase-image img {
    filter: brightness(.55) saturate(1.1);
}
.magazines-showcase[data-variant="hero"] .showcase-info {
    position: relative;
    z-index: 2;
    background: linear-gradient(to right,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.4) 60%,
        transparent 100%);
    padding: 56px 52px;
    max-width: 65%;
}
.magazines-showcase[data-variant="hero"] .showcase-title { color: #fff; font-size: var(--showcase-title-size, 2em); }
.magazines-showcase[data-variant="hero"] .showcase-description { color: rgba(255,255,255,.82); }
.magazines-showcase[data-variant="hero"] .showcase-lang-badge {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-color: rgba(255,255,255,.3);
}
.magazines-showcase[data-variant="hero"] .showcase-meta-row { color: rgba(255,255,255,.65); }
.magazines-showcase[data-variant="hero"] .showcase-counter { color: rgba(255,255,255,.6); }

/* hero: center-aligned text variant */
.magazines-showcase[data-variant="hero"][data-align="center"] .showcase-info {
    max-width: 100%;
    align-items: center;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.3) 70%, transparent 100%);
    justify-content: flex-end;
    padding-bottom: 56px;
}

/* ── VARIANT: cinematic — ultra-wide dark bg, large type ─────────────── */
.magazines-showcase[data-variant="cinematic"] {
    background: #0a0a0f;
}
.magazines-showcase[data-variant="cinematic"] .showcase-content {
    min-height: var(--showcase-height, 460px);
}
.magazines-showcase[data-variant="cinematic"] .showcase-image {
    flex: 0 0 var(--showcase-img-size, 340px);
    position: relative;
}
.magazines-showcase[data-variant="cinematic"] .showcase-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, #0a0a0f 100%);
    pointer-events: none;
}
.magazines-showcase[data-variant="cinematic"] .showcase-info {
    background: #0a0a0f;
    padding: 48px 52px;
}
.magazines-showcase[data-variant="cinematic"] .showcase-title {
    color: #fff;
    font-size: var(--showcase-title-size, 2em);
    font-weight: 900;
    letter-spacing: -.03em;
}
.magazines-showcase[data-variant="cinematic"] .showcase-description { color: rgba(255,255,255,.55); }
.magazines-showcase[data-variant="cinematic"] .showcase-lang-badge {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.magazines-showcase[data-variant="cinematic"] .showcase-arrow {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
    backdrop-filter: none;
}
.magazines-showcase[data-variant="cinematic"] .showcase-arrow:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.magazines-showcase[data-variant="cinematic"] .showcase-dot { background: rgba(255,255,255,.2); }
.magazines-showcase[data-variant="cinematic"] .showcase-dot.active { background: var(--primary-color); }
.magazines-showcase[data-variant="cinematic"] .showcase-meta-row { color: rgba(255,255,255,.4); }
.magazines-showcase[data-variant="cinematic"] .showcase-counter { color: rgba(255,255,255,.35); }
.magazines-showcase[data-variant="cinematic"] .showcase-eyebrow { opacity: .7; }

/* ── VARIANT: card — centred, smaller, magazine-style card feel ──────── */
.magazines-showcase[data-variant="card"] .showcase-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px;
    gap: 24px;
    min-height: var(--showcase-height, 420px);
    justify-content: center;
}
.magazines-showcase[data-variant="card"] .showcase-image {
    flex: none;
    width: 180px;
    height: 255px;
    border-radius: calc(var(--border-radius) * .8);
    box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
    overflow: hidden;
    transform: rotate(-1.5deg);
    transition: transform .4s ease, box-shadow .4s ease;
}
.showcase-slide.active .magazines-showcase[data-variant="card"] .showcase-image {
    transform: rotate(0deg);
}
.magazines-showcase[data-variant="card"] .showcase-image img { height: 100%; }
.magazines-showcase[data-variant="card"] .showcase-info {
    flex: none;
    padding: 0;
    align-items: center;
    max-width: 460px;
    gap: 10px;
}
.magazines-showcase[data-variant="card"] .showcase-lang-badge { align-self: center; }
.magazines-showcase[data-variant="card"] .showcase-title { font-size: var(--showcase-title-size, 1.5em); }
.magazines-showcase[data-variant="card"] .showcase-description { -webkit-line-clamp: 3; }
.magazines-showcase[data-variant="card"] .showcase-read-btn { align-self: center; }

/* ── VARIANT: minimal — typography-first, almost no chrome ───────────── */
.magazines-showcase[data-variant="minimal"] {
    background: transparent;
    box-shadow: none;
}
.magazines-showcase[data-variant="minimal"] .showcase-content {
    gap: 40px;
    min-height: var(--showcase-height, 320px);
    align-items: center;
    padding: 24px 0;
}
.magazines-showcase[data-variant="minimal"] .showcase-image {
    flex: 0 0 var(--showcase-img-size, 220px);
    height: 312px;
    border-radius: calc(var(--border-radius) * .75);
    box-shadow: 0 8px 30px rgba(0,0,0,.16);
}
.magazines-showcase[data-variant="minimal"] .showcase-info {
    padding: 0;
    border-left: 3px solid var(--primary-color);
    padding-left: 32px;
}
.magazines-showcase[data-variant="minimal"] .showcase-title {
    font-size: var(--showcase-title-size, 1.5em);
    font-weight: 700;
}
.magazines-showcase[data-variant="minimal"] .showcase-arrow {
    background: transparent;
    border: 1.5px solid var(--border-color);
    box-shadow: none;
    backdrop-filter: none;
}
.magazines-showcase[data-variant="minimal"] .showcase-dots { bottom: -28px; }
.magazines-showcase[data-variant="minimal"] .showcase-dot { background: var(--border-color); }

@media (max-width: 640px) {
    .showcase-content { flex-direction: column !important; }
    .showcase-image {
        flex: 0 0 220px !important;
        width: 100% !important;
        height: 220px !important;
    }
    .showcase-info { padding: 24px 20px !important; max-width: 100% !important; }
    .showcase-title { font-size: 1.25em !important; }
    .showcase-arrow { display: none; }
    .magazines-showcase[data-variant="hero"] .showcase-info {
        background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 100%) !important;
    }
}

/* ========== COVERS ONLY LAYOUT ========== */
.magazines-covers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing);
    overflow: visible;
    padding: 30px;
    margin: -30px;
}

/* ========== COMPACT LAYOUT ========== */
.magazines-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: calc(var(--spacing) / 2);
    overflow: visible;
    padding: 30px;
    margin: -30px;
}

/* ========== MASONRY LAYOUT ========== */
.magazines-masonry {
    column-count: 3;
    column-gap: var(--spacing);
    overflow: visible;
    padding: 30px;
    margin: -30px;
}
.magazines-masonry .magazine-card { break-inside: avoid; margin-bottom: var(--spacing); }
@media (max-width: 1024px) { .magazines-masonry { column-count: 2; } }
@media (max-width: 640px)  { .magazines-masonry { column-count: 1; } }

/* ========== MAGAZINE CARD ========== */
/* Cards are scaled to 95% at rest and return to 100% on hover.
   This means hover never requires the card to overflow its container —
   it only fills its own CSS-layout box, which is always within bounds.
   The visual "grow" effect comes from the 95→100% transition. */
.magazine-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: var(--card-shadow);
    opacity: var(--card-opacity);
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: scale(0.95);
}

.magazine-card:hover {
    transform: scale(1);
    box-shadow: var(--card-hover-shadow);
    position: relative;
    z-index: 10;
}

/* ── Cover ── */
.magazine-cover {
    position: relative;
    width: 100%;
    padding-top: 141.4%;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(99,102,241,.06), rgba(139,92,246,.06));
    flex-shrink: 0;
}

.magazine-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) ease;
}

.magazine-card:hover .magazine-cover img { transform: scale(1.06); }

/* Overlay "Read Now" on hover */
.magazine-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17,24,39,.75) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}
.magazine-cover-overlay span {
    color: #fff;
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
}
.magazine-card:hover .magazine-cover-overlay { opacity: 1; }

.no-image {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    opacity: .22;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Info panel ── */
.magazine-info {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    border-top: 2px solid transparent;
    background-image: linear-gradient(var(--card-bg), var(--card-bg)),
                      linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.magazine-title {
    font-family: var(--heading-font);
    font-size: 1em;
    font-weight: 650;
    color: var(--heading-color);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.magazine-description {
    color: var(--text-color);
    font-size: .82em;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .85;
}

.magazine-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.magazine-date,
.magazine-pages,
.magazine-language {
    font-size: .72em;
    color: var(--meta-color);
    font-weight: 500;
    background: rgba(99,102,241,.07);
    padding: 2px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dark-mode .magazine-date,
.dark-mode .magazine-pages,
.dark-mode .magazine-language {
    background: rgba(255,255,255,.07);
}

.magazine-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.tag {
    background: var(--tag-bg);
    color: var(--tag-text);
    padding: 3px 9px;
    border-radius: calc(var(--border-radius) / 1.5);
    font-size: .7em;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ========== LIST ITEM ========== */
.magazine-item {
    display: flex;
    gap: 20px;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 0;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: var(--card-shadow);
    opacity: var(--card-opacity);
    overflow: hidden;
    border-left: 3px solid transparent;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.magazine-item:hover {
    transform: translateX(4px);
    box-shadow: var(--card-hover-shadow);
    border-left-color: var(--primary-color);
}

.magazine-item .magazine-cover {
    flex: 0 0 110px;
    padding-top: 0;
    height: 155px;
    background: linear-gradient(160deg, rgba(99,102,241,.08), rgba(139,92,246,.08));
}

.magazine-item .magazine-cover img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) ease;
}

.magazine-item:hover .magazine-cover img { transform: scale(1.04); }

.magazine-item .magazine-info {
    flex: 1;
    padding: 18px 20px 18px 4px;
    border-top: none;
    background: none;
    justify-content: center;
}

.magazine-item .magazine-title { font-size: 1.1em; -webkit-line-clamp: 2; }

.magazine-item-cta {
    display: inline-block;
    margin-top: 10px;
    font-size: .8em;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: .02em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}
.magazine-item:hover .magazine-item-cta { opacity: 1; transform: translateX(0); }

/* ========== COVER ONLY ========== */
.cover-only {
    position: relative;
    padding-top: 141.4%;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: var(--card-shadow);
    opacity: var(--card-opacity);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cover-only { transform: scale(0.95); }
.cover-only:hover { transform: scale(1); box-shadow: var(--card-hover-shadow); position: relative; z-index: 10; }
.cover-only img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cover-title-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    padding: 28px 12px 12px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}
.cover-title-overlay span {
    color: #fff;
    font-size: .78em;
    font-weight: 600;
    line-height: 1.3;
    display: block;
}
.cover-only:hover .cover-title-overlay { opacity: 1; }

/* ========== COMPACT CARD ========== */
.compact-card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: var(--card-shadow);
    opacity: var(--card-opacity);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.compact-card { transform: scale(0.95); }
.compact-card:hover { transform: scale(1); box-shadow: var(--card-hover-shadow); position: relative; z-index: 10; }
.compact-card .magazine-cover { padding-top: 141.4%; }
.compact-card .magazine-info  { padding: 10px 12px 12px; border-top: none; background: none; gap: 4px; }
.compact-card .magazine-title { font-size: .82em; -webkit-line-clamp: 2; }
.compact-card .magazine-meta  { display: none; } /* too small for meta */

/* ========== COUNTER LAYOUT ========== */
.magazines-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}
.counter-container {
    text-align: center;
    padding: 60px 48px;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    opacity: var(--card-opacity);
}
.counter-number {
    font-family: var(--heading-font);
    font-size: 5em;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 14px;
}
.counter-label { font-size: 1.4em; color: var(--heading-color); font-weight: 600; margin-bottom: 6px; }
.counter-subtitle { font-size: 1em; color: var(--meta-color); }

.counter-container.bold .counter-number {
    font-size: 6em; font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.counter-container.minimal { background: transparent; box-shadow: none; border: 2px solid var(--border-color); }
.counter-container.minimal .counter-number { font-size: 4em; font-weight: 400; }

/* ========== SEARCH WIDGET ========== */
.yumpu-search-wrapper { display: flex; flex-direction: column; gap: 20px; }
.yumpu-search-bar-only,
.yumpu-search-results-only { width: 100%; }
.yumpu-search-bar { width: 100%; }

.yumpu-search-align-left   .yumpu-search-inner { margin-right: auto; }
.yumpu-search-align-center .yumpu-search-inner { margin-left: auto; margin-right: auto; }
.yumpu-search-align-right  .yumpu-search-inner { margin-left: auto; }

/* ── Base inner bar ─────────────────────────────────────────────────────────
   All variants inherit from here — only override what needs changing        */
.yumpu-search-inner {
    display: flex;
    align-items: stretch;
    max-width: 560px;
    height: 52px;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 0 18px;
    gap: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .15s ease;
    position: relative;
    overflow: hidden;
}
.yumpu-search-inner:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent), 0 2px 8px rgba(0,0,0,.08);
}

/* ── Style: default — clean elevated card ───────────────────────────── */
/* (inherits base — no extra overrides needed, base IS the default)     */

/* ── Style: pill — fully rounded, wider, airy ───────────────────────── */
.yumpu-search-style-pill .yumpu-search-inner {
    border-radius: 999px;
    height: 54px;
    padding: 0 24px;
    border-width: 2px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.yumpu-search-style-pill .yumpu-search-inner:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 18%, transparent),
                0 6px 24px color-mix(in srgb, var(--primary-color) 15%, transparent);
    border-color: var(--primary-color);
}
.yumpu-search-style-pill .yumpu-search-icon { margin-left: 4px; }

/* ── Style: minimal — elegant bottom border only ────────────────────── */
.yumpu-search-style-minimal .yumpu-search-inner {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    padding: 0 2px;
    box-shadow: none;
    height: 48px;
}
.yumpu-search-style-minimal .yumpu-search-inner:focus-within {
    border-bottom-color: var(--primary-color);
    box-shadow: none;
}
.yumpu-search-style-minimal .yumpu-search-input { font-size: 1.05em; letter-spacing: .01em; }
.yumpu-search-style-minimal .yumpu-search-icon { opacity: .5; }
.yumpu-search-style-minimal .yumpu-search-inner:focus-within .yumpu-search-icon { opacity: 1; }

/* ── Style: glass — frosted, translucent backdrop ───────────────────── */
.yumpu-search-style-glass .yumpu-search-inner {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
    -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.05);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.04);
    height: 54px;
}
.yumpu-search-style-glass .yumpu-search-inner:focus-within {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 12px 40px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.yumpu-search-style-glass .yumpu-search-input::placeholder { color: rgba(255,255,255,.7); }
.yumpu-search-style-glass .yumpu-search-input { color: var(--heading-color); }
.yumpu-search-style-glass .yumpu-search-icon { color: rgba(255,255,255,.75); }
.yumpu-search-style-glass .yumpu-search-inner:focus-within .yumpu-search-icon { color: #fff; }

/* ── Style: bold — comic-book hard offset shadow ────────────────────── */
.yumpu-search-style-bold .yumpu-search-inner {
    border: 3px solid var(--heading-color);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: 5px 5px 0 var(--heading-color);
    height: 52px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.yumpu-search-style-bold .yumpu-search-inner:focus-within {
    border-color: var(--primary-color);
    box-shadow: 5px 5px 0 var(--primary-color);
    transform: translate(-3px, -3px);
}
.yumpu-search-style-bold .yumpu-search-input { font-weight: 700; font-size: 1em; letter-spacing: .01em; }
.yumpu-search-style-bold .yumpu-search-icon { color: var(--heading-color); }
.yumpu-search-style-bold .yumpu-search-inner:focus-within .yumpu-search-icon { color: var(--primary-color); }

/* ── Style: float — deeply elevated, no border ──────────────────────── */
.yumpu-search-style-float .yumpu-search-inner {
    border: none;
    border-radius: 18px;
    height: 56px;
    padding: 0 22px;
    background: var(--card-bg);
    box-shadow:
        0 4px 6px rgba(0,0,0,.04),
        0 10px 24px rgba(0,0,0,.1),
        0 20px 40px rgba(0,0,0,.06);
}
.yumpu-search-style-float .yumpu-search-inner:focus-within {
    box-shadow:
        0 6px 10px rgba(0,0,0,.06),
        0 16px 36px rgba(0,0,0,.14),
        0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
    transform: translateY(-2px);
}

/* ── Style: outline — accent border, transparent fill ───────────────── */
.yumpu-search-style-outline .yumpu-search-inner {
    background: transparent;
    border: 2.5px solid var(--primary-color);
    border-radius: 10px;
    box-shadow: none;
}
.yumpu-search-style-outline .yumpu-search-inner:focus-within {
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.yumpu-search-style-outline .yumpu-search-icon,
.yumpu-search-style-outline .yumpu-search-input { color: var(--primary-color); }
.yumpu-search-style-outline .yumpu-search-input::placeholder { color: color-mix(in srgb, var(--primary-color) 55%, transparent); }

/* ── Style: neon — electric glow that brightens on focus ────────────── */
.yumpu-search-style-neon .yumpu-search-inner {
    border: 1.5px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary-color) 4%, var(--card-bg));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 20%, transparent),
        0 0 12px color-mix(in srgb, var(--primary-color) 20%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--primary-color) 5%, transparent);
    transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.yumpu-search-style-neon .yumpu-search-inner:focus-within {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, var(--card-bg));
    box-shadow:
        0 0 0 1px var(--primary-color),
        0 0 20px color-mix(in srgb, var(--primary-color) 45%, transparent),
        0 0 50px color-mix(in srgb, var(--primary-color) 18%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.yumpu-search-style-neon .yumpu-search-icon { color: var(--primary-color); filter: drop-shadow(0 0 4px currentColor); }
.yumpu-search-style-neon .yumpu-search-input { color: var(--heading-color); }

/* ── Style: gradient — animated colour-ring border ──────────────────── */
.yumpu-search-style-gradient .yumpu-search-inner {
    border: none;
    border-radius: 13px;
    padding: 3px;
    height: auto;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--secondary-color, #8b5cf6) 50%,
        var(--primary-color) 100%);
    background-size: 200% 100%;
    animation: yumpu-grad-shift 3s linear infinite;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-color) 28%, transparent);
    align-items: stretch;
}
@keyframes yumpu-grad-shift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.yumpu-search-style-gradient .yumpu-search-inner::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--card-bg);
    border-radius: 10px;
    z-index: 0;
}
.yumpu-search-style-gradient .yumpu-search-icon,
.yumpu-search-style-gradient .yumpu-search-input,
.yumpu-search-style-gradient .yumpu-search-clear {
    position: relative;
    z-index: 1;
}
.yumpu-search-style-gradient .yumpu-search-input { padding: 14px 0; }
.yumpu-search-style-gradient .yumpu-search-inner:focus-within {
    animation-duration: 1.5s;
    box-shadow: 0 6px 30px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

/* ── Style: neo — neumorphic extruded → pressed ─────────────────────── */
.yumpu-search-style-neo .yumpu-search-inner {
    border: none;
    border-radius: 16px;
    background: var(--bg-color);
    box-shadow:
        8px 8px 16px rgba(0,0,0,.13),
        -8px -8px 16px rgba(255,255,255,.75),
        inset 0 0 0 1px rgba(255,255,255,.2);
    transition: box-shadow .25s ease;
}
.yumpu-search-style-neo .yumpu-search-inner:focus-within {
    box-shadow:
        inset 4px 4px 10px rgba(0,0,0,.1),
        inset -4px -4px 10px rgba(255,255,255,.65),
        0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.yumpu-search-style-neo .yumpu-search-input { font-size: 1em; }

/* ── Style: split — solid accent icon panel + divider line ──────────── */
.yumpu-search-style-split .yumpu-search-inner {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--border-color);
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.yumpu-search-style-split .yumpu-search-inner:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.yumpu-search-style-split .yumpu-search-icon {
    background: var(--primary-color);
    color: #fff !important;
    padding: 0 18px;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0;
    border-radius: 0;
    transition: background .2s ease;
    flex-shrink: 0;
}
.yumpu-search-style-split .yumpu-search-inner:focus-within .yumpu-search-icon {
    background: var(--hover-color);
}
.yumpu-search-style-split .yumpu-search-input { padding-left: 16px; }

/* ── Shared icon, input, clear ──────────────────────────────────────────── */
.yumpu-search-icon {
    flex-shrink: 0;
    align-self: center;
    color: var(--meta-color);
    transition: color .2s ease, filter .2s ease;
}
.yumpu-search-inner:focus-within .yumpu-search-icon { color: var(--primary-color); }

.yumpu-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1em;
    font-family: var(--font-family);
    color: var(--heading-color);
    padding: 0;
    align-self: center;
    min-width: 0;
    line-height: 1;
}
.yumpu-search-input::placeholder { color: var(--meta-color); opacity: .65; }

.yumpu-search-clear {
    flex-shrink: 0;
    align-self: center;
    background: var(--border-color);
    border: none;
    cursor: pointer;
    color: var(--meta-color);
    font-size: .75em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background .15s ease, transform .15s ease;
    line-height: 1;
}
.yumpu-search-clear.visible { display: flex; }
.yumpu-search-clear:hover { color: #fff; background: var(--primary-color); transform: scale(1.1); }

.yumpu-search-count { min-height: 22px; }
.yumpu-search-count-text {
    font-size: .82em;
    color: var(--meta-color);
    padding: 0 4px;
    letter-spacing: .01em;
}
.yumpu-search-count-text em { color: var(--primary-color); font-style: normal; font-weight: 600; }

.yumpu-search-results { transition: opacity .2s ease; }

/* ========== SEARCH GRID CARD STYLES ==========
   Applied via data-card-style on .yumpu-search-grid
   data-ratio controls cover aspect ratio
   data-hover controls hover behaviour                        */

/* ── Ratio variants ──────────────────────────────────────────────────── */
.yumpu-search-grid[data-ratio="portrait"]  .magazine-cover { padding-top: 141.4%; }
.yumpu-search-grid[data-ratio="square"]    .magazine-cover { padding-top: 100%;   }
.yumpu-search-grid[data-ratio="landscape"] .magazine-cover { padding-top: 66%;    }
.yumpu-search-grid[data-ratio="wide"]      .magazine-cover { padding-top: 56.25%; }
.yumpu-search-grid[data-ratio="tall"]      .magazine-cover { padding-top: 175%;   }

/* ── Hover variants ──────────────────────────────────────────────────── */
/* All hover transforms use scale(0.95)→scale(1) pattern so cards never
   overflow their container (see base .magazine-card rule above). */

/* lift (default — inherited from base .magazine-card: scale(0.95) → scale(1)) */

/* zoom only — card stays at rest size, only cover image zooms */
.yumpu-search-grid[data-hover="zoom"] .magazine-card:hover          { transform: scale(0.95); }
.yumpu-search-grid[data-hover="zoom"] .magazine-card:hover .magazine-cover img { transform: scale(1.12); }

/* glow — card grows to full size + glow ring */
.yumpu-search-grid[data-hover="glow"] .magazine-card:hover {
    transform: scale(1);
    box-shadow: 0 0 0 2px var(--primary-color),
                0 12px 36px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* none — card stays at rest size, no animation */
.yumpu-search-grid[data-hover="none"] .magazine-card:hover          { transform: scale(0.95); box-shadow: var(--card-shadow); }
.yumpu-search-grid[data-hover="none"] .magazine-card:hover .magazine-cover img { transform: none; }

/* tilt — card grows to full size + tilts */
.yumpu-search-grid[data-hover="tilt"] .magazine-card:hover {
    transform: perspective(600px) rotateY(-4deg) scale(1);
    box-shadow: var(--card-hover-shadow);
}

/* ── Card style variants ─────────────────────────────────────────────── */

/* standard — no change from default .magazine-card */

/* ── flat — no shadow, border outline only ───────────────────────────── */
.yumpu-search-grid[data-card-style="flat"] .magazine-card {
    box-shadow: none;
    border: 1.5px solid var(--border-color);
}
.yumpu-search-grid[data-card-style="flat"] .magazine-card:hover {
    box-shadow: none;
    border-color: var(--primary-color);
    transform: scale(0.95); /* flat style: border effect only, no card grow */
}

/* ── borderless — no shadow, no border, seamless tiles ───────────────── */
.yumpu-search-grid[data-card-style="borderless"] .magazine-card {
    box-shadow: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border-color);
}
.yumpu-search-grid[data-card-style="borderless"] .magazine-card:hover {
    transform: scale(0.95); /* borderless: no grow, seamless tile feel */
    box-shadow: none;
}
.yumpu-search-grid[data-card-style="borderless"] .magazine-cover { border-radius: 0; }

/* ── glass — frosted backdrop card ───────────────────────────────────── */
.yumpu-search-grid[data-card-style="glass"] .magazine-card {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.yumpu-search-grid[data-card-style="glass"] .magazine-card:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 10px 32px rgba(0,0,0,.14);
}
.yumpu-search-grid[data-card-style="glass"] .magazine-info {
    background: transparent;
    background-image: none;
}

/* ── elevated — stronger multi-layer shadow ──────────────────────────── */
.yumpu-search-grid[data-card-style="elevated"] .magazine-card {
    box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.1), 0 20px 40px rgba(0,0,0,.06);
    border-radius: calc(var(--border-radius) * 1.3);
}
.yumpu-search-grid[data-card-style="elevated"] .magazine-card:hover {
    transform: scale(1);
    box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 16px 36px rgba(0,0,0,.16), 0 32px 64px rgba(0,0,0,.08);
}

/* ── outline — accent-coloured border, tight padding ────────────────── */
.yumpu-search-grid[data-card-style="outline"] .magazine-card {
    box-shadow: none;
    border: 2px solid var(--border-color);
    transition: border-color .2s ease, transform .2s ease;
}
.yumpu-search-grid[data-card-style="outline"] .magazine-card:hover {
    border-color: var(--primary-color);
    transform: scale(1);
    box-shadow: none;
}

/* ── magazine — cover fills entire card, title overlaid at bottom ────── */
.yumpu-search-grid[data-card-style="magazine"] .magazine-card {
    position: relative;
    overflow: hidden;
}
.yumpu-search-grid[data-card-style="magazine"] .magazine-cover {
    padding-top: 141.4%;
}
.yumpu-search-grid[data-card-style="magazine"] .magazine-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 14px 14px;
    background: linear-gradient(to top, rgba(10,10,20,.88) 0%, rgba(10,10,20,.4) 70%, transparent 100%);
    background-image: linear-gradient(to top, rgba(10,10,20,.88) 0%, rgba(10,10,20,.4) 70%, transparent 100%) !important;
    border-top: none;
    transform: translateY(100%);
    transition: transform .3s ease;
    gap: 4px;
}
.yumpu-search-grid[data-card-style="magazine"] .magazine-card:hover .magazine-info {
    transform: translateY(0);
}
.yumpu-search-grid[data-card-style="magazine"] .magazine-title { color: #fff; }
.yumpu-search-grid[data-card-style="magazine"] .magazine-meta  { color: rgba(255,255,255,.65); }
.yumpu-search-grid[data-card-style="magazine"] .magazine-description { display: none; }

/* ── polaroid — white border frame, slight tilt ──────────────────────── */
.yumpu-search-grid[data-card-style="polaroid"] .magazine-card {
    background: #fff;
    padding: 10px 10px 48px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    border-radius: 4px;
    transform: rotate(-1deg) scale(0.95);
    transition: transform .25s ease, box-shadow .25s ease;
}
.yumpu-search-grid[data-card-style="polaroid"] .magazine-card:nth-child(even) { transform: rotate(.8deg) scale(0.95); }
.yumpu-search-grid[data-card-style="polaroid"] .magazine-card:hover {
    transform: rotate(0deg) scale(1);
    box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
.yumpu-search-grid[data-card-style="polaroid"] .magazine-cover {
    border-radius: 2px;
    padding-top: 128%;
}
.yumpu-search-grid[data-card-style="polaroid"] .magazine-info {
    position: absolute;
    bottom: 0; left: 10px; right: 10px;
    height: 48px;
    padding: 6px 4px 4px;
    background: transparent;
    background-image: none !important;
    border-top: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.yumpu-search-grid[data-card-style="polaroid"] .magazine-title { font-size: .78em; color: #333; -webkit-line-clamp: 1; }
.yumpu-search-grid[data-card-style="polaroid"] .magazine-description,
.yumpu-search-grid[data-card-style="polaroid"] .magazine-meta { display: none; }

/* ── neon — dark card with glowing primary accent ────────────────────── */
.yumpu-search-grid[data-card-style="neon"] .magazine-card {
    background: #0e0e16;
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 15%, transparent),
        0 4px 20px rgba(0,0,0,.4);
    color: #e2e8f0;
}
.yumpu-search-grid[data-card-style="neon"] .magazine-card:hover {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 1px var(--primary-color),
        0 0 20px color-mix(in srgb, var(--primary-color) 35%, transparent),
        0 8px 32px rgba(0,0,0,.5);
    transform: scale(1);
}
.yumpu-search-grid[data-card-style="neon"] .magazine-title { color: #f1f5f9; }
.yumpu-search-grid[data-card-style="neon"] .magazine-info {
    background: #0e0e16;
    background-image: linear-gradient(#0e0e16, #0e0e16),
                      linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.yumpu-search-grid[data-card-style="neon"] .magazine-meta { color: rgba(255,255,255,.4); }
.yumpu-search-grid[data-card-style="neon"] .magazine-description { color: rgba(255,255,255,.55); }


.yumpu-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0 6px;
    flex-wrap: wrap;
}

.yumpu-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border: 1.5px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: .9em;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    box-shadow: var(--card-shadow);
}
.yumpu-pagination-btn:hover:not(.disabled):not(.active) {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(99,102,241,.05);
}
.yumpu-pagination-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.yumpu-pagination-btn.disabled {
    opacity: .35;
    cursor: default;
}
.yumpu-page-ellipsis {
    color: var(--meta-color);
    min-width: 24px;
    text-align: center;
    font-size: .9em;
}

/* ========== VISIBILITY CONTROLS ========== */
.yumpu-library-widget.hide-titles      .magazine-title      { display: none !important; }
.yumpu-library-widget.hide-description .magazine-description{ display: none !important; }
.yumpu-library-widget.hide-date        .magazine-date        { display: none !important; }
.yumpu-library-widget.hide-pages       .magazine-pages       { display: none !important; }
.yumpu-library-widget.hide-language    .magazine-language    { display: none !important; }
.yumpu-library-widget.hide-tags        .magazine-tags        { display: none !important; }

/* ========== FULL COVERS MODE ========== */
.yumpu-library-widget.full-covers .magazine-info        { display: none !important; }
.yumpu-library-widget.full-covers .magazine-card        { overflow: visible; }
.yumpu-library-widget.full-covers .magazine-cover       { height: auto !important; padding-top: 0 !important; aspect-ratio: 3/4; }
.yumpu-library-widget.full-covers .magazine-cover img   { object-fit: contain !important; position: static; width: 100%; height: 100%; }

/* ========== PAGE-BUILDER OVERFLOW UNLOCK ========== */
/* Elementor, Gutenberg, and common themes set overflow:hidden on their
   widget wrappers, which clips the card hover scale. Override them here.
   JavaScript also patches parent elements at runtime via setProperty('important').
   :has() targets ancestor wrappers that can't be scoped as descendants.   */
.elementor-widget-yumpu_library,
.elementor-widget-yumpu_library .elementor-widget-container {
    overflow: visible !important;
}
/* Ancestor wrappers (Elementor column/section containing our widget) */
.elementor-widget-wrap:has(.elementor-widget-yumpu_library),
.elementor-column-wrap:has(.elementor-widget-yumpu_library),
.elementor-column:has(.elementor-widget-yumpu_library),
.e-con:has(.elementor-widget-yumpu_library),
.e-con-inner:has(.elementor-widget-yumpu_library) {
    overflow: visible !important;
}

/* ========== WIDGET SCALING ========== */
/* NOTE: neither transform:scale() nor zoom is used here.
   Both create formatting/stacking contexts even at value=1 that clip
   child hover overflow. The default --widget-size is 1 (no scaling needed).
   If custom scaling is required it must be applied via a wrapper OUTSIDE
   .yumpu-library-widget, not on the widget itself. */

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .yumpu-library-widget { padding: calc(var(--spacing) / 2); }
    .magazines-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: calc(var(--spacing) / 1.5); }
    .magazine-item .magazine-cover { flex: 0 0 90px; height: 127px; }
    .magazine-item .magazine-title { font-size: 1em; }
    .counter-number { font-size: 3.5em !important; }
    .showcase-image { flex: 0 0 200px; }
    .showcase-info  { padding: 28px 24px; }
}

@media (max-width: 480px) {
    .magazines-grid  { grid-template-columns: repeat(2, 1fr); }
    .magazines-covers { grid-template-columns: repeat(2, 1fr); }
    .counter-number { font-size: 2.5em !important; }
    .magazine-item  { flex-direction: column; }
    .magazine-item .magazine-cover { flex: none; width: 100%; height: 200px; }
    .magazine-item .magazine-info { padding: 14px 16px; }
    .yumpu-search-inner { max-width: 100%; }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to   { opacity: var(--card-opacity); transform: translateY(0) scale(0.95); }
}

.magazine-card, .magazine-item, .cover-only, .compact-card {
    animation: fadeInUp .45s ease both;
}

.magazine-card:nth-child(1),  .magazine-item:nth-child(1)  { animation-delay: .04s; }
.magazine-card:nth-child(2),  .magazine-item:nth-child(2)  { animation-delay: .08s; }
.magazine-card:nth-child(3),  .magazine-item:nth-child(3)  { animation-delay: .12s; }
.magazine-card:nth-child(4),  .magazine-item:nth-child(4)  { animation-delay: .16s; }
.magazine-card:nth-child(5),  .magazine-item:nth-child(5)  { animation-delay: .20s; }
.magazine-card:nth-child(6),  .magazine-item:nth-child(6)  { animation-delay: .24s; }
.magazine-card:nth-child(7),  .magazine-item:nth-child(7)  { animation-delay: .28s; }
.magazine-card:nth-child(8),  .magazine-item:nth-child(8)  { animation-delay: .32s; }

/* ========== ACCESSIBILITY ========== */
.magazine-card:focus-visible,
.magazine-item:focus-visible,
.cover-only:focus-visible,
.compact-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ========== TOUCH DEVICE — disable all hover effects ========== */
@media (hover: none) {
    .magazine-card:hover,
    .compact-card:hover {
        transform: scale(0.95) !important;
        box-shadow: var(--card-shadow) !important;
    }
    .magazine-item:hover {
        transform: none !important;
        box-shadow: var(--card-shadow) !important;
        border-left-color: transparent !important;
    }
    .cover-only:hover {
        transform: scale(0.95) !important;
        box-shadow: var(--card-shadow) !important;
    }
    .magazine-card:hover .magazine-cover img,
    .magazine-item:hover .magazine-cover img,
    .compact-card:hover .magazine-cover img {
        transform: none !important;
    }
    .magazine-card:hover .magazine-cover-overlay { opacity: 0 !important; }
    .cover-only:hover .cover-title-overlay { opacity: 0 !important; }
    .magazine-item:hover .magazine-item-cta { opacity: 0 !important; transform: translateX(-4px) !important; }
    .showcase-read-btn:hover { transform: none; }
}

/* ========== PRINT ========== */
@media print {
    .yumpu-library-widget { background: white !important; }
    .magazine-card, .magazine-item { page-break-inside: avoid; }
}

/* ========== TRANSPARENT BG — extras ========== */
.yumpu-library-widget.transparent-bg .magazines-grid,
.yumpu-library-widget.transparent-bg .magazines-list,
.yumpu-library-widget.transparent-bg .magazines-slider,
.yumpu-library-widget.transparent-bg .magazines-covers,
.yumpu-library-widget.transparent-bg .magazines-compact,
.yumpu-library-widget.transparent-bg .magazines-masonry {
    background: transparent !important;
}
.yumpu-library-widget.transparent-bg .magazine-cover { background: transparent !important; }

/* ========== CUSTOM VIEWER ========== */
.yumpu-custom-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.yumpu-viewer-content {
    position: relative;
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    max-height: 800px;
    background: #243139;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0,0,0,.3);
}

@media (max-width: 768px) {
    .yumpu-viewer-content {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        max-width: none;
        max-height: none;
    }
}

.yumpu-viewer-content iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Iframe loading overlay ── */
@keyframes yumpu-viewer-spin {
    to { transform: rotate(360deg); }
}

.yumpu-viewer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #243139;
    z-index: 5;
    gap: 20px;
    transition: opacity .3s ease;
}

.yumpu-viewer-loading-ring {
    position: relative;
    width: 52px;
    height: 52px;
}

.yumpu-viewer-loading-ring svg {
    position: absolute;
    inset: 0;
    animation: yumpu-viewer-spin 1.1s linear infinite;
}

.yumpu-viewer-loading-text {
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    letter-spacing: .02em;
}

/* ── Close button ── */
.yumpu-viewer-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: #243139 !important;
    background-color: #243139 !important;
    color: #fff !important;
    border: 1.5px solid #cd1b7e !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 20 !important;
    transition: background-color 0.2s, border-color 0.2s !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    text-decoration: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

.yumpu-viewer-close:hover {
    background: #cd1b7e !important;
    background-color: #cd1b7e !important;
    border-color: #cd1b7e !important;
}

body.yumpu-viewer-open {
    overflow: hidden;
}
.yumpu-library-widget.transparent-bg .magazine-info  { background: transparent !important; }