/* ============================================================
   BALOCH HOTEL — CART & CHECKOUT
   ------------------------------------------------------------
   Both pages are WooCommerce *block* checkout (not the classic
   shortcode), so nothing here can be reached through the usual
   `.woocommerce` selectors — the markup is all `wc-block-*` and it
   ships with its own self-contained styling. Left alone it renders in
   the system UI font with a dark grey square submit button, which is
   the only place on the site that does not look like the brand.

   These rules only touch typography, colour and the button geometry.
   The block layout itself is left to WooCommerce so a plugin update
   cannot break the checkout — the one thing on this site that must
   never break.

   SPECIFICITY: WooCommerce sets many of these on `.wc-block-*`
   directly and loads after the theme, so a `body` prefix is used to
   break the tie rather than !important.
   ============================================================ */

/* ------------------------------------------------------------
   1. PAGE FRAME
   ------------------------------------------------------------ */

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* ------------------------------------------------------------
   1b. NARROW SCREENS — reclaiming width for the line-item table

   WooCommerce renders a cart line as a real <table> row even in its
   mobile mode, and `table-layout: auto` means the table can never be
   narrower than the sum of its cells' min-content widths. Those
   minimums are fixed in WooCommerce's own CSS (80px image cell, a
   quantity stepper with 30px buttons around a 40px input), and they add
   up to ~358px — more than a 375px phone has left once the page has any
   gutter at all, so the table spilled past the right edge.

   Trimming the stepper and the thumbnail on small screens brings the
   table back inside the page. Nothing here changes the layout WooCommerce
   chose, only how tight it packs.
   ------------------------------------------------------------ */

@media (max-width: 480px) {
	body.woocommerce-cart .wp-block-woocommerce-cart,
	body.woocommerce-checkout .wp-block-woocommerce-checkout {
		padding-inline: 16px;
	}

	body .wc-block-cart-item__image,
	body .wc-block-cart-item__image img {
		width: 64px;
	}

	body .wc-block-components-quantity-selector {
		min-width: 0;
		width: auto;
	}

	body .wc-block-components-quantity-selector__input {
		min-width: 32px;
		width: 32px;
	}

	body .wc-block-components-quantity-selector__button {
		min-width: 26px;
		width: 26px;
		padding-inline: 0;
	}
}

/* The page title comes from the block template and inherits nothing. */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout .wp-block-post-title {
	max-width: 1200px;
	/* Clears the sticky header — without the top margin the cap-height of
	   the title sits right against it. */
	margin: 28px auto 14px;
	padding-inline: 20px;
	font-family: var(--bh-font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 35.2px;
	letter-spacing: -0.16px;
	color: var(--bh-dark);
}

@media (min-width: 1025px) {
	body.woocommerce-cart .entry-title,
	body.woocommerce-checkout .entry-title,
	body.woocommerce-cart .wp-block-post-title,
	body.woocommerce-checkout .wp-block-post-title {
		font-size: 42px;
		line-height: 46px;
		letter-spacing: -0.4px;
	}
}


/* ------------------------------------------------------------
   2. TYPE
   ------------------------------------------------------------ */

body .wp-block-woocommerce-cart,
body .wp-block-woocommerce-checkout,
body .wc-block-components-form,
body .wc-block-components-text-input input,
body .wc-block-components-textarea.wc-block-components-textarea,
body .wc-block-components-select__select.wc-block-components-select__select {
	font-family: var(--bh-font-body);
	color: var(--bh-dark);
}

/* Step titles are deliberately NOT in this list — the reference sets
   them in the UI face at 20px/600, which section 4b does. */
body .wc-block-components-title,
body .wc-block-cart__totals-title {
	font-family: var(--bh-font-display);
	font-weight: 400;
	letter-spacing: -0.16px;
	color: var(--bh-dark);
	text-transform: none;
}

body .wc-block-components-product-name {
	font-family: var(--bh-font-body);
	font-weight: 500;
	color: var(--bh-dark);
	text-decoration: none;
}

body .wc-block-components-product-name:hover {
	color: var(--bh-red);
}

/* Totals row — the number people actually look for. */
body .wc-block-components-totals-item__value {
	font-family: var(--bh-font-body);
	font-weight: 600;
	color: var(--bh-dark);
}

body .wc-block-components-formatted-money-amount,
body .wc-block-components-product-price {
	font-family: var(--bh-font-body);
}

/* Only the amount itself may not break — "₨2,900.00" wrapping to
   "₨2,900.0 / 0" looks like a different number. Scoping `nowrap` to the
   amount and not to the whole price container matters: the container
   also holds the sale badge, and making the pair unbreakable gave the
   cart table a min-width wider than a 375px screen. */
body .wc-block-components-formatted-money-amount {
	white-space: nowrap;
}

/* Price above, badge below — side by side they need ~90px, which is
   more than the line-item table can spare on a phone. */
body .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

body .wc-block-components-product-price__regular {
	color: var(--bh-gold-dark);
}


/* ------------------------------------------------------------
   3. BUTTONS
   Same pill as the rest of the site: 15px/24px with 16px 32px of
   padding makes 56px without a min-height.
   ------------------------------------------------------------ */

body .wc-block-components-button:not(.is-link),
body .wp-element-button.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 16px 32px;

	border: 0;
	border-radius: var(--bh-btn-radius);

	background-color: var(--bh-red);
	color: var(--bh-white);

	font-family: var(--bh-font-body);
	font-size: var(--bh-btn-sec-size);
	font-weight: var(--bh-btn-sec-weight);
	line-height: var(--bh-btn-sec-lh);
	letter-spacing: var(--bh-btn-sec-ls);
	text-decoration: none;
	text-transform: none;

	transition: background-color 0.2s ease;
}

