/*
 * Simple Bangla — cart, checkout and thank-you.
 *
 * Loaded only on those three views. Much of this restyles markup WooCommerce emits itself
 * (.woocommerce-billing-fields, #order_review, .shop_table), because the form is left to
 * WooCommerce so gateways and shipping plugins keep working.
 */

.sb-checkout {
	padding-bottom: var(--sb-space-7);
}

/* -- Banner + step bar -- */

.sb-checkout__banner {
	margin-bottom: var(--sb-space-6);
	padding-block: var(--sb-space-5);
	background: #1f2740;
	color: #ffffff;
}

.sb-checkout__title {
	margin: 0 0 var(--sb-space-5);
	font-family: var(--sb-font-display);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	color: #ffffff;
}

.sb-steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 560px;
}

.sb-steps__item {
	position: relative;
	flex: 1 1 0;
	text-align: center;
}

/*
 * The connecting rule is drawn by each step except the first, reaching back to its neighbour.
 * Doing it this way means the line is always exactly the gap between two markers.
 */
.sb-steps__item + .sb-steps__item::before {
	content: "";
	position: absolute;
	top: 21px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: rgb(255 255 255 / 25%);
}

.sb-steps__item--done::before,
.sb-steps__item--current::before {
	background: #22c55e;
}

.sb-steps__link {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--sb-space-2);
	color: rgb(255 255 255 / 60%);
	font-size: var(--sb-text-sm);
	text-decoration: none;
}

.sb-steps__marker {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sb-radius-pill);
	background: rgb(255 255 255 / 15%);
	color: #ffffff;
}

.sb-steps__item--done .sb-steps__link,
.sb-steps__item--current .sb-steps__link {
	color: #ffffff;
}

.sb-steps__item--done .sb-steps__marker,
.sb-steps__item--current .sb-steps__marker {
	background: #22c55e;
}

/* -- Instruction line -- */

/*
 * The one sentence telling a customer what this page wants from them, so it is set as a headline
 * closed by a rule rather than boxed like a notice — a box would read as one more thing to
 * dismiss, next to the cart notice that really is one.
 */
.sb-checkout__instruction {
	margin: 0 0 var(--sb-space-5);
	padding-bottom: var(--sb-space-4);
	border-bottom: 1px solid var(--sb-line);
	font-size: var(--sb-text-xl);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

/* -- Layout -- */

.sb-checkout__form {
	display: grid;
	gap: var(--sb-space-5);
	align-items: start;
}

@media (min-width: 900px) {
	.sb-checkout__form {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--sb-space-6);
	}
}

/* The address and the delivery choice are two stacked cards, not one long panel. */
.sb-checkout__details {
	display: grid;
	gap: var(--sb-space-4);
}

/*
 * WooCommerce core CSS floats `.col2-set .col-1` at 48% width, sized for its own two-column
 * billing/shipping layout. This theme keeps the `col2-set`/`col-1` classes (see the note in
 * form-checkout.php) but dropped `.col-2`, so without this override the billing box is stuck
 * at half width instead of filling the column like the shipping and order boxes beside it.
 */
.sb-checkout .col2-set,
.sb-checkout .col2-set .col-1 {
	float: none;
	width: 100%;
}

.sb-checkout__block,
.sb-checkout__order {
	padding: var(--sb-space-4);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
}

.sb-checkout__legend,
.sb-checkout__subtitle {
	margin: 0 0 var(--sb-space-4);
	font-family: var(--sb-font-heading);
	font-size: var(--sb-text-lg);
	font-weight: 700;
}

/* -- Fields -- */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display: grid;
	gap: var(--sb-space-3);
}

