/**
 * WPRaffle Theme — wpraffle.css
 * Styles the WPRaffles plugin's REAL competition card markup so it matches
 * the WPRaffle / Paragon aesthetic. Targets the plugin's actual BEM classes:
 *   .rc-card              — the card root (display:flex; flex-direction:column)
 *   .rc-card__title       — title (with .rc-card__title-alt, .rc-card__title-iw)
 *   .rc-card__image       — prize image (padding-top:65% aspect hack)
 *   .rc-card__draw-bar    — draw date bar
 *   .rc-card__countdown   — 4-unit countdown grid
 *   .rc-card__cash-bar    — cash alternative bar
 *   .rc-card__price       — price row
 *   .rc-card__progress    — sold/total + progress bar
 *   .rc-card__charity     — charity allocation line
 *   .rc-card__cta         — view competition button
 *   .rc-card__status      — status badge (+ --ended/--soldout/--soon)
 *   .raffle-list-grid     — [raffle_list] grid (has INLINE grid styles)
 *   li.raffle-product-card — WC shop-loop li (plugin resets its padding)
 *   .raffle-single-page-wrapper / .raffle-main-grid — single raffle page
 *
 * The plugin's --wpr-* palette is remapped via inline CSS in
 * WPRaffle_Theme_Integration::override_plugin_variables().
 */

/* ================================================================== *
 * GRID LAYOUT
 *
 * The [raffle_list] shortcode emits INLINE styles on .raffle-list-grid
 * (display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:24px)
 * which beat normal CSS. We override with !important on the columns + gap to
 * enforce the theme's 3-col desktop grid, and add padding 0.
 * ================================================================== */
.raffle-list-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	padding: 0 !important;
}
@media (max-width: 991.98px) {
	.raffle-list-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575.98px) {
	.raffle-list-grid { grid-template-columns: 1fr !important; }
}

/* The WC shop loop — plugin doesn't touch ul.products, theme's woocommerce.css
   sets the 3-col grid there. But make sure raffle li's don't add stray spacing. */
.woocommerce ul.products li.product.raffle-product-card,
ul.products li.raffle-product-card {
	width: auto;
	margin: 0;
}

/* Shortcode grid item wrapper — let the card fill it. */
.raffle-list-item { display: flex; }
.raffle-list-item > * { width: 100%; }

/* ================================================================== *
 * THE COMPETITION CARD (.rc-card)
 * ================================================================== */
