/* =============================================================================
   Zoonum COA Manager — Frontend Styles v2.0.0
   Author: Zoonum Plugins
   ALL accent colors are driven by the --zcoa-hue CSS custom property.
   PHP injects:  :root { --zcoa-hue: N; }  as a scoped inline style.
   ============================================================================= */

:root { --zcoa-hue: 265; }

/* ── Wrapper reset ─────────────────────────────────────────────────────────── */
.zcoa-library-wrapper { width: 100%; position: relative; }
.zcoa-library-wrapper *,
.zcoa-library-wrapper *::before,
.zcoa-library-wrapper *::after { box-sizing: border-box; }

/* ── Search Bar ────────────────────────────────────────────────────────────── */
.zcoa-fe-search-wrap  { margin-bottom: 24px; }
.zcoa-fe-search-inner { position: relative; max-width: 420px; margin: 0 auto; }

/* Search icon — properly positioned inside the input box */
.zcoa-fe-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
}

.zcoa-fe-search {
    width: 100%;
    border-radius: 100px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .22s, box-shadow .22s;
    /* Left padding accounts for the icon width + gap */
    padding: 11px 18px 11px 44px;
    position: relative;
}

/* ── Card Grid ─────────────────────────────────────────────────────────────── */
.zcoa-fe-grid { display: grid; gap: 20px; }
.zcoa-fe-grid.zcoa-cols-2 { grid-template-columns: repeat(2, 1fr); }
.zcoa-fe-grid.zcoa-cols-3 { grid-template-columns: repeat(3, 1fr); }
.zcoa-fe-grid.zcoa-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
    .zcoa-fe-grid.zcoa-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .zcoa-fe-grid.zcoa-cols-3,
    .zcoa-fe-grid.zcoa-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .zcoa-fe-grid.zcoa-cols-2,
    .zcoa-fe-grid.zcoa-cols-3,
    .zcoa-fe-grid.zcoa-cols-4 { grid-template-columns: 1fr; }
}

/* ── Card Structure ────────────────────────────────────────────────────────── */
.zcoa-fe-card {
    overflow: hidden;
    border-radius: 14px;
    transition: transform .28s cubic-bezier(.25,.8,.25,1), box-shadow .28s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/*
 * When lightbox is OFF the card is rendered as <a> instead of <div>.
 * We must override any WP-theme anchor resets that could collapse the flex
 * layout or add underlines/color changes. The inline style on the element
 * itself already covers most cases; these rules add theme-agnostic insurance.
 */
a.zcoa-fe-card,
a.zcoa-fe-card-link {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: none;
}
.zcoa-fe-card-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}
.zcoa-fe-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.zcoa-fe-card:hover .zcoa-fe-card-img { transform: scale(1.04); }

/* Card overlay — shown on hover */
.zcoa-fe-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .25s;
}
.zcoa-fe-card:hover .zcoa-fe-card-overlay { opacity: 1; }

/* Overlay buttons */
.zcoa-fe-view-btn,
.zcoa-fe-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform .15s, background .2s, opacity .2s;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
}
.zcoa-fe-view-btn:hover,
.zcoa-fe-dl-btn:hover { transform: scale(1.06); opacity: .92; }

