/* =====================================================================
   Custom Checkout Widget — CSS v3
   Exact match to the Valent Watches template.
   No nav, no footer, no progress bar, no scrollbar on summary.
   ===================================================================== */

/* ---- Design tokens ---- */
.ccw-root {
	--ccw-primary: #003a24;
	--ccw-primary-container: #0b5336;
	--ccw-on-primary: #ffffff;
	--ccw-secondary: #775a19;
	--ccw-surface: #f9f9f8;
	--ccw-surface-container: #edeeed;
	--ccw-surface-white: #ffffff;
	--ccw-on-surface: #191c1c;
	--ccw-on-surface-var: #404943;
	--ccw-outline: #707972;
	--ccw-outline-var: #bfc9c0;
	--ccw-error: #ba1a1a;
	--ccw-forms-columns-gap: 1.25rem;
	--ccw-forms-rows-gap: 1.625rem;
	--ccw-forms-label-spacing: 0.25rem;
	--ccw-forms-fields-padding: 0.75rem 0.5rem;
	--ccw-forms-fields-radius: 0;
	/* Field border tokens — controlled by Elementor "Forms → Field Border" group control */
	--ccw-field-border-style: solid;
	--ccw-field-border-width: 0 0 1px 0;
	--ccw-field-border-color: rgba(191, 201, 192, 0.50);
	--ccw-order-summary-rows-gap: 0.625rem;
	--ccw-order-summary-items-color: var(--ccw-on-surface);
	--ccw-order-summary-variations-color: var(--ccw-on-surface-var);
	--ccw-order-summary-items-divider-color: rgba(191, 201, 192, 0.12);
	--ccw-order-summary-items-divider-weight: 1px;
	--ccw-order-summary-totals-color: var(--ccw-on-surface-var);
	--ccw-order-summary-totals-divider-color: rgba(191, 201, 192, 0.15);
	--ccw-order-summary-totals-divider-weight: 1px;
	--ccw-sticky-offset: 2rem;
	--ccw-font: inherit;
	--ccw-radius: 0.25rem;
	--ccw-radius-lg: 0.5rem;

	color: var(--ccw-on-surface);
	-webkit-font-smoothing: antialiased;
}

.ccw-root *,
.ccw-root *::before,
.ccw-root *::after {
	box-sizing: border-box;
}

.ccw-root img {
	max-width: 100%;
	display: block;
}

/* =====================================================================
   GRID — two columns
   ===================================================================== */
.ccw-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

.ccw-root.ccw-layout-one-column .ccw-grid {
	grid-template-columns: 1fr !important;
}

@media (min-width: 1024px) {
	.ccw-grid {
		grid-template-columns: 7fr 5fr;
	}
}


/* =====================================================================
   LEFT — BILLING
   ===================================================================== */
.ccw-billing__header {
	margin-bottom: 2.5rem;
}

.ccw-billing__title {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--ccw-primary);
	margin: 0 0 0.375rem;
	line-height: 1.2;
}

.ccw-billing__sub {
	color: var(--ccw-on-surface-var);
	font-size: 1rem;
	margin: 0;
}

/* ---- Custom form rows (our fields) ---- */
.ccw-form {
	display: flex;
	flex-direction: column;
	gap: var(--ccw-forms-rows-gap);
}

.ccw-form__row {
	display: grid;
	gap: var(--ccw-forms-columns-gap);
}

.ccw-form__row--2col {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
	.ccw-form__row--2col {
		grid-template-columns: 1fr;
	}
}

.ccw-form__group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ccw-form__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ccw-outline);
	margin: 0 0 var(--ccw-forms-label-spacing) 0;
	transition: color .2s;
}

.ccw-form__group:focus-within .ccw-form__label {
	color: var(--ccw-primary);
}

.ccw-required {
	text-decoration: none;
	color: var(--ccw-error);
	font-style: normal;
	margin-left: 1px;
}

.ccw-form__input {
	width: 100%;
	background: var(--ccw-field-bg, transparent) !important;
	border-style: var(--ccw-field-border-style) !important;
	border-width: var(--ccw-field-border-width) !important;
	border-color: var(--ccw-field-border-color) !important;
	border-radius: var(--ccw-forms-fields-radius);
	outline: none;
	box-shadow: none;
	padding: var(--ccw-forms-fields-padding);
	font-family: var(--ccw-font);
	font-size: 0.9375rem;
	color: var(--ccw-field-color, var(--ccw-on-surface)) !important;
	transition: border-color .2s;
}

