/**
 * Rox Clock Generator - red theme
 * Colors: #eb2626 (button), #20141c (background), #731c22 (stroke), #ff5a5a (text)
 */

/* Full-page dark theme when viewing a clock generator product */
body.rox-clock-product-page {
	--rox-red: #eb2626;
	--rox-dark: #20141c;
	--rox-stroke: #731c22;
	--rox-text: #ff5a5a;
}

body.rox-clock-product-page,
body.rox-clock-product-page #main,
body.rox-clock-product-page .site-main,
body.rox-clock-product-page main,
body.rox-clock-product-page .jupiterx-main-content,
body.rox-clock-product-page .content-area,
body.rox-clock-product-page .jupiterx-content-area,
body.rox-clock-product-page .jupiterx-main-wrapper {
	background: var(--rox-dark) !important;
}

body.rox-clock-product-page .woocommerce,
body.rox-clock-product-page.single-product div.product {
	background: var(--rox-dark) !important;
}

body.rox-clock-product-page.single-product div.product .summary {
	background: transparent !important;
	color: var(--rox-text);
}

body.rox-clock-product-page .product_title,
body.rox-clock-product-page .woocommerce-product-details__short-description,
body.rox-clock-product-page .product_meta {
	color: var(--rox-text);
}

/* Hide category meta line (e.g., "Category: Uncategorized") on clock product page */
body.rox-clock-product-page .product_meta .posted_in {
	display: none !important;
}

body.rox-clock-product-page .price,
body.rox-clock-product-page .amount {
	color: var(--rox-text) !important;
}

body.rox-clock-product-page .single_add_to_cart_button,
body.rox-clock-product-page .product .single_add_to_cart_button {
	background: var(--rox-red) !important;
	border-color: var(--rox-stroke) !important;
	color: #fff !important;
}

body.rox-clock-product-page .single_add_to_cart_button:hover,
body.rox-clock-product-page .product .single_add_to_cart_button:hover {
	background: var(--rox-text) !important;
	border-color: var(--rox-red) !important;
	color: #fff !important;
}

body.rox-clock-product-page .woocommerce-product-gallery,
body.rox-clock-product-page .woocommerce-product-gallery__wrapper,
body.rox-clock-product-page .woocommerce-product-gallery__image {
	background: var(--rox-dark) !important;
	border: 1px solid var(--rox-stroke);
	border-radius: 6px;
}

body.rox-clock-product-page .woocommerce-product-gallery__image img {
	background: var(--rox-dark);
}

body.rox-clock-product-page .flex-viewport,
body.rox-clock-product-page .woocommerce-product-gallery .flex-viewport {
	background: var(--rox-dark) !important;
	border: 1px solid var(--rox-stroke);
}

body.rox-clock-product-page .rox-clock-preview-wrapper .flex-viewport,
body.rox-clock-product-page .rox-clock-preview-wrapper .flexslider,
body.rox-clock-product-page .rox-clock-preview-wrapper .woocommerce-product-gallery__wrapper {
	overflow: visible !important;
}

body.rox-clock-product-page .rox-clock-preview-wrapper,
body.rox-clock-product-page .rox-clock-live-preview {
	background: #90808c !important;
	overflow: visible;
}

body.rox-clock-product-page .rox-clock-preview-wrapper .woocommerce-product-gallery__image {
	overflow: visible;
}

/* Hide the gallery trigger (magnifying glass / full-screen link) so it doesn't show as a bar */
body.rox-clock-product-page .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Clock options section */
.rox-clock-generator {
	--rox-red: #eb2626;
	--rox-dark: #20141c;
	--rox-stroke: #731c22;
	--rox-text: #ff5a5a;
	background: var(--rox-dark);
	border: 2px solid var(--rox-stroke);
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.rox-clock-generator p,
.rox-clock-generator .label,
.rox-clock-generator label,
.rox-clock-generator span.label {
	color: var(--rox-text);
}

.rox-clock-generator p strong,
.rox-clock-generator .label .required,
.rox-clock-generator .required {
	color: var(--rox-text);
}

.rox-clock-generator select,
.rox-clock-generator input[type="text"],
.rox-clock-generator input[type="color"],
.rox-clock-generator textarea {
	background: var(--rox-dark);
	border: 1px solid var(--rox-stroke);
	border-radius: 4px;
	color: var(--rox-text);
}

.rox-clock-generator input::placeholder,
.rox-clock-generator textarea::placeholder {
	color: var(--rox-text);
	opacity: 0.7;
}

.rox-clock-generator select:focus,
.rox-clock-generator input[type="text"]:focus,
.rox-clock-generator textarea:focus {
	border-color: var(--rox-red);
	outline: none;
}

.rox-clock-generator select option {
	background: var(--rox-dark);
	color: var(--rox-text);
}

.rox-clock-generator .button,
.rox-clock-generator button[type="button"] {
	background: var(--rox-red) !important;
	border-color: var(--rox-stroke) !important;
	color: #fff !important;
}

.rox-clock-generator .button:hover,
.rox-clock-generator button[type="button"]:hover {
	background: var(--rox-text) !important;
	border-color: var(--rox-red) !important;
	color: #fff !important;
}

.rox-clock-generator small {
	color: var(--rox-text);
	opacity: 0.9;
}

.rox-clock-generator .rox-clock-preview-disclaimer {
	margin: 1rem 0 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--rox-stroke);
	border-radius: 6px;
	background: rgba(235, 38, 38, 0.08);
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--rox-text);
}