@media (min-width: 600px) {
	.woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	/* Name and phone share a line; the address and anything else take a full one. */
	.woocommerce-billing-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

.sb-checkout .form-row {
	margin: 0;
	padding: 0;
}

/*
 * WooCommerce core CSS floats `.form-row-first` / `.form-row-last` at 47% width — sized for a
 * row it expects to lay out itself. This theme lays the same two fields out with CSS Grid
 * instead (see `.woocommerce-billing-fields__field-wrapper` above), so without this override
 * the name field was shrinking twice: once to its grid cell, then again to 47% of that cell.
 *
 * Core's rule is `.woocommerce form .form-row-first` — two classes plus a type selector, which
 * outranks a plain two-class override regardless of source order. Qualifying by the field
 * wrapper (a class this theme controls) adds a third class so this one wins outright, without
 * reaching for `!important`.
 */
.sb-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.sb-checkout .woocommerce-billing-fields__field-wrapper .form-row-last {
	float: none;
	width: 100%;
}

.sb-checkout label {
	display: block;
	margin-bottom: var(--sb-space-1);
	font-size: var(--sb-text-sm);
	font-weight: 600;
}

/*
 * On a four-field form the placeholder already asks the question, and a label above each box
 * asks it a second time. The label stays in the markup for screen readers and for anyone
 * clicking it; it is the duplication on screen that goes. Fields a plugin adds elsewhere on the
 * page keep their visible labels.
 */
.sb-checkout .woocommerce-billing-fields__field-wrapper > .form-row > label,
.sb-checkout__note > .form-row > label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sb-checkout .required {
	color: var(--sb-sale);
	text-decoration: none;
}

.sb-checkout input[type="text"],
.sb-checkout input[type="tel"],
.sb-checkout input[type="email"],
.sb-checkout input[type="password"],
.sb-checkout textarea,
.sb-checkout select,
.sb-checkout .select2-selection {
	width: 100%;
	min-height: 46px;
	padding: var(--sb-space-2) var(--sb-space-3);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg);
	color: var(--sb-ink);
	font-family: inherit;
	font-size: var(--sb-text-base);
}

/*
 * WooCommerce's enhanced country/state select (Select2) writes its own inline
 * `width: Npx` on `.select2-container` at init time, computed from the hidden native
 * <select> before the grid layout has settled — so it lands narrow and clips the
 * selected country's name. `width: 100%` on `.select2-selection` above cannot fix this;
 * it resolves against that same inline-widthed parent. An inline style is the one thing
 * only `!important` can override, so it is used here and nowhere else in the theme.
 */
.sb-checkout .select2-container {
	width: 100% !important;
}

.sb-checkout textarea {
	min-height: 90px;
}

.sb-checkout ::placeholder {
	color: var(--sb-muted);
	opacity: 1;
}

.sb-checkout input:focus-visible,
.sb-checkout textarea:focus-visible,
.sb-checkout select:focus-visible {
	outline: 2px solid var(--sb-brand);
	outline-offset: 1px;
}

/*
 * Some browsers draw a red border/glow on an empty `required` field on their own — no rule of
 * ours asks for it. Left alone, the name and address boxes look broken before the customer has
 * touched anything. WooCommerce's own `.woocommerce-invalid` class (added after a failed submit)
 * is untouched, so a genuine validation error still shows.
 */
.sb-checkout input:required:invalid,
.sb-checkout textarea:required:invalid {
	box-shadow: none;
	border-color: var(--sb-line);
}

/*
 * The store sells to one country, so WooCommerce prints its name beside a hidden input instead
 * of a select. Dressed as a filled-in disabled field: it is information, not a blank.
 */
.sb-checkout #billing_country_field .woocommerce-input-wrapper strong {
	display: block;
	padding: 13px var(--sb-space-3);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg-alt);
	color: var(--sb-muted);
	font-weight: 400;
}

/* -- Delivery charge -- */

.sb-shipping {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-sm);
	overflow: hidden;
}

.sb-shipping__option {
	display: flex;
	align-items: center;
	gap: var(--sb-space-3);
	padding: var(--sb-space-3);
}

.sb-shipping__option + .sb-shipping__option {
	border-top: 1px solid var(--sb-line);
}

.sb-shipping input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--sb-brand);
}

/* The whole row is the target, not just the eight-pixel dot. */
.sb-shipping__option label {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--sb-space-3);
	margin: 0;
	font-size: var(--sb-text-base);
	font-weight: 400;
	cursor: pointer;
}