.ccw-form__input::placeholder {
	color: rgba(191, 201, 192, 0.60);
}

.ccw-form__input:focus {
	background: var(--ccw-field-focus-bg, var(--ccw-field-bg, transparent)) !important;
	color: var(--ccw-field-focus-color, var(--ccw-field-color, var(--ccw-on-surface))) !important;
	border-bottom-color: var(--ccw-field-focus-border-color, var(--ccw-primary));
}

.ccw-form__select {
	cursor: pointer;
	appearance: auto;
}

.ccw-form__check {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ccw-on-surface);
}

.ccw-form__check input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--ccw-primary);
	flex-shrink: 0;
}

/* =====================================================================
   LOGIN SECTION — CCW-only classes, no WooCommerce dependencies
   ===================================================================== */
.ccw-login-section {
	margin-bottom: 1.5rem;
	padding: 0;
}

/* Toggle row */
.ccw-login-toggle {
	margin: 0;
	padding: 12px 0;
	font-size: 0.875rem;
	color: #333;
	transition: border-color .2s;
	position: relative;
}


.ccw-login-preview-badge {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ccw-outline);
	opacity: .55;
	pointer-events: none;
}

.ccw-login-trigger {
	color: var(--ccw-primary);
	font-weight: 600;
	text-decoration: none;
	margin-left: 0.25rem;
	transition: opacity .15s;
}

.ccw-login-trigger:hover {
	opacity: .75;
}

/* Inner panel — white, hidden by default */
.ccw-login-panel {
	display: none;
	padding: 20px 16px 16px;
}

.ccw-login-panel.ccw-login-panel--open {
	display: block;
}

/* Description */
.ccw-login-desc {
	font-size: 0.8125rem;
	color: #444;
	margin: 0 0 1rem;
	line-height: 1.6;
}

/* 3-column grid: [email] [password] [LOGIN] */
.ccw-login-grid {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 12px;
	align-items: end;
}

.ccw-login-field-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccw-login-field-group label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #333 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 !important;
}

.ccw-required {
	color: #c0392b;
}

/* Inputs — own border/padding vars, decoupled from global Forms section */
.ccw-login-input {
	width: 100%;
	background: #ffffff;
	color: #333;
	border-style: var(--ccw-login-field-border-style, solid) !important;
	border-width: var(--ccw-login-field-border-width, 1px) !important;
	border-color: var(--ccw-login-field-border-color, #cccccc) !important;
	border-radius: var(--ccw-forms-fields-radius) !important;
	padding: var(--ccw-login-field-padding, 0.75rem 0.5rem) !important;
	font-size: 14px;
	box-shadow: none !important;
	outline: none !important;
	height: auto !important;
	line-height: 1.4;
	transition: border-color .2s;
}

.ccw-login-input::placeholder {
	color: #aaaaaa;
}

.ccw-login-input:focus {
	border-color: var(--ccw-login-field-focus-border-color, var(--ccw-primary)) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Button wrapper alignment */
.ccw-login-btn-wrap {
	display: flex;
	align-items: flex-end;
}

/* LOGIN button */
.ccw-login-section .ccw-btn--login {
	background: var(--ccw-primary);
	color: #fff;
	border: none;
	border-radius: 24px;
	padding: 9px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	transition: filter .2s;
	line-height: 1.4;
}

.ccw-login-section .ccw-btn--login:hover {
	filter: brightness(0.88);
}

/* Footer row: Remember me + Lost password */
.ccw-login-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
}

.ccw-login-remember {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
}

.ccw-login-checkbox {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	accent-color: var(--ccw-primary);
}

.ccw-login-lost-pwd {
	font-size: 13px;
	color: #444;
	text-decoration: none;
}

.ccw-login-lost-pwd:hover {
	text-decoration: underline;
}

/* Error message */
.ccw-login-error {
	display: none;
	color: var(--ccw-error);
	font-size: 0.8125rem;
	margin: 0 0 0.75rem;
}

/* Responsive */
@media (max-width: 580px) {
	.ccw-login-grid {
		grid-template-columns: 1fr;
	}

	.ccw-login-btn-wrap {
		width: 100%;
	}

	.ccw-login-section .ccw-btn--login {
		width: 100%;
		justify-content: center;
	}
}


/* =====================================================================
   CREATE ACCOUNT (WC registration form)
   ===================================================================== */
.ccw-create-account {
	/* Elementor-like register field tokens */
	--ccw-register-checkbox-color: var(--ccw-primary);
	--ccw-register-field-bg: #f9fafa;
	--ccw-register-field-color: #69727d;
	--ccw-register-field-border-color: #dddddc;
	--ccw-register-field-placeholder: #69727d;
	--ccw-register-field-focus-bg: #f9fafa;
	--ccw-register-field-focus-color: #69727d;
	--ccw-register-field-focus-border-color: #69727d;
	--ccw-register-field-radius: 0;
	--ccw-register-field-padding: 16px 16px 16px 16px;

	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(191, 201, 192, 0.15);
}

/* WC injects .woocommerce-account-fields */
.ccw-create-account .woocommerce-account-fields {
	display: block;
}

.ccw-create-account .woocommerce-account-fields .create-account {
	margin-top: 0;
	padding-top: 0;
	background: transparent !important;
}

/* Checkbox label */
.ccw-create-account .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ccw-on-surface);
	cursor: pointer;
	line-height: 1.4;
	margin-bottom: 0.875rem !important;
}

