/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

label.wc-block-components-radio-control__option {
	font-size: 14px !important;
	font-weight: 600;
	color: #000;
}

.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label {
  font-weight: 400 !important;
}

.wc-block-components-radio-control__label {
  font-size: 16px;
}

.wc-block-components-formatted-money-amount {
	font-weight: normal;
	font-size: 16px;
	color: #000;
}

#td-shipping-type-wrap {
	padding: 0;
	margin-bottom: 4px;
}

#td-shipping-type-radios {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.4;
}

#td-shipping-type-radios .td-shipping-type-label {
	font-weight: 600;
	margin-right: 4px;
}

#td-shipping-type-radios label {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	cursor: pointer;
	font-weight: 400;
}

#td-shipping-type-radios input[type="radio"] {
	margin: 0;
	cursor: pointer;
	position: relative;
	top: 1px;
}

.wc-block-components-shipping-rates-control.td-rates-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.td-shipping-type-row td {
	padding: 0.5em 0 !important;
}

.td-shipping-type-row #td-shipping-type-radios {
	padding: 0;
	margin: 0;
}

/* Legacy checkout: the row lives inside `.woocommerce-billing-fields__field-wrapper`
   next to the address fields. Match the surrounding form-row spacing so the
   control doesn't float orphaned or get crammed against the row above. */
p.form-row.td-shipping-type-row {
	margin-bottom: 1em;
}

p.form-row.td-shipping-type-row > label:first-child {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

p.form-row.td-shipping-type-row #td-shipping-type-radios {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 0;
	margin: 0;
}

p.form-row.td-shipping-type-row #td-shipping-type-radios label.td-shipping-type-radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

p.form-row.td-shipping-type-row input[type="radio"] {
	margin: 0;
}

/* Classic cart/checkout rate rows (markup built by
   TransdirectShippingPublic::format_shipping_rate_label), presented as
   selectable cards: courier name with the ETA underneath on the left,
   price right-aligned. The native radio still drives selection (label
   click checks it, WC listens for its change event) but is visually
   hidden — the card border/background carries the selected state.
   Scoped via :has() so other carriers' plain-text rates keep the
   theme's layout. */
.woocommerce-shipping-methods li:has(.td-rate-row) {
	position: relative;
	display: flex;
	margin: 0 0 8px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.woocommerce-shipping-methods li:has(.td-rate-row):hover {
	border-color: #8f9bb3;
}

.woocommerce-shipping-methods li:has(.td-rate-row) input.shipping_method {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.woocommerce-shipping-methods li:has(.td-rate-row) label {
	flex: 1;
	margin: 0;
	padding: 10px 14px;
	cursor: pointer;
}

/* Selected card. The hidden-input case is the single-rate render, where
   WC outputs no radio — style it as selected since it's the chosen rate. */
.woocommerce-shipping-methods li:has(input.shipping_method:checked),
.woocommerce-shipping-methods li:has(input.shipping_method[type="hidden"]) {
	border-color: #1e40af;
	box-shadow: inset 0 0 0 1px #1e40af;
	background: #f4f7ff;
}

/* Keyboard focus ring — the radio is invisible but still tabbable. */
.woocommerce-shipping-methods li:has(input.shipping_method:focus-visible) {
	outline: 2px solid #1e40af;
	outline-offset: 2px;
}

.td-rate-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.td-rate-info {
	display: flex;
	flex-direction: column;
}

.td-rate-name {
	font-weight: 600;
}

.td-rate-eta {
	font-size: 0.85em;
	color: #6b6b6b;
	line-height: 1.3;
}

.td-rate-price {
	white-space: nowrap;
	text-align: right;
}

#autocomplete-div, #autocomplete-div-postcode {
	background: #FFFFFF;
	border: 1px solid #EDEDED;
	border-radius: 0 0 3px 3px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: none;
	height: auto;
	max-height: 150px;
	overflow-y: auto;
	padding: 5px;
	position: absolute;
	z-index: 999999;
	box-sizing: border-box;
	line-height: 1.4;
	white-space: normal;
	font-size: 14px;
}

#autocomplete-div ul, #autocomplete-div-postcode ul {
    margin: 0 0 0px 0px !important;
}

#autocomplete-div ul li, #autocomplete-div-postcode ul li {
	padding:0 !important;
	margin:0 !important;
	text-indent:0 !important;
	list-style: none;
	cursor:pointer;
}

#autocomplete-div ul li:hover, #autocomplete-div-postcode ul li:hover {
	background:#ededed;
	list-style: none;
}

.wc-block-components-address-form__city .loadinggif {
	/* Relative to this stylesheet (frontend/css/), not the site root: this
	   file is served as static CSS, so any PHP in it is emitted literally
	   and the URL 404s. It also must not assume the plugin folder name,
	   which changes if the plugin is installed under a different slug. */
	background:url('../../loader.gif') no-repeat right center #ccc;
}