/*
 * Bridge: WooCommerce checkout markup -> the Hizjaab checkout design.
 *
 * checkout.css was written against the prototype's own class names (.field,
 * .panel, .btn-place, .summary). WooCommerce emits its own structure instead, and
 * that structure has to stay as-is for validation, gateway callbacks and the AJAX
 * total refresh to keep working. So the markup is left alone and mapped here.
 *
 * Values are taken from the design tokens - nothing new is invented.
 */

/* ---------------------------------------------------------------------------
 * Page frame
 * ------------------------------------------------------------------------- */
.checkout-page {
	padding: 48px 0 96px;
}

.checkout-head {
	margin-bottom: 32px;
}

.checkout-head h1 {
	font-family: var(--font-display);
	font-size: 36px;
	color: var(--text-on-base-heading);
	margin: 0 0 8px;
}

.checkout-head p {
	font-size: 14px;
	color: var(--text-on-base-muted);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Section headings inside the panels
 * ------------------------------------------------------------------------- */
.checkout h3,
.checkout .woocommerce-billing-fields h3,
.checkout .woocommerce-additional-fields h3 {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--text-on-base-heading);
	margin: 0 0 18px;
}

.checkout .woocommerce-additional-fields {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--hairline-on-base);
}

/* ---------------------------------------------------------------------------
 * Fields
 *
 * WooCommerce lays rows out with form-row-first / form-row-last floats. A grid
 * is both simpler and what the design actually shows.
 * ------------------------------------------------------------------------- */
.checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.checkout p.form-row {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
}

.checkout p.form-row-wide,
.checkout p.form-row.notes {
	grid-column: 1 / -1;
}

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

.checkout label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-on-base-muted);
	margin-bottom: 7px;
}

.checkout .required {
	color: var(--taupe-400);
	text-decoration: none;
}

.checkout input.input-text,
.checkout textarea,
.checkout select,
.checkout .select2-container .select2-selection {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--text-on-base);
	background: var(--pill-bg);
	border: 1px solid var(--surface-inverse-control-border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	transition: border-color .2s ease;
}

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

.checkout input.input-text:focus,
.checkout textarea:focus,
.checkout select:focus {
	outline: none;
	border-color: var(--state-focus);
}

.checkout .description,
.checkout .woocommerce-input-wrapper > span.description {
	display: block;
	font-size: 12px;
	color: var(--text-on-base-muted);
	margin-top: 6px;
}

/* Country is fixed to Bangladesh and hidden by inc/checkout.php. */
.checkout .hz-hidden,
.checkout #billing_country_field {
	display: none;
}

/*
 * The phone field carries a fixed +880 prefix. Rendering it as a pseudo-element
 * on the wrapper keeps it out of the input's value, so what is submitted stays
 * the 11 local digits that inc/checkout.php validates.
 */
.checkout .hz-field-phone .woocommerce-input-wrapper {
	position: relative;
	display: block;
}

.checkout .hz-field-phone .woocommerce-input-wrapper::before {
	content: "+880";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--text-on-base-muted);
	pointer-events: none;
}

.checkout .hz-field-phone input.input-text {
	padding-left: 62px;
}

/* ---------------------------------------------------------------------------
 * Order summary
 * ------------------------------------------------------------------------- */
.checkout .shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.checkout .shop_table th,
.checkout .shop_table td {
	border: 0;
	padding: 10px 0;
	font-size: 14px;
	color: var(--text-on-base);
	text-align: left;
}

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

.checkout .shop_table tfoot tr:last-child th,
.checkout .shop_table tfoot tr:last-child td {
	border-top: 1px solid var(--hairline-on-base);
	padding-top: 16px;
	font-size: 16px;
	color: var(--text-on-base-heading);
	font-weight: 600;
}

.checkout .product-name .variation {
	font-size: 12px;
	color: var(--text-on-base-muted);
	margin: 4px 0 0;
}

/* ---------------------------------------------------------------------------
 * Shipping and payment choices -> the design's option cards
 * ------------------------------------------------------------------------- */
.checkout ul#shipping_method,
.checkout ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.checkout ul#shipping_method li,
.checkout ul.payment_methods li {
	border: 1px solid var(--surface-inverse-control-border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin: 0;
}

.checkout ul#shipping_method li label,
.checkout ul.payment_methods li label {
	display: inline;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-on-base);
	margin: 0 0 0 8px;
}