.ccw-create-account .woocommerce-form__input-checkbox {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	vertical-align: middle;
	margin: 0 5px 0 0;
	position: relative;
	top: 0;
	accent-color: var(--ccw-register-checkbox-color);
}

/* Password field revealed after checking */
.ccw-create-account .woocommerce-password-field {
	margin-top: 0;
}

.ccw-create-account #account_password {
	width: 100% !important;
}

/* Password strength meter */
.ccw-create-account .woocommerce-password-strength {
	font-size: 0.75rem;
	margin-top: 0.25rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--ccw-radius);
}

/* ---- WC native field overrides ---- */
/* These apply when WC renders its own billing template */
.ccw-form-wrap .woocommerce-billing-fields h3,
.ccw-form-wrap .woocommerce-additional-fields h3 {
	display: none;
}

/* Make .ccw-form-wrap itself a flex container so row/column gaps work
   regardless of whether woocommerce-billing-fields__field-wrapper is present */
.ccw-form-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccw-forms-rows-gap, 1.5rem) var(--ccw-forms-columns-gap, 1.25rem);
	align-items: flex-start;
}

/* If WC wraps fields in its own divs, make those transparent to the flex layout */
.ccw-form-wrap .woocommerce-billing-fields,
.ccw-form-wrap .woocommerce-billing-fields__field-wrapper {
	display: contents;
}

/* Full-width fields */
.ccw-form-wrap .form-row {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	flex: 0 0 100%;
	max-width: 100%;
}

/* Side-by-side first+last */
.ccw-form-wrap .form-row-first,
.ccw-form-wrap .form-row-last {
	flex: 0 0 calc(50% - calc(var(--ccw-forms-columns-gap, 1.25rem) / 2)) !important;
	max-width: calc(50% - calc(var(--ccw-forms-columns-gap, 1.25rem) / 2)) !important;
}

