/*
 * Kelly's cart — checkout readability fixes (staging snags, 25 Aug 2026).
 * The reskinned checkout page (18630) places the cart engine's form markup
 * inside a dark-green Elementor container; the engine's own CSS was written
 * for the live site's white page, so its dark text and translucent selected
 * state disappear against the dark background. These rules restore contrast
 * without touching the engine CSS or the Elementor pages.
 */

/* 1. The engine's checkout form (new + existing customer): light card. */
.page-id-18630 .checkout-content {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
}

/* 2. Selected state of the insurance/collection dropdowns: the engine uses
   rgba(91,194,167,.2), which reads as dark-on-dark over the green section.
   Use the solid equivalent of that tint over white, as it renders on live. */
select.collection-option.active {
	background-color: rgb(222, 243, 237) !important;
}

/* 3. "Unsure about your storage size?" block: heading was left dark-on-dark
   while its sibling headings are near-white. Match them. */
.page-id-18630 .elementor-element-458e570 h1,
.page-id-18630 .elementor-element-458e570 h2,
.page-id-18630 .elementor-element-458e570 h3,
.page-id-18630 .elementor-element-458e570 h4,
.page-id-18630 .elementor-element-458e570 p {
	color: #fafafa !important; /* Elementor's per-widget selector outranks us without this */
}