.checkout .payment_box {
	font-size: 12px;
	color: var(--text-on-base-muted);
	margin: 10px 0 0;
	padding: 0;
	background: none;
}

.checkout .payment_box::before {
	display: none;
}

.checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 12px;
	color: var(--text-on-base-muted);
	margin-top: 16px;
}

/* ---------------------------------------------------------------------------
 * Place order
 * ------------------------------------------------------------------------- */
.checkout #place_order {
	width: 100%;
	margin-top: 22px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 18px 32px;
	border-radius: var(--radius-pill);
	background: var(--taupe-400);
	color: var(--plum-950);
	border: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.checkout #place_order:hover {
	background: var(--taupe-600);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Coupon and notices
 * ------------------------------------------------------------------------- */
.woocommerce-form-coupon-toggle,
.checkout_coupon {
	margin-bottom: 24px;
}

.checkout_coupon .form-row {
	display: inline-block;
	margin-right: 8px;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	font-size: 14px;
	border-radius: var(--radius-md);
	padding: 14px 18px;
	margin: 0 0 20px;
	border: 1px solid var(--surface-inverse-card-border);
	background: var(--surface-inverse-card);
	color: var(--text-on-base);
}

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

/* ---------------------------------------------------------------------------
 * Order received
 * ------------------------------------------------------------------------- */
.confirm {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 40px;
}

.confirm__tick {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--taupe-400);
	color: var(--plum-950);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px;
}

.confirm__tick svg {
	width: 28px;
	height: 28px;
}

.confirm h1 {
	font-family: var(--font-display);
	font-size: 40px;
	color: var(--text-on-base-heading);
	margin: 0 0 10px;
}

.confirm > p {
	font-size: 15px;
	color: var(--text-on-base-muted);
	margin: 0 0 28px;
}

.confirm__order {
	display: grid;
	gap: 12px;
	text-align: left;
	background: var(--surface-inverse-card);
	border: 1px solid var(--surface-inverse-card-border);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
}

.confirm__order div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}

.confirm__order span {
	color: var(--text-on-base-muted);
}

.confirm__order strong {
	color: var(--text-on-base-heading);
	font-weight: 500;
}

.confirm__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 28px;
}

.confirm__actions .btn-place {
	width: auto;
	margin-top: 0;
}

.confirm__receipt {
	max-width: 620px;
	margin: 0 auto;
	display: grid;
	gap: 18px;
}

.totals-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--text-on-base);
}

.totals-row.is-total {
	font-size: 16px;
	color: var(--text-on-base-heading);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Two-column defaults from WooCommerce and Astra
 *
 * WooCommerce floats #customer_details and #order_review at 48% each to build its
 * own two-column checkout. Our template already places them in a CSS grid, so
 * those floats only squeezed the order summary down to a third of its column -
 * which is why the totals table wrapped one word per line.
 * ------------------------------------------------------------------------- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * Astra's page title
 *
 * Astra prints the page title above the content, so the checkout showed two H1s
 * reading "Checkout" - one from the theme, one from our own header block. The
 * design's heading is the one that belongs.
 * ------------------------------------------------------------------------- */
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-account .entry-title,
.woocommerce-checkout .ast-single-post-order,
.woocommerce-cart .ast-single-post-order,
.woocommerce-checkout header.entry-header,
.woocommerce-cart header.entry-header {
	display: none;
}

/* Coupon toggle sits above the grid; keep it inside the design's column. */
.woocommerce-form-coupon-toggle {
	max-width: 1360px;
	margin: 0 auto 24px;
}

/* ---------------------------------------------------------------------------
 * Cart
 *
 * The cart is reachable from the header on every page, so it gets the same
 * treatment as checkout. WooCommerce's default table, blue buttons and white
 * inputs are mapped onto the design's tokens.
 * ------------------------------------------------------------------------- */
.woocommerce-cart .shop_table.cart {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin-bottom: 32px;
}

.woocommerce-cart .shop_table.cart th {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--text-on-base-muted);
	text-align: left;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--hairline-on-base);
	font-weight: 400;
}