@media (max-width: 600px) {

	.ccw-form-wrap .form-row-first,
	.ccw-form-wrap .form-row-last {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* Labels — font properties without !important so Elementor Typography control wins */
.ccw-form-wrap .form-row label,
.ccw-form-wrap label {
	display: block !important;
	margin: 0 0 var(--ccw-forms-label-spacing, 0.25rem) 0 !important;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--ccw-field-label-color, var(--ccw-outline)) !important;
	transition: color .2s;
}

.ccw-form-wrap .form-row:focus-within label {
	color: var(--ccw-primary) !important;
}


/* Inputs, selects, textareas */
.ccw-form-wrap input.input-text,
.ccw-form-wrap select,
.ccw-form-wrap textarea {
	width: 100% !important;
	background: var(--ccw-field-bg, transparent) !important;
	border-style: var(--ccw-field-border-style) !important;
	border-width: var(--ccw-field-border-width) !important;
	border-color: var(--ccw-field-border-color) !important;
	border-radius: var(--ccw-forms-fields-radius) !important;
	outline: none !important;
	box-shadow: none !important;
	padding: var(--ccw-forms-fields-padding) !important;
	font-family: var(--ccw-font);
	font-size: 0.9375rem;
	color: var(--ccw-field-color, var(--ccw-on-surface));
	transition: border-color .2s;
	height: auto !important;
	line-height: 1.5;
}

.ccw-form-wrap input.input-text:focus,
.ccw-form-wrap select:focus,
.ccw-form-wrap textarea:focus {
	background: var(--ccw-field-focus-bg, var(--ccw-field-bg, transparent)) !important;
	color: var(--ccw-field-focus-color, var(--ccw-field-color, var(--ccw-on-surface))) !important;
	border-bottom-color: var(--ccw-field-focus-border-color, var(--ccw-primary)) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Placeholder */
.ccw-form-wrap input.input-text::placeholder {
	color: rgba(191, 201, 192, 0.60) !important;
}

/* Select2 (WC's enhanced dropdowns) */
.ccw-form-wrap .select2-container {
	width: 100% !important;
}

.ccw-form-wrap .select2-container .select2-selection--single {
	border-style: var(--ccw-field-border-style) !important;
	border-width: var(--ccw-field-border-width) !important;
	border-color: var(--ccw-field-border-color) !important;
	border-radius: var(--ccw-forms-fields-radius) !important;
	background: transparent !important;
	height: 44px !important;
	line-height: 44px !important;
	display: flex !important;
	align-items: center !important;
}

.ccw-form-wrap .select2-selection__rendered {
	padding: 0 0.5rem !important;
	color: var(--ccw-on-surface) !important;
	font-family: var(--ccw-font) !important;
	font-size: 0.9375rem !important;
	line-height: normal !important;
}

.ccw-form-wrap .select2-selection__arrow b {
	border-color: var(--ccw-outline) transparent transparent !important;
}

/* Phone intl-tel-input wrapper */
.ccw-form-wrap .iti {
	width: 100% !important;
}

.ccw-form-wrap .iti input {
	padding-left: 52px !important;
}

/* Validation errors */
.ccw-form-wrap .woocommerce-invalid input.input-text {
	border-bottom-color: var(--ccw-error) !important;
}

.ccw-form-wrap .woocommerce-invalid-required-field label {
	color: var(--ccw-error) !important;
}

/* Ensure register fields inherit billing field look and spacing */
.ccw-create-account .form-row {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: 100% !important;
	background: transparent !important;
}

.ccw-create-account .create-account {
	margin-top: 0.875rem;
}

.ccw-create-account .create-account .form-row {
	margin-top: 1rem !important;
}

.ccw-create-account .create-account .form-row:first-child {
	margin-top: 0 !important;
}

.ccw-create-account input.input-text,
.ccw-create-account select,
.ccw-create-account textarea {
	background: var(--ccw-register-field-bg) !important;
	color: var(--ccw-register-field-color) !important;
	border-style: var(--ccw-register-field-border-style, solid) !important;
	border-width: var(--ccw-register-field-border-width, 1px) !important;
	border-color: var(--ccw-register-field-border-color, #dddddc) !important;
	border-radius: var(--ccw-register-field-radius) !important;
	padding: var(--ccw-register-field-padding) !important;
	box-shadow: none !important;
}

.ccw-create-account input.input-text::placeholder,
.ccw-create-account textarea::placeholder {
	color: var(--ccw-register-field-placeholder) !important;
	opacity: .6;
}

.ccw-create-account input.input-text:focus,
.ccw-create-account select:focus,
.ccw-create-account textarea:focus {
	background: var(--ccw-register-field-focus-bg) !important;
	color: var(--ccw-register-field-focus-color) !important;
	border-color: var(--ccw-register-field-focus-border-color) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Editor placeholder */
.ccw-editor-placeholder {
	text-align: center;
	padding: 2.5rem 1.5rem;
	border: 1px dashed rgba(191, 201, 192, 0.50);
	border-radius: var(--ccw-radius-lg);
}

/* =====================================================================
	RIGHT — ORDER SUMMARY (no scrollbar, natural height)
	===================================================================== */
.ccw-summary__card {
	background: var(--ccw-surface-container);
	border-radius: var(--ccw-radius-lg);
	padding: var(--ccw-summary-card-padding, 1.75rem);
	position: sticky;
	top: var(--ccw-sticky-offset);
	/* NO max-height, NO overflow → no scrollbar */
}

.ccw-root:not(.ccw-sticky-right-column) .ccw-summary__card {
	position: static;
	top: auto;
}

.ccw-summary__title {
	font-size: 0.6875rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	color: var(--ccw-primary);
	margin: 0 0 1.5rem;
}

/* ---- Cart items ---- */
.ccw-cart-items {
	margin-bottom: 0;
}

.ccw-product {
	display: flex;
	gap: 1.25rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
}

.ccw-product__img-wrap {
	width: 5.5rem;
	height: 5.5rem;
	background: var(--ccw-surface-white);
	border-radius: var(--ccw-radius-lg);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccw-product__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccw-product__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	flex: 1;
}

.ccw-product__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
}

.ccw-product__name {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ccw-order-summary-items-color);
	margin: 0;
	line-height: 1.3;
}

.ccw-product__qty-suffix {
	text-transform: lowercase;
}

.ccw-product__meta {
	font-size: 0.8125rem;
	color: var(--ccw-order-summary-variations-color);
	margin: 0;
}

/* Cart item meta rows (e.g. "Your Answer" from skill challenge) */
.ccw-product__item-data {
	margin: 0;
}

.ccw-product__item-data dl {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.4rem;
}

.ccw-product__item-data dt,
.ccw-product__item-data dd {
	margin: 0;
	font-size: 0.72rem;
	line-height: 1.4;
}

.ccw-product__item-data dt {
	font-weight: 700;
	color: var(--ccw-outline);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ccw-product__item-data dd {
	font-weight: 600;
	color: var(--ccw-primary);
	background: rgba(0, 58, 36, 0.07);
	border-radius: 9999px;
	padding: 0.1rem 0.5rem;
}

.ccw-product__breakdown {
	font-size: 0.8125rem;
	color: var(--ccw-order-summary-variations-color);
	margin: 0;
}

.ccw-product__price {
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--ccw-primary);
}

/* Inline × remove button — only rendered for upsell cart items */
.ccw-product__remove {
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 0 0.3rem;
	cursor: pointer;
	line-height: 1;
	color: var(--ccw-outline);
	opacity: 0.65;
	vertical-align: middle;
	flex-shrink: 0;
	transition: color 0.15s, opacity 0.15s;
}

.ccw-product__remove:hover {
	color: var(--ccw-error);
	opacity: 1;
}

.ccw-product__remove .material-symbols-outlined {
	font-size: 1rem !important;
	display: inline-block;
	vertical-align: middle;
}

.ccw-empty-cart {
	font-size: 0.875rem;
	color: var(--ccw-outline);
	text-align: center;
	padding: 1rem 0 1.5rem;
}

/* ---- Cross-sells ---- */
.ccw-crosssell {
	margin-bottom: 1.5rem;
}

.ccw-crosssell__header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

.ccw-crosssell__star {
	color: var(--ccw-secondary);
	font-size: 0.875rem !important;
}

.ccw-crosssell__label {
	font-size: 0.6rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	color: var(--ccw-secondary);
	margin: 0;
}

.ccw-crosssell__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ccw-crosssell__item {
	background: var(--ccw-surface-white);
	padding: 0.7rem 0.875rem;
	border-radius: var(--ccw-radius-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	transition: filter .2s;
}

.ccw-crosssell__item:hover {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.07));
}

.ccw-crosssell__item-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ccw-crosssell__item-img {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 0.375rem;
	flex-shrink: 0;
}

.ccw-crosssell__item-name {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ccw-on-surface);
	margin: 0 0 0.125rem;
}