.zcoa-fe-dl-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Card body */
.zcoa-fe-card-body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.zcoa-fe-card-title   { font-size: 14px; font-weight: 700; line-height: 1.35; margin: 0; }
.zcoa-fe-card-product { font-size: 12px; font-weight: 600; }
.zcoa-fe-card-desc    { font-size: 12px; line-height: 1.55; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zcoa-fe-card-date    { font-size: 11px; margin-top: auto; padding-top: 8px; opacity: .55; }

/* ── Empty / No Results ────────────────────────────────────────────────────── */
.zcoa-fe-empty,
.zcoa-fe-no-results { text-align: center; padding: 60px 20px; grid-column: 1 / -1; }
.zcoa-fe-empty svg,
.zcoa-fe-no-results svg { display: block; margin: 0 auto 12px; }

/* =============================================================================
   THEME: GLASSMORPHIC
   ============================================================================= */

.zcoa-theme-glassmorphic {
    background: hsl(var(--zcoa-hue), 20%, 5%);
    padding: 40px 32px;
    border-radius: 20px;
}

/* Search */
.zcoa-theme-glassmorphic .zcoa-fe-search {
    background: hsla(var(--zcoa-hue), 28%, 16%, .6);
    border: 1px solid hsla(var(--zcoa-hue), 60%, 65%, .22);
    color: hsl(var(--zcoa-hue), 50%, 94%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.zcoa-theme-glassmorphic .zcoa-fe-search::placeholder { color: hsla(var(--zcoa-hue), 45%, 70%, .35); }
.zcoa-theme-glassmorphic .zcoa-fe-search:focus {
    border-color: hsla(var(--zcoa-hue), 80%, 65%, .55);
    box-shadow: 0 0 0 3px hsla(var(--zcoa-hue), 80%, 60%, .12);
}
.zcoa-theme-glassmorphic .zcoa-fe-search-icon { color: hsla(var(--zcoa-hue), 65%, 70%, .6); }

/* Card */
.zcoa-theme-glassmorphic .zcoa-fe-card {
    background: hsla(var(--zcoa-hue), 30%, 13%, .52);
    border: 1px solid hsla(var(--zcoa-hue), 60%, 65%, .18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 24px hsla(var(--zcoa-hue), 80%, 20%, .14), inset 0 1px 0 hsla(var(--zcoa-hue), 60%, 80%, .07);
}
.zcoa-theme-glassmorphic .zcoa-fe-card:hover {
    transform: translateY(-6px);
    border-color: hsla(var(--zcoa-hue), 75%, 65%, .42);
    box-shadow: 0 12px 48px hsla(var(--zcoa-hue), 80%, 45%, .28), inset 0 1px 0 hsla(var(--zcoa-hue), 60%, 80%, .1);
}
.zcoa-theme-glassmorphic .zcoa-fe-card-overlay {
    background: hsla(var(--zcoa-hue), 30%, 5%, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.zcoa-theme-glassmorphic .zcoa-fe-card-title   { color: hsl(var(--zcoa-hue), 55%, 92%); }
.zcoa-theme-glassmorphic .zcoa-fe-card-product { color: hsl(var(--zcoa-hue), 80%, 72%); }
.zcoa-theme-glassmorphic .zcoa-fe-card-desc    { color: hsla(var(--zcoa-hue), 25%, 82%, .65); }
.zcoa-theme-glassmorphic .zcoa-fe-card-date    { color: hsla(var(--zcoa-hue), 25%, 78%, .32); }
.zcoa-theme-glassmorphic .zcoa-fe-empty,
.zcoa-theme-glassmorphic .zcoa-fe-no-results   { color: hsla(var(--zcoa-hue), 25%, 78%, .38); }

/* Overlay buttons */
.zcoa-theme-glassmorphic .zcoa-fe-view-btn {
    background: hsl(var(--zcoa-hue), 80%, 60%);
    color: #fff;
    box-shadow: 0 2px 16px hsla(var(--zcoa-hue), 80%, 40%, .42);
}
.zcoa-theme-glassmorphic .zcoa-fe-dl-btn {
    background: hsla(var(--zcoa-hue), 40%, 30%, .7);
    border: 1px solid hsla(var(--zcoa-hue), 60%, 65%, .3);
    color: hsl(var(--zcoa-hue), 75%, 78%);
}

/* Lightbox meta panel */
.zcoa-theme-glassmorphic .zcoa-lightbox-meta {
    background: hsla(var(--zcoa-hue), 30%, 9%, .9);
    border: 1px solid hsla(var(--zcoa-hue), 60%, 65%, .26);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 8px 48px hsla(var(--zcoa-hue), 80%, 20%, .38), inset 0 1px 0 hsla(var(--zcoa-hue), 60%, 80%, .1);
}
.zcoa-theme-glassmorphic .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 55%, 92%); }
.zcoa-theme-glassmorphic .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 80%, 72%); }
.zcoa-theme-glassmorphic .zcoa-lightbox-desc    { color: hsla(var(--zcoa-hue), 20%, 80%, .58); }

/* Download button */
.zcoa-theme-glassmorphic .zcoa-fe-btn {
    background: linear-gradient(135deg, hsl(var(--zcoa-hue), 82%, 58%), hsl(var(--zcoa-hue), 90%, 42%)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px hsla(var(--zcoa-hue), 80%, 40%, .45) !important;
}
.zcoa-theme-glassmorphic .zcoa-fe-btn:hover {
    box-shadow: 0 6px 26px hsla(var(--zcoa-hue), 82%, 40%, .58) !important;
}

/* Close button — ghost, matches hue */
.zcoa-theme-glassmorphic .zcoa-lightbox-close-btn {
    background: hsla(var(--zcoa-hue), 30%, 18%, .65) !important;
    border: 1px solid hsla(var(--zcoa-hue), 60%, 65%, .25) !important;
    color: hsl(var(--zcoa-hue), 50%, 80%) !important;
}
.zcoa-theme-glassmorphic .zcoa-lightbox-close-btn:hover {
    background: hsla(var(--zcoa-hue), 55%, 28%, .75) !important;
    border-color: hsla(var(--zcoa-hue), 75%, 65%, .42) !important;
    color: hsl(var(--zcoa-hue), 60%, 94%) !important;
}

/* Corner X close button */
.zcoa-theme-glassmorphic .zcoa-lightbox-close {
    color: hsl(var(--zcoa-hue), 50%, 88%);
    background: hsla(var(--zcoa-hue), 30%, 16%, .7);
    border: 1px solid hsla(var(--zcoa-hue), 60%, 65%, .24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.zcoa-theme-glassmorphic .zcoa-lightbox-close:hover {
    background: hsl(var(--zcoa-hue), 55%, 30%);
    color: #fff;
    border-color: hsla(var(--zcoa-hue), 75%, 65%, .45);
}

/* =============================================================================
   THEME: LIGHT
   ============================================================================= */

.zcoa-theme-light {
    background: hsl(var(--zcoa-hue), 20%, 97%);
    padding: 36px 28px;
    border-radius: 16px;
}

.zcoa-theme-light .zcoa-fe-search {
    background: #fff;
    border: 1.5px solid hsl(var(--zcoa-hue), 25%, 86%);
    color: hsl(var(--zcoa-hue), 30%, 12%);
}
.zcoa-theme-light .zcoa-fe-search::placeholder { color: hsl(var(--zcoa-hue), 20%, 68%); }
.zcoa-theme-light .zcoa-fe-search:focus {
    border-color: hsl(var(--zcoa-hue), 72%, 60%);
    box-shadow: 0 0 0 3px hsla(var(--zcoa-hue), 72%, 60%, .12);
}
.zcoa-theme-light .zcoa-fe-search-icon { color: hsl(var(--zcoa-hue), 20%, 58%); }

.zcoa-theme-light .zcoa-fe-card {
    background: #fff;
    border: 1.5px solid hsl(var(--zcoa-hue), 25%, 90%);
    box-shadow: 0 2px 12px hsla(var(--zcoa-hue), 30%, 20%, .07);
}
.zcoa-theme-light .zcoa-fe-card:hover {
    transform: translateY(-5px);
    border-color: hsl(var(--zcoa-hue), 70%, 72%);
    box-shadow: 0 8px 32px hsla(var(--zcoa-hue), 72%, 50%, .18);
}
.zcoa-theme-light .zcoa-fe-card-overlay {
    background: hsla(var(--zcoa-hue), 20%, 10%, .38);
    backdrop-filter: blur(2px);
}
.zcoa-theme-light .zcoa-fe-card-title   { color: hsl(var(--zcoa-hue), 30%, 12%); }
.zcoa-theme-light .zcoa-fe-card-product { color: hsl(var(--zcoa-hue), 72%, 38%); }
.zcoa-theme-light .zcoa-fe-card-desc    { color: hsl(var(--zcoa-hue), 15%, 38%); }
.zcoa-theme-light .zcoa-fe-card-date    { color: hsl(var(--zcoa-hue), 15%, 58%); }
.zcoa-theme-light .zcoa-fe-empty,
.zcoa-theme-light .zcoa-fe-no-results   { color: hsl(var(--zcoa-hue), 15%, 62%); }

.zcoa-theme-light .zcoa-fe-view-btn { background: hsl(var(--zcoa-hue), 72%, 50%); color: #fff; box-shadow: 0 2px 12px hsla(var(--zcoa-hue), 72%, 45%, .3); }
.zcoa-theme-light .zcoa-fe-dl-btn   { background: rgba(255,255,255,.9); border: 1.5px solid hsl(var(--zcoa-hue), 25%, 86%); color: hsl(var(--zcoa-hue), 72%, 42%); }

.zcoa-theme-light .zcoa-lightbox-meta  { background: #fff; border: 1px solid hsl(var(--zcoa-hue), 25%, 88%); box-shadow: 0 24px 80px hsla(var(--zcoa-hue), 20%, 20%, .18); }
.zcoa-theme-light .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 30%, 12%); }
.zcoa-theme-light .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 72%, 38%); }
.zcoa-theme-light .zcoa-lightbox-desc    { color: hsl(var(--zcoa-hue), 15%, 40%); }
.zcoa-theme-light .zcoa-fe-btn { background: hsl(var(--zcoa-hue), 72%, 50%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px hsla(var(--zcoa-hue), 72%, 45%, .32) !important; }
.zcoa-theme-light .zcoa-fe-btn:hover { box-shadow: 0 6px 20px hsla(var(--zcoa-hue), 72%, 45%, .46) !important; }
.zcoa-theme-light .zcoa-lightbox-close-btn { background: hsl(var(--zcoa-hue), 20%, 96%) !important; border: 1.5px solid hsl(var(--zcoa-hue), 35%, 82%) !important; color: hsl(var(--zcoa-hue), 50%, 38%) !important; }
.zcoa-theme-light .zcoa-lightbox-close-btn:hover { background: hsl(var(--zcoa-hue), 70%, 94%) !important; border-color: hsl(var(--zcoa-hue), 60%, 72%) !important; color: hsl(var(--zcoa-hue), 72%, 34%) !important; }
.zcoa-theme-light .zcoa-lightbox-close { color: hsl(var(--zcoa-hue), 20%, 45%); background: hsl(var(--zcoa-hue), 20%, 94%); border: 1px solid hsl(var(--zcoa-hue), 25%, 86%); }
.zcoa-theme-light .zcoa-lightbox-close:hover { background: hsl(var(--zcoa-hue), 70%, 94%); color: hsl(var(--zcoa-hue), 72%, 40%); border-color: hsl(var(--zcoa-hue), 60%, 75%); }

/* =============================================================================
   THEME: DARK
   ============================================================================= */

.zcoa-theme-dark {
    background: hsl(var(--zcoa-hue), 12%, 6%);
    padding: 36px 28px;
    border-radius: 16px;
}

.zcoa-theme-dark .zcoa-fe-search {
    background: hsl(var(--zcoa-hue), 12%, 11%);
    border: 1px solid hsl(var(--zcoa-hue), 15%, 22%);
    color: hsl(var(--zcoa-hue), 20%, 94%);
}
.zcoa-theme-dark .zcoa-fe-search::placeholder { color: hsl(var(--zcoa-hue), 12%, 40%); }
.zcoa-theme-dark .zcoa-fe-search:focus { border-color: hsl(var(--zcoa-hue), 72%, 60%); box-shadow: 0 0 0 3px hsla(var(--zcoa-hue), 72%, 60%, .14); }
.zcoa-theme-dark .zcoa-fe-search-icon { color: hsl(var(--zcoa-hue), 15%, 42%); }

.zcoa-theme-dark .zcoa-fe-card {
    background: hsl(var(--zcoa-hue), 12%, 11%);
    border: 1px solid hsl(var(--zcoa-hue), 15%, 18%);
    box-shadow: 0 2px 8px hsla(var(--zcoa-hue), 20%, 5%, .5);
}
.zcoa-theme-dark .zcoa-fe-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--zcoa-hue), 70%, 55%);
    box-shadow: 0 8px 28px hsla(var(--zcoa-hue), 72%, 45%, .22);
}
.zcoa-theme-dark .zcoa-fe-card-overlay { background: hsla(var(--zcoa-hue), 20%, 4%, .55); backdrop-filter: blur(2px); }
.zcoa-theme-dark .zcoa-fe-card-title   { color: hsl(var(--zcoa-hue), 20%, 93%); }
.zcoa-theme-dark .zcoa-fe-card-product { color: hsl(var(--zcoa-hue), 72%, 66%); }
.zcoa-theme-dark .zcoa-fe-card-desc    { color: hsl(var(--zcoa-hue), 12%, 65%); }
.zcoa-theme-dark .zcoa-fe-card-date    { color: hsl(var(--zcoa-hue), 12%, 32%); }
.zcoa-theme-dark .zcoa-fe-empty,
.zcoa-theme-dark .zcoa-fe-no-results   { color: hsl(var(--zcoa-hue), 12%, 28%); }

.zcoa-theme-dark .zcoa-fe-view-btn { background: hsl(var(--zcoa-hue), 72%, 58%); color: #fff; box-shadow: 0 2px 14px hsla(var(--zcoa-hue), 72%, 45%, .35); }
.zcoa-theme-dark .zcoa-fe-dl-btn   { background: hsl(var(--zcoa-hue), 15%, 17%); border: 1px solid hsl(var(--zcoa-hue), 15%, 24%); color: hsl(var(--zcoa-hue), 68%, 68%); }

.zcoa-theme-dark .zcoa-lightbox-meta  { background: hsl(var(--zcoa-hue), 12%, 11%); border: 1px solid hsl(var(--zcoa-hue), 20%, 22%); box-shadow: 0 24px 80px hsla(var(--zcoa-hue), 10%, 4%, .8); }
.zcoa-theme-dark .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 20%, 93%); }
.zcoa-theme-dark .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 72%, 68%); }
.zcoa-theme-dark .zcoa-lightbox-desc    { color: hsl(var(--zcoa-hue), 12%, 62%); }
.zcoa-theme-dark .zcoa-fe-btn { background: hsl(var(--zcoa-hue), 72%, 58%) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px hsla(var(--zcoa-hue), 72%, 45%, .34) !important; }
.zcoa-theme-dark .zcoa-fe-btn:hover { box-shadow: 0 6px 20px hsla(var(--zcoa-hue), 72%, 45%, .48) !important; }
.zcoa-theme-dark .zcoa-lightbox-close-btn { background: hsl(var(--zcoa-hue), 15%, 16%) !important; border: 1px solid hsl(var(--zcoa-hue), 20%, 26%) !important; color: hsl(var(--zcoa-hue), 45%, 72%) !important; }
.zcoa-theme-dark .zcoa-lightbox-close-btn:hover { background: hsl(var(--zcoa-hue), 40%, 22%) !important; border-color: hsl(var(--zcoa-hue), 60%, 42%) !important; color: hsl(var(--zcoa-hue), 60%, 88%) !important; }
.zcoa-theme-dark .zcoa-lightbox-close { color: hsl(var(--zcoa-hue), 15%, 65%); background: hsl(var(--zcoa-hue), 15%, 16%); border: 1px solid hsl(var(--zcoa-hue), 15%, 22%); }
.zcoa-theme-dark .zcoa-lightbox-close:hover { background: hsl(var(--zcoa-hue), 60%, 22%); color: hsl(var(--zcoa-hue), 60%, 82%); border-color: hsl(var(--zcoa-hue), 60%, 40%); }