body .wc-block-components-button:not(.is-link):hover,
body .wc-block-components-button:not(.is-link):focus {
	background-color: var(--bh-red-dark);
	color: var(--bh-white);
}

/* The block button renders its label in an inner span that carries its
   own alignment; without this the text sits off-centre in the pill. */
body .wc-block-components-button__text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	width: 100%;
}

/* Text-style buttons ("Add coupons", "Remove item") stay quiet. */
body .wc-block-components-button.is-link {
	color: var(--bh-red);
	font-family: var(--bh-font-body);
}


/* ------------------------------------------------------------
   4. FIELDS
   ------------------------------------------------------------ */

/* SPECIFICITY: WooCommerce styles these as
     `.wc-block-components-form .wc-block-components-text-input input[type=email]`
   which is (0,3,1) and loads after the theme. A `body` prefix alone only
   reaches (0,2,1) and loses — the fields silently kept WooCommerce's 4px
   radius. Repeating the wrapper class takes this to (0,3,2) without
   depending on the field sitting inside `.wc-block-components-form`. */

/* Field geometry taken from the reference checkout, measured at 390px:
   a 49px control on a white ground, 1px hairline border, 12px radius,
   ~13px of vertical padding, sitting in a 15px page gutter.

   The one deliberate difference is the text size. The reference sets
   14px; anything under 16px makes iOS Safari zoom the page the moment a
   field takes focus, and this store is ~90% mobile — so 16px it is, with
   the padding trimmed to keep the control on the reference's height. */
body .wc-block-components-text-input.wc-block-components-text-input input[type="text"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="email"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="tel"],
body .wc-block-components-text-input.wc-block-components-text-input input[type="number"],
body .wc-block-components-textarea.wc-block-components-textarea,
body .wc-block-components-select__select.wc-block-components-select__select,
body .wc-blocks-components-select__select.wc-blocks-components-select__select {
	height: 49px;
	padding: 20px 14px 6px;
	border: 1px solid var(--bh-line);
	border-radius: 12px;
	background: var(--bh-white);
	font-family: var(--bh-font-body);
	font-size: 16px;
	line-height: 22px;
	color: var(--bh-dark);
	box-shadow: none;
}

body .wc-block-components-textarea.wc-block-components-textarea {
	height: auto;
	min-height: 92px;
	padding: 14px;
}

/* The floating label sits inside the control, so it needs the same
   inset as the text it labels. */
body .wc-block-components-text-input.wc-block-components-text-input label,
body .wc-blocks-components-select .wc-blocks-components-select__label {
	left: 14px;
	font-family: var(--bh-font-body);
	font-size: 15px;
	color: var(--bh-muted);
}

body .wc-block-components-text-input.wc-block-components-text-input.is-active label {
	font-size: 11.5px;
	letter-spacing: 0.2px;
	transform: translateY(-72%) scale(1);
}

body .wc-block-components-text-input.wc-block-components-text-input.is-active input:focus,
body .wc-block-components-textarea.wc-block-components-textarea:focus,
body .wc-block-components-select__select.wc-block-components-select__select:focus,
body .wc-blocks-components-select__select.wc-blocks-components-select__select:focus {
	border-color: var(--bh-red);
	outline: 2px solid rgba(159, 27, 29, 0.18);
	outline-offset: 0;
}

/* One consistent gap between stacked fields. */
body .wc-block-components-address-form .wc-block-components-text-input,
body .wc-block-components-address-form .wc-blocks-components-select,
body .wc-block-components-address-form .wc-block-components-country-input,
body .wc-block-components-address-form .wc-block-components-state-input {
	margin-top: 10px;
}

body .wc-block-components-checkbox__input:checked,
body .wc-block-components-radio-control__input:checked {
	background-color: var(--bh-red);
	border-color: var(--bh-red);
}