.ccw-crosssell__item-price {
	font-size: 0.6875rem;
	color: var(--ccw-on-surface-var);
	margin: 0;
}

.ccw-crosssell__item-price ins {
	text-decoration: none;
}

.ccw-crosssell__item-price del {
	opacity: .5;
	font-size: .6rem;
}

/* ---- Upsells (shares ccw-crosssell__item layout, only header color differs) ---- */
/* Icon and label override — primary green instead of secondary gold */
.ccw-upsell .ccw-crosssell__star,
.ccw-upsell__icon {
	color: var(--ccw-primary) !important;
}

.ccw-upsell .ccw-crosssell__label,
.ccw-upsell__label {
	color: var(--ccw-primary) !important;
}

/* ---- Totals ---- */
.ccw-totals {
	display: flex;
	flex-direction: column;
	gap: var(--ccw-order-summary-rows-gap);
	margin-bottom: 1.5rem;
	padding-top: 1.25rem;
	border-top: var(--ccw-order-summary-totals-divider-weight) solid var(--ccw-order-summary-totals-divider-color);
}

.ccw-totals__row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ccw-order-summary-totals-color);
}

.ccw-totals__row--total {
	color: var(--ccw-primary);
	font-weight: 800;
	font-size: 1.25rem;
	padding-top: 0.75rem;
	border-top: var(--ccw-order-summary-totals-divider-weight) solid var(--ccw-order-summary-totals-divider-color);
	margin-top: 0.25rem;
}

/* ---- Payment methods ---- */
.ccw-payment {
	margin-bottom: 1.25rem;
	background: var(--ccw-payment-bg, transparent);
	border-radius: var(--ccw-payment-radius, 0px);
	padding: var(--ccw-payment-padding, 0px);
}

