@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

/* ============================================================================
   Petratide COA Manager — Frontend Stylesheet (Cover Card style)
   ----------------------------------------------------------------------------
   This file holds ALL frontend styling for the [petratide_coa] grid.
   Edit colors / sizes directly here — no admin color pickers feed this anymore.

   COLOR REFERENCE (search & replace to re-theme):
     Button / dropdown — rest bg     rgba(124,77,255,0.16)
     Button / dropdown — rest text   #9d7bff
     Button / dropdown — rest border rgba(124,77,255,0.22)
     Button / dropdown — card-hover  #7c4dff  (fills solid, white text)
     Button / dropdown — direct hover #8a5fff
     Button / dropdown — active       #6a3ce0
     Card border                      rgba(255,255,255,0.10)
     Product name                     #ffffff
     Date text                        rgba(255,255,255,0.82)
     Overlay gradient                 rgba(20,12,46,0.15) -> rgba(12,8,32,0.92)
     Search background                rgba(255,255,255,0.06)
     Search border                    rgba(255,255,255,0.12)

   NOTE: card hover no longer adds a colored border or glow (just a lift + shadow).

   LAYOUT KNOBS (the obvious ones to change):
     Grid columns                 #pt8-grid  -> grid-template-columns
     Card height                  .pt8-card  -> height
     Card radius                  .pt8-card  -> border-radius
     Cover zoom on hover          .pt8-card:hover .pt8-cover -> transform scale
     Bottom stack order           markup order: name -> date -> pill -> button
     Pill height / shape          .pt8-batch-wrap -> height / border-radius
     Revealed number width        .pt8-batch-wrap:hover .pt8-batch-num -> max-width
   ============================================================================ */

#pt8-wrap * { box-sizing:border-box; }
#pt8-wrap { width:100%; }

/* ── Search (standalone, shown when sort controls are OFF) ─────────────────── */
.pt8-search-wrap { display:flex !important; justify-content:center !important; margin-bottom:2.5rem !important; }
#pt8-search {
    width:460px !important; max-width:92vw !important;
    padding:0.8rem 1.75rem !important;
    background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    border-radius:50px !important; color:#ffffff !important;
    font-size:0.95rem !important; text-align:center !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    box-shadow:0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    outline:none !important; transition:border-color 0.2s, box-shadow 0.2s !important;
}
#pt8-search:focus {
    border-color:rgba(139,92,246,0.53) !important;
    box-shadow:0 4px 32px rgba(139,92,246,0.2), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
#pt8-search::placeholder { color:rgba(255,255,255,0.35) !important; }

/* ── Sort controls ────────────────────────────────────────────────────────── */
.pt8-controls-wrap { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:1rem !important; flex-wrap:wrap !important; margin-bottom:2rem !important; }
.pt8-sort-wrap { display:flex !important; align-items:center !important; gap:0.6rem !important; flex-wrap:wrap !important; }
.pt8-sort-label { color:rgba(255,255,255,0.5) !important; font-size:0.8rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.08em !important; white-space:nowrap !important; }
.pt8-sort-pills { display:flex !important; gap:5px !important; flex-wrap:wrap !important; }
/* Sort buttons — matched to the batch pill style.
   Inactive = translucent purple pill. Hover = brighter translucent.
   Active = solid purple fill (one is always active). */
.pt8-sort-btn {
    background:rgba(124,77,255,0.16) !important;
    color:#9d7bff !important;
    border:1px solid rgba(124,77,255,0.22) !important;
    border-radius:999px !important;
    padding:0.42rem 1rem !important;
    font-family:'Poppins', sans-serif !important;
    font-size:0.8rem !important; font-weight:600 !important; cursor:pointer !important;
    letter-spacing:0.01em !important;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
/* Inactive hover — brighter translucent (does not jump to solid) */
.pt8-sort-btn:hover:not(.active) {
    background:rgba(138,95,255,0.30) !important;
    color:#ffffff !important;
    border-color:rgba(138,95,255,0.45) !important;
}
/* Active — solid purple fill */
.pt8-sort-btn.active {
    background:#8a5fff !important;
    color:#ffffff !important;
    border-color:#8a5fff !important;
}
.pt8-search-inline { flex:1 !important; display:flex !important; justify-content:flex-end !important; }
.pt8-search-inline #pt8-search {
    width:260px !important; max-width:100% !important;
    padding:0.5rem 1rem !important;
    background:rgba(255,255,255,0.06) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    border-radius:50px !important; color:#fff !important;
    font-size:0.85rem !important; outline:none !important; text-align:left !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.25) !important;
    transition:border-color 0.2s !important;
}
.pt8-search-inline #pt8-search:focus { border-color:rgba(139,92,246,0.53) !important; }
.pt8-search-inline #pt8-search::placeholder { color:rgba(255,255,255,0.35) !important; }
@media(max-width:640px){
    .pt8-controls-wrap { flex-direction:column !important; align-items:stretch !important; }
    .pt8-search-inline { justify-content:flex-start !important; }
    .pt8-search-inline #pt8-search { width:100% !important; }
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
#pt8-grid {
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:1.4rem !important;
}

