/* ==========================================================================
   CHECKOUT (WooCommerce classic shortcode) — brand theming
   Scoped under .woocommerce-checkout (body class) to avoid leaking styles.
   ========================================================================== */

/* Widen out of the narrow prose column used by the generic page template. */
.woocommerce-checkout .content-prose {
	max-width: 1120px;
	margin: 0 auto;
}

.woocommerce-checkout .woocommerce {
	font-size: 0.95rem;
	color: var(--brand-dark-gray);
}

/* --- Section headings ---------------------------------------------------- */
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--brand-black);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--brand-primary-red);
}

/* "Ship to a different address?" checkbox heading keeps inline checkbox. */
.woocommerce-checkout .woocommerce-shipping-fields > h3 label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border: 0;
	margin: 0;
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
	width: auto;
	accent-color: var(--brand-primary-red);
}

/* --- Coupon toggle notice ------------------------------------------------ */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
	position: relative;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	font-size: 0.85rem;
	line-height: 1.6;
	border: none;
	border-left: 3px solid var(--brand-primary-red);
	border-radius: 0;
	background-color: #fafafa;
	color: var(--brand-dark-gray);
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before {
	display: none;
	content: none;
}

.woocommerce-checkout .woocommerce-error {
	background-color: #fdf3f3;
	color: #8b0a0e;
}

.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-error a {
	color: var(--brand-primary-red);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-checkout .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-message a:hover,
.woocommerce-checkout .woocommerce-error a:hover {
	text-decoration: underline;
}

/* Coupon form (revealed by the toggle). */
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
	border: 1px solid #ebebeb;
	border-radius: 2px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	background-color: #fff;
}

/* --- Layout: customer details + order review ----------------------------- */
.woocommerce-checkout #customer_details.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	width: 100%;
	margin-bottom: 2.5rem;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: auto;
	max-width: none;
	flex: 1 1 320px;
}

/* Remove WooCommerce clearfix pseudo-elements that break the flex layout. */
.woocommerce-checkout #customer_details.col2-set::before,
.woocommerce-checkout #customer_details.col2-set::after {
	display: none;
	content: none;
}

/* --- Form rows / inputs -------------------------------------------------- */
.woocommerce-checkout .form-row {
	float: none;
	width: 100%;
	margin: 0 0 1.35rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.woocommerce-checkout .form-row label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--brand-dark-gray);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.4;
}

.woocommerce-checkout .form-row .required {
	color: var(--brand-primary-red);
	border: 0;
}

.woocommerce-checkout .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.woocommerce-checkout input.input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--brand-dark-gray);
	padding: 0.85rem 1rem;
	border: 1px solid var(--brand-off-white);
	border-radius: 2px;
	background-color: var(--brand-white);
	transition: border-color 0.2s ease;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
	outline: none;
	border-color: var(--brand-primary-red);
}

.woocommerce-checkout textarea {
	min-height: 100px;
	resize: vertical;
}

/* Two-up rows (first name / last name etc.). */
@media (min-width: 620px) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		width: calc(50% - 0.75rem);
		display: inline-flex;
		vertical-align: top;
	}
	.woocommerce-checkout .form-row-first {
		margin-right: 1.5rem;
	}
}

/* Select2 country/state dropdown — match the text inputs. */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto;
	min-height: 48px;
	border: 1px solid var(--brand-off-white);
	border-radius: 2px;
	display: flex;
	align-items: center;
}

.woocommerce-checkout
	.select2-container
	.select2-selection--single
	.select2-selection__rendered {
	line-height: 1.4;
	padding: 0.85rem 1rem;
	color: var(--brand-dark-gray);
}

.woocommerce-checkout
	.select2-container
	.select2-selection--single
	.select2-selection__arrow {
	height: 46px;
}

.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
	border-color: var(--brand-primary-red);
}

/* --- Order review table -------------------------------------------------- */
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
	text-align: left;
	padding: 0.85rem 1rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--brand-medium-gray);
	border-bottom: 2px solid #ebebeb;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 0.9rem 1rem;
	border-bottom: 1px solid #ebebeb;
	color: var(--brand-dark-gray);
	vertical-align: middle;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	font-weight: 600;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	font-size: 1rem;
	color: var(--brand-black);
	border-bottom: none;
}

.woocommerce-checkout
	.woocommerce-checkout-review-order-table
	.order-total
	.amount {
	color: var(--brand-primary-red);
	font-weight: 700;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	color: var(--brand-dark-gray);
	font-weight: 500;
}

/* --- Payment box --------------------------------------------------------- */
.woocommerce-checkout #payment {
	background-color: #fafafa;
	border: 1px solid #ebebeb;
	border-radius: 2px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid #ebebeb;
	padding: 1.25rem 1.5rem;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	color: var(--brand-dark-gray);
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600;
	color: var(--brand-black);
}

.woocommerce-checkout #payment input[type="radio"] {
	accent-color: var(--brand-primary-red);
}

.woocommerce-checkout #payment .payment_box {
	background-color: #fff;
	border: 1px solid #ebebeb;
	border-radius: 2px;
	font-size: 0.85rem;
	color: var(--brand-medium-gray);
}

.woocommerce-checkout #payment .payment_box::before {
	border-bottom-color: #fff;
}

.woocommerce-checkout #payment .place-order {
	padding: 1.25rem 1.5rem;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	font-size: 0.82rem;
	color: var(--brand-medium-gray);
	margin-bottom: 1.25rem;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text a {
	color: var(--brand-primary-red);
	font-weight: 600;
	text-decoration: none;
}

/* --- Place order / pay button (incl. Fena's button) ---------------------- */
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment .place-order button,
.woocommerce-checkout .wc_payment_method .button,
.woocommerce-checkout .fena-checkout-button,
.woocommerce-checkout button.fena-button {
	display: inline-block;
	background-color: var(--brand-primary-red) !important;
	color: var(--brand-white) !important;
	border: 2px solid var(--brand-primary-red) !important;
	padding: 0.95rem 2.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	cursor: pointer;
	line-height: 1.2;
	font-family: inherit;
	transition: all 0.25s ease;
	float: right;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #payment .place-order button:hover,
.woocommerce-checkout .fena-checkout-button:hover,
.woocommerce-checkout button.fena-button:hover {
	background-color: #8b0a0e !important;
	border-color: #8b0a0e !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(187, 13, 18, 0.18);
}

/* --- Login / coupon prompts at top --------------------------------------- */
.woocommerce-checkout .woocommerce-form-login {
	border: 1px solid #ebebeb;
	border-radius: 2px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	background-color: #fff;
}

/* --- Empty cart state ---------------------------------------------------- */
.woocommerce-checkout .cart-empty {
	font-size: 1rem;
	color: var(--brand-medium-gray);
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 560px) {
	.woocommerce-checkout #place_order,
	.woocommerce-checkout #payment .place-order button {
		float: none;
		width: 100%;
		text-align: center;
	}
}
