/**
 * CouponRovo Affiliate — brand theme overrides.
 *
 * Loaded after app.css. Aligns the affiliate UI with the CouponRovo
 * cream/orange palette and forces the light surface treatment, because
 * the "auto" dark-mode detection was resolving to dark against the
 * site's light theme and rendering an unreadable grey panel.
 *
 * Sampled brand values:
 *   Brand orange  #FF943D  (header search button)
 *   Page cream    #FFEFE2  (header and footer background)
 *
 * Contrast (WCAG AA requires 4.5:1 for body text):
 *   body  #2B2118 on #FFFFFF  15.75:1
 *   muted #6E5B4B on #FFFFFF   6.44:1
 *   body  #2B2118 on #FFEFE2  14.02:1
 *   dark  #2B2118 on #FF943D   7.17:1  (button label)
 *
 * White on #FF943D is only 2.20:1, so buttons use dark text on the brand
 * orange rather than white. That keeps the exact brand colour and is more
 * legible than darkening the orange to carry white text.
 */

/* ------------------------------------------------------------------
 * Force the light palette in every mode.
 * The [data-craff-theme] selectors below deliberately cover "auto",
 * "light" and "dark" so a system dark-mode preference cannot drag the
 * panel back to grey on this light-themed site.
 * ---------------------------------------------------------------- */

.craff-app,
.craff-app[data-craff-theme="auto"],
.craff-app[data-craff-theme="light"],
.craff-app[data-craff-theme="dark"] {
	--craff-accent: #ff943d;
	--craff-accent-alt: #ff6b35;
	--craff-accent-ink: #2b2118;

	--craff-bg: #fff7f0;
	--craff-surface: rgba(255, 255, 255, 0.88);
	--craff-surface-solid: #ffffff;
	--craff-border: #f0d9c4;

	--craff-text: #2b2118;
	--craff-muted: #6e5b4b;

	--craff-pos: #1a7f43;
	--craff-neg: #c62828;

	--craff-shadow: 0 10px 30px rgba(120, 72, 30, 0.10);
}

/* Same override inside a system dark-mode preference. */
@media (prefers-color-scheme: dark) {
	.craff-app,
	.craff-app[data-craff-theme="auto"],
	.craff-app[data-craff-theme="dark"] {
		--craff-bg: #fff7f0;
		--craff-surface: rgba(255, 255, 255, 0.88);
		--craff-surface-solid: #ffffff;
		--craff-border: #f0d9c4;
		--craff-text: #2b2118;
		--craff-muted: #6e5b4b;
		--craff-shadow: 0 10px 30px rgba(120, 72, 30, 0.10);
	}
}

/* ------------------------------------------------------------------
 * Surfaces
 * ---------------------------------------------------------------- */

