/* ===========================================================================
 * ROM SHOP CARDS
 * ---------------------------------------------------------------------------
 * Alle styling voor de productgrid van een shop-event (Kerstboomactie 2026).
 *
 * Hoort bij:
 *   rom-product-cart.php   [rom_product_cart] en [rom_trees_sold]
 *   rom-voetstuk.php       het voetstuk-vinkje
 *
 * Dit bestand vervangt de vorige rom-shop-cards.css én het losse blok dat je
 * eerder aan het einde toevoegde. Plak het in zijn geheel; rom-shop-cards-
 * extra.css heb je dan niet meer nodig.
 *
 * ELEMENTOR — DRIE CLASSES:
 *   Loop item, buitenste container  → rom-loop-card
 *   Price-widget in dat item        → rom-price-bauble
 *   Teller op donkere achtergrond   → rom-counter-light   (optioneel)
 *
 * INHOUD
 *   1. Kaart en kerstbal-prijs
 *   2. Winkelwagenblok
 *   3. Voorraadbalk
 *   4. Voetstuk-vinkje
 *   5. Verkoopteller
 * ======================================================================== */


/* ===========================================================================
 * 1 — KAART EN KERSTBAL-PRIJS
 * ======================================================================== */

/*
 * De bal wordt absoluut gepositioneerd binnen de kaart, dus de kaart moet een
 * positioneringscontext zijn. Vergeet je rom-loop-card, dan springt de bal
 * naar de hoek van het scherm.
 */
.rom-loop-card {
	position: relative;
}

.rom-price-bauble {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;

	width: 78px;
	height: 78px;
	border-radius: 50%;

	/* Het lichtpunt linksboven maakt van een platte cirkel een bal. */
	background: radial-gradient(circle at 33% 28%, #e8354c 0%, #c8102e 45%, #9c0b23 100%);
	box-shadow:
		0 4px 14px rgba(156, 11, 35, 0.35),
		inset 0 -4px 10px rgba(0, 0, 0, 0.18);

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

	/* Elementor zet marges op widgets; die zouden de bal verschuiven. */
	margin: 0 !important;
	padding: 0 !important;
}

/* Het gouden kapje bovenop. */
.rom-price-bauble::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 11px;
	background: #c98800;
	border-radius: 2px 2px 1px 1px;
}

/*
 * De prijs zelf. Elementor nest hem een paar niveaus diep en de Price-widget
 * heeft eigen kleurinstellingen, vandaar !important — anders wint de
 * widgetstyling van de widget zelf.
 */
