/*
 * biz_phone_codes - the country picker, styles.
 *
 * Every rule is scoped under .bizpc-ready, a class only picker.js adds, so a
 * script that fails to load leaves the stock field exactly as it was. Colours
 * come from custom properties, each with a literal fallback.
 *
 * The button and the input must read as ONE input: here only what is true in
 * every theme, in picker.js everything a theme owns, read off the input at run
 * time. README.md "One joined control" has the reasoning; !important appears
 * only where a named skin rule forces it.
 */

.bizpc-ready {
	--bizpc-border: #ced4da;
	--bizpc-surface: #ffffff;
	--bizpc-text: #212529;
	--bizpc-muted: #6c757d;
	--bizpc-accent: #0d6efd;
	--bizpc-accent-soft: #e7f1ff;
	--bizpc-danger: #dc3545;
	--bizpc-radius: 4px;

	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;

	/* The halves must touch. Journal's own `.input-group` gap, which defaults
	 * to 5px, measured 8px live, from a selector no weaker than ours. */
	gap: 0 !important;

	/*
	 * Fill the space the input had, in every layout: Journal lays the column
	 * out as a flex row, where the wrapper would otherwise shrink to its
	 * content (measured live: a 203px input among 696px ones). From a ZERO
	 * basis and with NO width - Journal's checkout rows wrap, and a 100% wide
	 * wrapper drops under the label there (63px row instead of 40px).
	 */
	flex: 1 1 0%;
	min-width: 0;
}

/* Layout, not appearance: the INNER corners are mid-control now, and the margin
 * undoes Bootstrap 5's `margin-left:-1px` (admin bootstrap.css:2696, 0-7-0).
 * picker.js writes these same three onto the input inline and !important - a
 * Journal skin reaches (1,4,1), which this rule's (0,2,1) loses to - so this is
 * the frame before the script and the fallback with no setProperty. */
