/**
 * BG Couriers – checkout parity fixes.
 *
 * Why this exists
 * ---------------
 * 1. Courier logos render at their NATURAL size (Speedy 110x125, Econt 180x180)
 *    instead of ~15px, which blows the "Интерактивна карта" button up to a
 *    194px-tall block with two giant overlapping logos.
 *
 *    WooCommerce ships a global rule in woocommerce-layout.css:
 *
 *        .woocommerce img, .woocommerce-page img { height: auto; max-width: 100%; }
 *
 *    That selector has specificity (0,1,1). The plugin sizes its logos with
 *    single-class selectors such as `.bgc-allmap-mark` (0,1,0), so WooCommerce
 *    wins and both `height: 1.15em` and `max-width: 22px` are discarded.
 *
 *    Every other logo rule inside the plugin uses a descendant selector
 *    (`.bgc-allmap-item img`) which is (0,1,1) and only survives because the
 *    plugin stylesheet loads after WooCommerce's. They are pinned below too, so
 *    a future load-order change cannot break them again.
 *
 * 2. The order-review shipping rows are relocated into
 *    `#bgcouriers-delivery-host`. Astra Addon's "modern checkout" keeps a
 *    hidden duplicate of the review table in `.ast-mobile-order-review-wrap`,
 *    and the plugin's `relocateDelivery()` selects rows document-wide, so the
 *    map button and the shipping method list get moved in TWICE. Duplicate
 *    `id` attributes follow, which breaks the radio labels. The JS module
 *    `assets/js/bg-couriers-fix.js` prunes the copies.
 *
 * @package Astra Child
 */

/* -------------------------------------------------------------------------
 * 1. Courier logo sizing
 * ---------------------------------------------------------------------- */

/* The map button's courier marks: restore the plugin's intended 1.15em/22px.
   (0,2,0) beats WooCommerce's (0,1,1)  */
.woocommerce .bgc-allmap-mark,
.woocommerce-page .bgc-allmap-mark {
	width: auto;
	height: 1.15em;
	max-width: 22px;
	object-fit: contain;
}

/* Keep the button itself compact even if a logo somehow overshoots. */
.woocommerce .bgc-allmap-btn,
.woocommerce-page .bgc-allmap-btn {
	min-height: 0;
	line-height: 1.2;
}

/* Logo next to each shipping rate. */
.woocommerce .bgc-ship-logo,
.woocommerce-page .bgc-ship-logo {
	width: 16px;
	height: 16px;
	max-width: 16px;
	object-fit: contain;
}

/* Thank-you page logo. */
.woocommerce .bgc-ty-logo,
.woocommerce-page .bgc-ty-logo {
	width: 20px;
	height: 20px;
	max-width: 20px;
	object-fit: contain;
}

/* Orders list / order panel logos (defensive: same (0,1,0) pattern). */
.woocommerce .bgc-clogo,
.woocommerce-page .bgc-clogo {
	width: auto;
	height: auto;
	max-width: 17px;
	max-height: 17px;
	object-fit: contain;
}

.woocommerce .bgc-logo,
.woocommerce-page .bgc-logo {
	width: auto;
	height: auto;
	max-width: 18px;
	max-height: 18px;
	object-fit: contain;
}

/* The map dialog's own pictures, repeated here so order cannot matter. */
.woocommerce .bgc-allmap-chip img,
.woocommerce-page .bgc-allmap-chip img {
	width: 13px;
	height: 13px;
	max-width: 13px;
	max-height: 13px;
}

.woocommerce .bgc-allmap-item img,
.woocommerce-page .bgc-allmap-item img {
	width: 18px;
	height: 18px;
	max-width: 18px;
	max-height: 18px;
}

.woocommerce .bgc-allmap-pop-c img,
.woocommerce-page .bgc-allmap-pop-c img {
	width: 16px;
	height: 16px;
	max-width: 16px;
	max-height: 16px;
}

