/* Woo BG Courier Cards – checkout shipping selector
   Override look & feel per site via CSS custom properties on .wbgcc
   (or the `wbgcc_css_vars` PHP filter):
     --wbgcc-brand      accent of the selected courier (set automatically)
     --wbgcc-border     resting border colour
     --wbgcc-radius     button corner radius
     --wbgcc-bg         button background
     --wbgcc-text       button text colour
     --wbgcc-muted      titles / pending price colour
*/

.wbgcc {
	--wbgcc-border: #e3e3e3;
	--wbgcc-radius: 10px;
	--wbgcc-bg: #fff;
	--wbgcc-text: #1f1f1f;
	--wbgcc-muted: #7a7a7a;
	--wbgcc-brand: #1f1f1f;
	display: block;
	text-align: left;
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.3;
	container-type: inline-size;
	container-name: wbgcc;
}

.wbgcc-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wbgcc-muted);
}

.wbgcc-grid {
	display: grid;
	grid-template-columns: repeat(var(--wbgcc-cols, 2), minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 14px;
}

.wbgcc button.wbgcc-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	height: auto;
	min-height: 54px;
	margin: 0;
	padding: 10px 36px 10px 12px;
	border: 2px solid var(--wbgcc-border);
	border-radius: var(--wbgcc-radius);
	background: var(--wbgcc-bg);
	color: var(--wbgcc-text);
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wbgcc button.wbgcc-btn:hover {
	border-color: #b5b5b5;
	background: var(--wbgcc-bg);
	color: var(--wbgcc-text);
}
.wbgcc button.wbgcc-btn:focus-visible {
	outline: 2px solid var(--wbgcc-brand);
	outline-offset: 2px;
}
.wbgcc button.wbgcc-btn.is-active {
	border-color: var(--wbgcc-brand);
	background: #f6f6f6;
	background: color-mix(in srgb, var(--wbgcc-brand) 7%, #fff);
}

.wbgcc-check {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wbgcc-brand);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
}
.wbgcc-check svg { width: 12px; height: 12px; display: block; }
.wbgcc button.wbgcc-btn.is-active .wbgcc-check { display: flex; }

/* Step 1 – courier buttons */
.wbgcc button.wbgcc-courier {
	justify-content: center;
	min-height: 62px;
	padding-left: 14px;
	padding-right: 14px;
}
.wbgcc button.wbgcc-courier.is-active { padding-right: 36px; }
.wbgcc-logo {
	display: block;
	height: 26px;
	width: auto;
	max-width: 100%;
	margin: 0;
	object-fit: contain;
}
/* The Econt logo is much wider than the Speedy one at the same height */
.wbgcc button.wbgcc-courier[data-courier="econt"] .wbgcc-logo { height: 20px; }
.wbgcc-brand {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--wbgcc-brand);
}

/* Step 2 – delivery type buttons */
.wbgcc-ico { flex: 0 0 auto; width: 22px; height: 22px; color: #6b6b6b; }
.wbgcc-ico svg { width: 22px; height: 22px; display: block; }
.wbgcc button.wbgcc-btn.is-active .wbgcc-ico { color: var(--wbgcc-brand); }
.wbgcc-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.wbgcc-price {
	flex: 0 1 auto;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	line-height: 1.2;
	color: var(--wbgcc-text);
}
.wbgcc-price.is-pending {
	font-size: 12px;
	font-weight: 500;
	color: var(--wbgcc-muted);
}
.wbgcc-single {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--wbgcc-text);
}

/* Caption above the office/address fields of the shipping plugin */
.wbgcc-caption {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: #444;
	text-align: left;
}

/* Avoid the flash of the native radio list before the selector is built.
   The `wbgcc-js` class is added by a tiny inline script in <head> and removed
   by the JS if it decides not to take over (e.g. a single shipping method). */
html.wbgcc-js ul.woocommerce-shipping-methods:not(.wbgcc-methods) > li > input[name^="shipping_method"],
html.wbgcc-js ul.woocommerce-shipping-methods:not(.wbgcc-methods) > li > label { visibility: hidden; }

/* Native radios + labels are hidden once the selector is built.
   The <li> stay in place so the shipping plugin's office/address fields keep working. */
