/* ==========================================================================
   Kidoclassic Mall, Kidoclassic Core plugin overrides
   --------------------------------------------------------------------------
   The plugin ships its own front-end CSS. We do not touch the plugin; instead
   we override its presentation here so its UI feels native to the store.

   Decisions made deliberately:
     - Points & Rewards shipped in gold/amber. On a pink-and-magenta women's
       boutique that reads like a coupon from a different shop. We move it into
       the brand: blush surfaces, magenta ink, a hot-pink star. The +/- history
       colours stay green/crimson because they carry meaning (gained vs spent).
     - The currency switcher is restyled to sit quietly in the navbar.
     - WhatsApp green is left exactly as the plugin sets it. It is a universal
       signal and must not be rebranded. We only make sure it sits clear of our
       own fixed UI (it lives bottom-right; nothing of ours competes there).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Points & Rewards
   -------------------------------------------------------------------------- */

/* Balance widget */
.kc-points-balance {
	background: linear-gradient(135deg, var(--kido-pink-soft), var(--kido-magenta-wash)) !important;
	border: 1px solid var(--kido-border-strong) !important;
	color: var(--kido-magenta-deeper) !important;
	font-family: var(--kido-body);
}
.kc-points-balance--guest {
	background: var(--kido-surface-2) !important;
	border-color: var(--kido-border) !important;
	color: var(--kido-ink-2) !important;
}
.kc-points-icon { color: var(--kido-pink); }
.kc-points-number { color: var(--kido-magenta-deeper); }
.kc-points-label { color: var(--kido-magenta); }

/* Earn previews on product and cart pages */
.kc-points-earn-preview {
	background: var(--kido-magenta-tint) !important;
	color: var(--kido-magenta-deeper) !important;
	border: 1px solid var(--kido-border) !important;
	border-radius: var(--kido-r-sm) !important;
	font-family: var(--kido-body);
	font-weight: 500;
}
.kc-points-cart-preview th,
.kc-points-cart-preview td { color: var(--kido-magenta-deeper) !important; }

/* Checkout redemption field */
.kc-points-redeem {
	background: var(--kido-magenta-tint) !important;
	border: 1px solid var(--kido-border-strong) !important;
	border-radius: var(--kido-r-md) !important;
}
.kc-points-redeem__title {
	font-family: var(--kido-display) !important;
	font-size: 18px !important;
	color: var(--kido-ink) !important;
}
.kc-points-redeem__balance,
.kc-points-redeem__max { color: var(--kido-ink-2) !important; }
.kc-points-redeem__input {
	border: 1px solid var(--kido-border-strong) !important;
	border-radius: var(--kido-r-sm) !important;
	font-family: var(--kido-body);
}
.kc-points-redeem__input:focus {
	border-color: var(--kido-magenta) !important;
	box-shadow: 0 0 0 2px var(--kido-magenta-wash) !important;
}
.kc-points-redeem .kc-apply-points,
.kc-points-redeem .kc-clear-points {
	border-radius: var(--kido-r-pill) !important;
	font-weight: 600 !important;
	border: none !important;
	padding: 9px 18px !important;
}
.kc-points-redeem .kc-apply-points {
	background: var(--kido-magenta) !important;
	color: #fff !important;
}
.kc-points-redeem .kc-apply-points:hover { background: var(--kido-magenta-deep) !important; }
.kc-points-redeem .kc-clear-points {
	background: transparent !important;
	color: var(--kido-magenta) !important;
	box-shadow: inset 0 0 0 1.5px var(--kido-border-strong) !important;
}

/* History table */
.kc-points-history__table thead th {
	background: var(--kido-surface-2) !important;
	color: var(--kido-magenta-deeper) !important;
	font-family: var(--kido-body);
}
.kc-points-history__table th,
.kc-points-history__table td { border-bottom-color: var(--kido-border) !important; }
.kc-points-history--empty,
.kc-points-history--guest {
	background: var(--kido-surface-2) !important;
	color: var(--kido-ink-2) !important;
	border-radius: var(--kido-r-sm) !important;
}
/* Gained vs spent keep their meaning, tuned to the brand reds/greens. */
.kc-points-pos { color: var(--kido-green) !important; }
.kc-points-neg { color: var(--kido-crimson) !important; }

.kc-points-history__pagination .page-numbers {
	border: 1px solid var(--kido-border-strong) !important;
	border-radius: var(--kido-r-xs) !important;
	color: var(--kido-magenta) !important;
}
.kc-points-history__pagination .page-numbers.current {
	background: var(--kido-magenta) !important;
	border-color: var(--kido-magenta) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Multi-Currency switcher
   The plugin renders a <form class="kc-currency-switcher"> with a <select>.
   In the navbar it should read as a quiet utility control, not a form.
   -------------------------------------------------------------------------- */

.kc-currency-switcher select {
	min-width: 88px !important;
	padding: 7px 30px 7px 12px !important;
	font-family: var(--kido-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--kido-ink) !important;
	background-color: var(--kido-surface) !important;
	border: 1px solid var(--kido-border-strong) !important;
	border-radius: var(--kido-r-pill) !important;
	/* Recolour the chevron to the brand ink. */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232B1A20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-position: right 10px center !important;
}
.kc-currency-switcher select:hover { border-color: var(--kido-magenta) !important; }
.kc-currency-switcher select:focus {
	border-color: var(--kido-magenta) !important;
	box-shadow: 0 0 0 2px var(--kido-magenta-wash) !important;
}

/* In the mobile drawer the switcher goes full width to be easy to tap. */
.kido-drawer .kc-currency-switcher,
.kido-drawer .kc-currency-switcher select { width: 100% !important; }