/**
 * WrickX Rewards — Frontend Styling
 * ============================================================================
 * Scoped entirely under .wrickx-* classes so it never leaks into other
 * theme styling. Uses CSS custom properties for the accent color so it can
 * be retheme'd from one place.
 * ============================================================================
 */

:root {
    --wrickx-accent: #e74c3c;
    --wrickx-accent-dark: #c0392b;
    --wrickx-text: #2c2c2c;
    --wrickx-muted: #6b6b6b;
    --wrickx-border: #e7e7e7;
    --wrickx-bg-card: #ffffff;
    --wrickx-bg-soft: #fafafa;
    --wrickx-positive: #1e8e3e;
    --wrickx-negative: #c0392b;
    --wrickx-radius: 10px;
}

/* ----------------------------------------------------------------------
   PRODUCT / CART / CHECKOUT EARN MESSAGE
   ---------------------------------------------------------------------- */
.wrickx-earn-points-msg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    color: var(--wrickx-text);
    background: var(--wrickx-bg-soft);
    border: 1px solid var(--wrickx-border);
    border-left: 3px solid var(--wrickx-accent);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 10px 0;
}

.wrickx-earn-points-msg .wrickx-points-value {
    color: var(--wrickx-accent-dark);
    font-weight: 700;
}

tr.wrickx-cart-points-row th,
tr.wrickx-cart-points-row td,
tr.wrickx-checkout-points-row th,
tr.wrickx-checkout-points-row td {
    border-top: 1px dashed var(--wrickx-border);
}

.wrickx-current-balance {
    color: var(--wrickx-muted);
}

/* ----------------------------------------------------------------------
   REDEEM WIDGET (Cart & Checkout)
   ---------------------------------------------------------------------- */
.wrickx-redeem-widget {
    background: var(--wrickx-bg-card);
    border: 1px solid var(--wrickx-border);
    border-radius: var(--wrickx-radius);
    padding: 16px 18px;
    margin: 16px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: opacity 0.15s ease;
}

.wrickx-redeem-widget.wrickx-loading {
    opacity: 0.55;
    pointer-events: none;
}

.wrickx-redeem-title {
    margin: 0 0 10px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--wrickx-text);
}

.wrickx-redeem-summary {
    margin-bottom: 12px;
    color: var(--wrickx-text);
}

.wrickx-redeem-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wrickx-redeem-controls label {
    font-size: 0.9em;
    color: var(--wrickx-muted);
}

.wrickx-redeem-points-input {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--wrickx-border);
    border-radius: 6px;
}

.wrickx-redeem-widget .button {
    border-radius: 6px;
    padding: 8px 16px;
}

.wrickx-redeem-apply-btn {
    background: var(--wrickx-accent) !important;
    color: #fff !important;
    border: none !important;
}

.wrickx-redeem-apply-btn:hover {
    background: var(--wrickx-accent-dark) !important;
}

.wrickx-redeem-remove-btn {
    background: transparent !important;
    color: var(--wrickx-negative) !important;
    border: 1px solid var(--wrickx-negative) !important;
}

.wrickx-redeem-note {
    margin: 10px 0 0;
    font-size: 0.82em;
    color: var(--wrickx-muted);
}

/* ----------------------------------------------------------------------
   MY ACCOUNT — REWARDS DASHBOARD
   ---------------------------------------------------------------------- */
.wrickx-rewards-dashboard {
    max-width: 100%;
}

.wrickx-rewards-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.wrickx-card {
    background: var(--wrickx-bg-card);
    border: 1px solid var(--wrickx-border);
    border-radius: var(--wrickx-radius);
    padding: 18px 16px;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wrickx-card--balance {
    border-left: 4px solid var(--wrickx-accent);
}

.wrickx-card-label {
    display: block;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wrickx-muted);
    margin-bottom: 6px;
}

.wrickx-card-value {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--wrickx-text);
}

.wrickx-activity-heading {
    margin: 0 0 12px;
    font-size: 1.1em;
    font-weight: 700;
}

.wrickx-no-activity {
    color: var(--wrickx-muted);
}

table.wrickx-activity-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--wrickx-bg-card);
    border: 1px solid var(--wrickx-border);
    border-radius: var(--wrickx-radius);
    overflow: hidden;
}

table.wrickx-activity-table th,
table.wrickx-activity-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--wrickx-border);
}

table.wrickx-activity-table thead th {
    background: var(--wrickx-bg-soft);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wrickx-muted);
}

table.wrickx-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.wrickx-points-positive {
    color: var(--wrickx-positive);
    font-weight: 600;
}

.wrickx-points-negative {
    color: var(--wrickx-negative);
    font-weight: 600;
}

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
    .wrickx-rewards-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrickx-redeem-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .wrickx-redeem-points-input {
        width: 100%;
    }

    table.wrickx-activity-table thead {
        display: none;
    }

    table.wrickx-activity-table,
    table.wrickx-activity-table tbody,
    table.wrickx-activity-table tr,
    table.wrickx-activity-table td {
        display: block;
        width: 100%;
    }

    table.wrickx-activity-table tr {
        border-bottom: 1px solid var(--wrickx-border);
        padding: 8px 0;
    }

    table.wrickx-activity-table td {
        border-bottom: none;
        padding: 4px 14px;
    }

    table.wrickx-activity-table td::before {
        content: attr(data-title) ": ";
        font-weight: 600;
        color: var(--wrickx-muted);
    }
}

@media (max-width: 782px) {
    .wrickx-rewards-summary-cards {
        grid-template-columns: 1fr 1fr;
    }
}