/*
 * The address book — only what the concept has no token for.
 *
 * The cards, the grid, the fields, the buttons and the links are all
 * concept.css's own (.ac-card, .ac-cards2, .form, .f, .f--half, .btn, .f-link,
 * .addr, .muted, .pick). This file adds the three things the design never drew
 * a book of addresses to carry: the default badges, the per-card action row,
 * and the inline delete confirm. Colours are read from concept.css's custom
 * properties so the book stays inside the same palette and the same contrast
 * audit, in light and dark alike.
 */

/* The Add button sits below the grid with room to breathe. */
.rosen-ab-add { margin-top: 18px; }
.rosen-ab-add .btn { margin-top: 0; }

.rosen-ab-empty {
	margin: 4px 0 0;
	font-size: 14.5px;
	color: var(--muted);
}

/* A saved card is a little taller than the concept's two, to seat the actions. */
.rosen-ab-card { display: flex; flex-direction: column; }
.rosen-ab-card .addr { flex: 1 1 auto; }

/* Default badges, beside the card heading. */
.rosen-ab-badges {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.rosen-ab-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--green-ink);
	background: var(--green-soft);
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* The per-card action row: Edit · Make default · Delete. */
.rosen-ab-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.rosen-ab-actions[hidden],
.rosen-ab-add[hidden],
.rosen-ab-form[hidden] { display: none; }
.rosen-ab-actions .f-link {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}
.rosen-ab-danger { color: #b3261e; }
.rosen-ab-danger:hover { color: #8f1d17; }

/* Inline delete confirm — replaces the native confirm() dialog. */
.rosen-ab-confirm {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
/* The JS hides the confirm by toggling the [hidden] attribute; the display rule
   above out-specifies the UA [hidden]{display:none}, so restore it explicitly or
   the "Delete this address?" prompt sits permanently under every card. */
.rosen-ab-confirm[hidden] {
	display: none;
}
.rosen-ab-confirm-q {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

/* The add / edit form. */
.rosen-ab-form { margin-top: 18px; }
.rosen-ab-form .ac-card-head { margin-bottom: 6px; }

.rosen-ab-error {
	margin: 0 0 4px;
	padding: 11px 14px;
	border-radius: 12px;
	background: #fdecea;
	color: #8f1d17;
	font-size: 13.5px;
	font-weight: 600;
}

.rosen-ab-form select {
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
	width: 100%;
}
.rosen-ab-form select:focus {
	outline: none;
	border-color: var(--green-ink);
	box-shadow: 0 0 0 4px rgba(140, 192, 84, .22);
}

.rosen-ab-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--body);
	cursor: pointer;
}
.rosen-ab-check + .rosen-ab-check { margin-top: 10px; }
.rosen-ab-check input { accent-color: var(--green-ink); width: 17px; height: 17px; }

.rosen-ab-form-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.rosen-ab-form-actions .btn { margin-top: 0; }
.rosen-ab-form-actions .f-link {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

/* A field the server flagged as missing. */
.rosen-ab-form .f.is-error input,
.rosen-ab-form .f.is-error select {
	border-color: #d9534f;
	box-shadow: 0 0 0 4px rgba(217, 83, 79, .14);
}

/* Progressive account-address fallback. These are ordinary POST forms inside
   <noscript>, deliberately separate from every other form so HTML never nests
   a form and keyboard/native submission keeps working. */
.rosen-ab-native-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.rosen-ab-native-action { margin: 0; }
.rosen-ab-native-action .f-link,
.rosen-ab-native-details > summary {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}
.rosen-ab-native-details { width: 100%; }
.rosen-ab-native-details > summary { display: inline-flex; }
.rosen-ab-native-details[open] > summary { margin-bottom: 12px; }
.rosen-ab-native-details .rosen-ab-native-form {
	margin-top: 8px;
	box-shadow: none;
}
.rosen-ab-native-form { margin-top: 18px; }
.rosen-ab-locale-refresh {
	display: inline-flex;
	margin-top: 8px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}
.rosen-ab-native-form select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: #fff;
}

/* ── Checkout address choice ─────────────────────────────────────────
 *
 * The picker is a real part of the form, not a hidden shortcut. The concept's
 * `.pick` supplies the radio-card geometry; these rules add the address-specific
 * hierarchy (phone/default badge/new-address/save control) and make the rows
 * resilient at a phone width. Without JavaScript the cards and the ordinary
 * WooCommerce fields are all visible; JS only collapses fields after a saved
 * record has been selected and copied into them. */
.rosen-addressbook {
	display: grid;
	gap: 10px;
	margin: 0 0 18px;
}
.rosen-addressbook[hidden] { display: none; }

.rosen-address-choices {
	display: grid;
	gap: 10px;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.rosen-address-choices > legend {
	float: none;
	width: 100%;
	padding: 0;
}

.rosen-addressbook-head,
.rosen-addressbook__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 2px;
}
.rosen-addressbook-head strong,
.rosen-addressbook__heading strong {
	font-size: 14px;
	font-weight: 650;
	color: var(--ink);
}
.rosen-addressbook-head small,
.rosen-addressbook__heading > span {
	font-size: 12.5px;
	color: var(--muted);
}

.rosen-addressbook .pick,
.rosen-addressbook .rosen-address-choice {
	position: relative;
	margin: 0;
	min-width: 0;
}
.rosen-addressbook .pick:focus-within,
.rosen-addressbook .rosen-address-choice:focus-within {
	border-color: var(--green-ink);
	box-shadow: 0 0 0 4px rgba(140, 192, 84, .22);
}
.rosen-addressbook .pick.is-selected,
.rosen-addressbook .pick.is-picked,
.rosen-addressbook .rosen-address-choice.is-selected,
.rosen-addressbook .rosen-address-choice.is-picked,
.rosen-addressbook .rosen-address-choice:has(input:checked) {
	border-color: var(--green-ink);
	background: var(--green-soft);
}
.rosen-addressbook .pick > span,
.rosen-addressbook .rosen-address-choice > span {
	min-width: 0;
}

.rosen-address-line {
	display: block;
	overflow-wrap: anywhere;
}
.rosen-address-phone {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--body);
	direction: ltr;
	unicode-bidi: isolate;
}
.rosen-address-phone svg {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--green-ink);
}
.rosen-address-default {
	align-self: start;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	border-radius: 999px;
	padding: 3px 9px;
	background: #fff;
	color: var(--green-ink);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.rosen-address-new-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--wash);
	color: var(--green-ink);
	font-size: 20px;
	line-height: 1;
}

