/**
 * Checkout / cart GST styling.
 *
 * Two independent halves, matching how the theme splits the checkout:
 *
 *   1. The "GST Details" card in the LEFT column (#thehero_address_col). Its fields use the
 *      theme's own `.form-group` markup, so labels, inputs, heights, focus rings and the
 *      required-asterisk colour all come from css/checkout-form.css — this file only supplies
 *      what that file scopes to the billing/shipping wrappers (field spacing) plus the two
 *      widgets the theme has no equivalent for: the Yes/No toggle and the GSTIN feedback line.
 *
 *   2. The GST rows in the RIGHT column's order-review table, which checkout-form.css
 *      deliberately never touches.
 *
 * Rules that have to beat checkout-form.css are prefixed with #thehero_address_col, because
 * this stylesheet is printed before the theme's (mu-plugins hook earlier than functions.php).
 */

.thehero-gst-fields {
	margin-top: 24px;
}

/* ============================================================
   1. GST Details card — left column
   ============================================================ */

/* checkout-form.css spaces fields via `.woocommerce-billing-fields__field-wrapper > .form-group`,
   which this block is not inside. Same 18px, applied locally. */
#thehero_address_col .thehero-gst-business > .form-group,
#thehero_address_col .thehero-gst-cols {
	margin-bottom: 18px;
}

#thehero_address_col .thehero-gst-business > .form-group:last-child,
#thehero_address_col .thehero-gst-cols:last-child {
	margin-bottom: 0;
}

/* GSTIN and legal name side by side. The grid lives on its own wrapper rather than on
   .thehero-gst-business, because that element is what gst-checkout.js shows and hides — and
   jQuery .show() would write an inline `display` onto it. The two cells are equal width and
   top-aligned, so the GSTIN checksum message can grow to two lines without dragging the name
   field down with it. */
#thehero_address_col .thehero-gst-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
	align-items: start;
	/* Lets the label rule at the bottom of this section react to how much room the pair
	   actually has, rather than to the viewport width. */
	container-type: inline-size;
}

/* The two cells carry WooCommerce's .form-row-first / .form-row-last, and
   woocommerce-layout.css still sizes those at `width: 47%; float: left` — a half of a half,
   which left the inputs at a quarter of the row and squeezed the longer label onto two lines.
   The grid above owns the split now, so each cell takes its whole column. */
#thehero_address_col .thehero-gst-cols > .form-group {
	width: 100%;
	float: none;
	clear: none;
	min-width: 0;
	margin-bottom: 0;
}

/* "Registered business / legal name" is long enough to wrap onto a second line once the pair
   gets narrow (a checkout column on a small laptop), while "GSTIN" never does — which would
   drop one input a line below the other. Below that width both labels reserve two lines and
   sit at the bottom of the reserved box, so the inputs stay on one line and the label-to-input
   gap stays the theme's 7px. table-cell rather than flex, because the label's text and its
   required asterisk have to keep flowing as one inline run.

   Only while the two are actually side by side — below 768px they stack full width, where a
   reserved second line would just be a gap. */
@media (min-width: 768px) {
	@container (max-width: 600px) {
		#thehero_address_col .thehero-gst-cols > .form-group > label {
			display: table-cell;
			vertical-align: bottom;
			width: 100%;
			height: 47px;
			margin: 0;
			padding-bottom: 7px;
		}
	}
}

/* The textarea only needs to hold an address, so it starts shorter than the theme's
   104px order-notes default while staying resizable. */
#thehero_address_col #gst_business_address {
	min-height: 84px;
}

/* ---- "GST Registered?" toggle ---------------------------------------------------------
   No frame of its own. It is already inside the white, bordered .auth-bg card that every
   other section on this page uses, so a second box around it was a frame inside a frame —
   the card IS the box. The block just flows in the card like the fields below it. */
