/**
 * WDZ Toolkit — IO Integration Stylesheet
 *
 * Beautifies InflatableOffice-rendered output across category pages, product
 * pages, mega-menu, upsell carousel, and AI-generated content (blog posts +
 * city pages). Targets IO plugin classes — works on any IO parent theme
 * (io-kenos, Neon, Upscale, Bubbles, etc.) because IO's class names are
 * theme-agnostic.
 *
 * Phase B (v1.2.0) — migrated from per-site WordPress Customizer →
 * Additional CSS into the plugin. After this CSS ships, the Customizer
 * Additional CSS panel on each client site can be cleared.
 *
 * Brand color variables at top — override these in Theme Settings later to
 * recolor without rewriting selectors.
 */

/* ============================================
   BRAND COLOR VARIABLES
   Override via :root selector in client custom CSS to retheme without
   touching the rest of this file.
   ============================================ */

:root {
	--wdz-io-accent-primary: #ff6b6b;       /* Coral — primary accent */
	--wdz-io-accent-secondary: #feca57;     /* Mustard — secondary accent / highlight */
	--wdz-io-accent-tertiary: #48dbfb;      /* Sky — tertiary */
	--wdz-io-accent-quaternary: #ff9ff3;    /* Pink — quaternary */
	--wdz-io-text-on-dark: #ffffff;
	--wdz-io-product-title: #6b21a8;        /* Royal purple — product titles */
	--wdz-io-product-price: #ea580c;        /* Burnt orange — pricing */
	--wdz-io-button-purple-from: #a855f7;
	--wdz-io-button-purple-to: #7e22ce;
	--wdz-io-button-orange-from: #f97316;
	--wdz-io-button-orange-to: #ea580c;
	--wdz-io-detail-bg: #f9fafb;
	--wdz-io-detail-border: #f97316;
	--wdz-io-detail-label: #6b7280;
	--wdz-io-detail-value: #111827;
	--wdz-io-brand-navy: #0F3460;           /* WDZ master brand navy */
	--wdz-io-brand-teal: #16A596;           /* WDZ link teal */
	--wdz-io-brand-red-hover: #C8102E;      /* WDZ link hover red */
}

/* ============================================
   IO CATEGORY PAGES — TEXT & HEADING BEAUTIFY
   (Works on ALL category pages — scoped safe)
   ============================================ */

/* Main Category Heading "Bounce Houses for Rent" */
.io_category_wrapper .catNameIO {
	font-family: 'Lilita One', cursive !important;
	font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
	font-weight: 400 !important;
	text-align: center !important;
	color: var(--wdz-io-text-on-dark) !important;
	letter-spacing: 1.5px !important;
	margin: 30px 0 20px 0 !important;
	padding: 15px 20px !important;
	text-shadow:
		3px 3px 0 rgba(0, 0, 0, 0.15),
		0 4px 20px rgba(0, 0, 0, 0.25) !important;
	position: relative !important;
	line-height: 1.2 !important;
	animation: wdz-fade-in-down 0.8s ease-out;
}