ul.woocommerce-shipping-methods.wbgcc-methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}
ul.wbgcc-methods > li {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}
ul.wbgcc-methods > li > input.shipping_method,
ul.wbgcc-methods > li > input[name^="shipping_method"],
ul.wbgcc-methods > li > label { display: none !important; }

/* Make the "Доставка" row use the full width when the review table is flex-based
   (Woodmart and similar themes); table-layout themes ignore these rules. */
tr.wbgcc-row { flex-wrap: wrap; }
tr.wbgcc-row > th { flex: 0 0 100%; width: 100%; padding-bottom: 6px; }
tr.wbgcc-row > td {
	flex: 1 1 100%;
	width: 100%;
	text-align: left !important;
	padding-top: 0;
}

/* Narrow containers (sidebar order review, phones): one delivery-type button per row,
   compact courier buttons. Based on the selector's own width, not the viewport. */
@container wbgcc (max-width: 479px) {
	.wbgcc-grid.wbgcc-types { grid-template-columns: 1fr; }
}
@container wbgcc (max-width: 379px) {
	.wbgcc-grid.wbgcc-couriers { gap: 6px; }
	.wbgcc button.wbgcc-courier,
	.wbgcc button.wbgcc-courier.is-active { min-height: 56px; padding: 8px 10px; }
	.wbgcc button.wbgcc-courier .wbgcc-check {
		right: 5px; top: 5px; transform: none; width: 16px; height: 16px;
	}
	.wbgcc button.wbgcc-courier .wbgcc-check svg { width: 10px; height: 10px; }
	.wbgcc-logo { height: 22px; }
	.wbgcc button.wbgcc-courier[data-courier="econt"] .wbgcc-logo { height: 17px; }
}
@container wbgcc (max-width: 239px) {
	.wbgcc-grid.wbgcc-couriers { grid-template-columns: 1fr; }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.wbgcc-grid.wbgcc-types { grid-template-columns: 1fr; }
	}
}

/* =====================================================================
   Fields rendered by the shipping plugin (Bulgarisation for WooCommerce)
   inside the selected <li>: street/office search (vue-multiselect) and the
   address details (number, block, entrance, floor, apartment).
   Labels are added with CSS only (:has), so they survive Vue re-renders.
   ===================================================================== */
ul.wbgcc-methods {
	container-type: inline-size;
	container-name: wbgcc-fields;
}