.thehero-gst-registered {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* A display:none element generates no box, so this collapses away on its own when the
   customer answers "No". */
.thehero-gst-business {
	margin-top: 18px;
}

.thehero-gst-registered__label {
	display: block;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--cf-ink, #353b3d);
}

.thehero-gst-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Each option is a full pill so the whole thing is a tap target on mobile, not just the
   6px radio dot. Sized by its own contents: a min-width wide enough for the longer word
   left "No" padded out with dead space on its right, because the row is flex-start
   aligned, and the padding is even on both sides for the same reason. */
.thehero-gst-radio {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid var(--cf-border-strong, #d3d7d9);
	border-radius: var(--cf-radius-sm, 10px);
	background: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--cf-ink, #353b3d);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.thehero-gst-radio:hover {
	border-color: var(--cf-accent, #353b3d);
}

.thehero-gst-radio input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--cf-accent, #353b3d);
	cursor: pointer;
}

.thehero-gst-radio.is-selected {
	border-color: var(--cf-accent, #353b3d);
	box-shadow: 0 0 0 3px rgba(53, 59, 61, .12);
	font-weight: 600;
}

.thehero-gst-hint {
	display: block;
	margin-top: 12px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cf-muted, #8a8f90);
}

/* ---- GSTIN field ---------------------------------------------------------------------- */
#thehero_address_col #gst_number {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

/* Sits on its own line under the input. Reserves a line's height so the card does not
   jump as the checksum result appears and disappears. */
.thehero-gst-feedback {
	display: block;
	margin-top: 7px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	line-height: 18px;
	min-height: 18px;
}

.thehero-gst-feedback:empty {
	margin-top: 0;
	min-height: 0;
}

.thehero-gst-feedback.is-checking {
	color: var(--cf-muted, #8a8f90);
}

.thehero-gst-feedback.is-valid {
	color: #1a7f45;
}

.thehero-gst-feedback.is-invalid {
	color: #c0392b;
}

/* Mirror the theme's invalid-field treatment on the input itself, so a bad checksum reads
   the same way as a failed required-field check. */
#thehero_address_col #gst_number_field.thehero-gst-has-error .input-text {
	border-color: #c0392b;
}

/* ============================================================
   2. GST rows in the order-review table — right column
   ============================================================ */
.thehero-gst-row th,
.thehero-gst-row td {
	font-weight: 400;
}

/* The theme opts each money column into right alignment one row class at a time —
   style.css: `table.shop_table td.product-total, tr.cart-subtotal td, tr.order-total td,
   tr.shipping td, tr.cart-discount td { text-align: right }` — and there is no rule covering
   the table as a whole (checkout-redesign.css has one, but it is never enqueued). So these rows
   have to opt in the same way, or their amounts sit left of the Subtotal and Total they belong
   between. Deliberately unscoped, like the theme's own rule, because the same rows are printed
   into the cart totals table as well as the checkout review table. */
.thehero-gst-row td {
	text-align: right;
}

/* The breakup is supporting detail for the Total below it: same table, quieter voice. */
.thehero-gst-row.tax-rate th,
.thehero-gst-row.tax-rate td {
	font-size: 14px;
	color: var(--light-font-color, #797e7f);
}

/* Opens the breakup group, so "Taxable value / CGST / SGST" reads as one unit sitting
   between the Shipping row and the Total. */
.thehero-gst-row--taxable th,
.thehero-gst-row--taxable td {
	padding-top: 14px;
}

/* ============================================================
   3. GST details block on the thank-you page / view order
   ============================================================
   Deliberately built out of the same pieces order-details.php uses for "Order details" — a
   .common-header title over a .woocommerce-table.shop_table — so it reads as one more section
   of the order rather than as something bolted on. Only the two-column proportions need saying
   here: the theme's shop_table rules are written for a Product/Total pair and leave a label
   column far too narrow for "Registered business / legal name". */
.thehero-gst-order-details {
	margin-top: 26px;
}

.thehero-gst-details-table {
	width: 100%;
}

.thehero-gst-details-table th {
	width: 42%;
	font-weight: 500;
	vertical-align: top;
}

.thehero-gst-details-table td {
	vertical-align: top;
	color: var(--light-font-color, #797e7f);
}

/* A GSTIN is read character by character when it is checked against a certificate, so give it
   the same fixed-width treatment the checkout field has. */
.thehero-gst-details-table tr:first-child td {
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
	.thehero-gst-details-table th {
		width: 50%;
	}
}

/* Two 50% columns inside an already-narrow checkout column leave too little room for a
   15-character GSTIN, so the pair stacks below the theme's own tablet breakpoint. */
@media (max-width: 767px) {
	#thehero_address_col .thehero-gst-cols {
		grid-template-columns: 1fr;
	}

	#thehero_address_col .thehero-gst-cols > .form-group:not(:last-child) {
		margin-bottom: 18px;
	}
}

@media (max-width: 575px) {
	.thehero-gst-radio {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
		padding: 10px 14px;
	}
}