.io_category_wrapper .catNameIO::after {
	content: "";
	display: block;
	width: 120px;
	height: 5px;
	margin: 18px auto 0;
	background: linear-gradient(
		90deg,
		var(--wdz-io-accent-primary),
		var(--wdz-io-accent-secondary),
		var(--wdz-io-accent-tertiary),
		var(--wdz-io-accent-quaternary)
	);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.io_category_wrapper .catNameIO .io_forrent {
	font-family: 'Lilita One', cursive !important;
	font-weight: 400 !important;
	opacity: 0.92;
	font-size: 0.85em !important;
}

/* Short Category Description Box */
.cat_div_wrapper > .io_cat_description,
.cat_div_wrapper > .io_cat_description p,
.cat_div_wrapper > .io_cat_description span,
.cat_div_wrapper > .io_cat_description li {
	font-family: 'Montserrat', sans-serif !important;
	color: var(--wdz-io-text-on-dark) !important;
	font-size: 17px !important;
	line-height: 1.75 !important;
	font-weight: 400 !important;
}

.cat_div_wrapper > .io_cat_description {
	text-align: center !important;
	max-width: 900px !important;
	margin: 25px auto !important;
	padding: 25px 35px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-radius: 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Landing Pages / Service Area Line */
.page-content > .io_landingpages,
.page-content > .io_landingpages p,
.page-content > .io_landingpages span {
	font-family: 'Montserrat', sans-serif !important;
	color: var(--wdz-io-text-on-dark) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
}

.page-content > .io_landingpages {
	text-align: center !important;
	max-width: 850px !important;
	margin: 20px auto !important;
	padding: 18px 30px !important;
	background: linear-gradient(
		135deg,
		rgba(255, 107, 107, 0.25),
		rgba(254, 202, 87, 0.25)
	) !important;
	border-left: 4px solid var(--wdz-io-accent-secondary) !important;
	border-right: 4px solid var(--wdz-io-accent-primary) !important;
	border-radius: 12px !important;
	letter-spacing: 0.3px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

.page-content > .io_landingpages .io_city_list {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 800 !important;
	color: var(--wdz-io-accent-secondary) !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Long Description (big paragraph block) */
.page-content > .io_cat_longdescription,
.page-content > .io_cat_longdescription p,
.page-content > .io_cat_longdescription span,
.page-content > .io_cat_longdescription li,
.page-content > .io_cat_longdescription div {
	font-family: 'Montserrat', sans-serif !important;
	color: var(--wdz-io-text-on-dark) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.85 !important;
}

.page-content > .io_cat_longdescription a {
	color: var(--wdz-io-accent-secondary) !important;
	text-decoration: underline !important;
	font-weight: 600 !important;
}

.page-content > .io_cat_longdescription a:hover {
	color: var(--wdz-io-accent-primary) !important;
}

.page-content > .io_cat_longdescription {
	text-align: left !important;
	max-width: 1000px !important;
	margin: 35px auto !important;
	padding: 35px 45px !important;
	background: rgba(0, 0, 0, 0.18) !important;
	border-radius: 20px !important;
	border-top: 3px solid rgba(255, 255, 255, 0.2) !important;
	border-bottom: 3px solid rgba(255, 255, 255, 0.2) !important;
	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	position: relative;
}

.page-content > .io_cat_longdescription p {
	margin: 0 0 14px 0 !important;
}

.page-content > .io_cat_longdescription p:last-child {
	margin-bottom: 0 !important;
}

.page-content > .io_cat_longdescription p:empty {
	display: none !important;
}

.page-content > .io_cat_longdescription::before {
	content: "\1F388";
	position: absolute;
	top: -18px;
	left: 40px;
	font-size: 32px;
	background: var(--wdz-io-accent-primary);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Smooth entrance animation */
@keyframes wdz-fade-in-down {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile responsive tweaks for category pages */
@media (max-width: 768px) {
	.io_category_wrapper .catNameIO {
		font-size: 2rem !important;
		padding: 10px !important;
		letter-spacing: 1px !important;
	}

	.cat_div_wrapper > .io_cat_description,
	.page-content > .io_landingpages {
		padding: 18px 20px !important;
		font-size: 15px !important;
	}

	.page-content > .io_cat_longdescription,
	.page-content > .io_cat_longdescription p,
	.page-content > .io_cat_longdescription span,
	.page-content > .io_cat_longdescription li {
		padding: 25px 20px !important;
		font-size: 15px !important;
	}

	.page-content > .io_cat_longdescription p {
		padding: 0 !important;
	}

	.page-content > .io_cat_longdescription::before {
		left: 20px;
		width: 42px;
		height: 42px;
		font-size: 26px;
	}
}

/* ============================================
   IO PRODUCT INFO CARD
   ============================================ */

.io_product_infobox {
	background: #ffffff !important;
	border-radius: 20px !important;
	padding: 30px 35px !important;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	margin: 20px 0 !important;
}

.io_product_infobox .io_product_title {
	color: var(--wdz-io-product-title) !important;
	font-size: 34px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
	margin-bottom: 14px !important;
}

.io_product_infobox .io_star_rating {
	margin-bottom: 14px !important;
}

/* Price box */
.io_product_infobox .io_product_price_box {
	background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
	border: 2px solid #fdba74 !important;
	border-radius: 14px !important;
	padding: 16px 22px !important;
	margin: 10px 0 !important;
	overflow: hidden !important;
}

.io_product_infobox .io_product_price_top_left,
.io_product_infobox .io_product_price_left {
	color: var(--wdz-io-product-price) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	margin: 0 !important;
}

.io_product_infobox .io_product_price_top_right,
.io_product_infobox .io_product_price_right {
	color: var(--wdz-io-detail-label) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	margin: 0 !important;
	padding-top: 6px !important;
}

/* Button row — IO appends product IDs to button class names, so we use
   attribute-prefix selectors to match ALL product IDs, not just one.
   Original Customizer CSS targeted .add_cart_3338653 which is hardcoded
   to one product. This generalized version works for any product. */
.io_product_infobox [class*="add_cart_"],
.io_product_infobox [class*="check_delivery_"],
.io_product_infobox [class*="calc_price_map_"] {
	margin-right: 10px !important;
	margin-top: 12px !important;
	margin-bottom: 0 !important;
}

.io_product_infobox .io_button {
	border-radius: 10px !important;
	padding: 12px 24px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.3px !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
	color: #fff !important;
	border: none !important;
}

.io_product_infobox #bookNowBtn {
	background: linear-gradient(
		135deg,
		var(--wdz-io-button-orange-from) 0%,
		var(--wdz-io-button-orange-to) 100%
	) !important;
}

.io_product_infobox #bookNowBtn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(234, 88, 12, 0.35) !important;
}

.io_product_infobox #checkDeliveryButton {
	background: linear-gradient(
		135deg,
		var(--wdz-io-button-purple-from) 0%,
		var(--wdz-io-button-purple-to) 100%
	) !important;
}

.io_product_infobox #checkDeliveryButton:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(126, 34, 206, 0.35) !important;
}

/* Product Information block */
.io_product_infobox .io_product_detailbox {
	margin-top: 20px !important;
	padding-top: 18px !important;
	border-top: 2px dashed #e5e7eb !important;
}

.io_product_infobox .io_product_subtitle {
	color: var(--wdz-io-product-title) !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	margin-bottom: 12px !important;
}

.io_product_infobox .io_product_desc {
	color: #374151 !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
}

.io_product_infobox .io_product_desc p {
	margin-bottom: 10px !important;
}

/* Detail boxes — 3 in one row on desktop */
.io_product_infobox .io_product_detail_box {
	display: inline-flex !important;
	width: calc(33.333% - 8px) !important;
	box-sizing: border-box !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: var(--wdz-io-detail-bg) !important;
	border-left: 4px solid var(--wdz-io-detail-border) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	margin: 6px 4px 6px 0 !important;
	vertical-align: top !important;
}

.io_product_infobox .io_product_detail_box:first-of-type {
	margin-top: 18px !important;
}

.io_product_infobox .io_product_detail_box p {
	margin: 0 !important;
}

.io_product_infobox .io_product_circuits_left,
.io_product_infobox .io_product_dimensions_left,
.io_product_infobox .io_product_footprint_left {
	color: var(--wdz-io-detail-label) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}

.io_product_infobox .io_product_circuits_right,
.io_product_infobox .io_product_dimensions_right,
.io_product_infobox .io_product_footprint_right {
	color: var(--wdz-io-detail-value) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}

/* Phrase input — also generalized from per-product class to attribute-prefix */
.io_product_infobox [class*="io_phrase_"] input {
	border: 2px solid #e5e7eb !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
}

/* Mobile product card */
@media (max-width: 768px) {
	.io_product_infobox {
		padding: 22px 20px !important;
	}

	.io_product_infobox .io_product_title {
		font-size: 26px !important;
	}

	.io_product_infobox .io_product_price_top_left,
	.io_product_infobox .io_product_price_left {
		font-size: 22px !important;
	}

	.io_product_infobox [class*="add_cart_"],
	.io_product_infobox [class*="check_delivery_"],
	.io_product_infobox [class*="calc_price_map_"] {
		display: block !important;
		margin-right: 0 !important;
		margin-bottom: 8px !important;
	}

	.io_product_infobox .io_button {
		width: 100% !important;
		text-align: center !important;
	}

	.io_product_infobox .io_product_detail_box {
		display: flex !important;
		width: 100% !important;
		margin: 6px 0 !important;
	}
}

/* ============================================
   "YOU MIGHT ALSO BE INTERESTED IN" — UPSELL CAROUSEL
   ============================================ */

.io_product_upsell {
	margin: 60px 0 40px !important;
	padding: 40px 30px !important;
}

.io_product_upsell .io_upsell_h3 {
	color: var(--wdz-io-text-on-dark) !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	text-align: center !important;
	margin-bottom: 40px !important;
	letter-spacing: -0.3px !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.io_product_upsell .io_page_carousel_cell {
	padding: 0 14px !important;
	margin-right: 8px !important;
}

.io_product_upsell .page-carousel-link {
	display: block !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.15),
		0 2px 8px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.3s ease !important;
	text-decoration: none !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
	padding-bottom: 4px !important;
}

.io_product_upsell .page-carousel-link:hover {
	transform: translateY(-6px) !important;
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.25),
		0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.io_product_upsell .page-carousel-image {
	width: 100% !important;
	height: 180px !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
}

.io_product_upsell .page-carousel-link:hover .page-carousel-image {
	transform: scale(1.05) !important;
}

/* Carousel product name */
.io_product_upsell .page-carousel-name {
	color: var(--wdz-io-product-title) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	text-align: center !important;
	padding: 14px 12px 6px 12px !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
}

/* Carousel product price */
.io_product_upsell .page-carousel-price {
	color: var(--wdz-io-product-price) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	text-align: center !important;
	padding: 0 12px 14px 12px !important;
}

/* Flickity navigation arrows */
.io_product_upsell .flickity-prev-next-button {
	background: #ffffff !important;
	width: 44px !important;
	height: 44px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

.io_product_upsell .flickity-prev-next-button:hover {
	background: var(--wdz-io-accent-secondary) !important;
}

/* Flickity page dots */
.io_product_upsell .flickity-page-dots .dot {
	background: #ffffff !important;
	opacity: 0.5 !important;
}

.io_product_upsell .flickity-page-dots .dot.is-selected {
	opacity: 1 !important;
}

/* Mobile carousel tweaks */
@media (max-width: 768px) {
	.io_product_upsell {
		margin: 40px 0 30px !important;
		padding: 25px 10px !important;
	}

	.io_product_upsell .io_upsell_h3 {
		font-size: 22px !important;
		margin-bottom: 25px !important;
	}

	.io_product_upsell .page-carousel-image {
		height: 150px !important;
	}

	.io_product_upsell .page-carousel-name {
		font-size: 15px !important;
	}
}

/* ============================================
   AI-GENERATED BODY TEXT VISIBILITY
   Makes blog posts AND city pages readable on dark theme backgrounds.
   Targets .wdz-entry-content which is the wrapper rendered by both
   page-city.php and the AI blog template.
   ============================================ */

body.single-post .wdz-entry-content,
body.single-post .wdz-entry-content p,
body.single-post .wdz-entry-content li,
body.single-post .wdz-entry-content ul,
body.single-post .wdz-entry-content ol,
body.single-post .wdz-entry-content span,
body.single-post .wdz-entry-content div,
body.page .wdz-entry-content,
body.page .wdz-entry-content p,
body.page .wdz-entry-content li,
body.page .wdz-entry-content ul,
body.page .wdz-entry-content ol,
body.page .wdz-entry-content span,
body.page .wdz-entry-content div {
	color: #222 !important;
}

/* Bold text and headings — use brand dark blue */
body.single-post .wdz-entry-content strong,
body.single-post .wdz-entry-content h2,
body.single-post .wdz-entry-content h3,
body.single-post .wdz-entry-content h4,
body.page .wdz-entry-content strong,
body.page .wdz-entry-content h2,
body.page .wdz-entry-content h3,
body.page .wdz-entry-content h4 {
	color: var(--wdz-io-brand-navy) !important;
}

/* Keep links in brand teal */
body.single-post .wdz-entry-content a,
body.page .wdz-entry-content a {
	color: var(--wdz-io-brand-teal) !important;
}

body.single-post .wdz-entry-content a:hover,
body.page .wdz-entry-content a:hover {
	color: var(--wdz-io-brand-red-hover) !important;
}

/* Make sure the "Book Now" CTA button text stays white */
body.single-post .wdz-entry-content a[href*="book"],
body.single-post .wdz-entry-content a[href*="Book"],
body.single-post .wdz-entry-content a[href*="reserve"],
body.page .wdz-entry-content a[href*="book"],
body.page .wdz-entry-content a[href*="Book"],
body.page .wdz-entry-content a[href*="reserve"] {
	color: #fff !important;
}