/* =============================================================================
   THEME: MINIMAL
   ============================================================================= */

.zcoa-theme-minimal { padding: 28px 0; }

.zcoa-theme-minimal .zcoa-fe-search {
    background: transparent;
    border: 1.5px solid hsl(var(--zcoa-hue), 18%, 80%);
    color: hsl(var(--zcoa-hue), 20%, 14%);
}
.zcoa-theme-minimal .zcoa-fe-search::placeholder { color: hsl(var(--zcoa-hue), 15%, 62%); }
.zcoa-theme-minimal .zcoa-fe-search:focus { border-color: hsl(var(--zcoa-hue), 50%, 52%); box-shadow: 0 0 0 3px hsla(var(--zcoa-hue), 50%, 52%, .1); }
.zcoa-theme-minimal .zcoa-fe-search-icon { color: hsl(var(--zcoa-hue), 15%, 62%); }

.zcoa-theme-minimal .zcoa-fe-grid { gap: 16px; }
.zcoa-theme-minimal .zcoa-fe-card { background: transparent; border: 1.5px solid hsl(var(--zcoa-hue), 18%, 85%); border-radius: 10px; }
.zcoa-theme-minimal .zcoa-fe-card:hover { transform: translateY(-3px); border-color: hsl(var(--zcoa-hue), 50%, 55%); box-shadow: 0 4px 16px hsla(var(--zcoa-hue), 50%, 50%, .14); }
.zcoa-theme-minimal .zcoa-fe-card-overlay { background: hsla(var(--zcoa-hue), 15%, 8%, .38); }
.zcoa-theme-minimal .zcoa-fe-card-title   { color: hsl(var(--zcoa-hue), 20%, 14%); }
.zcoa-theme-minimal .zcoa-fe-card-product { color: hsl(var(--zcoa-hue), 50%, 40%); }
.zcoa-theme-minimal .zcoa-fe-card-desc    { color: hsl(var(--zcoa-hue), 10%, 42%); }
.zcoa-theme-minimal .zcoa-fe-card-date    { color: hsl(var(--zcoa-hue), 10%, 60%); }
.zcoa-theme-minimal .zcoa-fe-empty,
.zcoa-theme-minimal .zcoa-fe-no-results   { color: hsl(var(--zcoa-hue), 12%, 66%); }