.bizpc-ready > input[name="telephone"] {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 0 !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* These literals show for the one frame before picker.js has measured the
 * input, and are then overwritten. NO min-height, deliberately: a fixed 44px
 * made the button taller than the input in every theme measured (Journal 44
 * against 40, the admin 44 against ~37) - the reported defect.
 *
 * Load-bearing, and each has a static check: `box-sizing: border-box` because
 * picker.js writes an OUTER height; `border-right: 0` because the one dividing
 * line is the input's own left border; `position: relative` because the focus
 * z-index below is inert without it; the margin because the button is now a
 * non-first child (bootstrap.css:2696). */
.bizpc-trigger {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 44px;
	margin-left: 0 !important;
	padding: 4px 10px;
	border: 1px solid #ced4da;
	border: 1px solid var(--bizpc-border);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	border-radius: var(--bizpc-radius) 0 0 var(--bizpc-radius);
	background: #ffffff;
	background: var(--bizpc-surface);
	color: #212529;
	color: var(--bizpc-text);
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
}

/* Inside the border box, so no overflow clips it; the `position: relative`
 * above is what makes this z-index mean anything. */
.bizpc-trigger:focus-visible,
.bizpc-trigger:focus {
	outline: 2px solid #0d6efd;
	outline: 2px solid var(--bizpc-accent);
	outline-offset: -2px;
	z-index: 3;
}

.bizpc-flag {
	font-size: 1.15em;
	line-height: 1;
}

/* One static SVG per country. The element's width and height attributes
 * already reserve the box; these rules only scale it with the text. */
.bizpc-flag img,
.bizpc-option-flag img {
	display: block;
	width: 1.3em;
	height: 0.975em;
	border-radius: 1px;
	background: rgba(0, 0, 0, 0.04);
	object-fit: cover;
}

.bizpc-option-flag {
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 1;
}

.bizpc-iso {
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Inherited, not a literal grey: the button's colour is the input's, read at
 * run time, and a dark design would leave this one span in a colour chosen for
 * white. Over #212529 the result is #686b6e - the grey it replaces. */
.bizpc-dial {
	color: inherit;
	opacity: 0.68;
}

/* On the INPUT only; the button follows because it copies that colour.
 * !important because Journal marks the same property important, and a warning
 * a skin overrules is not a warning. */
.bizpc-suspect > input[name="telephone"] {
	border-color: #dc3545 !important;
	border-color: var(--bizpc-danger) !important;
}

/* ---- the popup ------------------------------------------------------------ */

.bizpc-panel {
	position: absolute;
	z-index: 1080;
	top: 100%;
	left: 0;
	width: min(22rem, 100%);
	max-width: 100%;
	margin-top: 2px;
	padding: 6px;
	border: 1px solid #ced4da;
	border: 1px solid var(--bizpc-border);
	border-radius: 4px;
	border-radius: var(--bizpc-radius);
	background: #ffffff;
	background: var(--bizpc-surface);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* The panel hangs at the control's bottom-left already, except that as an
 * `.input-group` child that is neither first nor last it collects
 * `margin-left:-1px` - the 1px jump - and squared corners on both sides
 * (bootstrap.css:2682, :2696). All undone. */
.bizpc-ready > .bizpc-panel {
	margin-left: 0 !important;
	border-radius: 4px !important;
	border-radius: var(--bizpc-radius) !important;
}

.bizpc-panel[hidden] {
	display: none;
}

.bizpc-search {
	display: block;
	width: 100%;
	min-height: 40px;
	margin-bottom: 6px;
	padding: 6px 8px;
	border: 1px solid #ced4da;
	border: 1px solid var(--bizpc-border);
	border-radius: 4px;
	border-radius: var(--bizpc-radius);
	font: inherit;
}

.bizpc-list {
	max-height: 18rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	-webkit-overflow-scrolling: touch;
}

.bizpc-option {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 8px;
	cursor: pointer;
}

.bizpc-option-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bizpc-option-iso {
	flex: 0 0 auto;
	font-weight: 600;
	color: #6c757d;
	color: var(--bizpc-muted);
}

.bizpc-option-dial {
	flex: 0 0 auto;
	color: #6c757d;
	color: var(--bizpc-muted);
	font-variant-numeric: tabular-nums;
}

.bizpc-option.bizpc-active,
.bizpc-option:hover {
	background: #e7f1ff;
	background: var(--bizpc-accent-soft);
}

.bizpc-option[aria-selected="true"] .bizpc-option-name {
	font-weight: 600;
}

/* The last preferred country is separated from the full alphabet. */
.bizpc-option.bizpc-preferred + .bizpc-option:not(.bizpc-preferred) {
	border-top: 1px solid #ced4da;
	border-top: 1px solid var(--bizpc-border);
	margin-top: 4px;
	padding-top: 10px;
}

.bizpc-empty {
	padding: 12px 8px;
	color: #6c757d;
	color: var(--bizpc-muted);
	list-style: none;
}

/* A live region that is announced but not seen. */
.bizpc-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- phones: the list becomes a bottom sheet -------------------------------- */

@media (max-width: 576px) {
	.bizpc-open .bizpc-panel {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 70vh;
		margin: 0;
		padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
		border: 0;
		/* !important, because the rule that undoes Bootstrap's squared
		 * corners above carries it too and a sheet is not a dropdown. */
		border-radius: 12px 12px 0 0 !important;
		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
	}

	.bizpc-open .bizpc-list {
		max-height: 50vh;
	}

	.bizpc-option {
		min-height: 48px;
	}
}

/* A finger needs about 44px, the only reason a minimum height exists at all -
 * so it is asked for where it is true, and on BOTH halves, because raising
 * only the button puts the defect straight back. */
@media (pointer: coarse) {
	.bizpc-ready > .bizpc-trigger,
	.bizpc-ready > input[name="telephone"] {
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.bizpc-open .bizpc-panel {
		animation: bizpc-in 120ms ease-out;
	}

	@keyframes bizpc-in {
		from { opacity: 0; transform: translateY(4px); }
		to { opacity: 1; transform: none; }
	}
}

/*
 * Dark colours follow the PAGE, never the operating system: the shop and the
 * admin are light whatever the visitor's OS says, so `prefers-color-scheme`
 * would weld a dark button onto a white input. Keyed on a signal the page
 * sets - Bootstrap 5's `data-bs-theme="dark"`, or `bizpc-dark` on an ancestor.
 * These are the pre-script fallback only: picker.js adopts the real colours.
 */
[data-bs-theme="dark"] .bizpc-ready,
.bizpc-dark .bizpc-ready {
	--bizpc-border: #4a5159;
	--bizpc-surface: #23272b;
	--bizpc-text: #e9ecef;
	--bizpc-muted: #adb5bd;
	--bizpc-accent: #4dabf7;
	--bizpc-accent-soft: #2b3a4a;
}