.rom-price-bauble .price,
.rom-price-bauble .woocommerce-Price-amount,
.rom-price-bauble .elementor-widget-container {
	color: #ffffff !important;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 17px !important;
	line-height: 1.1;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

/* Een doorgestreepte oude prijs zou de bal laten overlopen. */
.rom-price-bauble del {
	display: none;
}

@media (max-width: 767px) {
	.rom-price-bauble {
		width: 66px;
		height: 66px;
		top: 12px;
		right: 12px;
	}
	.rom-price-bauble .price,
	.rom-price-bauble .woocommerce-Price-amount,
	.rom-price-bauble .elementor-widget-container {
		font-size: 15px !important;
	}
}


/* ===========================================================================
 * 2 — WINKELWAGENBLOK
 * ======================================================================== */

.rom-cart {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * Duwt het winkelwagenblok naar de onderkant van de kaart, zodat de knoppen
 * van alle drie de kaarten op één lijn staan ondanks omschrijvingen van
 * verschillende lengte.
 */
.rom-loop-card .elementor-widget-shortcode {
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * WooCommerce-reset, alleen binnen .rom-cart
 *
 * WooCommerce's eigen stylesheet richt zich op `.woocommerce div.product
 * form.cart`. Dat weegt zwaarder dan `.rom-cart form.cart`, dus zonder deze
 * blokken wint WooCommerce. Wat het doet:
 *
 *   margin-bottom: 2em    op het formulier
 *   float: left           op zowel het aantalveld als de knop
 *   width: 3.631em        op het aantalveld
 *   ::before / ::after    clearfix die in een flexbox een lege rij oplevert
 *
 * De selectors hieronder spiegelen die specificiteit in plaats van overal
 * !important te strooien, zodat je later nog gewoon iets kan overschrijven.
 *
 * Bewust NIET gekozen: WooCommerce's stylesheets uitschakelen op eventpagina's.
 * Dan verliest ook de melding "toegevoegd aan winkelwagen" haar opmaak, en
 * die verschijnt sinds de doorverwijzing weg is juist op deze pagina.
 * ------------------------------------------------------------------------ */

.rom-cart form.cart,
.woocommerce .rom-cart form.cart,
.woocommerce div.product .rom-cart form.cart {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* De clearfix van WooCommerce wordt in een flexbox een lege rij. */
.woocommerce .rom-cart form.cart::before,
.woocommerce .rom-cart form.cart::after,
.woocommerce div.product .rom-cart form.cart::before,
.woocommerce div.product .rom-cart form.cart::after {
	display: none;
	content: none;
}

.rom-cart .quantity,
.woocommerce .rom-cart .quantity,
.woocommerce div.product .rom-cart form.cart div.quantity {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
}

.rom-cart .quantity input.qty,
.woocommerce .rom-cart .quantity .qty,
.woocommerce div.product .rom-cart form.cart div.quantity .qty {
	width: 100%;
	max-width: none;
	padding: 12px;
	text-align: center;
	font-size: 15px;
	border: 1px solid #d6d9e0;
	border-radius: 6px;
	background: #ffffff;
	color: #1a1f2e;
}

/* WooCommerce laat de knop zweven; in een kolom hoort dat niet. */
.woocommerce .rom-cart form.cart .button,
.woocommerce div.product .rom-cart form.cart .button {
	float: none;
	vertical-align: baseline;
}

/*
 * !important is hier echt nodig: zowel het thema als Elementor stylen
 * `button` en `.button` met hogere specificiteit dan een losse class.
 * Zonder dit blijven de knoppen paars.
 */
.rom-cart button.single_add_to_cart_button,
.rom-cart .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	background: #f7a400 !important;
	background-color: #f7a400 !important;
	color: #1a1f2e !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	padding: 14px 24px !important;
	border: none !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.rom-cart button.single_add_to_cart_button:hover,
.rom-cart button.single_add_to_cart_button:focus {
	background: #c98800 !important;
	background-color: #c98800 !important;
	color: #1a1f2e !important;
}

.rom-cart-soldout {
	text-align: center;
	font-weight: 600;
	color: #4b5563;
	background: #f6f7f9;
	border-radius: 6px;
	padding: 14px;
	margin: 0;
}


/* ===========================================================================
 * 3 — VOORRAADBALK
 * ======================================================================== */

.rom-bar-labels {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	color: #4b5563;
	margin-bottom: 6px;
}

.rom-bar-labels strong {
	color: #1a1f2e;
	font-weight: 700;
}

.rom-bar-track {
	height: 7px;
	background: #eaecf0;
	border-radius: 4px;
	overflow: hidden;
}

.rom-bar-fill {
	height: 100%;
	background: #14503a;
	border-radius: 4px;
	transition: width 0.4s ease;
}

/* Onder een vijfde over: rood, als zachte hint dat het opraakt. */
.rom-bar.is-low .rom-bar-fill {
	background: #c8102e;
}

.rom-bar.is-low .rom-bar-labels strong {
	color: #c8102e;
}


/* ===========================================================================
 * 4 — VOETSTUK-VINKJE
 * ======================================================================== */

.rom-voetstuk {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff5e0;
	border: 1px solid #f3dca8;
	border-radius: 6px;
	padding: 12px 14px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
	color: #1a1f2e;
}

.rom-voetstuk:hover {
	background: #fff0d0;
}

.rom-voetstuk input[type="checkbox"] {
	margin: 2px 0 0;
	width: 16px;
	height: 16px;
	accent-color: #f7a400;
	flex-shrink: 0;
}

.rom-voetstuk strong {
	display: block;
	font-weight: 700;
}


/* ===========================================================================
 * 5 — VERKOOPTELLER
 * ======================================================================== */

.rom-counter {
	text-align: center;
	padding: 8px 0;
}

.rom-counter-number {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(3.5rem, 11vw, 6rem);
	font-weight: 700;
	line-height: 1;
	color: #14503a;
	letter-spacing: -0.02em;
}

.rom-counter-label {
	font-size: 1.0625rem;
	font-weight: 600;
	color: #4b5563;
	margin-top: 6px;
}

.rom-counter-track {
	max-width: 420px;
	margin: 20px auto 8px;
	height: 10px;
	background: #eaecf0;
	border-radius: 5px;
	overflow: hidden;
}

.rom-counter-fill {
	height: 100%;
	background: linear-gradient(90deg, #14503a, #f7a400);
	border-radius: 5px;
	transition: width 0.6s ease;
}

.rom-counter-goal {
	font-size: 0.875rem;
	color: #9ca3af;
}

/* Voor een teller op een donkere achtergrond: extra class rom-counter-light. */
.rom-counter.rom-counter-light .rom-counter-number { color: #ffffff; }
.rom-counter.rom-counter-light .rom-counter-label  { color: rgba(255, 255, 255, 0.85); }
.rom-counter.rom-counter-light .rom-counter-goal   { color: rgba(255, 255, 255, 0.6); }
.rom-counter.rom-counter-light .rom-counter-track  { background: rgba(255, 255, 255, 0.2); }