/* =========================================================================
 * CocoStore Loyalty Rewards Styles
 *
 * Enqueued conditionally on:
 *   - /reward-program/ (public marketing page)
 *   - /my-account/loyalty_reward/ (private dashboard)
 *
 * Prefix: ccs-rp-  (reward-program public page)
 *         ccs-loyalty- (my-account dashboard)
 *
 * @since 2026-05-10
 * ========================================================================= */

:root {
    --ccs-red: #d32f2f;
    --ccs-red-dark: #b71c1c;
    --ccs-black: #0a0a0a;
    --ccs-white: #ffffff;
    --ccs-gray-bg: #f5f5f5;
    --ccs-gray-border: #e0e0e0;
    --ccs-success: #2e7d32;
}

/* =========================================================================
 * PART A — /reward-program/ public page
 * ========================================================================= */

.ccs-rp-wrapper {
    margin: -20px -20px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hero */
.ccs-rp-hero {
    background-color: var(--ccs-black);
    color: var(--ccs-white);
    text-align: center;
    padding: 60px 24px;
}

.ccs-rp-hero h1 {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--ccs-white);
}

.ccs-rp-hero-sub {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
    line-height: 1.6;
    color: var(--ccs-white);
}

/* How It Works — three-column grid */
.ccs-rp-howitworks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 60px 24px;
    background-color: var(--ccs-gray-bg);
    max-width: 960px;
    margin: 0 auto;
}

.ccs-rp-card {
    background: var(--ccs-white);
    border-top: 4px solid var(--ccs-red);
    padding: 32px 24px;
    text-align: center;
}

.ccs-rp-card-num {
    font-size: 4rem;
    font-weight: 900;
    color: var(--ccs-red);
    line-height: 1;
    margin-bottom: 12px;
}

.ccs-rp-card h3 {
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
    color: var(--ccs-black);
}

.ccs-rp-card p {
    font-size: 1rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}

/* CTA band */
.ccs-rp-cta {
    background-color: var(--ccs-red);
    color: var(--ccs-white);
    text-align: center;
    padding: 60px 24px;
}

.ccs-rp-cta h2 {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 24px;
    color: var(--ccs-white);
}

.ccs-rp-btn {
    display: inline-block;
    background: var(--ccs-white);
    color: var(--ccs-red);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 32px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.ccs-rp-btn:hover {
    background: var(--ccs-black);
    color: var(--ccs-white);
    text-decoration: none;
}

.ccs-rp-cta-secondary {
    margin-top: 16px;
    font-size: 0.9rem;
    opacity: 0.9;
    color: var(--ccs-white);
}

.ccs-rp-cta-secondary a {
    color: var(--ccs-white);
    text-decoration: underline;
    font-weight: 600;
}

.ccs-rp-cta-secondary a:hover {
    opacity: 0.8;
}

/* FAQ accordion */
.ccs-rp-faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 24px;
}

.ccs-rp-faq h2 {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 32px;
    /* --ccs-black is a literal #0a0a0a from the loyalty palette and matches
     * the dark-mode body bg — invisible. Use the global body-text variable
     * so dark/light themes both stay readable. Open-state stays red below. */
    color: var(--ccs-text);
    text-align: center;
}

[data-theme="light"] .ccs-rp-faq h2 {
    color: var(--ccs-black);
}

.ccs-rp-faq-item {
    border-bottom: 1px solid var(--ccs-gray-border);
    padding: 16px 0;
}

.ccs-rp-faq-item:first-of-type {
    border-top: 1px solid var(--ccs-gray-border);
}

.ccs-rp-faq-item summary {
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Use the body-text variable so collapsed questions are readable in
     * dark mode (the previous --ccs-black = #0a0a0a matched body bg). The
     * [open] state below intentionally flips this to --ccs-red. */
    color: var(--ccs-text);
    padding: 4px 0;
}

[data-theme="light"] .ccs-rp-faq-item summary {
    color: var(--ccs-black);
}

.ccs-rp-faq-item summary::-webkit-details-marker {
    display: none;
}

.ccs-rp-faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--ccs-red);
    flex-shrink: 0;
    margin-left: 16px;
}

.ccs-rp-faq-item[open] summary::after {
    content: '\2212'; /* minus sign */
}

.ccs-rp-faq-item[open] summary {
    color: var(--ccs-red);
}

/* FAQ answer body — match the site's standard dark-mode body color
 * (--ccs-text = #f5f5f5). The previous --ccs-text-secondary (#b0b0b0) won
 * cascade but read as washed-out gray on the #0a0a0a hero/FAQ background. */
.ccs-rp-faq-item p {
    margin: 12px 0 4px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ccs-text);
}

/* Light-mode override: keep the slightly darker gray that was here before. */
[data-theme="light"] .ccs-rp-faq-item p {
    color: #444;
}


/* =========================================================================
 * PART B — /my-account/loyalty_reward/ dashboard
 *
 * The banner renders inside .wlr-myaccount-page, which sits inside
 * .woocommerce-account .woocommerce. Theme main.css sets:
 *   .woocommerce-account .woocommerce h2 { color: var(--ccs-text-heading); }
 * at specificity 0-2-1. All banner selectors must beat that to avoid
 * dark-on-dark text. We scope via .woocommerce-account .ccs-loyalty-banner
 * (0-2-0 base) + child class (0-3-0+) which cleanly beats 0-2-1.
 * ========================================================================= */

