/* Checkout delivery picker (see inc/checkout-delivery.php).
   Colours follow the approved mockup: cobalt marks the chosen option. */

.vg-delivery {
	--vg-ink: #0E1B2C;
	--vg-ink-2: #3A4757;
	--vg-muted: #5D6978;
	--vg-line: #DCE1E7;
	--vg-line-strong: #8794A5;
	--vg-cobalt: #0550A2;
	--vg-chosen-bg: #F5F8FC;
	--vg-stone: #F2F4F6;
	--vg-ease: cubic-bezier(.23, 1, .32, 1);
	display: grid;
	gap: 14px;
	color: var(--vg-ink);
}

.vg-delivery[hidden] { display: none; }

.vg-delivery__note {
	margin: 0;
	padding: 14px 16px;
	background: var(--vg-stone);
	color: var(--vg-ink-2);
	font-size: 15px;
}

.vg-delivery__package { margin: 8px 0 0; font-weight: 800; }

/* Delivery type tabs */
.vg-delivery__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border: 1px solid var(--vg-line-strong);
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}

.vg-delivery .vg-delivery__tab {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 76px;
	padding: 12px 8px;
	text-align: center;
	color: var(--vg-ink);
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.vg-delivery .vg-delivery__tab + .vg-delivery__tab { border-left: 1px solid var(--vg-line-strong); }

.vg-delivery .vg-delivery__tab :is(i, svg) {
	margin-bottom: 4px;
	font-size: 18px;
	color: var(--vg-cobalt);
	transition: color .18s ease;
}

/* Icons come from Elementor's Font Awesome set, as inline SVG. */
.vg-delivery svg.e-font-icon-svg { width: 18px; height: 18px; fill: currentColor; }

/* Prices inside the picker follow the text colour (WoodMart colours prices green). */
.vg-delivery .woocommerce-Price-amount,
.vg-delivery .woocommerce-Price-amount bdi { color: inherit; }

.vg-delivery__tab-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--vg-muted);
	font-variant-numeric: tabular-nums;
	transition: color .18s ease, opacity .15s ease;
}

