/**
 * CaliforniaAlchemy Custom Payments — checkout styling.
 *
 * Colors below are matched to the live theme's own dark palette (checked
 * directly against computed styles: body background rgb(22,20,15), body text
 * rgb(241,234,218), accent gold #C7912F) rather than a generic light-theme
 * default, so the payment cards look native to the site instead of clashing
 * with it.
 */

:root {
	--cap-accent: #C7912F;
	--cap-accent-dark: #a97a24;
	--cap-accent-contrast: #16140f;

	--cap-surface: rgba(241, 234, 218, 0.06);
	--cap-surface-raised: rgba(241, 234, 218, 0.1);
	--cap-border: rgba(241, 234, 218, 0.18);
	--cap-text: rgb(241, 234, 218);
	--cap-text-muted: rgba(241, 234, 218, 0.68);

	--cap-warning-bg: rgba(199, 145, 47, 0.14);
	--cap-warning-border: rgba(199, 145, 47, 0.45);
	--cap-warning-text: #e7c583;

	--cap-success-bg: rgba(90, 176, 118, 0.14);
	--cap-success-border: rgba(90, 176, 118, 0.45);
	--cap-success-text: #8fd6a9;

	--cap-info-bg: rgba(126, 170, 224, 0.14);
	--cap-info-border: rgba(126, 170, 224, 0.4);
	--cap-info-text: #a9c8ee;

	--cap-error-text: #e58a82;

	--cap-radius: 8px;
}

/* --------------------------------------------------------------------
   THE FIX for "footer mixing up with payment section": the theme's own
   checkout form floats its two columns (.col2-set left / order review
   right) without a clearfix, so the form collapses to 0 height once its
   content overflows a single viewport — and the footer (next in the DOM)
   renders starting from that collapsed point, overlapping the tall
   floated columns. This clearfix is scoped to the checkout form only, so
   it does not touch anything else in the theme.
   -------------------------------------------------------------------- */
form.checkout.woocommerce-checkout::after {
	content: "";
	display: table;
	clear: both;
}

/* Belt-and-braces: the same collapse risk exists anywhere WooCommerce
   floats a payment box against other content (e.g. some themes float the
   whole #payment area) — establishing a new block formatting context here
   costs nothing and prevents the same bug from resurfacing elsewhere. */
.woocommerce-checkout-review-order,
#payment {
	overflow: hidden;
}

/* --------------------------------------------------------------------
   Full-width checkout layout. The theme's generic ".container.content-page"
   wrapper caps at 820px, which is right for a blog article but leaves huge
   empty margins on a wide screen and squeezes the whole checkout (billing
   details, additional info, and the order/payment column) into a narrow
   strip that reads as one long vertical form instead of an open, easy-to-
   scan layout. This override is scoped to ONLY the checkout page (via the
   body.woocommerce-checkout class WooCommerce already adds) so no other
   page using that same container class is affected.

   #customer_details (60%) and #order_review (36%) are already percentage-
   based in the theme's own CSS, so widening the parent here is all that's
   needed — both columns scale up and the payment/order section gets real
   room to breathe instead of being a cramped sidebar. */
body.woocommerce-checkout .container.content-page {
	max-width: 1400px;
}

@media (min-width: 1024px) {
	body.woocommerce-checkout #customer_details {
		padding-right: 2.5em;
	}

	body.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout #order_review {
		padding-left: 0;
	}
}

/* Theme's own default .payment_box background (light lavender, meant for
   a light theme) gets overridden here so it matches the dark site instead. */
.woocommerce form .payment_box,
.payment_box {
	background: var(--cap-surface) !important;
	color: var(--cap-text) !important;
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
}

.woocommerce form .payment_box::before {
	display: none; /* remove theme's default speech-bubble arrow, which was tuned for the light box color */
}

/* Payment method icon next to each gateway title in WooCommerce's radio list */
.cap-payment-icon {
	display: inline-block;
	object-fit: contain;
	vertical-align: middle;
}

/* Instructions box shown when a method is selected on checkout, or on the
   thank-you / view-order pages */
.cap-payment-instructions {
	margin-top: 0.5em;
	color: var(--cap-text);
}

.cap-payment-instructions--thankyou {
	margin-top: 0;
}

.cap-crypto-label {
	font-weight: 600;
	margin: 0 0 0.5em;
	color: var(--cap-text);
}

/* Copy-to-clipboard row: label / value / button */
.cap-copy-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 0;
	border-bottom: 1px dashed var(--cap-border);
}

.cap-copy-row:last-of-type {
	border-bottom: none;
}

.cap-copy-row__label {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: var(--cap-text-muted);
	min-width: 100%;
}

.cap-copy-row__value {
	flex: 1 1 auto;
	word-break: break-all;
	background: var(--cap-surface-raised);
	color: var(--cap-text);
	padding: 0.45em 0.6em;
	border-radius: 6px;
	font-size: 0.92em;
	border: 1px solid var(--cap-border);
}