.woocommerce .bgc-allmap-near img,
.woocommerce-page .bgc-allmap-near img {
	width: 15px;
	height: 15px;
	max-width: 15px;
	max-height: 15px;
}

/* -------------------------------------------------------------------------
 * 2. Relocated delivery block
 * ---------------------------------------------------------------------- */

/*
 * The site still carries a "Checkout" block in Customizer -> Additional CSS
 * that was written for the retired Mreja.net courier plugin, where every
 * rate row was just `<input>` + `<label>`:
 *
 *     .woocommerce ul#shipping_method li label { float:left; display:block;
 *                                                min-width:150px; font-size:12px }
 *     .woocommerce ul#shipping_method li       { display:flex !important;
 *                                                justify-content:space-around !important;
 *                                                align-items:center !important }
 *     .woocommerce ul#shipping_method li input { order:2 !important }
 *
 * BG Couriers renders far more inside each row - a logo, the price, a hint and
 * the whole `.bgc-fields` panel - so those three rules wreck it:
 *
 *   - `display:block` on the label kills the plugin's `display:flex`, so the
 *     16px courier logo stops being vertically centred against the text;
 *   - `float:left; min-width:150px` also matches every label inside the field
 *     panel, so short labels ("№", "Блок") reserve 150px and drift away from
 *     their inputs, and the float squeezes the select boxes until their text
 *     is clipped;
 *   - `justify-content:space-around` + `align-items:center` on the row pulls
 *     the label and the field panel together, which is what made the rows
 *     of the different couriers look glued into one block.
 *
 * Additional CSS is printed after every theme stylesheet, so the overrides
 * below must be `!important` AND outrank it. The ul carries `id="shipping_method"`
 * and the host carries `id="bgcouriers-delivery-host"`; combining both gives
 * two id components against the legacy rule's one, which wins regardless of
 * source order.
 */

/* Row = a vertical card: rate line on top, field panel underneath.
 *
 * `text-indent: 0` is essential. WooCommerce indents each rate row out of its
 * radio with this rule (woocommerce-general-inline-css):
 *
 *     ul#shipping_method li { padding-left: 22px; text-indent: -22px }
 *
 * `text-indent` is inherited, and it applies to the inline content of every
 * descendant - including each anonymous flex item. The plugin hides the radio
 * and lays the row out with flexbox, so the indent is pure damage:
 *
 *   - inside the field panel it moved every label and every select2 value 22px
 *     to the LEFT of its own box, which read as "the text in the selects is
 *     hidden";
 *   - on the rate line it moved ONLY the text ("Speedy:", because the logo is
 *     a replaced element and not affected) 22px to the left, so the courier
 *     name was painted right on top of the logo - it looked like the name had
 *     jumped above the icon.
 *
 * Setting it once here resets the whole subtree by inheritance. */
#bgcouriers-delivery-host ul#shipping_method > li {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	margin: 0 0 8px !important;
	padding: 8px 12px !important;
	text-indent: 0 !important;
}

/* The selected courier is drawn as a raised card; keep its own tighter box. */
#bgcouriers-delivery-host ul#shipping_method > li:has(> input.shipping_method:checked) {
	margin: 2px 0 8px !important;
	padding: 7px 11px !important;
}

#bgcouriers-delivery-host ul#shipping_method > li:last-child {
	margin-bottom: 0 !important;
}

/* The rate radio is visually hidden by the plugin but still a flex child of
   the row, so the legacy `order: 2` must not reshuffle it. */
#bgcouriers-delivery-host ul#shipping_method > li > input.shipping_method {
	order: 0 !important;
	margin: 0 !important;
}

/* Rate line: logo + name + price on one centred row. */
#bgcouriers-delivery-host ul#shipping_method > li > label {
	float: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 6px !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
}

/* Courier logo: fixed box, optically centred with the text next to it. */
#bgcouriers-delivery-host ul#shipping_method .bgc-ship-logo {
	display: block !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	margin: 0 !important;
	vertical-align: middle !important;
	object-fit: contain !important;
}

