/* ==========================================================================
   CBG — Self Service Dashboard "Add Products" Modal Reskin (v2)
   Conservative version: only colors, fonts, spacing, and borders.
   Does NOT touch display/layout mode of .ssd-modal or .wpr-add-new-subscription
   since those appear to be JS-controlled for sizing/positioning.
   ========================================================================== */

/* --- Close button --- */
/* Only style the actual clickable link, not its wrapper (wrapper being
   colored too was causing a red circle to peek out from behind it) */
.ssd-close-modal {
	background: transparent !important;
}

.ssd-close-modal-link {
	background: #008bcb !important;
	border-radius: 6px !important;
	color: #ffffff !important;
	font-weight: bold !important;
}

/* --- Search bar: hidden per request --- */
.ssd-search-modal-header {
	display: none !important;
}

/* --- Modal background --- */
#ssd-modal-content,
.ssd-modal {
	background: #eaf5fb !important; /* light tint of brand blue #008bcb */
}

/* --- Intro copy, injected via CSS (no HTML changes needed) --- */
/* Heading — attached to the modal content wrapper so it renders first,
   as its own element (lets it have a different size than the subtext) */
#ssd-modal-content::before {
	content: "Add More to This Month's Box";
	display: block;
	width: 100%;
	font-family: 'Cooper Hewitt', sans-serif;
	color: #1a1a1a;
	font-size: 32px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 8px;
}

/* Subtext — attached right above the product grid */
.wpr-add-new-subscription::before {
	content: "Fresh enrichment picks to keep the engagement, interaction, and adventure going for your pup.";
	display: block;
	width: 100%;
	font-family: 'Cooper Hewitt', sans-serif;
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 20px;
}

/* --- Product grid spacing --- */
/* Adds breathing room WITHOUT changing display mode (keeps existing flex) */
.wpr-add-new-subscription {
	gap: 20px !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
}

/* --- Each product card: fixed width prevents stretching when alone in a row --- */
.wpr-add-new-subscription > div {
	background: #ffffff !important;
	border: 1px solid #eeeeee !important;
	border-radius: 12px !important;
	padding: 16px !important;
	text-align: center !important;
	flex: 0 0 260px !important;
	max-width: 260px !important;
}

.wpr-product-image img {
	border-radius: 8px !important;
	object-fit: contain !important;
}

.wpr-product-name {
	color: #1a1a1a !important;
	font-family: 'Cooper Hewitt', sans-serif !important;
	font-weight: 700 !important;
	margin: 10px 0 6px !important;
}

/* --- Pricing --- */
.wpr-product-price del {
	color: #999999 !important;
	opacity: 0.8;
}

.wpr-product-price ins {
	color: #d60087 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

/* --- Buttons: color only, no flex-direction/width changes --- */
.wpr-product-add-button a,
.wpr-product-add-button button {
	border-radius: 8px !important;
	font-family: 'Cooper Hewitt', sans-serif !important;
	font-weight: 700 !important;
}

.wpr-product-add-button a:first-child,
.wpr-product-add-button button:first-child {
	background: #008bcb !important;
	border: none !important;
	color: #ffffff !important;
}

.wpr-product-add-button a:nth-child(2),
.wpr-product-add-button button:nth-child(2) {
	background: #ffffff !important;
	border: 2px solid #008bcb !important;
	color: #008bcb !important;
}

/* --- Disclaimer box, injected via CSS, sits below the product grid --- */
.wpr-add-new-subscription::after {
	content: "Note: Items like Mystery Toys, Limited Ingredient Treats, and Single Ingredient Treats may include products from past boxes and can differ from what's pictured. Anything not listed by its specific product name (e.g. \201CSodaPup Lick Mat\201D) is subject to change.";
	display: block;
	flex-basis: 100%; /* forces this onto its own row in the flex-wrap layout */
	order: 9999; /* keeps it last regardless of how many product cards exist */
	width: 100%;
	max-width: 600px;
	margin: 24px auto 0;
	padding: 12px 16px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 8px;
	font-family: 'Cooper Hewitt', sans-serif;
	font-size: 12px;
	color: #666666;
	text-align: center;
	line-height: 1.5;
}

/* --- Cart/checkout recurring totals panel --- */
/* Hides the "Starting: [date]" text, since AutomateWoo adjusts the real
   first shipment date after checkout and this pre-checkout calculation
   doesn't reflect that. The "Recurring total every 2 months $X" line
   stays visible and already conveys the useful info without a wrong date.
   Scoped specifically to the recurring totals title row so it doesn't
   affect description text elsewhere on the page (e.g. shipping methods). */
.wcs-recurring-totals-panel__title .wc-block-components-totals-item__description {
	display: none !important;
}

/* The "Details" toggle/panel below it — separate element, hidden too since
   there's nothing meaningful left to expand once the date above is hidden */
.wcs-recurring-totals-panel__details {
	display: none !important;
}