.vg-delivery .vg-delivery__tab.is-active { background: var(--vg-cobalt); color: #fff; }
.vg-delivery .vg-delivery__tab.is-active :is(i, svg),
.vg-delivery .vg-delivery__tab.is-active .vg-delivery__tab-price { color: #fff; }

.vg-delivery .vg-delivery__tab:focus-visible {
	outline: 2px solid var(--vg-cobalt);
	outline-offset: -5px;
}
.vg-delivery .vg-delivery__tab.is-active:focus-visible { outline-color: #fff; }

/* Courier cards */
.vg-delivery .vg-delivery__cards {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-delivery .vg-delivery__cards > .vg-delivery__card {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--vg-line-strong);
	border-radius: 3px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.vg-delivery .vg-delivery__cards > .vg-delivery__card[hidden] { display: none; }

.vg-delivery .vg-delivery__cards > .vg-delivery__card.is-checked {
	border-color: var(--vg-cobalt);
	box-shadow: inset 0 0 0 1px var(--vg-cobalt);
	background: var(--vg-chosen-bg);
}

/* The real radio stays in the page for keyboards and screen readers; the card shows its state. */
.vg-delivery .vg-delivery__card > input.shipping_method {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.vg-delivery .vg-delivery__card > .vg-delivery__face {
	display: grid;
	grid-template-columns: 20px 88px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 16px;
	color: var(--vg-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.vg-delivery .vg-delivery__card.is-only > .vg-delivery__face {
	grid-template-columns: 88px minmax(0, 1fr) auto;
	cursor: default;
}

.vg-delivery .vg-delivery__card > input.shipping_method:focus-visible + .vg-delivery__face {
	outline: 2px solid var(--vg-cobalt);
	outline-offset: 2px;
}

.vg-delivery__dot {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--vg-line-strong);
	border-radius: 50%;
	background: #fff;
	transition: border-color .18s ease;
}

.vg-delivery__dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vg-cobalt);
	opacity: 0;
	transform: scale(.5);
	transition: transform .2s var(--vg-ease), opacity .15s ease;
}

.vg-delivery__card.is-checked .vg-delivery__dot { border-color: var(--vg-cobalt); }
.vg-delivery__card.is-checked .vg-delivery__dot::after { opacity: 1; transform: none; }

.vg-delivery__logo {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 88px;
	height: 40px;
	padding: 4px 8px;
	border: 1px solid var(--vg-line);
	border-radius: 3px;
	background: #fff;
	color: var(--vg-cobalt);
	font-size: 18px;
}

.vg-delivery__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 28px;
	object-fit: contain;
}

/* Econt's logo is white; Econt shows it on its dark site bar, so its tile uses that colour. */
.vg-delivery__logo[data-courier="econt"].has-logo { border-color: #212121; background: #212121; }

.vg-delivery__text { min-width: 0; }
.vg-delivery__name { display: block; font-weight: 800; }
.vg-delivery__desc { display: block; margin-top: 2px; font-size: 14px; color: var(--vg-muted); }

.vg-delivery__price {
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: opacity .15s ease;
}

.vg-delivery.is-updating .vg-delivery__price,
.vg-delivery.is-updating .vg-delivery__tab-price { opacity: .4; }

/* Bulgarisation's fields (office search, locator, address) inside the chosen card */
.vg-delivery .vg-delivery__card .bulgarisation-additional-fields {
	margin: 0 16px;
	padding: 14px 0 16px;
	border-top: 1px solid var(--vg-line);
}

.vg-delivery .vg-delivery__card .bulgarisation-additional-fields[hidden] { display: none; }

.vg-delivery .bulgarisation-econt-fields:is([data-type="office"], [data-type="automat"]):not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.vg-delivery .bulgarisation-econt-fields:is([data-type="office"], [data-type="automat"]) > .bulgarisation-econt-error { flex-basis: 100%; margin: 0; }
.vg-delivery .bulgarisation-econt-fields:is([data-type="office"], [data-type="automat"]) > .form-row { flex: 1 1 240px; min-width: 0; margin: 0; padding: 0; }

.vg-delivery .bulgarisation-additional-fields .bulgarisation-econt-office-locator.button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--vg-ink);
	border-radius: 3px;
	background: #fff;
	color: var(--vg-ink);
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease, transform .16s ease-out;
}

.vg-delivery .bulgarisation-additional-fields .bulgarisation-econt-office-locator.button:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
	.vg-delivery .vg-delivery__tab:not(.is-active):hover { background: var(--vg-chosen-bg); }
	.vg-delivery .vg-delivery__cards > .vg-delivery__card:not(.is-checked):hover { border-color: var(--vg-ink-2); }
	.vg-delivery .bulgarisation-additional-fields .bulgarisation-econt-office-locator.button:hover { background: var(--vg-ink); color: #fff; }
}

@media (max-width: 480px) {
	.vg-delivery .vg-delivery__tab { min-height: 70px; padding: 10px 4px; font-size: 14px; }
	.vg-delivery .vg-delivery__card > .vg-delivery__face { grid-template-columns: 20px 64px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
	.vg-delivery .vg-delivery__card.is-only > .vg-delivery__face { grid-template-columns: 64px minmax(0, 1fr) auto; }
	.vg-delivery__logo { width: 64px; height: 34px; padding: 3px 6px; }
	.vg-delivery .vg-delivery__card .bulgarisation-additional-fields { margin: 0 12px; }
	.vg-delivery .bulgarisation-additional-fields .bulgarisation-econt-office-locator.button { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.vg-delivery *, .vg-delivery *::after { transition: none !important; }
}

/* Order summary: the chosen delivery and its price, laid out like WoodMart's other rows
   (overrides Bulgarisation's stacked layout, which is meant for the full option list). */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping.vg-shipping-line { display: flex; align-items: center; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping.vg-shipping-line > th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping.vg-shipping-line > td { display: block; width: auto; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping.vg-shipping-line > td { flex: 1 1 auto; text-align: right; }
/* One block, so WoodMart's phone layout (label left, value right) keeps it on the right. */
.vg-shipping-line__body { display: block; margin-left: auto; text-align: right; }
.vg-shipping-line__price { display: block; font-weight: 700; }

/* On the cart, the delivery price looks like the subtotal above it. */
.cart_totals .vg-shipping-line__price { font-weight: inherit; }
.cart_totals .vg-shipping-line__price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.vg-shipping-line__method { display: block; font-size: 13px; line-height: 1.35; color: #5D6978; }

/* Checkout form: „Искате ли фактура за фирма?“ is a yes/no question, so WooCommerce's
   „(по избор)“ marker after it is hidden. The checkbox and company fields are Bulgarisation's. */
#bulgarisation-billing-to-company_field .optional { display: none; }