/* Price stays flush right whatever the label now contains. */
#bgcouriers-delivery-host ul#shipping_method > li > label > .woocommerce-Price-amount {
	margin-left: auto !important;
	white-space: nowrap !important;
}

/* Field labels inside the panel: no float, no forced width. */
#bgcouriers-delivery-host ul#shipping_method .bgc-field > label {
	float: none !important;
	display: block !important;
	min-width: 0 !important;
	width: auto !important;
	margin: 0 0 4px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	text-align: left !important;
}

/* Inputs inside the panel: undo WooCommerce's `.woocommerce ... li input
   { margin: 3px 0.5ex }` and the legacy `order`, so a field and its label
   share the same left edge and full width. */
#bgcouriers-delivery-host ul#shipping_method .bgc-field input,
#bgcouriers-delivery-host ul#shipping_method .bgc-field select,
#bgcouriers-delivery-host ul#shipping_method .bgc-field textarea {
	float: none !important;
	order: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Keep the hidden select2 source select out of the layout. */
#bgcouriers-delivery-host ul#shipping_method .bgc-field select.select2-hidden-accessible {
	width: 1px !important;
	max-width: 1px !important;
}

/* select2 boxes: same 38px height as the native inputs, text vertically
   centred instead of the 53px box Astra's `padding:.5em 2em .5em .8em` plus a
   36px line-height produced. */
#bgcouriers-delivery-host ul#shipping_method .select2-container {
	display: block !important;
	width: 100% !important;
}

#bgcouriers-delivery-host ul#shipping_method .select2-container .select2-selection--single {
	display: flex !important;
	align-items: center !important;
	height: 38px !important;
	min-height: 38px !important;
	/* select2.css adds `margin: 0 0 -4px` to align with a text baseline; it
	   left the box 4px shorter than the native inputs beside it. */
	margin: 0 !important;
	padding: 0 30px 0 10px !important;
	border: 1px solid #d8dde3 !important;
	border-radius: 8px !important;
	box-sizing: border-box !important;
}

#bgcouriers-delivery-host ul#shipping_method .select2-selection--single .select2-selection__rendered {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	line-height: 36px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

#bgcouriers-delivery-host ul#shipping_method .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	right: 8px !important;
	height: 20px !important;
	margin-top: -10px !important;
}

/* A visible gap between the relocated rate list and the map button that
   follows it (the plugin only sets a top margin on the host itself). */
#bgcouriers-delivery-host > .bgc-allmap-btn + ul.woocommerce-shipping-methods,
#bgcouriers-delivery-host > ul.woocommerce-shipping-methods + .bgc-allmap-btn {
	margin-top: 12px;
}

/* -------------------------------------------------------------------------
 * 3. Delivery-type tabs
 * ---------------------------------------------------------------------- */

/* `.bgc-tab` is the only element in the plugin that never declares a
   font-size, so it inherits Astra's 15px. The buttons are sized for 13px:
   at 15px they grow past the column and `flex-wrap` drops the last one onto
   its own full-width row, which is what makes the group look broken. */
.woocommerce .bgc-tab,
.woocommerce-page .bgc-tab {
	font-size: 13px;
	line-height: 1.25;
	font-weight: 600;
}

/* On a phone, keep the three delivery kinds on ONE row of equal buttons
   instead of wrapping 2 + 1. */
@media (max-width: 480px) {
	.woocommerce .bgc-tabs,
	.woocommerce-page .bgc-tabs {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 6px;
	}

	.woocommerce .bgc-tab,
	.woocommerce-page .bgc-tab {
		min-width: 0;
		padding-left: 4px;
		padding-right: 4px;
		gap: 4px;
	}

	.woocommerce .bgc-tab .bgc-tab-txt,
	.woocommerce-page .bgc-tab .bgc-tab-txt {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}