/* ── Card (full-bleed cover with overlaid content) ────────────────────────── */
.pt8-card {
    position:relative !important;
    height:380px !important;
    border:1px solid rgba(255,255,255,0.10) !important;
    border-radius:20px !important;
    overflow:hidden !important;
    box-shadow:0 10px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transition:border-color 0.3s, box-shadow 0.3s, transform 0.3s cubic-bezier(.2,.7,.3,1) !important;
    isolation:isolate !important;
}
.pt8-card:hover {
    box-shadow:0 18px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transform:translateY(-4px) !important;
}
.pt8-card.pt8-hidden { display:none !important; }

/* Cover image — fills card, scaled to cover, anchored top-center */
.pt8-cover {
    position:absolute !important; inset:0 !important; z-index:1 !important;
    background-size:cover !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
    background-color:#0d0a1f !important;
    transform:scale(1) !important;
    opacity:1 !important;
    transition:transform 0.55s cubic-bezier(.2,.7,.3,1), opacity 0.18s ease !important;
    will-change:transform, opacity !important;
}
.pt8-card:hover .pt8-cover { transform:scale(1.05) !important; }
/* Batch-switch crossfade: JS adds this to dip the cover toward black while the
   new image is swapped underneath, then removes it to fade the new image in. */
.pt8-cover.pt8-cover-swapping { opacity:0.15 !important; }
.pt8-cover-empty {
    position:absolute !important; inset:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:3rem !important; color:rgba(255,255,255,0.18) !important;
}

/* Gradient overlay tint */
.pt8-overlay {
    position:absolute !important; inset:0 !important; z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg, rgba(20,12,46,0.15), rgba(12,8,32,0.92)) !important;
    opacity:1 !important;
}

/* Content layer — everything is pushed to the bottom by .pt8-spacer */
.pt8-content {
    position:absolute !important; inset:0 !important; z-index:3 !important;
    display:flex !important; flex-direction:column !important;
    padding:1.15rem 1.15rem 1.1rem !important;
}
.pt8-spacer { flex:1 1 auto !important; }

/* ── Bottom stack: name → date → batch pill → button ─────────────────────────── */
.pt8-foot {
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; gap:0.55rem !important;
}
.pt8-product-name {
    font-size:1.18rem !important; font-weight:800 !important;
    color:#ffffff !important;
    line-height:1.15 !important; margin:0 !important;
    text-shadow:0 2px 14px rgba(0,0,0,0.65) !important;
    letter-spacing:0.01em !important;
}
.pt8-date {
    font-size:0.82rem !important; font-weight:600 !important;
    color:rgba(255,255,255,0.82) !important;
    margin:0 !important;
    text-shadow:0 1px 8px rgba(0,0,0,0.6) !important;
    letter-spacing:0.02em !important;
}

/* ── Batch pill ───────────────────────────────────────────────────────────────
   Structure: a visible label (Batch + number + arrow) layered over a transparent
   native <select>. Idle shows "Batch ▾". On hover the number slides in between
   them ("Batch 001 ▾") and the arrow rotates 180° (points up = expanded).
   The pill is large and fully rounded (pill shape). Fills brighter on direct hover.

   Conflict note: an external `#ps-coa select` rule injects an arrow + font/color.
   The select below is forced transparent with background-image:none and is only a
   click target — the visible text is our own label, so the conflict can't show.
   ------------------------------------------------------------------------------ */
.pt8-batch-wrap {
    position:relative !important;
    display:inline-flex !important; align-items:center !important;
    height:44px !important;
    border-radius:999px !important;                 /* pill shape */
    background:rgba(124,77,255,0.16) !important;
    border:1px solid rgba(124,77,255,0.22) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transition:background 0.2s ease, border-color 0.2s ease !important;
}
.pt8-batch-wrap:hover {
    background:#8a5fff !important;
    border-color:#8a5fff !important;
    box-shadow:none !important;
}

