/* =========================================================
   COA Product Summary — [coa_product_summary]
   All rules are scoped under .coa-product-summary so this file
   cannot affect any other COA card, table, tab, button, modal,
   or Elementor widget in the plugin.
   ========================================================= */

.coa-product-summary {
    /* Scoped design tokens.
       Each token reads the admin-configured global (--coa-summary-*)
       first, then falls back to the built-in default. Override any of
       them via inline style on the wrapper for per-instance theming
       without touching this file or the admin settings. */
    --cps-bg:            var(--coa-summary-bg, #ffffff);
    --cps-border:        var(--coa-summary-border, #e5e7eb);
    --cps-radius:        var(--coa-summary-radius, 22px);
    --cps-pad:           22px;
    --cps-gap:           14px;

    --cps-text:          var(--coa-summary-title, #0f172a);
    --cps-muted:         var(--coa-summary-subtitle, #64748b);

    --cps-accent:        var(--coa-summary-tab-active-text, #2b6cff);
    --cps-accent-hover:  var(--coa-summary-btn-hover-bg, #1f57e0);

    --cps-tab-inactive-bg:    var(--coa-summary-tab-bg, #f3f4f6);
    --cps-tab-inactive-text:  var(--coa-summary-tab-text, #4b5563);
    --cps-tab-inactive-brd:   var(--coa-summary-tab-border, #e5e7eb);
    --cps-tab-active-bg:      var(--coa-summary-tab-active-bg, #eaf1ff);
    --cps-tab-active-text:    var(--coa-summary-tab-active-text, #2b6cff);
    --cps-tab-active-brd:     var(--coa-summary-tab-active-border, #2b6cff);

    --cps-badge-bg:      var(--coa-summary-badge-bg, #ffffff);
    --cps-badge-text:    var(--coa-summary-badge-text, #2b6cff);
    --cps-badge-brd:     var(--coa-summary-badge-border, #2b6cff);

    --cps-btn-bg:        var(--coa-summary-btn-bg, #2b6cff);
    --cps-btn-text:      var(--coa-summary-btn-text, #ffffff);
    --cps-btn-hover-bg:  var(--coa-summary-btn-hover-bg, #1f57e0);
    --cps-btn-radius:    var(--coa-summary-btn-radius, 14px);
    --cps-btn-shadow:    0 6px 16px rgba(43, 108, 255, 0.18);

    --cps-viewall-text:  var(--coa-summary-viewall-text, #64748b);
    --cps-viewall-hover: var(--coa-summary-viewall-hover, #2b6cff);

    /* Layout */
    display: block;
    width: 100%;
    max-width: 720px;
    margin: 12px 0;
    color: var(--cps-text);
    box-sizing: border-box;
    line-height: 1.4;
}

.coa-product-summary *,
.coa-product-summary *::before,
.coa-product-summary *::after {
    box-sizing: border-box;
}

.coa-product-summary__box {
    background: var(--cps-bg);
    border: 1px solid var(--cps-border);
    border-radius: var(--cps-radius);
    padding: var(--cps-pad);
    display: flex;
    flex-direction: column;
    gap: var(--cps-gap);
}

/* ---- Header row: heading + strength badge ---- */
.coa-product-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---- Tabs: their own full-width row directly under the heading ---- */
.coa-product-summary__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* JS hides the whole row when the selected item/variation has no test
   types to offer, so an empty row never eats the box's column gap. */
.coa-product-summary__tabs[hidden] {
    display: none !important;
}

.coa-product-summary__tab {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--cps-tab-inactive-brd);
    background: var(--cps-tab-inactive-bg);
    color: var(--cps-tab-inactive-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    text-decoration: none;
}

.coa-product-summary__tab:hover:not(.is-active) {
    background: #e9ebef;
    color: #1f2937;
}

.coa-product-summary__tab:focus-visible {
    outline: 2px solid var(--cps-accent);
    outline-offset: 2px;
}

.coa-product-summary__tab.is-active {
    background: var(--cps-tab-active-bg);
    color: var(--cps-tab-active-text);
    border-color: var(--cps-tab-active-brd);
}

.coa-product-summary__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 1px solid var(--cps-badge-brd);
    color: var(--cps-badge-text);
    background: var(--cps-badge-bg);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Class rules with `display` normally beat the UA `[hidden]` rule via
   author-stylesheet precedence — force it back so a hidden badge is
   never a phantom empty pill on the right. */
.coa-product-summary__badge[hidden],
.coa-product-summary__tab[hidden] {
    display: none !important;
}

/* ---- Title + subtitle ---- */
.coa-product-summary__title {
    /* Lives inside the header flex row next to the badge — no stray
       top margin, and it may shrink/wrap instead of pushing the badge. */
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cps-text);
}

.coa-product-summary__subtitle {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--cps-muted);
    min-height: 1em;
}

.coa-product-summary__subtitle:empty {
    display: none;
}

/* ---- Body: certificate buttons + view-all ---- */
.coa-product-summary__body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.coa-product-summary__message {
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    color: var(--cps-muted);
    flex: 1 1 100%;
}

/* Row that holds the compact certificate columns side by side — one column
   per test type when several are present, otherwise the two latest of the
   single type. Grid + auto-fit means:
     • 1 column  → fills the available width cleanly.
     • 2 columns → two equal widths.
     • Below the 160px column minimum, they wrap to a single column so
       small-mobile widths stay usable. */
.coa-product-summary__cert-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    flex: 1 1 260px;
    min-width: 0;
}

.coa-product-summary__cert-row .coa-product-summary__cert {
    min-width: 0;
    width: 100%;
}

.coa-product-summary__cert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 12px 22px;
    background: var(--cps-btn-bg);
    color: var(--cps-btn-text) !important;
    border: 1px solid var(--cps-btn-bg);
    border-radius: var(--cps-btn-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: var(--cps-btn-shadow);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    text-align: center;
    letter-spacing: 0.01em;
    box-sizing: border-box;
}

.coa-product-summary__cert:hover,
.coa-product-summary__cert:focus-visible {
    background: var(--cps-btn-hover-bg);
    border-color: var(--cps-btn-hover-bg);
    color: var(--cps-btn-text) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(43, 108, 255, 0.24);
}

.coa-product-summary__cert:focus-visible {
    outline: 2px solid var(--cps-btn-hover-bg);
    outline-offset: 2px;
}

.coa-product-summary__viewall {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 6px 4px;
    color: var(--cps-viewall-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s ease;
    margin-left: auto;
}

.coa-product-summary__viewall:hover,
.coa-product-summary__viewall:focus-visible {
    color: var(--cps-viewall-hover);
    text-decoration: underline;
}

.coa-product-summary__viewall:focus-visible {
    outline: 2px solid var(--cps-viewall-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Expanded state: grouped listings ---- */
.coa-product-summary.is-expanded .coa-product-summary__body {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.coa-product-summary__group {
    border-top: 1px solid var(--cps-border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coa-product-summary__group:first-child {
    border-top: none;
    padding-top: 0;
}

.coa-product-summary__group-title {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cps-muted);
}

.coa-product-summary__group-certs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coa-product-summary__viewall-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.coa-product-summary.is-expanded .coa-product-summary__viewall {
    margin-left: 0;
}

/* ---- Responsive ---- */
@media ( max-width: 640px ) {
    .coa-product-summary__box {
        padding: 18px;
        gap: 12px;
        border-radius: 18px;
    }

    .coa-product-summary__title {
        font-size: 18px;
    }

    .coa-product-summary__tab {
        font-size: 13px;
        padding: 7px 12px;
    }

    .coa-product-summary__badge {
        font-size: 12px;
        padding: 5px 12px;
    }

    .coa-product-summary__cert {
        min-width: 0;
        flex: 1 1 100%;
        padding: 11px 18px;
        font-size: 14px;
    }

    /* Grid children shouldn't be forced full-row by the flex fallback
       above — the grid decides column count. */
    .coa-product-summary__cert-row .coa-product-summary__cert {
        flex: unset;
    }

    .coa-product-summary__viewall {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding-top: 4px;
    }
}

@media ( max-width: 400px ) {
    .coa-product-summary__header {
        gap: 8px;
    }

    /* Heading may wrap to two lines here — keep the badge hard right. */
    .coa-product-summary__badge {
        margin-left: auto;
        align-self: flex-start;
    }
}