.ccw-coupon-box {
	margin-bottom: 1rem;
}

/* ---- Coupon toggle row (mirrors .ccw-login-toggle) ---- */
.ccw-coupon-toggle {
	margin: 0;
	padding: 12px 0;
	font-size: 0.875rem;
	color: #333;
	transition: border-color .2s;
	position: relative;
}

.ccw-coupon-trigger {
	color: var(--ccw-primary);
	font-weight: 600;
	text-decoration: none;
	margin-left: 0.25rem;
	transition: opacity .15s;
}

.ccw-coupon-trigger:hover {
	opacity: .75;
}

/* Sliding panel — hidden by default, shown via JS */
.ccw-coupon-panel {
	display: none;
	padding-bottom: 0.5rem;
}

.ccw-coupon-panel.ccw-coupon-panel--open {
	display: block;
}

/* Legacy: when WC renders its own .woocommerce-info notice bar */
/* On the live frontend this will be empty because we suppress its message;
   ensure it doesn't add unwanted space. */
.ccw-coupon-box .woocommerce-info:empty {
	display: none !important;
}

.ccw-coupon-box .woocommerce-info {
	margin: 0 0 0.75rem;
}

.ccw-coupon-box .checkout_coupon {
	display: block;
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
}

.ccw-coupon-box .checkout_coupon .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 0 0.5rem !important;
	padding: 0 !important;
}

.ccw-coupon-box .checkout_coupon .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1rem;
	border-radius: var(--ccw-radius);
	border: 1px solid rgba(0, 58, 36, 0.25);
	background: var(--ccw-surface-white);
	color: var(--ccw-primary);
	font-weight: 700;
	letter-spacing: 0.03em;
}

.ccw-coupon-box .checkout_coupon .button:hover {
	border-color: rgba(0, 58, 36, 0.45);
}

.ccw-payment__label {
	font-size: 0.6rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ccw-outline);
	margin: 0 0 0.75rem;
}

.ccw-payment__list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ccw-payment__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1rem;
	background: var(--ccw-surface-white);
	border-radius: var(--ccw-radius-lg);
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color .15s;
	gap: 0.75rem;
}

.ccw-payment__option:hover {
	border-color: rgba(0, 58, 36, 0.18);
}

.ccw-payment__option--active {
	border-color: rgba(0, 58, 36, 0.30);
}

.ccw-payment__option-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
}

.ccw-payment__option-left>.material-symbols-outlined {
	color: var(--ccw-primary);
	font-size: 1.375rem !important;
	flex-shrink: 0;
}

.ccw-payment__gateway-title {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ccw-on-surface);
}

.ccw-payment__option input[type="radio"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--ccw-primary);
	flex-shrink: 0;
	cursor: pointer;
}

/* Gateway extra fields (e.g. Stripe card input) */
.ccw-payment__gateway-fields {
	background: var(--ccw-surface-white);
	border-radius: var(--ccw-radius-lg);
	padding: 0.875rem 1rem;
	border: 1px solid rgba(191, 201, 192, 0.25);
	font-size: 0.875rem;
}

/* ---- Buttons ---- */
.ccw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	font-family: var(--ccw-font);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	outline: none;
	text-decoration: none;
	transition: filter .2s ease;
}

/* Place Order */
.ccw-btn--primary {
	width: 100%;
	padding: 1.1875rem 2rem;
	background: linear-gradient(145deg, var(--ccw-primary) 0%, var(--ccw-primary-container) 100%);
	color: var(--ccw-on-primary) !important;
	border-radius: var(--ccw-radius);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	box-shadow: none;
	margin-bottom: 1.25rem;
}

/* Default hover: slightly brighten — works on ANY background (solid or gradient).
   Elementor hover selectors with !important will override background directly
   and the filter stays as a subtle enhancement unless also overridden. */
.ccw-btn--primary:hover {
	filter: brightness(1.12);
}

.ccw-btn--primary:active {
	filter: brightness(0.92);
}

.ccw-btn--primary:focus {
	outline: none;
	box-shadow: none;
}

.ccw-btn--primary:disabled {
	opacity: .65;
	cursor: not-allowed;
	filter: none;
}



/* Add badge (cross-sells & upsells)
   Use .ccw-root scoping + !important to beat WC/theme button element styles */
