/**
 * The checkout's street-address autocomplete — the field BOX, and the Photon
 * suggestion dropdown that sits over it.
 *
 * ── Why a stylesheet named for autocomplete carries a field-box rule ───────
 *
 * Netanel looked at the checkout and said the form fields "still are not
 * designed properly", and he was reading a real defect, not a preference. The
 * "Ship to" GRID is correct — first/last name pair, `.form--grid`, `.f--half`
 * all work — but the INPUTS inside it wore WooCommerce's raw box, not the
 * concept's: 31px tall, a near-black `rgba(32,7,7,.8)` 1px border, a 4px radius
 * and 13.3px text, focusing to black. The design draws `.f input` at
 * concept.css:650 — 15.5px text, a `var(--line)` hairline, an 11px radius,
 * 12/14 padding, and a green focus ring.
 *
 * MEASURED on the store (127.0.0.1:9500/checkout/, #billing_address_1) the two
 * rules that reach the box are:
 *
 *     woocommerce.css   .woocommerce form .form-row .input-text        (0,3,1)
 *                       { border-radius: var(--wc-form-border-radius) }  → 4px
 *     style.css         .co-main .form-row .input-text                 (0,3,0)
 *                       { border-radius: 11px }
 *
 * style.css carries the concept's own values, but at (0,3,0) it LOSES the tie
 * to WooCommerce's (0,3,1) — core's selector has the extra `form` element, so
 * the near-black box wins on merit and being later in the cascade cannot save
 * it. This is the identical specificity fight already won for the cart's fields
 * and for the account screens (account.css:214-298, which tie core at (0,3,1)
 * and win on source order). Here it is beaten cleanly instead: keying the
 * concept's box under the checkout's own container `.co-main` makes it
 * `.woocommerce form .co-main .form-row .input-text` at (0,4,1) — one class more
 * than core — so it wins by specificity regardless of load order and without a
 * single `!important`. Same move commerce.css:395 already makes for the paired
 * fields' width; the box just had never been carried across with it.
 *
 * The `.co-main` values are copied VERBATIM from concept.css:646-656 (and from
 * style.css:404-417, which already holds them) so the three surfaces cannot
 * drift. `select` and `textarea` ride along for the case where select2 has not
 * initialised and the native control shows.
 *
 * This file is enqueued after style.css and after woocommerce.css by the
 * theme's `css/*.css` glob (functions.php:95-107), but nothing here leans on
 * that — every selector out-specifies the rule it answers.
 */

/* ── the field box, beating woocommerce.css's (0,3,1) at (0,4,1) ─────────── */
.woocommerce form .co-main .form-row .input-text,
.woocommerce form .co-main .form-row select,
.woocommerce form .co-main .form-row textarea,
.woocommerce-page form .co-main .form-row .input-text,
.woocommerce-page form .co-main .form-row select,
.woocommerce-page form .co-main .form-row textarea {
	width: 100%;
	font: 400 15.5px/1.4 inherit;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 12px 14px;
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

/* WooCommerce reserves 3em on a native select for the chevron it paints in. */
.woocommerce form .co-main .form-row select,
.woocommerce-page form .co-main .form-row select {
	padding-right: 3em;
}

.woocommerce form .co-main .form-row textarea,
.woocommerce-page form .co-main .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

.woocommerce form .co-main .form-row .input-text::placeholder,
.woocommerce-page form .co-main .form-row .input-text::placeholder {
	color: #98a3aa;
}

/* Core's focus is `...input-text:focus` at (0,3,2); this is (0,4,2). */
.woocommerce form .co-main .form-row .input-text:focus,
.woocommerce form .co-main .form-row select:focus,
.woocommerce form .co-main .form-row textarea:focus,
.woocommerce-page form .co-main .form-row .input-text:focus,
.woocommerce-page form .co-main .form-row select:focus,
.woocommerce-page form .co-main .form-row textarea:focus {
	outline: none;
	border-color: var(--green-ink);
	box-shadow: 0 0 0 4px rgba(140, 192, 84, .22);
}

/* ── the Photon suggestion dropdown ─────────────────────────────────────────
 *
 * Our own combobox (js/address-autocomplete.js), not a provider widget: the JS
 * adds `.ris-ac` to the field's input wrapper as the positioning context and
 * appends a `.ris-ac-panel` under the input. The surface mirrors the concept's
 * own search menu — the same hairline, radius, shadow, green-soft hover and
 * type the design draws for `.sresults`/`.sr-row` (concept.css:151-172) — so the
 * address dropdown and the header search read as one system.
 *
 * Every rule is scoped to `.ris-ac*`, which exists only when the JS has bound a
 * field. On the degraded checkout (autocomplete switched off, or no match, or
 * the provider unreachable) none of this markup is present, so it costs nothing.
 */
.ris-ac {
	position: relative;
}
.ris-ac-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 100000;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(16, 32, 24, .12);
	padding: 6px;
	max-height: 320px;
	overflow-y: auto;
}
.ris-ac-panel[hidden] {
	display: none;
}
.ris-ac-row {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s var(--ease);
}
.ris-ac-row:hover,
.ris-ac-row.is-active {
	background: var(--green-soft);
}
.ris-ac-text {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* a small map-pin glyph, drawn in CSS so the dropdown ships no image request */
.ris-ac-pin {
	width: 13px;
	height: 13px;
	margin: 0 auto;
	border: 2px solid var(--green-ink);
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	position: relative;
}
.ris-ac-pin::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--green-ink);
}