.rc-card {
	background: #fff;
	border: 1px solid var(--wpr-border-color, #dee2e6);
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 0.5rem 1rem rgba(44, 44, 44, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	font-family: var(--wpr-font-sans, "Montserrat", sans-serif);
}
.rc-card:hover,
.rc-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 1rem 2.5rem rgba(44, 44, 44, 0.15);
	border-color: var(--wpr-accent, #e4678a);
}

/* Title — Paragon-style bold heading. */
.rc-card__title {
	font-family: var(--wpr-font-sans, "Montserrat", sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--wpr-dark, #2c2c2c);
	padding: 1rem 1.1rem 0.5rem;
}
.rc-card__title-alt {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wpr-accent, #e4678a);
	margin-top: 0.15rem;
}
.rc-card__title-iw {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wpr-accent-2, #5caeed);
	margin-top: 0.25rem;
}

/* Image — the plugin uses padding-top:65% for aspect ratio. Neutral
 * background so loading/empty images don't read as a coloured shape. */
.rc-card__image {
	padding-top: 65%; /* matches plugin default */
	position: relative;
	background: var(--wpr-light, #f6f6f6);
}
.rc-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rc-card__image-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wpr-accent, #e4678a);
}

/* Status badge (ENDED / SOLD OUT / ENDING SOON). */
.rc-card__status {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.75rem;
	border-radius: 50rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wpr-muted, #6c757d);
	z-index: 2;
}
.rc-card__status--ended { background: var(--wpr-muted, #6c757d); }
.rc-card__status--soldout { background: var(--wpr-danger, #dc3545); }
.rc-card__status--soon { background: var(--wpr-warning, #ffc107); color: var(--wpr-dark, #2c2c2c); }

/* Instant-win badge — the plugin's native styling (dark pill, green text,
 * bottom-centred over the image) is well-designed and theme-aware. We only
 * bump the radius to a full pill to match the rest of the theme's buttons. */
.rc-card__iw-badge {
	border-radius: 50rem !important;
}

/* Draw date bar. */
.rc-card__draw-bar {
	background: var(--wpr-dark, #2c2c2c);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0.45rem 1rem;
}

/* Countdown — 4-col grid. */
.rc-card__countdown {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.25rem;
	padding: 0.6rem 1rem;
	background: var(--wpr-light, #f6f6f6);
	border-bottom: 1px solid var(--wpr-border-color, #dee2e6);
}
.rc-card__cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.rc-card__cd-num {
	font-weight: 800;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	color: var(--wpr-dark, #2c2c2c);
	line-height: 1;
}
.rc-card__cd-label {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wpr-muted, #6c757d);
	margin-top: 0.2rem;
}

/* Cash alternative bar. */
.rc-card__cash-bar {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wpr-dark, #2c2c2c);
	text-align: center;
	padding: 0.4rem 1rem;
	background: rgba(99, 221, 146, 0.12);
	border-bottom: 1px solid var(--wpr-border-color, #dee2e6);
}

/* Price row — prominent accent. */
.rc-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.75rem 1.1rem 0.4rem;
}
.rc-card__price-amount {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--wpr-accent, #e4678a);
	line-height: 1;
}
.rc-card__price-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wpr-muted, #6c757d);
}

/* Progress — sold % + bar. */
.rc-card__progress { padding: 0.5rem 1.1rem 0.75rem; }
.rc-card__progress-stats {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wpr-muted, #6c757d);
	margin-bottom: 0.35rem;
}
.rc-card__progress-bar {
	height: 8px;
	border-radius: 50rem;
	background: var(--wpr-light, #f6f6f6);
	overflow: hidden;
}
.rc-card__progress-fill {
	height: 100%;
	border-radius: 50rem;
	transition: width 0.4s ease;
}

/* Charity line. */
.rc-card__charity {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	color: var(--wpr-muted, #6c757d);
	padding: 0 1.1rem 0.6rem;
}
.rc-card__charity .wpr-icon,
.rc-card__charity svg { color: var(--wpr-accent, #e4678a); width: 0.85rem; height: 0.85rem; }

/* CTA button — Paragon pill. */
.rc-card__cta {
	display: block;
	text-align: center;
	margin: 0 1.1rem 1.1rem;
	padding: 0.7rem 1rem;
	border-radius: 50rem;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--wpr-accent, #e4678a);
	color: #fff;
	transition: background 0.2s ease, transform 0.2s ease;
}
.rc-card__cta:hover,
.rc-card__cta:focus {
	background: var(--wpr-accent-dark, #d24e75);
	color: #fff;
	transform: translateY(-1px);
}
.rc-card__cta--closed { background: var(--wpr-muted, #6c757d); }
.rc-card__cta--closed:hover { background: #5a5b5d; }

/* Closed-card states — slightly faded. */
.rc-card--sold-out,
.rc-card--expired { opacity: 0.92; }

/* ================================================================== *
 * SINGLE RAFFLE PAGE
 *
 * IMPORTANT: the plugin replaces the entire single-product template via
 * template_include (priority 99), bypassing the theme's WC main-content
 * wrapper. Its own .raffle-container { max-width: 840px } makes the page
 * look boxed/narrow. We override to the site's full 1280px container so the
 * single raffle page matches the rest of the site.
 *
 * The plugin enqueues public.css on this page (after the theme stylesheet),
 * so we use !important to win source-order on the width caps.
 * ================================================================== */
.raffle-single-page-wrapper {
	padding: 2.5rem 0 !important;
	background: var(--wpr-light, #f6f6f6) !important;
}
.raffle-single-page-wrapper .raffle-container,
.raffle-container {
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 1.5rem !important;
}
.raffle-main-grid {
	gap: 2rem !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
}

/* Single-page image card. */
.raffle-image-card {
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 0.5rem 1.5rem rgba(44, 44, 44, 0.12);
}
.raffle-image-card img { width: 100%; height: auto; display: block; }

/* Single-page title. */
.raffle-title-main {
	font-family: var(--wpr-font-sans, "Montserrat", sans-serif);
	font-weight: 800;
	color: var(--wpr-dark, #2c2c2c);
}

/* Single-page price. */
.raffle-price-value {
	font-weight: 800;
	color: var(--wpr-accent, #e4678a);
}

/* Single-page progress bar. */
.raffle-progress-bar-wrap {
	height: 12px;
	border-radius: 50rem;
	background: var(--wpr-light, #f6f6f6);
	overflow: hidden;
}
.raffle-progress-bar-inner { border-radius: 50rem; }

/* Stats header row. */
.raffle-stats-header { gap: 1rem !important; margin-bottom: 1.5rem; }
.raffle-stat-box {
	background: #fff;
	border: 1px solid var(--wpr-border-color, #dee2e6);
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
}

/* Entry tabs — solid button style (both states filled). */
.raffle-entry-tabs {
	gap: 12px;
	border-bottom: none;
}
.raffle-tab-btn {
	border-radius: 0.5rem !important;
	font-weight: 700;
	padding: 10px 18px !important;
	background: var(--wpr-light, #f6f6f6);
	border: 1px solid var(--wpr-border-color, #e5e7eb) !important;
	color: var(--wpr-text-primary, #2c2c2c) !important;
}
.raffle-tab-btn:hover {
	background: var(--wpr-light, #efefef);
	color: var(--wpr-text-dark, #2c2c2c) !important;
}
.raffle-tab-btn.active {
	background: var(--wpr-accent, #e4678a) !important;
	border-color: var(--wpr-accent, #e4678a) !important;
	color: #fff !important;
}
/* The plugin's underline indicator is redundant for solid tabs. */
.raffle-tab-btn.active::after {
	display: none !important;
}

/* ================================================================== *
 * CHARITIES GRID ([raffle_charities] shortcode)
 * ================================================================== */
.raffle-charities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
@media (max-width: 991.98px) { .raffle-charities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .raffle-charities-grid { grid-template-columns: 1fr; } }

/* ================================================================== *
 * WINNERS / ENDED LIST
 * ================================================================== */
.raffle-ended-wrapper { padding: 1rem 0 !important; }
.raffle-winners-tabs {
	border-bottom: 2px solid var(--wpr-border-color, #dee2e6) !important;
	margin-bottom: 2rem !important;
}
.raffle-image-placeholder {
	border-radius: 0.5rem;
}