/* ============================================================================
   ZZF COA Manager — Frontend Stylesheet
   ----------------------------------------------------------------------------
   Retheme 2026-08-16: this file used to carry the dark/purple/Poppins look the
   plugin was originally built with. It now renders on the ZZF design system.

   THREE THINGS THAT CHANGED, AND WHY:

   1. NO WEBFONT IMPORT. The old file opened with an @import of Poppins from
      fonts.googleapis.com — a render-blocking third-party request for a face
      that is not in the type system. Type now inherits: Marcellus (display) for
      the product name, Outfit (body) for controls, system mono for every piece
      of analytical data. Mono is the house rule for lots, dates and batch
      numbers — it reads as instrument output rather than marketing.

   2. THE MESH RULE. A certificate library is a DATA surface, so the card is
      .zzf-clinical in spirit: flat white, hairline border, 14px radius, no
      backdrop-filter and no glow. Glass frames, clinical states — if a lot
      number glows it stops reading as a lot number. This is also the
      performance rule: the grid can hold 40 cards, and 40 blurred surfaces
      destroys scroll on the mid-range Android that is most of this traffic.

   3. THE CARD INVERTED. It was a full-bleed cover image with white text burned
      over a dark scrim — legible only against a dark theme, and it hid the
      document behind its own tint. The cover is now a framed preview at the top
      of the card with the meta block below it on white. This is done PURELY IN
      CSS: .zzfcoa-content stops being absolutely positioned and .zzfcoa-spacer
      is hidden. The PHP and the markup are untouched, so the batch-switch JS,
      the search filter and the pagination all still work.

   RETHEMING FOR A CLIENT — change the tokens, not the rules.
   Every colour below resolves from a --zzf-coa-* custom property, which in turn
   falls back to the theme's own palette. To retune one client, redefine the
   tokens in that client's stylesheet or theme.json settings.custom; never fork
   this file, which is agency-wide and shared by every client site.
   ============================================================================ */

