/**
 * The district search box.
 *
 * Borrows the checkout's own field shape — same height, radius and border as
 * the inputs beside it — so the field reads as one of the form's rather than
 * as something bolted on. The native select underneath is taken out of the
 * layout but left in the DOM, because it is still the field WooCommerce reads.
 */

/*
 * Hiding the <select> is not enough: WooCommerce wraps it in a container that
 * paints its own 1px border and white background, and a chevron sits beside
 * it. With the select gone those collapsed to a 2px grey strip and a clipped
 * arrow above the field. So the whole wrapper comes out of the flow — but it
 * stays in the DOM, because the floating "জেলা" label lives inside it and is
 * the label our input sits under.
 */
.gp-district-field .wc-blocks-components-select {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	pointer-events: none;
}

.gp-district-field .wc-blocks-components-select__container {
	border: 0;
	background: none;
}

.gp-district-field .wc-blocks-components-select__select { display: none; }

.gp-district-field .wc-blocks-components-select svg { display: none; }

/* The label must still be clickable-through to nothing, but readable. */
.gp-district-field .wc-blocks-components-select__label { pointer-events: none; }

.gp-district { position: relative; }

/*
 * Matched to the checkout's own text inputs, measured from the name field:
 * 47px tall, 24px of top padding so the floating label clears the value, and
 * a 12px radius. The state wrapper draws no border of its own — the native
 * select used to draw it — so this input carries it.
 */
.gp-district__input {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 47px;
	padding: 24px 9px 8px;
	border: 1px solid var(--gp-co-border, #dedede);
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	line-height: 25px;
	color: #000;
}

.gp-district__input::placeholder { color: transparent; }

/* The placeholder would sit under the label until the field is focused, so it
   only appears once there is room for it. */
.gp-district__input:focus::placeholder { color: rgba(0, 0, 0, 0.4); }

.gp-district__input:focus {
	outline: 0;
	border-color: var(--gp-co-blue, #005bd1);
	box-shadow: 0 0 0 1px var(--gp-co-blue, #005bd1);
}

.gp-district__list {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 4px);
	z-index: 30;
	max-block-size: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.gp-district__list[hidden] { display: none; }

.gp-district__option {
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}

/* One highlight for the pointer and the arrow keys, so the keyboard shows
   exactly what a click would pick. */
.gp-district__option.is-active { background: rgba(0, 91, 209, 0.08); }

.gp-district__option.is-chosen { font-weight: 600; }

/* Dhaka is listed first, out of alphabetical order, so a rule marks where the
   alphabet starts again. */
.gp-district__option:first-child {
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
	margin-block-end: 4px;
	padding-block-end: 12px;
}

.gp-district__empty {
	padding: 14px;
	font-size: 14px;
	text-align: center;
	color: rgba(0, 0, 0, 0.55);
}