.craff-app .craff-glass,
.craff-app .craff-card {
	background: var(--craff-surface-solid);
	border-color: var(--craff-border);
	/* Softer blur: the heavy saturate() read as muddy over cream. */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Warm tint on the stat cards so they read as a set. */
.craff-app .craff-stat {
	background: linear-gradient(160deg, #ffffff 0%, #fff7f0 100%);
}

.craff-app .craff-stat::after {
	background: radial-gradient(circle, rgba(255, 148, 61, 0.20), transparent 70%);
}

.craff-app .craff-stat--cashback::after,
.craff-app .craff-stat--balance::after {
	background: radial-gradient(circle, rgba(26, 127, 67, 0.18), transparent 70%);
}

/* ------------------------------------------------------------------
 * Buttons — dark ink on brand orange (7.17:1)
 * ---------------------------------------------------------------- */

.craff-app .craff-btn {
	background: linear-gradient(135deg, var(--craff-accent) 0%, var(--craff-accent-alt) 100%);
	color: var(--craff-accent-ink);
	font-weight: 700;
}

.craff-app .craff-btn:hover,
.craff-app .craff-btn:focus-visible {
	color: var(--craff-accent-ink);
	box-shadow: 0 8px 18px rgba(255, 107, 53, 0.34);
}

.craff-app .craff-btn--ghost {
	background: #ffffff;
	border: 1px solid var(--craff-border);
	color: var(--craff-text);
}

.craff-app .craff-btn--ghost:hover {
	background: #fff7f0;
	border-color: var(--craff-accent);
	color: var(--craff-text);
}

/* ------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------- */

.craff-app .craff-input {
	background: #ffffff;
	border-color: #e8d3bd;
	color: var(--craff-text);
}

.craff-app .craff-input::placeholder {
	color: #a0897a;
}

.craff-app .craff-input:focus {
	border-color: var(--craff-accent);
	box-shadow: 0 0 0 3px rgba(255, 148, 61, 0.26);
}

/* Labels were the worst casualty of the dark panel — pin them explicitly. */
.craff-app .craff-field > span,
.craff-app .craff-stat__label {
	color: var(--craff-muted);
}

.craff-app .craff-check span {
	color: var(--craff-text);
}

.craff-app .craff-check a,
.craff-app .craff-card a {
	color: #c2560d;
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Progress, tabs, chips
 * ---------------------------------------------------------------- */

.craff-app .craff-bar {
	background: #f3e2d2;
}

.craff-app .craff-bar > span {
	background: linear-gradient(90deg, var(--craff-accent), var(--craff-accent-alt));
}

.craff-app .craff-tab {
	border-color: var(--craff-border);
}

.craff-app .craff-tab.is-active {
	background: linear-gradient(135deg, var(--craff-accent), var(--craff-accent-alt));
	color: var(--craff-accent-ink);
}

.craff-app .craff-chip {
	color: var(--craff-text);
}

.craff-app .craff-chip--vip {
	background: linear-gradient(135deg, #ff943d, #e8571f);
	color: #2b2118;
}

/* ------------------------------------------------------------------
 * Tables and status pills
 * ---------------------------------------------------------------- */

.craff-app .craff-table tbody tr:hover {
	background: #fff7f0;
}

.craff-app .craff-status--pending,
.craff-app .craff-status--processing {
	background: #fdefd2;
	color: #8a5a00;
}

.craff-app .craff-status--approved,
.craff-app .craff-status--completed {
	background: #ddf3e4;
	color: #12693a;
}

.craff-app .craff-status--paid {
	background: #dde9fb;
	color: #17458f;
}

.craff-app .craff-status--rejected {
	background: #fbdedd;
	color: #a3231f;
}

/* ------------------------------------------------------------------
 * Notices, share box, toast
 * ---------------------------------------------------------------- */

.craff-app .craff-notice {
	background: #fff7f0;
	border-color: var(--craff-border);
}

.craff-app .craff-notice-item.is-unread {
	border-left-color: var(--craff-accent);
	background: #fff7f0;
}

.craff-app .craff-share-btn {
	background: #ffffff;
	border-color: var(--craff-border);
}

.craff-app .craff-share-btn:hover {
	border-color: var(--craff-accent);
}

.craff-app .craff-toast {
	background: #2b2118;
	color: #ffffff;
}

/* Header controls sit on cream, not on a dark panel. */
.craff-app .craff-icon-btn {
	background: #ffffff;
	border-color: var(--craff-border);
	color: var(--craff-text);
}

/* ------------------------------------------------------------------
 * Reward / coupon / tier cards
 * ---------------------------------------------------------------- */

.craff-app .craff-reward,
.craff-app .craff-coupon,
.craff-app .craff-creative,
.craff-app .craff-tier {
	background: #ffffff;
	border-color: var(--craff-border);
}

.craff-app .craff-coupon {
	background: linear-gradient(160deg, #ffffff 0%, #fff7f0 100%);
}

.craff-app .craff-code {
	background: #fff7f0;
	border-color: #e8d3bd;
	color: #2b2118;
}