.zcoa-theme-minimal .zcoa-fe-view-btn { background: hsl(var(--zcoa-hue), 40%, 16%); color: #fff; }
.zcoa-theme-minimal .zcoa-fe-dl-btn   { background: rgba(255,255,255,.9); border: 1.5px solid hsl(var(--zcoa-hue), 18%, 82%); color: hsl(var(--zcoa-hue), 50%, 42%); }

.zcoa-theme-minimal .zcoa-lightbox-meta  { background: #fff; border: 1.5px solid hsl(var(--zcoa-hue), 18%, 85%); box-shadow: 0 20px 60px hsla(var(--zcoa-hue), 15%, 15%, .14); }
.zcoa-theme-minimal .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 20%, 14%); }
.zcoa-theme-minimal .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 50%, 40%); }
.zcoa-theme-minimal .zcoa-lightbox-desc    { color: hsl(var(--zcoa-hue), 10%, 42%); }
.zcoa-theme-minimal .zcoa-fe-btn { background: hsl(var(--zcoa-hue), 55%, 38%) !important; color: #fff !important; border: none !important; box-shadow: 0 3px 12px hsla(var(--zcoa-hue), 55%, 38%, .28) !important; }
.zcoa-theme-minimal .zcoa-fe-btn:hover { box-shadow: 0 5px 18px hsla(var(--zcoa-hue), 55%, 38%, .42) !important; }
.zcoa-theme-minimal .zcoa-lightbox-close-btn { background: transparent !important; border: 1.5px solid hsl(var(--zcoa-hue), 30%, 75%) !important; color: hsl(var(--zcoa-hue), 45%, 40%) !important; }
.zcoa-theme-minimal .zcoa-lightbox-close-btn:hover { background: hsl(var(--zcoa-hue), 50%, 94%) !important; border-color: hsl(var(--zcoa-hue), 50%, 55%) !important; color: hsl(var(--zcoa-hue), 55%, 32%) !important; }
.zcoa-theme-minimal .zcoa-lightbox-close { color: hsl(var(--zcoa-hue), 15%, 48%); background: hsl(var(--zcoa-hue), 18%, 94%); border: 1px solid hsl(var(--zcoa-hue), 18%, 84%); }
.zcoa-theme-minimal .zcoa-lightbox-close:hover { background: hsl(var(--zcoa-hue), 50%, 92%); color: hsl(var(--zcoa-hue), 50%, 38%); border-color: hsl(var(--zcoa-hue), 40%, 70%); }

/* =============================================================================
   THEME: INHERIT — defers entirely to the active WordPress theme
   No background, no borders, no custom fonts. Inherits everything.
   Lightbox-specific colours for inherit are in the consolidated
   THEME-SPECIFIC LIGHTBOX OVERRIDES block further below.
   ============================================================================= */

.zcoa-theme-inherit { /* zero-styling — let the site theme decide */ }

/* Search — minimal structural rules only, no visual overrides */
.zcoa-theme-inherit .zcoa-fe-search-inner { max-width: none; }
.zcoa-theme-inherit .zcoa-fe-search {
    padding-left: 44px;
    width: 100%;
    background: inherit;
    border-style: solid;
    border-width: 1px;
    font-family: inherit;
    font-size: inherit;
}

/* Overlay structure only */
.zcoa-theme-inherit .zcoa-fe-card-overlay {
    background: rgba(0,0,0,.4);
}
.zcoa-theme-inherit .zcoa-fe-view-btn,
.zcoa-theme-inherit .zcoa-fe-dl-btn {
    font-family: inherit;
    font-size: inherit;
}

/* =============================================================================
   LIGHTBOX — shared structure & layout
   Layout: single column — image fills top, footer bar (info + buttons) below.
   
   IMPORTANT: The lightbox uses style="display:none" by default (set in PHP).
   jQuery's .fadeIn()/.fadeOut() toggles the inline display property.
   We must NOT set display:flex with !important here — that would override
   the inline display:none and make the lightbox always visible.
   Instead, we use .zcoa-lightbox--open class (added by JS) to apply flex.
   All other layout properties use !important to beat theme wildcard resets
   like .hds-coa-page * { margin:0; padding:0 }.
   ============================================================================= */

/* Hidden state — default, controlled by inline style from PHP + JS */
.zcoa-lightbox {
    display: none;         /* JS overrides this with fadeIn/fadeOut          */
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Open state — JS adds this class AND jQuery sets display via .fadeIn() */
.zcoa-lightbox.zcoa-lightbox--open {
    display: flex !important;
}

.zcoa-lightbox-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, .88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Dialog container — vertical stack ──────────────────────────────────── */
.zcoa-lightbox-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;          /* safe — only renders when parent is shown */
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 640px !important;
    /* Height constrains the image area via flex child's min-height:0 */
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ── Image area — flex:1 fills all height above footer ──────────────────── */
.zcoa-lightbox-img-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 40px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.zcoa-lightbox-img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    filter: none !important;
    -webkit-filter: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ── Footer bar: info left | buttons right ───────────────────────────────── */
.zcoa-lightbox-footer {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 18px 28px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
    box-sizing: border-box !important;
}

/* Info column */
.zcoa-lightbox-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.zcoa-lightbox-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.zcoa-lightbox-product {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.zcoa-lightbox-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Buttons row */
.zcoa-lightbox-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Shared button base ──────────────────────────────────────────────────── */
.zcoa-fe-btn,
.zcoa-lightbox-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
    border-radius: 100px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    letter-spacing: .01em !important;
}

/* Download / primary */
.zcoa-fe-btn {
    border: none !important;
    background: hsl(var(--zcoa-hue), 80%, 56%) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px hsla(var(--zcoa-hue), 80%, 40%, .32) !important;
}
.zcoa-fe-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 18px hsla(var(--zcoa-hue), 80%, 40%, .46) !important;
    opacity: 1 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Close / ghost */
.zcoa-lightbox-close-btn {
    background: transparent !important;
    border: 1.5px solid rgba(0,0,0,.18) !important;
    color: rgba(0,0,0,.58) !important;
}
.zcoa-lightbox-close-btn:hover {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.28) !important;
    color: rgba(0,0,0,.82) !important;
    transform: translateY(-1px) !important;
}

/* =============================================================================
   THEME-SPECIFIC LIGHTBOX OVERRIDES
   Override bg, text, and button colors per named theme.
   ============================================================================= */

/* ── Glassmorphic ── */
.zcoa-theme-glassmorphic .zcoa-lightbox-content {
    box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 0 1px hsla(var(--zcoa-hue), 60%, 65%, .15);
}
.zcoa-theme-glassmorphic .zcoa-lightbox-img-wrap {
    background: hsla(var(--zcoa-hue), 20%, 5%, .7);
}
.zcoa-theme-glassmorphic .zcoa-lightbox-footer {
    background: hsla(var(--zcoa-hue), 28%, 10%, .95);
    border-top-color: hsla(var(--zcoa-hue), 60%, 65%, .15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.zcoa-theme-glassmorphic .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 55%, 92%); }
.zcoa-theme-glassmorphic .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 80%, 72%); }
.zcoa-theme-glassmorphic .zcoa-lightbox-desc    { color: hsla(var(--zcoa-hue), 25%, 78%, .6); }
.zcoa-theme-glassmorphic .zcoa-fe-btn {
    background: linear-gradient(135deg, hsl(var(--zcoa-hue), 82%, 58%), hsl(var(--zcoa-hue), 90%, 42%)) !important;
    box-shadow: 0 3px 14px hsla(var(--zcoa-hue), 80%, 40%, .45) !important;
}
.zcoa-theme-glassmorphic .zcoa-lightbox-close-btn {
    border-color: hsla(var(--zcoa-hue), 60%, 65%, .28) !important;
    color: hsl(var(--zcoa-hue), 40%, 72%) !important;
}
.zcoa-theme-glassmorphic .zcoa-lightbox-close-btn:hover {
    background: hsla(var(--zcoa-hue), 50%, 30%, .4) !important;
    border-color: hsla(var(--zcoa-hue), 70%, 65%, .5) !important;
    color: hsl(var(--zcoa-hue), 60%, 88%) !important;
}

