/*
 * NGW Dynamic Pricing — Frontend Styles
 * Scoped to .ngwdp-* prefix. Minimal, theme-neutral.
 * Uses CSS custom properties so themes can override without !important.
 */

/* ── Variables ────────────────────────────────────────────── */
:root {
    --ngwdp-accent:      #C0009B;
    --ngwdp-accent-lt:   #fdf0fb;
    --ngwdp-accent-bd:   #e8a8de;
    --ngwdp-success:     #16a34a;
    --ngwdp-success-lt:  #f0fdf4;
    --ngwdp-success-bd:  #bbf7d0;
    --ngwdp-tx1:         #111827;
    --ngwdp-tx2:         #6b7280;
    --ngwdp-bd:          #e5e7eb;
    --ngwdp-surf:        #f9fafb;
    --ngwdp-r:           8px;
    --ngwdp-rsm:         5px;
    --ngwdp-ease:        all .15s ease;
}

/* ============================================================
   1. Volume Pricing Table
   ============================================================ */

.ngwdp-volume-table {
    margin: 1.2em 0;
    font-size: .9em;
    transition: opacity .2s ease;
}

.ngwdp-volume-table--loading {
    opacity: .4;
    pointer-events: none;
}

.ngwdp-volume-table__title {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 .6em;
    color: var(--ngwdp-tx1);
}

/* ── Vertical layout (table) ──────────────────────────────── */
.ngwdp-vt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: inherit;
}

.ngwdp-vt-table th {
    text-align: left;
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ngwdp-tx2);
    padding: 0 10px 6px;
    border-bottom: 2px solid var(--ngwdp-bd);
}

.ngwdp-vt-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ngwdp-surf);
    color: var(--ngwdp-tx1);
    vertical-align: middle;
}

.ngwdp-vt-row:last-child td {
    border-bottom: none;
}

.ngwdp-vt-row.is-active td {
    background: var(--ngwdp-accent-lt);
}

.ngwdp-vt-row.is-active .ngwdp-vt-qty {
    font-weight: 700;
    color: var(--ngwdp-accent);
}

.ngwdp-vt-qty  { font-weight: 600; }
.ngwdp-vt-price { font-weight: 600; }

.ngwdp-vt-savings__badge {
    display: inline-block;
    padding: 2px 7px;
    background: var(--ngwdp-success-lt);
    color: var(--ngwdp-success);
    border: 1px solid var(--ngwdp-success-bd);
    border-radius: 20px;
    font-size: .85em;
    font-weight: 700;
}

/* ── Horizontal layout (pills) ────────────────────────────── */
.ngwdp-vt-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ngwdp-vt-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    background: var(--ngwdp-surf);
    border: 1.5px solid var(--ngwdp-bd);
    border-radius: var(--ngwdp-r);
    min-width: 80px;
    text-align: center;
    transition: var(--ngwdp-ease);
    gap: 3px;
}

.ngwdp-vt-pill.is-active {
    border-color: var(--ngwdp-accent);
    background: var(--ngwdp-accent-lt);
    box-shadow: 0 0 0 3px rgba(192,0,155,.1);
}

.ngwdp-vt-pill__qty {
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ngwdp-tx2);
}

.ngwdp-vt-pill.is-active .ngwdp-vt-pill__qty {
    color: var(--ngwdp-accent);
}

.ngwdp-vt-pill__price {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--ngwdp-tx1);
}

.ngwdp-vt-pill__savings {
    font-size: .75em;
    font-weight: 700;
    color: var(--ngwdp-success);
    white-space: nowrap;
}

/* ============================================================
   2. You Saved Badge
   ============================================================ */

.ngwdp-you-saved th {
    padding: 10px 0 0;
}

.ngwdp-you-saved__badge {
    display: block;
    text-align: center;
    padding: 10px 16px;
    background: var(--ngwdp-success-lt);
    color: var(--ngwdp-success);
    border: 1.5px solid var(--ngwdp-success-bd);
    border-radius: 30px;
    font-size: .9em;
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
}

/* Keep the WooCommerce price span inline within the badge text */
.ngwdp-you-saved__badge .woocommerce-Price-amount,
.ngwdp-you-saved__badge .woocommerce-Price-currencySymbol,
.ngwdp-you-saved__badge bdi {
    display: inline;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

/* ============================================================
   3. Customer Notifications
   ============================================================ */

/* Uses WooCommerce's native .woocommerce-message / woocommerce-info
   classes — no extra styling needed for theme compatibility. */

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 480px ) {
    .ngwdp-vt-pills {
        flex-direction: column;
    }

    .ngwdp-vt-pill {
        flex-direction: row;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
    }
}