body .wc-block-components-checkbox__label,
body .wc-block-components-radio-control__label {
	font-family: var(--bh-font-body);
	font-size: 15px;
	color: var(--bh-dark);
}


/* ------------------------------------------------------------
   4b. STEP HEADINGS
   Reference: 20px/600 for a step, 16px/600 for a sub-heading.
   ------------------------------------------------------------ */

body .wc-block-components-checkout-step__heading {
	margin: 0 0 4px;
}

body .wc-block-components-checkout-step__title.wc-block-components-checkout-step__title {
	font-family: var(--bh-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0;
	color: var(--bh-dark);
	text-transform: none;
}

body .wc-block-components-checkout-step__description {
	font-family: var(--bh-font-body);
	font-size: 14px;
	line-height: 21px;
	color: var(--bh-muted);
}

body .wc-block-components-checkout-step {
	padding-bottom: 26px;
}


/* ------------------------------------------------------------
   4c. CHOICE GROUPS  (shipping method, payment method)
   The reference draws these as one bordered, rounded group with the
   selected row tinted and outlined — which is what makes "Free
   Shipping" and "Cash on Delivery" read as the deliberate choices they
   are rather than as loose radio buttons.
   ------------------------------------------------------------ */

body .wc-block-components-radio-control.wc-block-components-radio-control {
	border: 1px solid var(--bh-line);
	border-radius: 12px;
	background: var(--bh-white);
	overflow: hidden;
}

/* The radio input is absolutely positioned at left:16px inside the
   option, so the row's LEFT padding is what keeps the label clear of it.
   Setting `padding: 15px 16px` here wiped WooCommerce's own left inset
   and dropped the label straight underneath the radio — it rendered as a
   dark blob sitting on top of the first letters. 16 + 20 + 10 = 46. */
body .wc-block-components-radio-control-accordion-option,
body .wc-block-components-radio-control__option {
	margin: 0;
	padding: 14px 16px 14px 46px;
	border-bottom: 1px solid var(--bh-line);
}

/* The accordion variant nests its own label row, which carries the
   inset instead — double-padding it pushes the text off centre. */
body .wc-block-components-radio-control-accordion-option {
	padding: 0;
}

body .wc-block-components-radio-control-accordion-option > .wc-block-components-radio-control__option {
	border-bottom: 0;
}

body .wc-block-components-radio-control-accordion-option:last-child,
body .wc-block-components-radio-control__option:last-child {
	border-bottom: 0;
}

/* Selected row. WooCommerce marks it with `--checked` on the accordion
   wrapper and `:checked` on the plain option's input. */
body .wc-block-components-radio-control-accordion-option--checked-option,
body .wc-block-components-radio-control__option--checked-option {
	background: rgba(232, 179, 64, 0.14);
	box-shadow: inset 0 0 0 1.5px var(--bh-gold);
}

body .wc-block-components-radio-control__option-layout {
	font-family: var(--bh-font-body);
}

body .wc-block-components-radio-control__description {
	font-size: 13.5px;
	line-height: 20px;
	color: var(--bh-muted);
}

/* Free Shipping shows "Free" rather than "₨0.00" — keep it prominent. */
body .wc-block-components-radio-control__secondary-label,
body .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__secondary-label {
	font-weight: 600;
	color: var(--bh-green);
}


/* ------------------------------------------------------------
   5. PANELS
   ------------------------------------------------------------ */

body .wc-block-components-sidebar .wc-block-components-panel,
body .wc-block-cart__totals,
body .wc-block-components-order-summary {
	border-radius: 14px;
}

body .wc-block-cart-items__row {
	border-bottom: 1px solid var(--bh-line);
}

body .wc-block-cart-item__image img,
body .wc-block-components-order-summary-item__image img {
	border-radius: 10px;
}

/* WooCommerce's own sale badge — brand colours, not its default grey.
   `white-space: normal` has to be stated, not merely left out:
   WooCommerce sets `nowrap` itself, and the line-item table uses
   `table-layout: auto`, so it can never be narrower than the widest
   unbreakable thing in a cell. Held as one piece, "Save ₨200.00" alone
   set the total column's floor at 87px and pushed the whole table past
   the right edge of a 375px screen. */
body .wc-block-components-sale-badge {
	border-radius: 999px;
	background: var(--bh-gold);
	color: var(--bh-dark);
	font-family: var(--bh-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

body .wc-block-components-notice-banner {
	border-radius: 12px;
	font-family: var(--bh-font-body);
}


/* ------------------------------------------------------------
   5b. ORDER RECEIVED
   The thank-you page is still WooCommerce's classic template, not a
   block, so none of the rules above reach it — and it is the last
   thing a customer sees.
   ------------------------------------------------------------ */

body.woocommerce-order-received .woocommerce {
	max-width: 800px;
	margin-inline: auto;
	padding: 8px 20px 56px;
	font-family: var(--bh-font-body);
	color: var(--bh-dark);
}

body.woocommerce-order-received .woocommerce h2,
body.woocommerce-order-received .woocommerce h3 {
	font-family: var(--bh-font-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.16px;
	color: var(--bh-dark);
}

body.woocommerce-order-received .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin: 22px 0;
	padding: 18px 20px;
	border: 1px solid var(--bh-line);
	border-left: 0;
	border-right: 0;
	list-style: none;
}

body.woocommerce-order-received .woocommerce-order-overview li {
	border: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--bh-muted);
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bh-dark);
}

body.woocommerce-order-received .woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--bh-line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15px;
}