.rosen-save-address,
.rosen-address-save {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
	margin: 2px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--wash);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--body);
}
.rosen-save-address > label,
.rosen-address-save > label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	cursor: pointer;
}
.rosen-save-address[hidden],
.rosen-address-save[hidden] { display: none; }
.rosen-save-address input,
.rosen-address-save input {
	flex: none;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--green-ink);
}
.rosen-address-save small {
	margin-left: 26px;
	font-size: 12px;
	color: var(--muted);
}

.rosen-addressbook-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
}
.rosen-addressbook > p { margin: 4px 0 0; }

.rosen-address-fields--collapsed[hidden] { display: none; }

.rosen-phone-hint {
	display: block;
	margin-top: 6px;
}
.rosen-phone-hint.is-error {
	color: #b3261e;
	font-weight: 600;
}

@media (max-width: 560px) {
	/* iOS Safari zooms the viewport when a focused form control computes below
	   16px. Keep every account-book and checkout address control at the native
	   no-zoom threshold on phone layouts, including the underlying country/state
	   selects used by selectWoo. */
	.rosen-ab-form .f input,
	.rosen-ab-form .f select,
	.rosen-ab-native-form .f input,
	.rosen-ab-native-form .f select,
	.woocommerce form.checkout .co-main .form-row .input-text,
	.woocommerce-page form.checkout .co-main .form-row .input-text,
	.woocommerce form.checkout .co-main .form-row select,
	.woocommerce-page form.checkout .co-main .form-row select {
		font-size: 16px;
	}
	.rosen-addressbook-head,
	.rosen-addressbook__heading,
	.rosen-addressbook-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}
	.rosen-addressbook .pick,
	.rosen-addressbook .rosen-address-choice {
		grid-template-columns: auto minmax(0, 1fr);
		padding: 13px 14px;
	}
	.rosen-address-default {
		grid-column: 2;
		justify-self: start;
	}
}