/**
 * CoolXpert single-product exact Payment selector.
 *
 * Every selector is scoped to the payment component so the theme's existing
 * product image, summary, header, footer, and WooCommerce widths remain in
 * control of the active theme.
 */

.cxcs-single-payment {
	--cxcs-surface: #ffffff;
	--cxcs-surface-soft: #f1f5f8;
	--cxcs-surface-blue: #eef7fc;
	--cxcs-border: #dce4eb;
	--cxcs-border-strong: #b7c6d3;
	--cxcs-text: #17212b;
	--cxcs-text-muted: #5e6c7a;
	--cxcs-primary: #086fae;
	--cxcs-primary-strong: #075a8d;
	--cxcs-primary-soft: #e6f3fa;
	--cxcs-cyan: #0789a5;
	--cxcs-focus: #0b63ce;
	display: block;
	width: 100%;
	max-width: 100%;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	margin: 1rem 0 1.5rem;
	overflow-x: clip;
	color: var(--cxcs-text);
	font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cxcs-single-payment,
.cxcs-single-payment *,
.cxcs-single-payment *::before,
.cxcs-single-payment *::after {
	box-sizing: border-box;
}

.cxcs-single-payment [hidden] {
	display: none !important;
}

.cxcs-single-payment .cxcs-single-payment__tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-inline-size: 0;
	max-inline-size: 100%;
	border: 1px solid var(--cxcs-border);
	border-block-end: 0;
	border-radius: 0.75rem 0.75rem 0 0;
	overflow: hidden;
	background: var(--cxcs-surface-soft);
}

.cxcs-single-payment .cxcs-single-payment__tab {
	min-block-size: 3.25rem;
	padding: 0.75rem 1rem;
	border: 0;
	border-block-end: 3px solid transparent;
	background: transparent;
	color: var(--cxcs-text-muted);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	cursor: pointer;
}

.cxcs-single-payment .cxcs-single-payment__tab + .cxcs-single-payment__tab {
	border-inline-start: 1px solid var(--cxcs-border);
}

.cxcs-single-payment .cxcs-single-payment__tab.is-active {
	border-block-end-color: var(--cxcs-cyan);
	background: var(--cxcs-surface);
	color: var(--cxcs-primary-strong);
}

.cxcs-single-payment .cxcs-single-payment__tab:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--cxcs-focus);
	outline-offset: -3px;
}

.cxcs-single-payment .cxcs-single-payment__tab:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cxcs-single-payment .cxcs-single-payment__form {
	min-inline-size: 0;
	max-inline-size: 100%;
	margin: 0 !important;
	padding: 1rem;
	border: 1px solid var(--cxcs-border);
	border-radius: 0 0 0.75rem 0.75rem;
	background: var(--cxcs-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.04);
}

.cxcs-single-payment .cxcs-single-payment__panel {
	margin: 0;
}

.cxcs-single-payment .cxcs-single-payment__cash-card,
.cxcs-single-payment .cxcs-single-payment__credit-card {
	position: relative;
	display: grid;
	align-items: center;
	gap: 0.35rem 0.75rem;
	min-inline-size: 0;
	max-inline-size: 100%;
	margin: 0;
	border: 1px solid var(--cxcs-border-strong);
	border-radius: 0.625rem;
	background: var(--cxcs-surface);
	color: var(--cxcs-text);
	cursor: pointer;
}

.cxcs-single-payment .cxcs-single-payment__cash-card {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 1rem;
}