.sb-shipping__cost {
	font-weight: 700;
	white-space: nowrap;
}

/* -- Order review -- */

.sb-checkout .shop_table {
	width: 100%;
	border-collapse: collapse;
}

.sb-checkout .shop_table th,
.sb-checkout .shop_table td {
	padding: var(--sb-space-3) 0;
	border-bottom: 1px solid var(--sb-line);
	text-align: left;
	vertical-align: middle;
	font-size: var(--sb-text-sm);
}

.sb-checkout .shop_table thead th {
	font-weight: 700;
}

.sb-checkout .shop_table td:last-child,
.sb-checkout .shop_table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.sb-checkout .shop_table tfoot .order-total th,
.sb-checkout .shop_table tfoot .order-total td {
	border-bottom: 0;
	font-size: var(--sb-text-lg);
	font-weight: 700;
}

.sb-order-line {
	display: flex;
	align-items: center;
	gap: var(--sb-space-2);
}

.sb-order-line__media img {
	display: block;
	width: 48px;
	height: 48px;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg);
	object-fit: contain;
}

/*
 * A way out of a wrong line without going back to the cart. Small and grey until hovered —
 * removing something is not what this page is for.
 */
.sb-order-line__remove {
	display: grid;
	flex: none;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-bg-alt);
	color: var(--sb-muted);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--sb-transition), color var(--sb-transition);
}

.sb-order-line__remove:hover,
.sb-order-line__remove:focus-visible {
	background: var(--sb-sale);
	color: #ffffff;
}

.sb-checkout .product-quantity {
	display: block;
	color: var(--sb-muted);
	font-weight: 400;
}

/* -- Payment -- */

.sb-checkout #payment {
	margin-top: var(--sb-space-4);
}

.sb-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-sm);
}

.sb-checkout #payment ul.payment_methods > li {
	padding: var(--sb-space-3);
}

.sb-checkout #payment ul.payment_methods > li + li {
	border-top: 1px solid var(--sb-line);
}

.sb-checkout #payment ul.payment_methods label {
	display: inline;
	font-size: var(--sb-text-base);
}

.sb-checkout #payment .payment_box {
	margin-top: var(--sb-space-3);
	padding: var(--sb-space-3);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg-alt);
	color: var(--sb-muted);
	font-size: var(--sb-text-sm);
}

.sb-checkout #payment .payment_box p {
	margin: 0;
}

.sb-checkout__submit-note {
	margin: var(--sb-space-4) 0 var(--sb-space-3);
	color: var(--sb-muted);
	font-size: var(--sb-text-sm);
	text-align: center;
}

/*
 * Place order. Green rather than the theme's black, because on this one page the button is a
 * commitment rather than navigation and it should not look like every other link.
 */
.sb-checkout #place_order {
	display: block;
	width: 100%;
	padding: var(--sb-space-3) var(--sb-space-5);
	border: 0;
	border-radius: var(--sb-radius);
	background: #16a34a;
	color: #ffffff;
	font-family: inherit;
	font-size: var(--sb-text-lg);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color var(--sb-transition);
}

.sb-checkout #place_order:hover {
	background: #15803d;
}

/* -- Coupon -- */

/*
 * Left as a plain line of text. It has to stay above the form — see the note in
 * inc/woocommerce.php — but a bordered "enter a code" panel there is the first thing a customer
 * meets on the page they came to complete, and mostly sends them off to hunt for a code.
 */
.woocommerce-form-coupon-toggle {
	margin-bottom: var(--sb-space-4);
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--sb-text-sm);
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
	content: none;
}

.checkout_coupon {
	display: grid;
	gap: var(--sb-space-2);
	margin-top: var(--sb-space-3);
	padding: var(--sb-space-3);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg-alt);
}