.rox-clock-generator #rox_clock_background_image_section {
	background: rgba(32, 20, 28, 0.6);
	border: 1px solid var(--rox-stroke);
	border-radius: 6px;
	padding: 1rem;
	margin-top: 0.5rem;
}

.rox-clock-generator #rox_clock_ai_preview {
	border: 1px solid var(--rox-stroke);
	border-radius: 4px;
	padding: 0.5rem;
}

.rox-clock-generator #rox_clock_ai_preview_img {
	border-color: var(--rox-stroke);
}

.rox-clock-generator .rox-clock-background-radios label {
	color: var(--rox-text);
}

.rox-clock-generator input[type="radio"]:checked + *,
.rox-clock-generator .rox-clock-background-radios label:has(input:checked) {
	color: var(--rox-text);
}

.rox-clock-generator input[type="radio"] {
	accent-color: var(--rox-red);
}

#rox_clock_solid_color_hex,
#rox_clock_text_color_hex {
	color: var(--rox-text);
}

/* -----------------------------------------------------------------------------
   Shortcode [rox_clock_configurator] — match single product clock layout / theme
   ----------------------------------------------------------------------------- */

.rox-clock-configurator-shortcode.rox-clock-product-page {
	--rox-red: #eb2626;
	--rox-dark: #20141c;
	--rox-stroke: #731c22;
	--rox-text: #ff5a5a;
	background: var(--rox-dark);
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	box-sizing: border-box;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Grid beats theme float/% widths so preview + options stay side by side */
.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 1.5rem 2rem;
	width: 100%;
}

@media (min-width: 768px) {
	.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (min-width: 1200px) {
	.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product {
		grid-template-columns: minmax(320px, 1.08fr) minmax(300px, 0.92fr);
		gap: 2rem 2.5rem;
	}
}

.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product .woocommerce-product-gallery,
.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product .summary {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	clear: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product .woocommerce-product-gallery {
	margin: 0;
	min-width: 0;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product .summary {
	background: transparent;
	color: var(--rox-text);
	margin: 0;
	min-width: 0;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .product_title {
	margin-top: 0;
	margin-bottom: 0.35rem;
	line-height: 1.2;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .summary .price {
	margin-top: 0;
	margin-bottom: 1rem;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .product_title,
.rox-clock-configurator-shortcode.rox-clock-product-page .product_meta {
	color: var(--rox-text);
}

.rox-clock-configurator-shortcode.rox-clock-product-page .price,
.rox-clock-configurator-shortcode.rox-clock-product-page .amount {
	color: var(--rox-text) !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .woocommerce-product-gallery,
.rox-clock-configurator-shortcode.rox-clock-product-page .woocommerce-product-gallery__wrapper,
.rox-clock-configurator-shortcode.rox-clock-product-page .woocommerce-product-gallery__image {
	background: var(--rox-dark) !important;
	border: 1px solid var(--rox-stroke);
	border-radius: 6px;
}

/* Flexslider / theme gallery wrappers */
.rox-clock-configurator-shortcode.rox-clock-product-page .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
	float: none !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .woocommerce-product-gallery__wrapper {
	width: 100% !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .woocommerce-product-gallery__image img {
	background: var(--rox-dark);
}

.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-preview-wrapper .flex-viewport,
.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-preview-wrapper .flexslider,
.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-preview-wrapper .woocommerce-product-gallery__wrapper {
	overflow: visible !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-preview-wrapper,
.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-live-preview {
	background: #90808c !important;
	overflow: visible;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-preview-wrapper .woocommerce-product-gallery__image {
	overflow: visible;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .single_add_to_cart_button,
.rox-clock-configurator-shortcode.rox-clock-product-page .product .single_add_to_cart_button {
	background: var(--rox-red) !important;
	border-color: var(--rox-stroke) !important;
	color: #fff !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .single_add_to_cart_button:hover,
.rox-clock-configurator-shortcode.rox-clock-product-page .product .single_add_to_cart_button:hover {
	background: var(--rox-text) !important;
	border-color: var(--rox-red) !important;
	color: #fff !important;
}

.rox-clock-configurator-shortcode.rox-clock-product-page .quantity .qty {
	background: var(--rox-dark);
	border: 1px solid var(--rox-stroke);
	color: var(--rox-text);
	border-radius: 4px;
}

.rox-clock-shortcode-error {
	color: var(--rox-text, #ff5a5a);
	border: 1px solid var(--rox-stroke, #731c22);
	padding: 0.75rem 1rem;
	border-radius: 6px;
	background: rgba(235, 38, 38, 0.08);
}

@media (min-width: 992px) {
	body.rox-clock-product-page.single-product div.product .woocommerce-product-gallery,
	.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-shortcode-product .woocommerce-product-gallery {
		position: sticky;
		top: 1rem;
	}

	body.rox-clock-product-page .rox-clock-generator {
		max-height: calc((100vh - 140px) / 2);
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 0.9rem;
		scrollbar-gutter: stable;
	}

	/* Shortcode: taller scroll area when options sit beside preview */
	.rox-clock-configurator-shortcode.rox-clock-product-page .rox-clock-generator {
		max-height: min(85vh, 780px);
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 0.9rem;
		scrollbar-gutter: stable;
	}
}