/* ── Light ── */
.zcoa-theme-light .zcoa-lightbox-img-wrap { background: hsl(var(--zcoa-hue), 15%, 97%); }
.zcoa-theme-light .zcoa-lightbox-footer {
    background: #ffffff;
    border-top-color: hsl(var(--zcoa-hue), 20%, 90%);
}
.zcoa-theme-light .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 30%, 12%); }
.zcoa-theme-light .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 72%, 38%); }
.zcoa-theme-light .zcoa-lightbox-desc    { color: hsl(var(--zcoa-hue), 15%, 42%); }
.zcoa-theme-light .zcoa-fe-btn {
    background: hsl(var(--zcoa-hue), 72%, 50%) !important;
    box-shadow: 0 3px 12px hsla(var(--zcoa-hue), 72%, 45%, .3) !important;
}
.zcoa-theme-light .zcoa-lightbox-close-btn {
    border-color: hsl(var(--zcoa-hue), 25%, 80%) !important;
    color: hsl(var(--zcoa-hue), 30%, 45%) !important;
}
.zcoa-theme-light .zcoa-lightbox-close-btn:hover {
    background: hsl(var(--zcoa-hue), 60%, 96%) !important;
    border-color: hsl(var(--zcoa-hue), 55%, 68%) !important;
    color: hsl(var(--zcoa-hue), 72%, 34%) !important;
}