/* -- Notices -- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sb-space-3);
	list-style: none;
	margin: 0 0 var(--sb-space-5);
	padding: var(--sb-space-3) var(--sb-space-4);
	border: 1px solid var(--sb-ink);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg);
	font-size: var(--sb-text-sm);
}

.woocommerce-message::before,
.woocommerce-error::before {
	display: grid;
	flex: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--sb-radius-pill);
	color: #ffffff;
	font-size: 14px;
	line-height: 1;
}

.woocommerce-message::before {
	content: "\2713";
	background: #16a34a;
}

.woocommerce-error {
	border-color: var(--sb-sale);
}

.woocommerce-error::before {
	content: "!";
	background: var(--sb-sale);
}

/*
 * WooCommerce prints the button before the message text, so it is ordered last and pushed to the
 * far end rather than reordered in the markup, which would mean overriding the notice function.
 */
.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	margin-left: auto;
	padding: var(--sb-space-2) var(--sb-space-4);
	border-radius: var(--sb-radius-sm);
	background: var(--sb-brand);
	color: #ffffff;
	font-size: var(--sb-text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Thank you
 * ------------------------------------------------------------------ */

.sb-thankyou__card {
	display: grid;
	justify-items: center;
	gap: var(--sb-space-3);
	padding: var(--sb-space-6) var(--sb-space-4);
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
	text-align: center;
}

.sb-thankyou__tick {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: var(--sb-radius-pill);
	background: #dcfce7;
	color: #16a34a;
}

.sb-thankyou__lead {
	margin: 0;
	font-family: var(--sb-font-heading);
	font-size: var(--sb-text-xl);
}

.sb-thankyou__lead--failed {
	color: var(--sb-sale);
}

.sb-thankyou__note {
	margin: 0;
	max-width: 46ch;
	color: var(--sb-muted);
}

.sb-thankyou__overview {
	display: grid;
	gap: var(--sb-space-3);
	list-style: none;
	margin: var(--sb-space-5) 0;
	padding: var(--sb-space-4);
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
}

.sb-thankyou__overview li {
	display: flex;
	justify-content: space-between;
	gap: var(--sb-space-3);
	padding-bottom: var(--sb-space-2);
	border-bottom: 1px solid var(--sb-line);
	font-size: var(--sb-text-sm);
}

.sb-thankyou__overview li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sb-thankyou__overview span {
	color: var(--sb-muted);
}

.sb-thankyou__actions {
	text-align: center;
}

@media (min-width: 600px) {
	.sb-thankyou__overview {
		grid-template-columns: 1fr 1fr;
		gap: var(--sb-space-3) var(--sb-space-6);
	}
}

/* ------------------------------------------------------------------ *
 * Cart
 * ------------------------------------------------------------------ */

.woocommerce-cart-form {
	margin-bottom: var(--sb-space-5);
}

.woocommerce-cart-form .shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart-form th,
.woocommerce-cart-form td {
	padding: var(--sb-space-3);
	border-bottom: 1px solid var(--sb-line);
	text-align: left;
	font-size: var(--sb-text-sm);
	vertical-align: middle;
}

.woocommerce-cart-form img {
	width: 64px;
	height: auto;
	border-radius: var(--sb-radius-sm);
}

.cart_totals {
	padding: var(--sb-space-4);
	border-radius: var(--sb-radius);
	background: var(--sb-bg);
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals th,
.cart_totals td {
	padding: var(--sb-space-2) 0;
	border-bottom: 1px solid var(--sb-line);
	text-align: left;
	font-size: var(--sb-text-sm);
}

.wc-proceed-to-checkout {
	margin-top: var(--sb-space-4);
}

.wc-proceed-to-checkout .checkout-button {
	display: block;
	padding: var(--sb-space-3) var(--sb-space-5);
	border-radius: var(--sb-radius);
	background: #16a34a;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

/* Small screens: the cart table stops being a table and becomes stacked rows. */
@media (max-width: 599px) {
	.woocommerce-cart-form thead {
		display: none;
	}

	.woocommerce-cart-form tr {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--sb-space-2);
		padding-block: var(--sb-space-3);
		border-bottom: 1px solid var(--sb-line);
	}

	.woocommerce-cart-form td {
		padding: 0;
		border: 0;
	}

	.woocommerce-cart-form .product-name {
		font-weight: 600;
	}
}