/* Search box (street / quarter / office) */
ul.wbgcc-methods > li .woo-bg-multiselect { margin-bottom: 12px !important; }
ul.wbgcc-methods > li .multiselect__tags {
	min-height: 46px;
	padding: 11px 40px 0 12px;
	border: 2px solid var(--wbgcc-border, #e3e3e3);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
}
ul.wbgcc-methods > li .multiselect--active .multiselect__tags {
	border-color: var(--wbgcc-brand, #222);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
ul.wbgcc-methods > li .multiselect__placeholder {
	color: #9a9a9a;
	margin-bottom: 8px;
	padding-top: 0;
	font-size: 14px;
}
ul.wbgcc-methods > li .multiselect__single { font-size: 14px; margin-bottom: 8px; padding: 0; }
ul.wbgcc-methods > li .multiselect__input { font-size: 14px; }
ul.wbgcc-methods > li .multiselect__select { height: 44px; }
ul.wbgcc-methods > li .multiselect__content-wrapper {
	border: 2px solid var(--wbgcc-brand, #222);
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

/* Address details: labelled grid instead of five tiny placeholder-only boxes */
ul.wbgcc-methods > li [class*="-address-details"] {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
	gap: 10px 8px !important;
	margin: 0 0 8px;
}
ul.wbgcc-methods > li [class*="-address-details--quarter"] {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
ul.wbgcc-methods > li [class*="-address-details"] > p.form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	float: none;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
}
ul.wbgcc-methods > li [class*="-address-details"] > p.form-row::before {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: #555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
ul.wbgcc-methods > li p.form-row:has(> input[placeholder^="Номер"])::before { content: "Номер"; }
ul.wbgcc-methods > li.wbgcc-number-required p.form-row:has(> input[placeholder^="Номер"])::before { content: "Номер *"; }
ul.wbgcc-methods > li p.form-row:has(> input[placeholder^="бл"])::before    { content: "Блок"; }
ul.wbgcc-methods > li p.form-row:has(> input[placeholder^="вх"])::before    { content: "Вход"; }
ul.wbgcc-methods > li p.form-row:has(> input[placeholder^="ет"])::before    { content: "Етаж"; }
ul.wbgcc-methods > li p.form-row:has(> input[placeholder^="ап"])::before    { content: "Апартамент"; }

ul.wbgcc-methods > li [class*="-address-details"] input.input-text {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 10px;
	border: 2px solid var(--wbgcc-border, #e3e3e3);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	font-size: 14px;
	color: var(--wbgcc-text, #1f1f1f);
}
ul.wbgcc-methods > li [class*="-address-details"] input.input-text:focus {
	border-color: var(--wbgcc-brand, #222);
	outline: none;
	box-shadow: none;
}
/* The label above says it all – keep the original placeholder for screen readers only */
ul.wbgcc-methods > li [class*="-address-details"] input.input-text::placeholder { color: transparent; }

/* Office locator link under the office search */
ul.wbgcc-methods > li .woo-bg--econt-delivery > a,
ul.wbgcc-methods > li .woo-bg--speedy-delivery > a,
ul.wbgcc-methods > li a[href*="locator"],
ul.wbgcc-methods > li a[class*="locator"] {
	display: inline-block;
	margin: -4px 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wbgcc-brand, #222);
	text-decoration: underline;
}

/* Narrow column: number spans the row, the rest in two columns */
@container wbgcc-fields (max-width: 379px) {
	ul.wbgcc-methods > li [class*="-address-details"],
	ul.wbgcc-methods > li [class*="-address-details--quarter"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	ul.wbgcc-methods > li p.form-row:has(> input[placeholder^="Номер"]) { grid-column: 1 / -1; }
}

/* Dropdown list of the street / office search. Themes often style every <li>
   (margins, bullets) and the list is inline-block by default, which leaves gaps
   and a large empty area at the bottom. Normalise it. */
ul.wbgcc-methods > li .multiselect__content-wrapper {
	max-height: 280px !important;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}
ul.wbgcc-methods > li ul.multiselect__content {
	display: block !important;
	width: 100%;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
ul.wbgcc-methods > li li.multiselect__element {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border: 0;
}
ul.wbgcc-methods > li .multiselect__option {
	display: block;
	min-height: 0;
	padding: 10px 12px;
	line-height: 1.3;
	font-size: 14px;
	white-space: normal;
	border-bottom: 1px solid #f0f0f0;
}
ul.wbgcc-methods > li .multiselect__option:after {
	top: auto;
	line-height: 1.3;
	padding: 10px 12px;
	font-size: 12px;
}
ul.wbgcc-methods > li .multiselect__element:last-child .multiselect__option { border-bottom: 0; }

/* Table-layout totals tables (cart totals, most non-Woodmart themes): switch the
   table that contains our row to flex rows so "Доставка" can span the full width.
   Other rows keep label left / amount right. Scoped with :has, so tables without
   our selector are untouched. */
table:has(> * > tr.wbgcc-row) {
	display: block;
	width: 100%;
	border-collapse: collapse;
}
table:has(> * > tr.wbgcc-row) > :is(thead, tbody, tfoot) {
	display: block;
	width: 100%;
}
table:has(> * > tr.wbgcc-row) tr {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}
table:has(> * > tr.wbgcc-row) tr > th { flex: 0 1 auto; text-align: left; }
table:has(> * > tr.wbgcc-row) tr > td { flex: 1 1 auto; text-align: right; }
table:has(> * > tr.wbgcc-row) tr.wbgcc-row { flex-wrap: wrap; align-items: flex-start; }
table:has(> * > tr.wbgcc-row) tr.wbgcc-row > th {
	flex: 0 0 100%;
	width: 100%;
	padding-bottom: 6px;
	border-bottom: 0;
}
table:has(> * > tr.wbgcc-row) tr.wbgcc-row > td {
	flex: 1 1 100%;
	width: 100%;
	text-align: left;
	padding-top: 0;
}

/* Wrappers with overflow:auto around the table (e.g. Woodmart .wd-table-wrapper)
   would clip the street/office dropdown and add a stray scrollbar. */
div:has(> table .wbgcc-methods) { overflow: visible !important; }

/* On phones themes stack the totals rows in a column: centring would squeeze them to the middle. */
@media (max-width: 768.98px) {
	table:has(> * > tr.wbgcc-row) tr { align-items: stretch; }
}