/* ── Dark ── */
.zcoa-theme-dark .zcoa-lightbox-img-wrap { background: hsl(var(--zcoa-hue), 12%, 7%); }
.zcoa-theme-dark .zcoa-lightbox-footer {
    background: hsl(var(--zcoa-hue), 12%, 11%);
    border-top-color: hsl(var(--zcoa-hue), 15%, 18%);
}
.zcoa-theme-dark .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 20%, 93%); }
.zcoa-theme-dark .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 72%, 68%); }
.zcoa-theme-dark .zcoa-lightbox-desc    { color: hsl(var(--zcoa-hue), 12%, 58%); }
.zcoa-theme-dark .zcoa-fe-btn {
    background: hsl(var(--zcoa-hue), 72%, 58%) !important;
    box-shadow: 0 3px 12px hsla(var(--zcoa-hue), 72%, 45%, .32) !important;
}
.zcoa-theme-dark .zcoa-lightbox-close-btn {
    border-color: hsl(var(--zcoa-hue), 20%, 28%) !important;
    color: hsl(var(--zcoa-hue), 20%, 58%) !important;
}
.zcoa-theme-dark .zcoa-lightbox-close-btn:hover {
    background: hsl(var(--zcoa-hue), 35%, 18%) !important;
    border-color: hsl(var(--zcoa-hue), 55%, 42%) !important;
    color: hsl(var(--zcoa-hue), 55%, 80%) !important;
}

