/**
 * store.css
 * Store colour tokens -- edit these to retheme the entire store.
 *
 * Usage: enqueue this stylesheet on all store pages (store, product,
 * cart, checkout, order-confirmation templates).
 *
 * To retheme for a new client:
 *   1. Change the values in :root below.
 *   2. Done. No PHP files need touching.
 */

:root {
    /* Primary brand colour */
    --store-brand:              #a5b897;
    --store-brand-dark:         #89997a;  /* darker variant, used on cart submit button */

    /* Backgrounds */
    --store-surface:            rgba(198, 195, 182, 0.20);   /* info box fill */
    --store-brand-tint:         rgba(198, 195, 182, 0.08);   /* info box fill */
    --store-brand-tint-border:  rgba(183, 128, 87, 0.30);   /* info box border */
    --store-error-tint:         rgba(220, 53, 69, 0.08);    /* error box fill */
    --store-error-tint-border:  rgba(220, 53, 69, 0.30);    /* error box border */

    /* Discount / success */
    --store-discount:           #6a775f;

    /* Pay button (Stripe / checkout) */
    --store-pay-btn:            #A4B796;
    --store-pay-btn-border:     #89997a;

    /* Text */
    --store-btn-text:           #ffffff;
}


/* -----------------------------------------------------------------
   Brand-coloured elements
   ----------------------------------------------------------------- */

/* Primary accent -- icons, links, badges */
.store-brand-color {
    color: var(--store-brand);
}

/* Order summary / cart totals sidebar */
.store-summary-box {
	background: var(--store-brand-tint);
    border: 1px solid var(--store-brand-tint-border);
}

/* Info / notice boxes (painting note, shipping rates) */
.store-info-box {
    background: var(--store-brand-tint);
    border: 1px solid var(--store-brand-tint-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.store-info-box i {
    color: var(--store-brand);
}

/* Error / validation boxes */
.store-error-box {
    background: var(--store-error-tint);
    border: 1px solid var(--store-error-tint-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

/* Discount row in totals */
.store-discount-row,
.store-discount-row th,
.store-discount-row td {
    color: var(--store-discount) !important;
}

/* Item quantity badge (checkout summary) */
.store-qty-badge {
    background: var(--store-brand);
}

/* -----------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------- */

/* Main CTA -- "Proceed to checkout", "Continue shopping" etc. */
.btn-store-primary {
    background-color: var(--store-brand-dark);
    border-color: var(--store-brand);
    color: var(--store-btn-text);
}

.btn-store-primary:hover,
.btn-store-primary:focus {
    background-color: var(--store-brand);
    border-color: var(--store-brand);
    color: var(--store-btn-text);
}

/* Browse / success CTA -- "Continue shopping", "Thank you" page */
.btn-store-brand {
    background-color: var(--store-brand);
    border-color: var(--store-brand);
    color: var(--store-btn-text);
}

.btn-store-brand:hover,
.btn-store-brand:focus {
    background-color: var(--store-brand-dark);
    border-color: var(--store-brand-dark);
    color: var(--store-btn-text);
}

/* Pay button (Stripe checkout page) */
.btn-store-pay {
    background-color: var(--store-pay-btn);
    border-color: var(--store-pay-btn-border);
    color: var(--store-btn-text);
}

.btn-store-pay:hover,
.btn-store-pay:focus {
    background-color: var(--store-pay-btn-border);
    border-color: var(--store-pay-btn-border);
    color: var(--store-btn-text);
}

/* -----------------------------------------------------------------
   Checkout shipping summary box
   ----------------------------------------------------------------- */

.store-shipping-summary {
    background: var(--store-brand-tint);
    border: 1px solid var(--store-brand-tint-border);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

/* -----------------------------------------------------------------
   Order confirmation success icon ring
   ----------------------------------------------------------------- */

.store-success-icon-ring {
    background: var(--store-brand-dark);  /* intentionally not a var -- one-off */
}

.store-success-icon-ring i {
    color: #FFFFFF;
}

/* -----------------------------------------------------------------
   Subscriber discount message (cart page, below email field)
   ----------------------------------------------------------------- */

#subscriber-msg {
    color: var(--store-discount);
}

/* -----------------------------------------------------------------
   Stripe Payment Element appearance overrides
   These are passed via JS -- see checkout.php appearance object.
   Duplicated here for reference only; not applied by CSS.

   colorPrimary: var(--store-pay-btn)    -> #A4B796
   ----------------------------------------------------------------- */