/* Visible label sitting on top of the select */
.pt8-batch-label {
    position:relative !important; z-index:2 !important;
    display:inline-flex !important; align-items:center !important;
    pointer-events:none !important;                 /* clicks pass through to the select */
    padding:0 16px !important;
    font-family:'Poppins', sans-serif !important;
    font-size:0.9rem !important; font-weight:600 !important;
    letter-spacing:0.01em !important;
    color:#9d7bff !important;
    white-space:nowrap !important;
    transition:color 0.2s ease !important;
}
.pt8-batch-wrap:hover .pt8-batch-label { color:#ffffff !important; }

.pt8-batch-prefix { display:inline-block !important; }

/* Number: hidden at rest, slides in on hover between prefix and arrow */
.pt8-batch-num {
    display:inline-block !important;
    max-width:0 !important; opacity:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    transition:max-width 0.3s cubic-bezier(.2,.7,.3,1), opacity 0.25s ease, margin 0.3s ease !important;
}
.pt8-batch-wrap:hover .pt8-batch-num {
    max-width:60px !important; opacity:1 !important;
    margin-left:6px !important;
}

/* Arrow: CSS-drawn chevron (clean v-shape) on the right; rotates 180° on hover. */
.pt8-batch-arrow {
    display:inline-block !important;
    margin-left:9px !important;
    width:9px !important; height:9px !important;
    border-right:2px solid currentColor !important;
    border-bottom:2px solid currentColor !important;
    transform:rotate(45deg) !important;             /* points down (v) */
    transform-origin:center !important;
    transition:transform 0.3s cubic-bezier(.2,.7,.3,1) !important;
    font-size:0 !important;                          /* hide the fallback glyph text */
    position:relative !important; top:-2px !important;
}
.pt8-batch-wrap:hover .pt8-batch-arrow {
    transform:rotate(225deg) !important;             /* flips to point up (^) */
    top:1px !important;
}

/* The native <select> — transparent, fills the pill, is the click target.
   ID-scoped so it out-specifies external `#ps-coa select` rules even with !important. */
#pt8-wrap .pt8-batch-select {
    position:absolute !important; inset:0 !important; z-index:1 !important;
    appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
    background:transparent !important;
    background-image:none !important;               /* kill the conflicting injected arrow */
    background-color:transparent !important;
    border:0 !important; outline:none !important;
    color:transparent !important;                   /* hide the select's own text; label shows instead */
    font-size:0.9rem !important;
    cursor:pointer !important;
    width:100% !important; height:100% !important;
    min-height:0 !important; max-width:none !important; min-width:0 !important;
    padding:0 !important; margin:0 !important;
    text-indent:0 !important;
    box-shadow:none !important;
}
#pt8-wrap .pt8-batch-select option { color:#1a1a2e !important; background:#fff !important; font-weight:600 !important; }

/* ── "View COA" button — translucent purple at rest, fills on hover ────────────
   Ported from the Petratide add-to-cart button style. Fixed size (never scales).
   Fill changes ONLY on direct hover of the button — not on general card hover. */
.pt8-cta {
    display:block !important; width:100% !important;
    text-align:center !important;
    font-family:'Poppins', sans-serif !important;
    font-weight:600 !important;
    font-size:0.92rem !important;
    padding:12px !important;
    border-radius:11px !important;
    color:#9d7bff !important;
    background:rgba(124,77,255,0.16) !important;
    border:1px solid rgba(124,77,255,0.22) !important;
    text-decoration:none !important; text-transform:uppercase !important; letter-spacing:0.08em !important;
    cursor:pointer !important;
    transition:background 0.2s ease, color 0.2s ease !important;
}
/* Direct hover on the button only — fills brighter, NO glow */
.pt8-cta:hover {
    background:#8a5fff !important;
    color:#ffffff !important;
    border-color:#8a5fff !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
/* Active — pressed down (no glow) */
.pt8-cta:active {
    background:#6a3ce0 !important;
    color:#ffffff !important;
    border-color:#6a3ce0 !important;
    box-shadow:none !important;
}
/* Focus — keyboard navigation (accessibility) */
.pt8-cta:focus-visible {
    outline:2px solid #c2a3ff !important;
    outline-offset:2px !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:960px) { #pt8-grid { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:580px)  { #pt8-grid { grid-template-columns:1fr !important; } }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pt8-card.pt8-paged-out { display:none !important; }
.pt8-pagination {
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; justify-content:center !important;
    gap:6px !important; margin-top:2.4rem !important;
}
.pt8-page-btn {
    background:rgba(15,10,40,0.55) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,0.28) !important;
    border-radius:50px !important;
    padding:0.4rem 0.85rem !important; min-width:38px !important;
    font-size:0.8rem !important; font-weight:700 !important;
    cursor:pointer !important; line-height:1 !important;
    transition:background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}
.pt8-page-btn:hover:not(:disabled):not(.active) {
    background:rgba(139,92,246,0.2) !important;
    color:#fff !important; border-color:rgba(139,92,246,0.33) !important;
}
.pt8-page-btn.active {
    background:#8B5CF6 !important;
    color:#fff !important; border-color:#8B5CF6 !important;
    box-shadow:0 2px 12px rgba(139,92,246,0.33) !important;
    transform:translateY(-1px) !important;
}
.pt8-page-btn:disabled { opacity:0.35 !important; cursor:not-allowed !important; }
.pt8-page-ellipsis {
    color:rgba(255,255,255,0.4) !important;
    padding:0 6px !important; font-size:0.85rem !important; user-select:none !important;
}
.pt8-page-info {
    margin-left:10px !important;
    color:rgba(255,255,255,0.5) !important;
    font-size:0.75rem !important; font-weight:600 !important;
    letter-spacing:0.06em !important; text-transform:uppercase !important;
    white-space:nowrap !important;
}
@media (max-width:580px) {
    .pt8-pagination { gap:4px !important; }
    .pt8-page-btn { padding:0.35rem 0.65rem !important; min-width:34px !important; font-size:0.75rem !important; }
    .pt8-page-info { width:100% !important; text-align:center !important; margin:6px 0 0 !important; }
}