/* ── Minimal ── */
.zcoa-theme-minimal .zcoa-lightbox-img-wrap { background: hsl(var(--zcoa-hue), 15%, 97%); }
.zcoa-theme-minimal .zcoa-lightbox-footer {
    background: #ffffff;
    border-top-color: hsl(var(--zcoa-hue), 15%, 88%);
}
.zcoa-theme-minimal .zcoa-lightbox-title   { color: hsl(var(--zcoa-hue), 20%, 14%); }
.zcoa-theme-minimal .zcoa-lightbox-product { color: hsl(var(--zcoa-hue), 50%, 40%); }
.zcoa-theme-minimal .zcoa-lightbox-desc    { color: hsl(var(--zcoa-hue), 10%, 42%); }
.zcoa-theme-minimal .zcoa-fe-btn {
    background: hsl(var(--zcoa-hue), 55%, 38%) !important;
    box-shadow: 0 3px 10px hsla(var(--zcoa-hue), 55%, 38%, .26) !important;
}
.zcoa-theme-minimal .zcoa-lightbox-close-btn {
    border-color: hsl(var(--zcoa-hue), 22%, 75%) !important;
    color: hsl(var(--zcoa-hue), 30%, 42%) !important;
}
.zcoa-theme-minimal .zcoa-lightbox-close-btn:hover {
    background: hsl(var(--zcoa-hue), 45%, 96%) !important;
    border-color: hsl(var(--zcoa-hue), 45%, 58%) !important;
    color: hsl(var(--zcoa-hue), 50%, 32%) !important;
}