.cxcs-single-payment .cxcs-single-payment__cash-card > span:first-of-type {
	display: grid;
	min-inline-size: 0;
	gap: 0.15rem;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__cash-card strong {
	color: var(--cxcs-primary-strong);
	font-size: 0.9rem;
}

.cxcs-single-payment .cxcs-single-payment__cash-card small {
	color: var(--cxcs-text-muted);
	font-size: 0.75rem;
}

.cxcs-single-payment .cxcs-single-payment__amount {
	min-inline-size: 0;
	color: var(--cxcs-primary-strong);
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__credit-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-inline-size: 0;
	max-inline-size: 100%;
	gap: 0.65rem;
}

.cxcs-single-payment .cxcs-single-payment__credit-card {
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0.85rem;
}

.cxcs-single-payment .cxcs-single-payment__cash-card:hover,
.cxcs-single-payment .cxcs-single-payment__credit-card:hover {
	border-color: #7aaecb;
}

.cxcs-single-payment .cxcs-single-payment__cash-card.is-selected,
.cxcs-single-payment .cxcs-single-payment__credit-card.is-selected {
	border-color: var(--cxcs-primary);
	background: var(--cxcs-primary-soft);
	box-shadow: inset 0 0 0 1px var(--cxcs-primary);
}

.cxcs-single-payment .cxcs-single-payment__cash-card.is-disabled,
.cxcs-single-payment .cxcs-single-payment__credit-card.is-disabled {
	opacity: 0.58;
	cursor: not-allowed;
}

.cxcs-single-payment .cxcs-single-payment__cash-card > input,
.cxcs-single-payment .cxcs-single-payment__credit-card > input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.cxcs-single-payment .cxcs-single-payment__cash-card:has(input:focus-visible),
.cxcs-single-payment .cxcs-single-payment__credit-card:has(input:focus-visible) {
	outline: 3px solid var(--cxcs-focus);
	outline-offset: 2px;
}

.cxcs-single-payment .cxcs-single-payment__choice-label {
	min-inline-size: 0;
	color: var(--cxcs-primary-strong);
	font-size: 0.85rem;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__monthly {
	grid-column: 1;
	min-inline-size: 0;
	color: var(--cxcs-text-muted);
	font-size: 0.75rem;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__choice-total {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-inline-size: 0;
	color: var(--cxcs-text);
	font-size: 0.9rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: end;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__stock {
	grid-column: 1 / -1;
	min-inline-size: 0;
	color: var(--cxcs-text-muted);
	font-size: 0.72rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__unavailable {
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--cxcs-border-strong);
	border-radius: 0.625rem;
	background: var(--cxcs-surface-soft);
	color: var(--cxcs-text-muted);
	font-size: 0.85rem;
}

.cxcs-single-payment .cxcs-single-payment__checkout {
	display: grid;
	min-inline-size: 0;
	max-inline-size: 100%;
	gap: 0.85rem;
	margin-block-start: 1rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--cxcs-border);
}

.cxcs-single-payment .cxcs-single-payment__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-inline-size: 0;
	max-inline-size: 100%;
	padding: 0.85rem 1rem;
	border-radius: 0.625rem;
	background: var(--cxcs-surface-blue);
	color: var(--cxcs-text);
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__total span {
	min-inline-size: 0;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cxcs-single-payment .cxcs-single-payment__total strong {
	min-inline-size: 0;
	color: var(--cxcs-primary-strong);
	font-size: clamp(1.15rem, 3vw, 1.45rem);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.cxcs-single-payment .cxcs-single-payment__purchase {
	display: flex;
	align-items: stretch;
	min-inline-size: 0;
	max-inline-size: 100%;
	gap: 0.75rem;
}

.cxcs-single-payment .cxcs-single-payment__quantity {
	display: grid;
	grid-template-columns: 2.5rem 3.25rem 2.5rem;
	flex: 0 0 auto;
	min-inline-size: 0;
	max-inline-size: 100%;
	min-block-size: 3rem;
	border: 1px solid var(--cxcs-border-strong);
	border-radius: 0.5rem;
	overflow: hidden;
	background: var(--cxcs-surface);
}

.cxcs-single-payment .cxcs-single-payment__quantity button,
.cxcs-single-payment .cxcs-single-payment__quantity input {
	min-inline-size: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--cxcs-text) !important;
	font: inherit;
	text-align: center;
	box-shadow: none !important;
}

.cxcs-single-payment .cxcs-single-payment__quantity button {
	font-size: 1.15rem;
	font-weight: 800;
	cursor: pointer;
}

.cxcs-single-payment .cxcs-single-payment__quantity button:hover {
	background: var(--cxcs-surface-soft) !important;
}

.cxcs-single-payment .cxcs-single-payment__quantity input {
	border-inline: 1px solid var(--cxcs-border) !important;
	font-size: 0.9rem;
	font-weight: 750;
	-moz-appearance: textfield;
}

.cxcs-single-payment .cxcs-single-payment__quantity input::-webkit-inner-spin-button,
.cxcs-single-payment .cxcs-single-payment__quantity input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cxcs-single-payment .cxcs-single-payment__quantity button:focus-visible,
.cxcs-single-payment .cxcs-single-payment__quantity input:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--cxcs-focus) !important;
	outline-offset: -3px;
}

.cxcs-single-payment .cxcs-single-payment__add {
	flex: 1 1 auto;
	min-inline-size: 0 !important;
	max-inline-size: 100%;
	min-block-size: 3rem !important;
	margin: 0 !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid var(--cxcs-primary) !important;
	border-radius: 0.5rem !important;
	background: var(--cxcs-primary) !important;
	color: #ffffff !important;
	font-size: 0.9rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center;
}

.cxcs-single-payment .cxcs-single-payment__add:hover {
	border-color: var(--cxcs-primary-strong) !important;
	background: var(--cxcs-primary-strong) !important;
}

.cxcs-single-payment .cxcs-single-payment__add:focus-visible {
	outline: 3px solid var(--cxcs-focus) !important;
	outline-offset: 2px;
}

.cxcs-single-payment .cxcs-single-payment__add:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.cxcs-single-payment [data-cxcs-payment-attributes] {
	display: none;
}

@media (max-width: 35rem) {
	.cxcs-single-payment .cxcs-single-payment__credit-options {
		grid-template-columns: minmax(0, 1fr);
	}

	.cxcs-single-payment .cxcs-single-payment__purchase {
		flex-direction: column;
	}

	.cxcs-single-payment .cxcs-single-payment__quantity {
		grid-template-columns: 3rem minmax(3.25rem, 1fr) 3rem;
		inline-size: 100%;
	}

	.cxcs-single-payment .cxcs-single-payment__add {
		inline-size: 100%;
	}
}

/* Final product-detail presentation. These rules are loaded only for the
 * CoolXpert payment component and protect it from theme/Elementor overrides. */
body.single-product div.product {
	max-width: 1380px !important;
	margin: 2.5rem auto 0 !important;
}

/* Keep the product page below the site header and WordPress admin bar. */
body.single-product .site-main {
	padding-top: 2.5rem !important;
}

body.single-product.admin-bar .wp-site-blocks {
	padding-top: 2rem !important;
}

/* Add breathing room around the inherited live header without replacing it. */
body.single-product .wp-site-blocks > header,
body.single-product header.wp-block-template-part,
body.single-product .site-header,
body.single-product .elementor-location-header {
	margin-top: 1.25rem !important;
	padding-top: 0.75rem !important;
	padding-bottom: 1rem !important;
}

/* Ensure no theme breadcrumb remains above the product layout. */
body.single-product .woocommerce-breadcrumb,
body.single-product nav.woocommerce-breadcrumb {
	display: none !important;
}

/* Stable spacing below the logo/navigation header. */
body.single-product .site-main > div.product,
body.single-product .site-main .product.type-product {
	margin-top: 2.5rem !important;
}

body.single-product div.product .product_title,
body.single-product div.product .summary .product_title {
	max-width: 100% !important;
	margin: 0 0 1rem !important;
	font-size: clamp(2rem, 3.3vw, 3.2rem) !important;
	font-weight: 400 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.025em !important;
	overflow-wrap: anywhere;
}

body.single-product .cxcs-single-product-price-range {
	margin: 0 0 1.25rem !important;
	color: #17212b !important;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
}

body.single-product div.product .summary {
	min-width: 0 !important;
	font-size: 1rem !important;
	line-height: 1.5 !important;
}

/* Remove duplicate native WooCommerce purchase/meta output. */
body.single-product div.product .summary > form.cart:not(.cxcs-single-payment__form),
body.single-product div.product .summary > .price,
body.single-product div.product .product_meta,
body.single-product div.product .woocommerce-product-details__short-description,
body.single-product div.product .woocommerce-tabs {
	display: none !important;
}

body.single-product div.product .related.products {
	clear: both !important;
	width: 100% !important;
	margin: 4rem 0 0 !important;
}

/* Keep the inherited footer visually separated from related products. */
body.single-product .wp-site-blocks > footer,
body.single-product footer.wp-block-template-part,
body.single-product .site-footer,
body.single-product .elementor-location-footer {
	clear: both !important;
	margin-top: 4rem !important;
	padding-top: 2.5rem !important;
	padding-bottom: 2.5rem !important;
}

body.single-product div.product .related.products > h2 {
	margin: 0 0 1.5rem !important;
	font-size: 1.15rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
}

body.single-product div.product .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	align-items: start !important;
	gap: 2rem !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product div.product .related.products ul.products::before,
body.single-product div.product .related.products ul.products::after {
	display: none !important;
}

body.single-product div.product .related.products ul.products li.product,
body.single-product div.product .related.products ul.products li.product:nth-child(n) {
	position: static !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 100% !important;
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	transform: none !important;
}

body.single-product div.product .related.products li.product > a:first-child {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 0 1rem !important;
	text-align: center !important;
}

body.single-product div.product .related.products li.product > a:first-child img {
	align-self: center !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 130px !important;
	margin: 0 auto 1rem !important;
	object-fit: contain !important;
}

body.single-product div.product .related.products li.product .woocommerce-loop-product__title {
	min-height: 3.2em !important;
	margin: 0 0 0.5rem !important;
	color: #111111 !important;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-align: center !important;
}

body.single-product div.product .related.products li.product .price {
	display: block !important;
	min-height: 1.4em !important;
	margin: 0 0 0.75rem !important;
	color: #111111 !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	text-align: center !important;
}

/* Keep every related-product price plain and neutral like the reference. */
body.single-product div.product .related.products li.product .price,
body.single-product div.product .related.products li.product .price *,
body.single-product div.product .related.products li.product .price del,
body.single-product div.product .related.products li.product .price ins,
body.single-product div.product .related.products li.product .price .amount,
body.single-product div.product .related.products li.product .price .woocommerce-Price-amount,
body.single-product div.product .related.products li.product .price .woocommerce-Price-currencySymbol {
	color: #111111 !important;
	text-decoration: none !important;
}

body.single-product div.product .related.products li.product .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	width: min(100%, 12.5rem) !important;
	min-height: 4rem !important;
	padding: 1rem 1.25rem !important;
	margin-top: auto !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #111111 !important;
	color: #ffffff !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
}

body.single-product div.product .related.products li.product .button:hover,
body.single-product div.product .related.products li.product .button:focus {
	border-color: #111111 !important;
	background: #111111 !important;
	color: #ffffff !important;
}

@media (max-width: 1100px) {
	body.single-product div.product .related.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 700px) {
	body.single-product div.product .related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	body.single-product div.product .product_title {
		font-size: 2rem !important;
	}

	body.single-product div.product .related.products ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}