:root {
    /* Surfaces */
    --zzf-coa-card-bg:     var(--wp--preset--color--base, #FFFFFF);
    --zzf-coa-cover-bg:    var(--wp--preset--color--surface-2, #E9F1FC);
    --zzf-coa-control-bg:  var(--wp--preset--color--surface, #FAFCFF);
    --zzf-coa-line:        var(--wp--preset--color--line, #E3EBF6);

    /* Ink */
    --zzf-coa-ink:         var(--wp--preset--color--contrast, #0B1B36);
    --zzf-coa-ink-muted:   var(--wp--preset--color--muted, #5A6C89);

    /* Action — the house button, not a second button language */
    --zzf-coa-action:      var(--wp--preset--color--accent, #14346E);
    --zzf-coa-action-hover: #0A1F47;
    --zzf-coa-action-text: #FFFFFF;

    /* Type */
    --zzf-coa-font-display: var(--wp--preset--font-family--display, Marcellus, 'Times New Roman', serif);
    --zzf-coa-font-body:    var(--wp--preset--font-family--body, Outfit, 'Segoe UI', Helvetica, Arial, sans-serif);
    --zzf-coa-font-mono:    var(--wp--preset--font-family--mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);

    /* Geometry — 14px card / 4px control matches .zzf-clinical and the theme button */
    --zzf-coa-radius-card:    14px;
    --zzf-coa-radius-control: 4px;
    --zzf-coa-cover-height:   190px;
}

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

/* ── Empty states ─────────────────────────────────────────────────────────────
   Two of them: the library before its first upload, and a search with no hits.
   Both are ordinary body copy on the field, not error chrome — the page admits
   the gap in the same voice it uses everywhere else.
   ------------------------------------------------------------------------- */
.zzfcoa-empty {
    max-width:52ch !important;
    margin:0 auto !important;
    padding:2.5rem 0 !important;
    text-align:center !important;
    font-family:var(--zzf-coa-font-body) !important;
    font-size:1rem !important; font-weight:300 !important;
    line-height:1.65 !important;
    color:var(--zzf-coa-ink-muted) !important;
}
/* Only ever rendered for a logged-in administrator. */
.zzfcoa-empty--admin {
    padding:0 0 1rem !important;
    font-family:var(--zzf-coa-font-mono) !important;
    font-size:0.72rem !important;
    letter-spacing:0.06em !important;
    opacity:0.7 !important;
}

/* ── Search (standalone, shown when sort controls are OFF) ─────────────────── */
.zzfcoa-search-wrap { display:flex !important; justify-content:center !important; margin-bottom:2.5rem !important; }
#zzfcoa-search {
    width:460px !important; max-width:92vw !important;
    padding:0.72rem 1rem !important;
    background:var(--zzf-coa-card-bg) !important;
    border:1px solid var(--zzf-coa-line) !important;
    border-radius:var(--zzf-coa-radius-control) !important;
    color:var(--zzf-coa-ink) !important;
    font-family:var(--zzf-coa-font-body) !important;
    font-size:0.95rem !important; font-weight:300 !important;
    text-align:left !important;
    outline:none !important;
    box-shadow:none !important;
    transition:border-color 0.2s ease !important;
}
#zzfcoa-search:focus {
    border-color:var(--zzf-coa-action) !important;
    box-shadow:0 0 0 3px rgba(20,52,110,0.10) !important;
}
#zzfcoa-search::placeholder { color:var(--zzf-coa-ink-muted) !important; opacity:0.75 !important; }

/* ── Sort controls ────────────────────────────────────────────────────────── */
.zzfcoa-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; }
.zzfcoa-sort-wrap { display:flex !important; align-items:center !important; gap:0.6rem !important; flex-wrap:wrap !important; }
/* The "Sort:" label matches the section eyebrows — mono, letterspaced, muted. */
.zzfcoa-sort-label {
    color:var(--zzf-coa-ink-muted) !important;
    font-family:var(--zzf-coa-font-mono) !important;
    font-size:0.7rem !important; font-weight:400 !important;
    text-transform:uppercase !important; letter-spacing:0.12em !important;
    white-space:nowrap !important;
}
.zzfcoa-sort-pills { display:flex !important; gap:6px !important; flex-wrap:wrap !important; }
/* Inactive = flat control on the surface tint. Active = the house navy fill. */
.zzfcoa-sort-btn {
    background:var(--zzf-coa-control-bg) !important;
    color:var(--zzf-coa-ink-muted) !important;
    border:1px solid var(--zzf-coa-line) !important;
    border-radius:var(--zzf-coa-radius-control) !important;
    padding:0.42rem 0.9rem !important;
    font-family:var(--zzf-coa-font-body) !important;
    font-size:0.78rem !important; font-weight:600 !important; cursor:pointer !important;
    letter-spacing:0.04em !important;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.zzfcoa-sort-btn:hover:not(.active) {
    color:var(--zzf-coa-ink) !important;
    border-color:var(--zzf-coa-ink-muted) !important;
}
.zzfcoa-sort-btn.active {
    background:var(--zzf-coa-action) !important;
    color:var(--zzf-coa-action-text) !important;
    border-color:var(--zzf-coa-action) !important;
}
.zzfcoa-search-inline { flex:1 !important; display:flex !important; justify-content:flex-end !important; }
.zzfcoa-search-inline #zzfcoa-search {
    width:260px !important; max-width:100% !important;
    padding:0.5rem 0.85rem !important;
    font-size:0.85rem !important;
}
@media(max-width:640px){
    .zzfcoa-controls-wrap { flex-direction:column !important; align-items:stretch !important; }
    .zzfcoa-search-inline { justify-content:flex-start !important; }
    .zzfcoa-search-inline #zzfcoa-search { width:100% !important; }
}

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

/* ── Card ─────────────────────────────────────────────────────────────────────
   Flat white, hairline, no blur. The card is a flex COLUMN now: framed cover on
   top, meta block underneath. Height is content-driven — the old fixed 380px
   existed only to give the absolutely-positioned overlay something to fill.
   ------------------------------------------------------------------------- */
.zzfcoa-card {
    position:relative !important;
    display:flex !important; flex-direction:column !important;
    background:var(--zzf-coa-card-bg) !important;
    border:1px solid var(--zzf-coa-line) !important;
    border-radius:var(--zzf-coa-radius-card) !important;
    overflow:hidden !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transition:border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
/* Hover lift only — transform and opacity are the only animatable properties by
   house rule, and a clinical surface never picks up a glow. */
.zzfcoa-card:hover {
    border-color:var(--zzf-coa-ink-muted) !important;
    box-shadow:0 12px 30px -14px rgba(11,27,54,0.22) !important;
    transform:translateY(-3px) !important;
}
.zzfcoa-card.zzfcoa-hidden { display:none !important; }

/* Cover — a framed preview of the document, not a background image to burn
   text over. Anchored top so the certificate's header is what you see. */
.zzfcoa-cover {
    position:relative !important; inset:auto !important; z-index:1 !important;
    flex:0 0 auto !important;
    height:var(--zzf-coa-cover-height) !important;
    background-size:cover !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
    background-color:var(--zzf-coa-cover-bg) !important;
    border-bottom:1px solid var(--zzf-coa-line) !important;
    opacity:1 !important;
    transition:opacity 0.18s ease !important;
}
/* Batch-switch crossfade: JS adds this to dip the cover while the new image is
   swapped underneath, then removes it to fade the new one in. On a light card
   it dips toward the surface tint rather than toward black. */
.zzfcoa-cover.zzfcoa-cover-swapping { opacity:0.25 !important; }
.zzfcoa-cover-empty {
    position:absolute !important; inset:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:2.2rem !important; opacity:0.35 !important;
    filter:grayscale(1) !important;
}

/* The dark scrim was only ever needed to make white text legible over the
   image. Content sits on white now, so it is retired rather than deleted —
   the markup still emits the div. */
.zzfcoa-overlay { display:none !important; }

/* Content layer — normal flow under the cover, not an absolute overlay. */
.zzfcoa-content {
    position:relative !important; inset:auto !important; z-index:2 !important;
    display:flex !important; flex-direction:column !important;
    /* Grow to fill whatever height the grid row gives this card, so the foot
       below has somewhere to be pushed TO. Without this the content block is
       flex:0 1 auto, packs to the top, and the leftover height sits under the
       button as dead white space. */
    flex:1 1 auto !important;
    padding:1.05rem 1.1rem 1.1rem !important;
}
/* Its only job was to push the stack to the bottom of a full-bleed card. */
.zzfcoa-spacer { display:none !important; }

/* ── Meta stack: name → date → batch control → button ─────────────────────── */
/* Pinned to the bottom of the card. The grid already stretches every card in
   a row to the same height, but the meta stack packed to the top, so a card
   carrying a batch dropdown pushed its button ~40px lower than its neighbours
   and the row of buttons stepped up and down.

   margin-top:auto puts the WHOLE foot on the floor, which is what keeps the
   buttons level: the button is the last child either way, so a card with a
   dropdown and one without still land their button on the same baseline. The
   dropdown simply sits above it on the cards that have one. */
.zzfcoa-foot {
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; gap:0.5rem !important;
    margin-top:auto !important;
}
.zzfcoa-product-name {
    font-family:var(--zzf-coa-font-display) !important;
    font-size:1.22rem !important; font-weight:400 !important;
    color:var(--zzf-coa-ink) !important;
    line-height:1.14 !important; letter-spacing:-0.012em !important;
    margin:0 !important; text-shadow:none !important;
}
/* Mono, because a certificate date is analytical data. */
.zzfcoa-date {
    font-family:var(--zzf-coa-font-mono) !important;
    font-size:0.72rem !important; font-weight:400 !important;
    color:var(--zzf-coa-ink-muted) !important;
    letter-spacing:0.06em !important;
    margin:0 0 0.15rem !important; text-shadow:none !important;
}

/* ── Batch control ────────────────────────────────────────────────────────────
   Structure is unchanged: a visible label (prefix + number + chevron) layered
   over a transparent native <select> that is the real click target. Idle shows
   "Batch ▾"; hover slides the number in and rotates the chevron.
   ------------------------------------------------------------------------- */
.zzfcoa-batch-wrap {
    position:relative !important;
    display:inline-flex !important; align-items:center !important;
    align-self:flex-start !important;
    height:34px !important;
    border-radius:var(--zzf-coa-radius-control) !important;
    background:var(--zzf-coa-control-bg) !important;
    border:1px solid var(--zzf-coa-line) !important;
    box-shadow:none !important;
    overflow:hidden !important;
    transition:background 0.2s ease, border-color 0.2s ease !important;
}
.zzfcoa-batch-wrap:hover {
    background:var(--zzf-coa-action) !important;
    border-color:var(--zzf-coa-action) !important;
}
.zzfcoa-batch-label {
    position:relative !important; z-index:2 !important;
    display:inline-flex !important; align-items:center !important;
    pointer-events:none !important;
    padding:0 12px !important;
    font-family:var(--zzf-coa-font-mono) !important;
    font-size:0.72rem !important; font-weight:400 !important;
    letter-spacing:0.06em !important;
    color:var(--zzf-coa-ink-muted) !important;
    white-space:nowrap !important;
    transition:color 0.2s ease !important;
}
.zzfcoa-batch-wrap:hover .zzfcoa-batch-label { color:var(--zzf-coa-action-text) !important; }
.zzfcoa-batch-prefix { display:inline-block !important; }
.zzfcoa-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;
}
.zzfcoa-batch-wrap:hover .zzfcoa-batch-num {
    max-width:60px !important; opacity:1 !important;
    margin-left:6px !important;
}
/* CSS-drawn chevron; rotates 180° on hover (points up = expanded). */
.zzfcoa-batch-arrow {
    display:inline-block !important;
    margin-left:8px !important;
    width:7px !important; height:7px !important;
    border-right:1.5px solid currentColor !important;
    border-bottom:1.5px solid currentColor !important;
    transform:rotate(45deg) !important;
    transform-origin:center !important;
    transition:transform 0.3s cubic-bezier(.2,.7,.3,1) !important;
    font-size:0 !important;
    position:relative !important; top:-2px !important;
}
.zzfcoa-batch-wrap:hover .zzfcoa-batch-arrow {
    transform:rotate(225deg) !important;
    top:1px !important;
}
/* The native <select> — transparent, fills the control, is the click target.
   ID-scoped so it out-specifies any stray theme `select` rule. */
#zzfcoa-wrap .zzfcoa-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;
    background-color:transparent !important;
    border:0 !important; outline:none !important;
    color:transparent !important;
    font-size:0.8rem !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;
}
/* The dropdown list itself is painted by the OS — keep it readable. */
#zzfcoa-wrap .zzfcoa-batch-select option {
    color:var(--zzf-coa-ink) !important;
    background:var(--zzf-coa-card-bg) !important;
    font-weight:400 !important;
}

/* ── "View COA" button ────────────────────────────────────────────────────────
   Deliberately identical to the theme's button element: navy fill, white text,
   4px radius, Outfit 600, uppercase at 0.1em. The site should not have a second
   button language just because this one ships inside a plugin.
   ------------------------------------------------------------------------- */
.zzfcoa-cta {
    display:block !important; width:100% !important;
    text-align:center !important;
    font-family:var(--zzf-coa-font-body) !important;
    font-weight:600 !important;
    font-size:0.78rem !important;
    padding:11px 12px !important;
    border-radius:var(--zzf-coa-radius-control) !important;
    color:var(--zzf-coa-action-text) !important;
    background:var(--zzf-coa-action) !important;
    border:1px solid var(--zzf-coa-action) !important;
    text-decoration:none !important; text-transform:uppercase !important; letter-spacing:0.1em !important;
    cursor:pointer !important;
    transition:background 0.2s ease, border-color 0.2s ease !important;
}
.zzfcoa-cta:hover {
    background:var(--zzf-coa-action-hover) !important;
    border-color:var(--zzf-coa-action-hover) !important;
    color:var(--zzf-coa-action-text) !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.zzfcoa-cta:active { background:var(--zzf-coa-action-hover) !important; }
.zzfcoa-cta:focus-visible {
    outline:2px solid var(--zzf-coa-action) !important;
    outline-offset:2px !important;
}

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

/* Her traffic is TikTok on mid-range Android — drop the hover lift where there
   is no hover, and honour a reduced-motion preference everywhere. */
@media (hover:none) {
    .zzfcoa-card:hover { transform:none !important; box-shadow:none !important; }
}
@media (prefers-reduced-motion:reduce) {
    .zzfcoa-card, .zzfcoa-cover, .zzfcoa-batch-num, .zzfcoa-batch-arrow { transition:none !important; }
    .zzfcoa-card:hover { transform:none !important; }
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.zzfcoa-card.zzfcoa-paged-out { display:none !important; }
.zzfcoa-pagination {
    display:flex !important; flex-wrap:wrap !important;
    align-items:center !important; justify-content:center !important;
    gap:6px !important; margin-top:2.4rem !important;
}
.zzfcoa-page-btn {
    background:var(--zzf-coa-card-bg) !important;
    color:var(--zzf-coa-ink) !important;
    border:1px solid var(--zzf-coa-line) !important;
    border-radius:var(--zzf-coa-radius-control) !important;
    padding:0.4rem 0.8rem !important; min-width:36px !important;
    font-family:var(--zzf-coa-font-body) !important;
    font-size:0.8rem !important; font-weight:600 !important;
    cursor:pointer !important; line-height:1 !important;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
.zzfcoa-page-btn:hover:not(:disabled):not(.active) {
    border-color:var(--zzf-coa-ink-muted) !important;
}
.zzfcoa-page-btn.active {
    background:var(--zzf-coa-action) !important;
    color:var(--zzf-coa-action-text) !important;
    border-color:var(--zzf-coa-action) !important;
    box-shadow:none !important;
}
.zzfcoa-page-btn:disabled { opacity:0.4 !important; cursor:not-allowed !important; }
.zzfcoa-page-ellipsis {
    color:var(--zzf-coa-ink-muted) !important;
    padding:0 6px !important; font-size:0.85rem !important; user-select:none !important;
}
/* "13 – 24 of 47" is a count, so it is mono like every other figure. */
.zzfcoa-page-info {
    margin-left:10px !important;
    color:var(--zzf-coa-ink-muted) !important;
    font-family:var(--zzf-coa-font-mono) !important;
    font-size:0.7rem !important; font-weight:400 !important;
    letter-spacing:0.08em !important; text-transform:uppercase !important;
    white-space:nowrap !important;
}
@media (max-width:580px) {
    .zzfcoa-pagination { gap:4px !important; }
    .zzfcoa-page-btn { padding:0.35rem 0.6rem !important; min-width:32px !important; font-size:0.75rem !important; }
    .zzfcoa-page-info { width:100% !important; text-align:center !important; margin:6px 0 0 !important; }
}