.ccw-root .ccw-btn--add {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--ccw-font) !important;
	font-size: 0.6rem !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	background: var(--ccw-primary-container) !important;
	color: var(--ccw-on-primary) !important;
	padding: 0.375rem 0.875rem !important;
	border: none !important;
	border-radius: 9999px !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	line-height: 1 !important;
	transition: background .2s, transform .15s !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline: none !important;
	min-height: 0 !important;
	height: auto !important;
}

.ccw-root .ccw-btn--add:hover {
	background: var(--ccw-primary) !important;
	color: var(--ccw-on-primary) !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Loading state */
.ccw-root .ccw-btn--add.loading {
	opacity: .75 !important;
	cursor: default !important;
	pointer-events: none !important;
	padding: 0.375rem 0.75rem !important;
}

.ccw-btn-spinner {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ccw-spin .6s linear infinite;
	vertical-align: middle;
}

@keyframes ccw-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Added / confirmed state — clickable to remove */
.ccw-root .ccw-btn--add.added {
	background: var(--ccw-primary) !important;
	color: var(--ccw-on-primary) !important;
	cursor: pointer !important;
	pointer-events: auto !important;
	opacity: 1 !important;
	padding: 0.3rem 0.6rem !important;
	border: none !important;
	box-shadow: none !important;
	transition: background .2s !important;
}

/* Hover shows red tint to signal "click to remove" */
.ccw-root .ccw-btn--add.added:hover {
	background: var(--ccw-error) !important;
	transform: none !important;
}

/* ---- Trust badges ---- */
.ccw-trust {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

.ccw-trust__badge {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	opacity: 0.55;
}

.ccw-trust__badge .material-symbols-outlined {
	font-size: 0.875rem !important;
}

.ccw-trust__badge span:last-child {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* =====================================================================
   MATERIAL SYMBOLS
   ===================================================================== */
.ccw-root .material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* =====================================================================
   WC NOTICES
   ===================================================================== */
.ccw-root .woocommerce-error,
.ccw-root .woocommerce-message,
.ccw-root .woocommerce-info {
	border-radius: var(--ccw-radius);
	font-family: var(--ccw-font);
	font-size: 0.875rem;
	margin-bottom: 1rem;
	list-style: none;
	padding: 0.75rem 1rem;
}

.ccw-root .woocommerce-error {
	background: #fff0f0;
	border-left: 3px solid var(--ccw-error);
}

.ccw-root .woocommerce-message {
	background: #f0fff7;
	border-left: 3px solid var(--ccw-primary);
}

/* =====================================================================
   LOADING STATE (WC AJAX checkout)
   ===================================================================== */
.ccw-root form.processing {
	opacity: 0.65;
	pointer-events: none;
}

/* =====================================================================
   WC checkout/payment.php — CCW style bridge
   WC outputs: #payment > ul.payment_methods > li.wc_payment_method
   We restyle those to match our ccw-payment card design.
   Icons are injected into labels by checkout-widget.js.
   ===================================================================== */

/* Strip WC's default #payment box styles */
.ccw-payment #payment {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

/* Gateway list */
.ccw-payment #payment .payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
}

/* Each gateway card */
.ccw-payment #payment .payment_methods li.wc_payment_method {
	background: var(--ccw-surface-white);
	border-radius: var(--ccw-radius-lg);
	border: 1px solid transparent;
	transition: border-color .15s;
	overflow: hidden;
	position: relative;
}

.ccw-payment #payment .payment_methods li.wc_payment_method:hover {
	border-color: rgba(0, 58, 36, 0.18);
}

/* Active card — CSS :has() for instant feedback, JS .ccw-active as fallback */
.ccw-payment #payment .payment_methods li.wc_payment_method:has(input[type="radio"]:checked),
.ccw-payment #payment .payment_methods li.wc_payment_method.ccw-active {
	border-color: rgba(0, 58, 36, 0.30);
}

/* Radio — pinned to the label row top, NOT the li's vertical center.
   When the gateway fields (.payment_box) expand the li, top:50% would drift
   the radio down into the card form area. Using a fixed top offset (label
   padding 0.875rem + ~half the label font height) keeps it aligned with
   the label row at all times. */
.ccw-payment #payment .payment_methods input[type="radio"] {
	position: absolute;
	right: 1rem;
	top: 0.875rem;
	transform: translateY(30%);
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--ccw-primary);
	cursor: pointer;
	z-index: 1;
	pointer-events: auto;
	flex-shrink: 0;
}

/* Label row */
.ccw-payment #payment .payment_methods li.wc_payment_method>label {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
	padding: 0.875rem 1rem !important;
	padding-right: 2.75rem !important;
	cursor: pointer !important;
	margin: 0 !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--ccw-on-surface) !important;
}