body.woocommerce-order-received .woocommerce table.shop_table th,
body.woocommerce-order-received .woocommerce table.shop_table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--bh-line);
	text-align: left;
}

body.woocommerce-order-received .woocommerce table.shop_table a {
	color: var(--bh-dark);
	text-decoration: none;
}

body.woocommerce-order-received .woocommerce table.shop_table a:hover {
	color: var(--bh-red);
}

body.woocommerce-order-received address {
	font-style: normal;
	line-height: 24px;
}


/* ------------------------------------------------------------
   6. ADD-TO-CART CONFIRMATION (single product)
   Rendered by content-single-product.php. WooCommerce's classic
   notice markup, so it needs its own treatment here.
   ------------------------------------------------------------ */

.bh-product__notices .woocommerce-message,
.bh-product__notices .woocommerce-info,
.bh-product__notices .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;

	margin: 0 0 18px;
	padding: 12px 16px;

	border: 0;
	border-left: 3px solid var(--bh-green);
	border-radius: 10px;

	background: rgba(0, 126, 92, 0.08);

	font-family: var(--bh-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--bh-dark);

	list-style: none;
}

.bh-product__notices .woocommerce-error {
	border-left-color: var(--bh-red);
	background: rgba(159, 27, 29, 0.08);
}

.bh-product__notices .woocommerce-message::before,
.bh-product__notices .woocommerce-info::before,
.bh-product__notices .woocommerce-error::before {
	content: none;
}

.bh-product__notices .button {
	order: 2;

	padding: 6px 16px;

	border-radius: 999px;

	background: var(--bh-green);
	color: var(--bh-white);

	font-size: 12.5px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}

.bh-product__notices .button:hover {
	background: var(--bh-green-dark);
	color: var(--bh-white);
}

.bh-product__notices:empty {
	display: none;
}


/* ------------------------------------------------------------
   7. MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body .wc-block-components-button:not(.is-link) {
		transition: none;
	}
}


/* ------------------------------------------------------------
   8. WHATSAPP HAND-OFF  (thank-you page)
   Markup: inc/whatsapp.php
   ------------------------------------------------------------ */

.bh-wa-panel {
	display: flex;
	align-items: flex-start;
	gap: 14px;

	max-width: 800px;
	margin: 24px auto 8px;
	padding: 18px 20px;

	border: 1px solid rgba(0, 126, 92, 0.28);
	border-radius: 14px;

	background: rgba(0, 126, 92, 0.07);
}

.bh-wa-panel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 40px;
	height: 40px;

	border-radius: 50%;

	background: var(--bh-green);
	color: var(--bh-white);
}

.bh-wa-panel__icon svg {
	width: 23px;
	height: 23px;
}

.bh-wa-panel__body {
	min-width: 0;
}

.bh-wa-panel__title {
	margin: 0 0 4px;
	font-family: var(--bh-font-display);
	font-size: 21px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: -0.16px;
	color: var(--bh-dark);
}

.bh-wa-panel__text {
	margin: 0;
	font-family: var(--bh-font-body);
	font-size: 15px;
	line-height: 23px;
	color: var(--bh-muted);
}

/* Doubled class: the order-received page underlines its links through a
   heavier chain than a single class can beat. */
.bh-wa-panel .bh-wa-panel__btn,
.bh-wa-panel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 14px;
	padding: 13px 26px;

	border-radius: var(--bh-btn-radius);

	background: var(--bh-green);
	color: var(--bh-white);

	font-family: var(--bh-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.3px;
	text-decoration: none;

	transition: background-color 0.2s ease;
}

.bh-wa-panel .bh-wa-panel__btn:hover,
.bh-wa-panel .bh-wa-panel__btn:focus,
.bh-wa-panel__btn:hover,
.bh-wa-panel__btn:focus {
	background: var(--bh-green-dark);
	color: var(--bh-white);
}

.bh-wa-panel__btn:focus-visible {
	outline: 2px solid var(--bh-green-dark);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.bh-wa-panel {
		margin-inline: 16px;
		padding: 16px;
	}

	.bh-wa-panel__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-wa-panel__btn {
		transition: none;
	}
}