.cap-copy-btn {
	flex: 0 0 auto;
	font-size: 0.85em !important;
	padding: 0.45em 1em !important;
	cursor: pointer;
	background: transparent !important;
	color: var(--cap-accent) !important;
	border: 1px solid var(--cap-accent) !important;
	border-radius: 6px !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cap-copy-btn:hover,
.cap-copy-btn:focus {
	background: var(--cap-accent) !important;
	color: var(--cap-accent-contrast) !important;
}

.cap-copy-btn.is-copied {
	background: var(--cap-accent) !important;
	color: var(--cap-accent-contrast) !important;
	border-color: var(--cap-accent) !important;
}

@media (min-width: 480px) {
	.cap-copy-row__label {
		min-width: 220px;
	}
}

/* QR code — kept on a white card regardless of theme, since scanners need
   real black/white contrast, but framed to sit comfortably in a dark card. */
.cap-qr-wrap {
	margin: 1em 0;
	text-align: center;
}

.cap-qr-wrap .cap-qr-code {
	display: inline-block;
	max-width: 200px !important;
	width: 200px !important;
	height: 200px !important;
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	background: #fff;
	padding: 8px;
}

/* Notice / alert boxes */
.cap-notice {
	margin: 0.75em 0;
	padding: 0.6em 0.9em;
	border-radius: 6px;
	font-size: 0.92em;
	line-height: 1.5;
}

.cap-notice--warning {
	background: var(--cap-warning-bg);
	border: 1px solid var(--cap-warning-border);
	color: var(--cap-warning-text);
}

.cap-notice--success {
	background: var(--cap-success-bg);
	border: 1px solid var(--cap-success-border);
	color: var(--cap-success-text);
}

.cap-notice--info {
	background: var(--cap-info-bg);
	border: 1px solid var(--cap-info-border);
	color: var(--cap-info-text);
}

.cap-amount-due {
	font-size: 1.05em;
	margin: 0.75em 0;
	color: var(--cap-text);
}

.cap-order-reference-note {
	font-size: 0.9em;
	color: var(--cap-text-muted);
	font-style: italic;
}

/* Bank details block */
.cap-bank-details {
	margin-bottom: 0.5em;
}

.cap-bank-address {
	font-size: 0.92em;
	margin: 0.75em 0;
	color: var(--cap-text);
}

/* External pay link buttons (Cash App / Chime) */
.cap-external-pay-link {
	display: inline-block;
	margin: 0.5em 0;
	background: var(--cap-accent) !important;
	color: var(--cap-accent-contrast) !important;
	border-radius: 6px !important;
	border: none !important;
}

.cap-external-pay-link:hover,
.cap-external-pay-link:focus {
	background: var(--cap-accent-dark) !important;
	color: var(--cap-accent-contrast) !important;
}

/* Order summary block on the thank-you / view-order pages */
.cap-order-payment-block {
	margin: 1.5em 0;
	padding: 1.25em;
	border: 1px solid var(--cap-border);
	border-radius: var(--cap-radius);
	background: var(--cap-surface);
	color: var(--cap-text);
	overflow: hidden; /* same float-collapse protection as the checkout form */
}

.cap-order-payment-block h2 {
	margin-top: 0;
	font-size: 1.15em;
	color: var(--cap-text);
}

.cap-payment-confirmation {
	margin-top: 1.25em;
	padding-top: 1.1em;
	border-top: 1px solid var(--cap-border);
}

.cap-confirm-payment-btn {
	background: var(--cap-accent) !important;
	color: var(--cap-accent-contrast) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.6em 1.3em !important;
	cursor: pointer;
	font-weight: 600;
}

.cap-confirm-payment-btn:hover,
.cap-confirm-payment-btn:focus {
	background: var(--cap-accent-dark) !important;
}

.cap-confirm-payment-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.cap-confirm-payment-result {
	margin-top: 0.6em;
	font-size: 0.92em;
}

.cap-confirm-payment-result.is-error {
	color: var(--cap-error-text);
}

.cap-confirm-payment-result.is-success {
	color: var(--cap-success-text);
}

/* WhatsApp button — kept WhatsApp's own recognizable brand green rather
   than the site accent, since that's what makes it instantly recognizable. */
.cap-whatsapp-block {
	margin: 1.25em 0;
}

.cap-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: #25d366 !important;
	color: #0b1a10 !important;
	border: none !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	font-weight: 600;
	padding: 0.6em 1.3em !important;
}

.cap-whatsapp-btn:hover,
.cap-whatsapp-btn:focus {
	background: #1fb855 !important;
	color: #0b1a10 !important;
}

.cap-whatsapp-icon {
	font-size: 1.1em;
}

.cap-whatsapp-hint {
	font-size: 0.85em;
	color: var(--cap-text-muted);
	margin-top: 0.4em;
}

/* Admin: orders list "Payment" column badges (admin UI stays light-theme,
   these colors are unrelated to the storefront dark palette above). */
.cap-admin-payment-cell {
	line-height: 1.5;
}

.cap-badge {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 600;
	white-space: nowrap;
}

.cap-badge--neutral {
	background: #eee;
	color: #555;
}

.cap-badge--warning {
	background: #fff8e6;
	color: #7a5c00;
	border: 1px solid #e6c65c;
}

.cap-badge--success {
	background: #e9f7ef;
	color: #12603a;
	border: 1px solid #7fcf9f;
}

/* Responsive: the layout above is flex-based and already stacks; these are
   the small extra tweaks that make it feel deliberate rather than just
   "not broken" at tablet and phone widths. */
@media (max-width: 960px) {
	.cap-payment-instructions {
		margin-top: 0.75em;
	}
}

@media (max-width: 480px) {
	.cap-qr-wrap .cap-qr-code {
		max-width: 170px !important;
		width: 170px !important;
		height: 170px !important;
	}

	.cap-copy-btn {
		width: 100%;
	}

	.cap-external-pay-link {
		display: block;
		text-align: center;
	}

	.cap-confirm-payment-btn {
		width: 100%;
	}

	.cap-whatsapp-btn {
		width: 100%;
		justify-content: center;
	}
}