/* WC Savings Badges — Frontend Styles */

/* ─── Variables ──────────────────────────────────────────── */
:root {
    --wcsb-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wcsb-radius:        10px;
    --wcsb-border-width:  1.5px;
    --wcsb-gap:           10px;

    /* Badge colour tokens */
    --wcsb-gst-bg:        #f0fdf4;
    --wcsb-gst-border:    #86efac;
    --wcsb-gst-text:      #166534;
    --wcsb-gst-icon:      #22c55e;

    --wcsb-bank-bg:       #fefce8;
    --wcsb-bank-border:   #fde047;
    --wcsb-bank-text:     #713f12;
    --wcsb-bank-icon:     #eab308;

    --wcsb-total-bg:      #f0fdf4;
    --wcsb-total-border:  #4ade80;
    --wcsb-total-text:    #14532d;
    --wcsb-total-icon:    #16a34a;

    --wcsb-coupon-bg:     #fdf2f8;
    --wcsb-coupon-border: #f0abfc;
    --wcsb-coupon-text:   #701a75;
    --wcsb-coupon-icon:   #d946ef;

    --wcsb-check-color:   #16a34a;
}

/* ─── Wrapper ────────────────────────────────────────────── */
.wcsb-wrapper {
    font-family: var(--wcsb-font);
    margin: 16px 0;
    width: 100%;
}

/* ─── Grid ───────────────────────────────────────────────── */
.wcsb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wcsb-gap);
}

/* ─── Badge base ─────────────────────────────────────────── */
.wcsb-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--wcsb-radius);
    border: var(--wcsb-border-width) solid transparent;
    position: relative;
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease;
}

.wcsb-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* Wide badges span both columns */
.wcsb-badge--wide {
    grid-column: 1 / -1;
}

/* ─── Badge variants ─────────────────────────────────────── */
.wcsb-badge--gst {
    background-color: var(--wcsb-gst-bg);
    border-color:     var(--wcsb-gst-border);
    color:            var(--wcsb-gst-text);
}

.wcsb-badge--bank {
    background-color: var(--wcsb-bank-bg);
    border-color:     var(--wcsb-bank-border);
    color:            var(--wcsb-bank-text);
}

.wcsb-badge--total {
    background-color: var(--wcsb-total-bg);
    border-color:     var(--wcsb-total-border);
    color:            var(--wcsb-total-text);
}

.wcsb-badge--coupon {
    background-color: var(--wcsb-coupon-bg);
    border-color:     var(--wcsb-coupon-border);
    color:            var(--wcsb-coupon-text);
}

/* ─── Icon ───────────────────────────────────────────────── */
.wcsb-badge__icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Body ───────────────────────────────────────────────── */
.wcsb-badge__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

/* ─── Check ──────────────────────────────────────────────── */
.wcsb-check {
    display: none; /* shown via JS after body renders to avoid layout shift */
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--wcsb-check-color);
}

/* ─── Amount ─────────────────────────────────────────────── */
.wcsb-badge__amount {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* ─── Label ──────────────────────────────────────────────── */
.wcsb-badge__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.wcsb-badge__label--main {
    font-size: 13px;
    font-weight: 700;
}

/* ─── Sub-label ──────────────────────────────────────────── */
.wcsb-badge__sub {
    font-size: 11px;
    opacity: .75;
    line-height: 1.3;
}

/* ─── Coupon code button ─────────────────────────────────── */
.wcsb-coupon-code {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1.5px dashed var(--wcsb-coupon-icon);
    background: transparent;
    color: var(--wcsb-coupon-text);
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.wcsb-coupon-code:hover,
.wcsb-coupon-code:focus {
    background: var(--wcsb-coupon-icon);
    color: #fff;
    outline: none;
}

.wcsb-coupon-code.wcsb-copied {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .wcsb-grid {
        grid-template-columns: 1fr;
    }

    .wcsb-badge--wide {
        grid-column: 1;
    }
}

/* ─── Custom badge dynamic colour variants ───────────────── */
.wcsb-badge--custom-green  { background-color:#f0fdf4; border-color:#86efac; color:#166534; }
.wcsb-badge--custom-blue   { background-color:#eff6ff; border-color:#93c5fd; color:#1e40af; }
.wcsb-badge--custom-yellow { background-color:#fefce8; border-color:#fde047; color:#713f12; }
.wcsb-badge--custom-pink   { background-color:#fdf2f8; border-color:#f0abfc; color:#701a75; }
.wcsb-badge--custom-purple { background-color:#f5f3ff; border-color:#c4b5fd; color:#4c1d95; }
.wcsb-badge--custom-orange { background-color:#fff7ed; border-color:#fdba74; color:#7c2d12; }
.wcsb-badge--custom-teal   { background-color:#f0fdfa; border-color:#5eead4; color:#134e4a; }
.wcsb-badge--custom-red    { background-color:#fff1f2; border-color:#fca5a5; color:#7f1d1d; }