.woocommerce-cart .shop_table.cart td {
	padding: 20px 0;
	border: 0;
	border-bottom: 1px solid var(--hairline-on-base-soft);
	color: var(--text-on-base);
	font-size: 14px;
	vertical-align: middle;
}

.woocommerce-cart .product-thumbnail img {
	width: 84px;
	height: 100px;
	object-fit: contain;
	background: var(--surface-inverse-media);
	border-radius: var(--radius-md);
	padding: 6px;
}

.woocommerce-cart .product-name a {
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--text-on-base-heading);
	text-decoration: none;
}

.woocommerce-cart .product-name .variation {
	font-size: 12px;
	color: var(--text-on-base-muted);
	margin: 6px 0 0;
}

.woocommerce-cart .product-remove a.remove {
	width: 26px;
	height: 26px;
	line-height: 24px;
	border-radius: 50%;
	color: var(--text-on-base-muted);
	background: var(--pill-bg);
	text-align: center;
	font-size: 16px;
}

.woocommerce-cart .product-remove a.remove:hover {
	background: var(--state-error);
	color: #fff;
}

.woocommerce-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--surface-inverse-control-border);
	border-radius: var(--radius-pill);
	padding: 3px;
}

.woocommerce-cart .quantity input.qty {
	width: 54px;
	height: 32px;
	text-align: center;
	background: transparent;
	border: none;
	color: var(--text-on-base);
	font-family: var(--font-sans);
	font-size: 14px;
	padding: 0;
	box-shadow: none;
}

/* Coupon row and Update cart */
.woocommerce-cart .coupon {
	display: flex;
	gap: 10px;
	align-items: center;
}

.woocommerce-cart #coupon_code {
	width: 200px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--text-on-base);
	background: var(--pill-bg);
	border: 1px solid var(--surface-inverse-control-border);
	border-radius: var(--radius-pill);
	padding: 12px 18px;
}

/* Every WooCommerce button on cart and checkout takes a design treatment. */
.woocommerce-cart .button,
.woocommerce-cart button.button,
.woocommerce-cart input.button,
.woocommerce-cart a.button {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 14px 26px;
	min-height: 46px;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-on-base);
	border: 1px solid var(--surface-inverse-control-border);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.woocommerce-cart .button:hover {
	background: var(--pill-bg);
	border-color: var(--taupe-400);
}

/* Proceed to checkout is the primary action. */
.woocommerce-cart .checkout-button,
.woocommerce-cart a.checkout-button.button {
	width: 100%;
	background: var(--taupe-400);
	color: var(--plum-950);
	border-color: transparent;
	padding: 18px 32px;
}

.woocommerce-cart .checkout-button:hover {
	background: var(--taupe-600);
	color: #fff;
	border-color: transparent;
}

.woocommerce-cart .cart_totals {
	background: var(--surface-inverse-card);
	border: 1px solid var(--surface-inverse-card-border);
	border-radius: var(--radius-lg);
	padding: 28px;
}

.woocommerce-cart .cart_totals h2 {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--text-on-base-heading);
	margin: 0 0 18px;
}

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

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	border: 0;
	padding: 10px 0;
	font-size: 14px;
	color: var(--text-on-base);
	text-align: left;
}

.woocommerce-cart .cart_totals td {
	text-align: right;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 1px solid var(--hairline-on-base);
	padding-top: 16px;
	font-size: 16px;
	color: var(--text-on-base-heading);
	font-weight: 600;
}

.woocommerce-cart .cart-collaterals {
	width: 100%;
	max-width: 420px;
	margin-left: auto;
}

/* WooCommerce floats the totals panel at 48% of .cart-collaterals. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
	max-width: none;
}

.woocommerce-cart .cart-collaterals::after {
	content: '';
	display: block;
	clear: both;
}

/* WooCommerce's grid stylesheet sizes this image with a long selector of its
   own; the design's 3:4 crop has to out-specify it. */
.woocommerce-js.woocommerce-cart table.shop_table td.product-thumbnail img,
.woocommerce-cart table.cart td.product-thumbnail img {
	width: 84px;
	height: 100px;
	max-width: none;
	object-fit: contain;
}

/* The cart's action row: coupon on the left, update on the right. */
.woocommerce-cart td.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 0;
}