/**
 * Strawberry for Beauty — the short checkout. v1.
 *
 * Unlike cart and my-account, this page is the *classic* [woocommerce_checkout]
 * shortcode, so these selectors are stock WooCommerce form markup
 * (#customer_details, .col2-set, .form-row) rather than .wc-block-components-*.
 * shop-ui.css barely touches that markup — it was written for the block
 * checkout — which is why this page rendered close to stock.
 *
 * The field list is cut down in inc/checkout.php; this file only does layout.
 * Six rows survive: name, country, phone, city, address, then the order review.
 *
 * Scoped under body.sfb-checkout-lite, added by inc/checkout.php on the
 * checkout form only — never on order-received or pay-for-order.
 *
 * Inherits the palette variables from shop-ui.css, which is a declared
 * dependency of this stylesheet. RTL: logical properties only.
 */

/* ---------------------------------------------------------------------------
   1. Column — one, narrow, centred
   ------------------------------------------------------------------------ */

body.sfb-checkout-lite .woocommerce {
	max-inline-size: 620px;
	margin-inline: auto;
}

/* The stock two-column split puts billing beside a now-empty additional-fields
   column. Collapse it. */
body.sfb-checkout-lite #customer_details.col2-set,
body.sfb-checkout-lite #customer_details .col-1,
body.sfb-checkout-lite #customer_details .col-2 {
	inline-size: 100%;
	float: none;
	max-inline-size: none;
	margin: 0;
}

/* order_comments is unset in PHP, so this wrapper renders as an empty box with
   a heading. */
body.sfb-checkout-lite .woocommerce-additional-fields {
	display: none;
}

body.sfb-checkout-lite .woocommerce-billing-fields > h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-block: 0 18px;
}

/* ---------------------------------------------------------------------------
   2. Rows — every field full width, tighter than stock
   ------------------------------------------------------------------------ */

body.sfb-checkout-lite .woocommerce form .form-row {
	inline-size: 100%;
	float: none;
	padding: 0;
	margin-block-end: 14px;
}

body.sfb-checkout-lite .woocommerce form .form-row label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--sfb-ink-soft);
	margin-block-end: 6px;
}

body.sfb-checkout-lite .woocommerce form .form-row .required {
	color: var(--sfb-red);
	text-decoration: none;
}

body.sfb-checkout-lite .woocommerce form .form-row input.input-text,
body.sfb-checkout-lite .woocommerce form .form-row select,
body.sfb-checkout-lite .woocommerce form .form-row .select2-container .select2-selection--single {
	min-block-size: 46px;
	block-size: 46px;
	font-size: .95rem;
}

/* select2 renders its own box on top of the native select; without this it
   keeps the browser default height and sits a few pixels off the others. */
body.sfb-checkout-lite .select2-container .select2-selection--single {
	background: var(--sfb-card);
	border: 1px solid var(--sfb-line);
	border-radius: var(--sfb-radius-sm);
	display: flex;
	align-items: center;
	padding-inline: 14px;
}

body.sfb-checkout-lite .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--sfb-ink);
}

/* The phone always carries a +code prefix now, so it reads left-to-right even
   though the page does not. */
body.sfb-checkout-lite #billing_phone {
	direction: ltr;
	text-align: start;
}

body.sfb-checkout-lite:not([dir='ltr']) #billing_phone {
	text-align: right;
}

/* ---------------------------------------------------------------------------
   3. Order review
   ------------------------------------------------------------------------ */

body.sfb-checkout-lite #order_review_heading {
	font-size: 1.15rem;
	font-weight: 700;
	margin-block: 28px 14px;
}

body.sfb-checkout-lite #order_review {
	inline-size: 100%;
	float: none;
	background: var(--sfb-card);
	border: 1px solid var(--sfb-line);
	border-radius: var(--sfb-radius);
	box-shadow: var(--sfb-shadow);
	padding: 18px;
}

body.sfb-checkout-lite #order_review table.shop_table {
	margin: 0;
	border: 0;
}

body.sfb-checkout-lite #order_review table.shop_table td,
body.sfb-checkout-lite #order_review table.shop_table th {
	padding-inline: 0;
}

body.sfb-checkout-lite #payment {
	background: transparent;
	border-radius: 0;
}

body.sfb-checkout-lite #payment ul.payment_methods {
	border-block-end: 1px solid var(--sfb-line);
	padding-inline: 0;
}

body.sfb-checkout-lite #payment div.form-row.place-order {
	padding-inline: 0;
}

body.sfb-checkout-lite #place_order {
	inline-size: 100%;
}

/* ---------------------------------------------------------------------------
   4. Accessibility and motion
   ------------------------------------------------------------------------ */

body.sfb-checkout-lite .woocommerce form .form-row input.input-text:focus-visible,
body.sfb-checkout-lite .woocommerce form .form-row select:focus-visible,
body.sfb-checkout-lite #place_order:focus-visible {
	outline: 2px solid var(--sfb-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.sfb-checkout-lite * {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

@media (max-width: 600px) {
	body.sfb-checkout-lite .woocommerce {
		max-inline-size: none;
	}

	body.sfb-checkout-lite #order_review {
		padding: 14px;
	}
}