/* Banner — single container for heading + tagline + balance + progress */
.woocommerce-account .ccs-loyalty-banner {
    background: var(--ccs-black);
    color: var(--ccs-white);
    padding: 32px;
    border-left: 4px solid var(--ccs-red);
    margin-bottom: 24px;
}

/* Heading — specificity 0-3-0 beats theme's 0-2-1 on h2 */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-banner-title {
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
    color: var(--ccs-white);
    text-align: left;
}

/* Tagline */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-banner-sub {
    font-size: 1rem;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.85);
}

/* Balance text — explicit white, not inherited */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-balance {
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--ccs-white);
}

/* Points number — big red on black */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-balance strong {
    font-size: 2rem;
    font-weight: 900;
    color: var(--ccs-red);
}

/* Progress bar track — translucent white on black bg */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-progress-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    overflow: hidden;
}

/* Progress bar fill — stays red */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-progress-fill {
    height: 100%;
    background: var(--ccs-red);
    border-radius: 6px;
    transition: width 0.3s ease;
    min-width: 2px;
}

/* Ready-to-redeem pill — green on black, high contrast */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-ready {
    background: var(--ccs-success);
    color: var(--ccs-white);
    padding: 12px 16px;
    margin-top: 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

/* Progress label — light on black */
.woocommerce-account .ccs-loyalty-banner .ccs-loyalty-progress-label {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
    font-size: 0.95rem;
}


/* =========================================================================
 * Restyle existing WPLoyalty plugin output
 * ========================================================================= */

/* "My Points" heading bar */
.wlr-myaccount-page .wlr-heading {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    border-left-color: var(--ccs-red) !important;
}

/* Points cards container */
.wlr-myaccount-page .wlr-points-container {
    gap: 16px;
}

/* Individual point cards */
.wlr-myaccount-page #wlr-available-points,
.wlr-myaccount-page #wlr-redeemed-points,
.wlr-myaccount-page #wlr-used-rewards {
    background: var(--ccs-white) !important;
    border: none !important;
    border-top: 2px solid var(--ccs-black) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
}

/* Card LABELS — small uppercase, single-line
 * IDs: #wlr-available-points-heading, #wlr-redeemed-points-heading,
 *      #wlr-used-rewards-heading
 * These are <span> elements containing "Available points" etc. */
.wlr-myaccount-page #wlr-available-points-heading,
.wlr-myaccount-page #wlr-redeemed-points-heading,
.wlr-myaccount-page #wlr-used-rewards-heading {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Card VALUE NUMBERS — big bold red
 * IDs: #wlr-available-point-value, #wlr-redeemed-point-value,
 *      #wlr-used-reward-value-count */
.wlr-myaccount-page #wlr-available-point-value,
.wlr-myaccount-page #wlr-redeemed-point-value,
.wlr-myaccount-page #wlr-used-reward-value-count {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: var(--ccs-red) !important;
}

/* Active tab indicator */
.wlr-myaccount-page .wlr-my-rewards-title.active {
    border-bottom-color: var(--ccs-red) !important;
}

.wlr-myaccount-page .wlr-my-rewards-title.active h4,
.wlr-myaccount-page .wlr-my-rewards-title.active i {
    color: var(--ccs-red) !important;
}

/* Level progress bar */
.wlr-myaccount-page .wlr-progress-bar .wlr-progress-level {
    background-color: var(--ccs-red) !important;
}

/* Theme color overrides */
.wlr-myaccount-page .wlr-theme-color-apply {
    color: var(--ccs-red) !important;
}

/* Action buttons */
.wlr-myaccount-page .wlr-button {
    background-color: var(--ccs-red) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wlr-myaccount-page .wlr-button:hover {
    background-color: var(--ccs-red-dark) !important;
}

/* Empty state */
.wlr-myaccount-page .wlr-norecord-container {
    font-size: 1.1rem;
    font-weight: 600;
}


/* =========================================================================
 * Mobile responsive
 * ========================================================================= */

@media (max-width: 768px) {
    .ccs-rp-hero h1 {
        font-size: 2rem;
    }

    .ccs-rp-hero-sub {
        font-size: 1rem;
    }

    .ccs-rp-howitworks {
        grid-template-columns: 1fr;
        padding: 40px 16px;
    }

    .ccs-rp-cta {
        padding: 40px 16px;
    }

    .ccs-rp-cta h2 {
        font-size: 1.5rem;
    }

    .ccs-rp-faq {
        padding: 40px 16px;
    }

    .woocommerce-account .ccs-loyalty-banner {
        padding: 24px 20px;
    }

    .woocommerce-account .ccs-loyalty-banner .ccs-loyalty-banner-title {
        font-size: 1.5rem;
    }

    .woocommerce-account .ccs-loyalty-banner .ccs-loyalty-balance strong {
        font-size: 1.5rem;
    }
}