/* ── Inherit ── */
.zcoa-theme-inherit .zcoa-lightbox-img-wrap { background: #f5f5f5; }
.zcoa-theme-inherit .zcoa-lightbox-footer {
    background: #ffffff;
    border-top-color: rgba(0, 0, 0, .1);
}
.zcoa-theme-inherit .zcoa-lightbox-title   { color: #111111; }
.zcoa-theme-inherit .zcoa-lightbox-product { color: #444444; }
.zcoa-theme-inherit .zcoa-lightbox-desc    { color: #666666; }
.zcoa-theme-inherit .zcoa-fe-btn {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.22) !important;
}
.zcoa-theme-inherit .zcoa-fe-btn:hover {
    background: #000000 !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.32) !important;
}
.zcoa-theme-inherit .zcoa-lightbox-close-btn {
    border-color: rgba(0, 0, 0, .2) !important;
    color: rgba(0, 0, 0, .6) !important;
}
.zcoa-theme-inherit .zcoa-lightbox-close-btn:hover {
    background: rgba(0, 0, 0, .06) !important;
    border-color: rgba(0, 0, 0, .32) !important;
    color: rgba(0, 0, 0, .85) !important;
}

/* =============================================================================
   MOBILE — footer stacks vertically, buttons go full width
   ============================================================================= */

@media (max-width: 640px) {
    .zcoa-lightbox {
        padding: 12px 12px 12px !important;
        align-items: flex-end !important;
    }

    .zcoa-lightbox-content {
        max-width: 100% !important;
        width: 100% !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 20px 20px 16px 16px !important;
    }

    .zcoa-lightbox-img-wrap {
        padding: 20px 20px 16px !important;
    }

    .zcoa-lightbox-img {
        max-height: 100% !important;
    }

    /* Footer stacks on mobile: info on top, buttons below full-width */
    .zcoa-lightbox-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 16px 20px 20px !important;
    }

    .zcoa-lightbox-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .zcoa-fe-btn,
    .zcoa-lightbox-close-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .zcoa-theme-glassmorphic,
    .zcoa-theme-light,
    .zcoa-theme-dark { padding: 20px 14px; border-radius: 12px; }
}