/* Gateway images (PayPal etc.) */
.ccw-payment #payment .payment_methods li.wc_payment_method>label img {
	max-height: 22px !important;
	width: auto !important;
	vertical-align: middle !important;
	margin-left: 0.25rem !important;
}

/* Icon — injected via woocommerce_gateway_title PHP filter */
.ccw-payment #payment .payment_methods li.wc_payment_method .ccw-gw-icon {
	display: inline-flex !important;
	align-items: center !important;
	color: var(--ccw-primary) !important;
	flex-shrink: 0 !important;
}

.ccw-payment #payment .payment_methods li.wc_payment_method .ccw-gw-icon .material-symbols-outlined {
	font-size: 1.375rem !important;
	line-height: 1 !important;
}

.ccw-payment #payment .payment_methods li.wc_payment_method .ccw-gw-title {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--ccw-on-surface) !important;
}

/* Gateway extra fields */
.ccw-payment #payment .payment_methods .payment_box {
	background: transparent !important;
	padding: 0 1rem 0.875rem !important;
	border-top: 1px solid rgba(191, 201, 192, 0.15) !important;
	font-size: 0.875rem !important;
	margin: 0 !important;
}

/* Terms */
.ccw-payment #payment .woocommerce-terms-and-conditions-wrapper {
	font-size: 0.8125rem;
	margin-bottom: 0.875rem;
	color: var(--ccw-on-surface-var);
}

/* Place order wrapper */
.ccw-payment #payment .place-order {
	padding: 0 !important;
	margin: 0 !important;
}

/* Place Order button
   - --ccw-btn-bg / --ccw-btn-color are set by Elementor controls on .ccw-root
     and update instantly without CSS cache regeneration.
   - Falls back to gradient built from primary tokens.
   - Layout properties use !important to beat WC theme overrides. */
.ccw-root {
	--ccw-btn-bg: linear-gradient(145deg, var(--ccw-primary) 0%, var(--ccw-primary-container) 100%);
	--ccw-btn-color: var(--ccw-on-primary);
}


.ccw-root #place_order:hover,
.ccw-payment #payment #place_order:hover {
	filter: brightness(1.12);
}

.ccw-root #place_order:active,
.ccw-payment #payment #place_order:active {
	filter: brightness(0.92);
}

.ccw-root #place_order:disabled,
.ccw-payment #payment #place_order:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
	filter: none !important;
}


#payment div.payment_box::before {
	display: none !important;
}

/* Remove focus outline on payment method radio buttons */
.ccw-payment #payment .payment_methods input[type="radio"]:focus,
.ccw-payment #payment .payment_methods input[type="radio"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* =====================================================================
   PAYMENT METHOD ICONS — CSS ::before using Material Symbols Outlined
   Each li gets a class like .payment_method_cod from WooCommerce.
   Font codepoints: https://fonts.google.com/icons
   Default (catch-all) uses credit_card \e870
   ===================================================================== */

/* Shared icon base styles */
.ccw-payment #payment .payment_methods li.wc_payment_method>label::before {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 1.375rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--ccw-primary);
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	-webkit-font-smoothing: antialiased;
	content: '\e870';
	/* default: credit_card */
}

/* Stripe / generic card */
.ccw-payment #payment .payment_methods li.payment_method_stripe>label::before,
.ccw-payment #payment .payment_methods li.payment_method_woocommerce_payments>label::before,
.ccw-payment #payment .payment_methods li.payment_method_square_credit_card>label::before {
	content: '\e870';
	/* credit_card */
}

/* Cash on Delivery */
.ccw-payment #payment .payment_methods li.payment_method_cod>label::before {
	content: '\e850';
	/* account_balance_wallet */
}

/* BACS / Direct bank transfer */
.ccw-payment #payment .payment_methods li.payment_method_bacs>label::before {
	content: '\e84f';
	/* account_balance */
}

/* Cheque */
.ccw-payment #payment .payment_methods li.payment_method_cheque>label::before {
	content: '\e873';
	/* description */
}

/* PayPal */
.ccw-payment #payment .payment_methods li.payment_method_paypal>label::before,
.ccw-payment #payment .payment_methods li.payment_method_ppcp-gateway>label::before {
	content: '\ef63';
	/* payments */
}

.ccw-root .woocommerce-form-login-toggle {
	display: none;
}

.ccw-coupon-box .woocommerce-form-coupon-toggle .woocommerce-info {
	display: none
}