/*
 * ALMC Phone — the compact "flag + dial code + national number" control.
 *
 * Every colour, radius, shadow and step of spacing is a custom property from
 * almc-design/tokens.css: no palette is invented here. Those tokens are scoped
 * to the module roots (.almc-reg, .almc-cuenta, .almc-perfil, .almc-agenda) and
 * never to :root, so each var() carries the token's own literal value as a
 * fallback — the field then still looks right if a consumer ever renders it
 * outside one of those roots.
 *
 * The button and the number input are ONE visual unit: the border, the radius
 * and the focus ring belong to the wrapper, not to either child, and the height
 * is --tap-lg (56px) so both halves are a comfortable touch target on a phone.
 */

.almc-phone {
	position: relative;
	display: block;
	font-family: var(--font-body, 'Open Sans', system-ui, sans-serif);

	/*
	 * WhatsApp's own green, the same value the invitation kit already carries
	 * as --inv-wa. It is declared here as well so the control keeps the mark
	 * when it is rendered on a surface that never loads that stylesheet.
	 *
	 * The bubble is a decorative mark — the line beneath says it in words — so
	 * 4.5:1 does not apply to it; the ring gives it a defined edge on white all
	 * the same. Every piece of TEXT this file paints is measured against the
	 * surface behind it: --ink #1E2F22 on #FFFFFF is 13.9:1, --text #474747 is
	 * 9.1:1, --soft-text #5F5F5F is 6.5:1, and the error's #A02017 is 7.7:1.
	 */
	--almc-wa: #25D366;
	--almc-wa-ring: rgba(6, 51, 26, .28);
	--almc-wa-knock: #FFFFFF;
	--almc-phone-bad: #A02017;
	--almc-phone-bad-ring: rgba(160, 32, 23, .18);
}

/* ------------------------------------------------------------- the labels. */

.almc-phone-labels {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	margin: 0 0 var(--sp-2, 8px);
}

.almc-phone-label {
	display: block;
	font-size: var(--fs-small, 16px);
	font-weight: 600;
	color: var(--ink, #1E2F22);
}

.almc-phone-labels label.almc-phone-label {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * In the document for the listbox that is named by it and for the button that
 * carries it as an aria-label, and painted nowhere: a flag beside its dial code
 * needs no word above it, and the word cost a third of the row on a phone.
 */
.almc-phone-label-country {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------- the single unit. */

.almc-phone-control {
	display: flex;
	align-items: stretch;
	height: var(--tap-lg, 56px);
	background: var(--card, #FFFFFF);
	border: 1px solid var(--line, #E4E4E4);
	border-radius: var(--r-sm, 14px);
	overflow: hidden;
	transition: border-color var(--t-fast, 150ms) var(--ease-out, ease),
		box-shadow var(--t-fast, 150ms) var(--ease-out, ease);
}

.almc-phone-control:focus-within {
	border-color: var(--g-600, #40724D);
	box-shadow: 0 0 0 3px var(--g-100, #E4F1E7);
}

/*
 * The floor, not the height: --tap-lg is 56 and that is what this control is,
 * but a consumer whose own stylesheet shrinks the box can never take it under
 * the 48px a finger needs.
 */
.almc-phone-control {
	min-height: var(--tap, 48px);
}

.almc-phone.has-error .almc-phone-control {
	border-color: var(--almc-phone-bad);
}

.almc-phone.has-error .almc-phone-control:focus-within {
	box-shadow: 0 0 0 3px var(--almc-phone-bad-ring);
}

.almc-phone.is-open .almc-phone-control {
	border-color: var(--g-600, #40724D);
}

/* --- the country button --- */

.almc-phone-toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	flex: 0 0 auto;
	min-width: 116px;
	height: 100%;
	margin: 0;
	padding: 0 var(--sp-3, 12px);
	border: 0;
	border-right: 1px solid var(--line, #E4E4E4);
	border-radius: 0;
	background: var(--page-alt, #F3F3F3);
	color: var(--ink, #1E2F22);
	font: inherit;
	font-size: var(--fs-small, 16px);
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * THE KIT PAINTS EVERY BUTTON ON THIS SITE. `.elementor-kit-100015515 button`
 * is a green gradient, white text, line-height 12px and a 10px/0 radius, and it
 * outranks a single class — so the country button rendered as a solid green
 * pill with its dial code clipped. Every one of those four declarations is
 * named and undone here, at `.almc-phone .almc-phone-toggle` (0,2,0), which
 * beats the kit's (0,1,1) without a single !important.
 */
.almc-phone .almc-phone-toggle {
	background-image: none;
	background-color: var(--page-alt, #F3F3F3);
	color: var(--ink, #1E2F22);
	line-height: 1;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
	text-shadow: none;
}

.almc-phone .almc-phone-toggle:hover {
	background-color: var(--g-50, #F1F8F3);
	background-image: none;
	color: var(--ink, #1E2F22);
}

/* The ring lives on the wrapper, so the button's own outline is removed only
   for a mouse press and kept for the keyboard. */
.almc-phone-toggle:focus {
	outline: none;
}

.almc-phone-toggle:focus-visible {
	outline: 2px solid var(--g-600, #40724D);
	outline-offset: -2px;
}

.almc-phone-flag-slot {
	display: inline-flex;
	flex: 0 0 auto;
	width: 24px;
	height: 16px;
}

.almc-phone-flag {
	display: block;
	width: 24px;
	height: 16px;
	border-radius: 2px;
	/* The artwork's own edge is white on several flags; a hairline keeps them
	   from dissolving into the button. */
	box-shadow: 0 0 0 1px rgba(30, 47, 34, .12);
	object-fit: cover;
}

.almc-phone-dial-text {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.almc-phone-caret {
	width: 16px;
	height: 16px;
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--soft-text, #5F5F5F);
	transition: transform var(--t-fast, 150ms) var(--ease-out, ease);
}

.almc-phone.is-open .almc-phone-caret {
	transform: rotate(180deg);
}

/* --- the national number --- */

.almc-phone-number {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 var(--sp-4, 16px);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text, #474747);
	font: inherit;
	font-size: var(--fs-body, 18px);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	-webkit-appearance: none;
	appearance: none;
}

.almc-phone-number:focus {
	outline: none;
}



.almc-phone-number::placeholder {
	color: var(--soft-text, #5F5F5F);
	opacity: .7;
}

/* ---------------------------------------------------------- the popover. */

.almc-phone-pop {
	position: absolute;
	z-index: 60;
	top: calc(100% + var(--sp-1, 4px));
	left: 0;
	width: 100%;
	max-width: 420px;
	background: var(--card, #FFFFFF);
	border: 1px solid var(--line, #E4E4E4);
	border-radius: var(--r-sm, 14px);
	box-shadow: var(--e3, 0 14px 28px -16px rgba(30, 47, 34, .30));
	overflow: hidden;
}

.almc-phone-pop[hidden] {
	display: none;
}

.almc-phone-search-wrap {
	padding: var(--sp-2, 8px);
	border-bottom: 1px solid var(--line, #E4E4E4);
	background: var(--page-alt, #F3F3F3);
}

.almc-phone-search {
	display: block;
	width: 100%;
	height: var(--tap, 48px);
	margin: 0;
	padding: 0 var(--sp-3, 12px);
	border: 1px solid var(--line, #E4E4E4);
	border-radius: var(--r-xs, 8px);
	background: var(--card, #FFFFFF);
	color: var(--text, #474747);
	font: inherit;
	font-size: var(--fs-small, 16px);
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
}

.almc-phone-search:focus {
	outline: none;
	border-color: var(--g-600, #40724D);
	box-shadow: 0 0 0 3px var(--g-100, #E4F1E7);
}

.almc-phone-list {
	max-height: 288px;
	margin: 0;
	padding: var(--sp-1, 4px);
	list-style: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.almc-phone-opt {
	display: flex;
	align-items: center;
	gap: var(--sp-3, 12px);
	min-height: var(--tap, 48px);
	padding: var(--sp-2, 8px) var(--sp-3, 12px);
	border-radius: var(--r-xs, 8px);
	color: var(--text, #474747);
	font-size: var(--fs-small, 16px);
	cursor: pointer;
}

.almc-phone-opt[hidden] {
	display: none;
}

.almc-phone-opt.is-active {
	background: var(--g-100, #E4F1E7);
	color: var(--g-800, #2C5537);
}

.almc-phone-opt.is-selected {
	font-weight: 600;
	color: var(--g-800, #2C5537);
}

.almc-phone-opt-flag {
	display: inline-flex;
	flex: 0 0 auto;
	width: 24px;
	height: 16px;
}

/* A country with no artwork keeps the row's rhythm: the slot holds its width
   and the dial code carries the identification on its own. */
.almc-phone-opt-flag:empty {
	background: var(--line, #E4E4E4);
	border-radius: 2px;
}

.almc-phone-opt-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.almc-phone-opt-dial {
	flex: 0 0 auto;
	color: var(--soft-text, #5F5F5F);
	font-variant-numeric: tabular-nums;
}

.almc-phone-opt.is-active .almc-phone-opt-dial,
.almc-phone-opt.is-selected .almc-phone-opt-dial {
	color: inherit;
}

.almc-phone-empty {
	margin: 0;
	padding: var(--sp-4, 16px);
	color: var(--soft-text, #5F5F5F);
	font-size: var(--fs-small, 16px);
	text-align: center;
}

.almc-phone-empty[hidden] {
	display: none;
}

/* ----------------------------------------------------- phone, <= 600px. */

@media (max-width: 600px) {
	.almc-phone-pop {
		max-width: none;
	}

	/*
	 * Measured on his phone: four nested 16px paddings leave this control 211px
	 * inside the "Segunda persona de tu casa" sheet, and the first build spent
	 * 111 of them on the country button and 30 on a mark, which left 62px for a
	 * ten-digit number. The button is cut to what it actually draws — a flag, a
	 * dial code and a caret — and the number takes everything else.
	 */
	.almc-phone-toggle {
		min-width: 0;
		gap: var(--sp-1, 4px);
		padding: 0 var(--sp-2, 8px);
	}

	.almc-phone-caret {
		width: 14px;
		height: 14px;
		margin-left: 0;
	}

	.almc-phone-number {
		padding: 0 var(--sp-2, 8px);
		letter-spacing: 0;
	}

	/*
	 * 16px, and at a specificity the theme cannot beat. `.almc-cuenta input`
	 * was winning with 18px, and at 18px a formatted "300 123 4567" is 9px
	 * wider than the box this control has on his phone: the last digit of the
	 * number he had just typed was cut off. 16px is also the floor — under it
	 * iOS zooms the page on focus and the person loses the form.
	 */
	.almc-phone .almc-phone-control .almc-phone-number,
	.almc-phone .almc-phone-pop .almc-phone-search {
		font-size: 16px;
	}

	/* Every pixel the button does not need belongs to the number. */
	.almc-phone .almc-phone-toggle {
		padding: 0 6px;
	}

	.almc-phone-caret {
		width: 12px;
		height: 12px;
	}
}

/*
 * Under 360px — an iPhone SE, and the narrowest thing anybody opens this on —
 * the caret goes. The button still says what it is with a flag and a dial code
 * beside each other, it still opens on tap, and the eighteen pixels it gives
 * back are the difference between seeing the whole number and seeing nine
 * tenths of it.
 */
@media (max-width: 360px) {
	.almc-phone .almc-phone-caret {
		display: none;
	}

	.almc-phone .almc-phone-toggle {
		gap: 4px;
		padding: 0 6px;
	}

	.almc-phone .almc-phone-flag-slot,
	.almc-phone .almc-phone-flag {
		width: 20px;
		height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.almc-phone-control,
	.almc-phone-caret {
		transition: none;
	}
}

/* ------------------------------------------------------ the WhatsApp mark. */

/*
 * Inside the control, at its trailing edge: the field says WhatsApp before a
 * single word of it is read. Decorative — aria-hidden in the markup — because
 * the line under the field carries the same thing in Spanish and that line is
 * what the number input's aria-describedby points at.
 */
.almc-phone-wa {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
}

.almc-phone-wa-mark {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--almc-wa-ring);
}

.almc-phone-wa-bubble {
	fill: var(--almc-wa);
}

.almc-phone-wa-handset {
	fill: var(--almc-wa-knock);
}

/* ------------------------------------------------- the hint and the error. */

.almc-phone-hint {
	margin: var(--sp-2, 8px) 0 0;
	font-size: var(--fs-small, 16px);
	color: var(--soft-text, #5F5F5F);
}

.almc-phone-wa-hint {
	display: flex;
	align-items: center;
	gap: var(--sp-2, 8px);
	margin: var(--sp-1, 4px) 0 0;
	font-size: var(--fs-small, 16px);
	line-height: 1.4;
	color: var(--soft-text, #5F5F5F);
}

.almc-phone-wa-hint__mark {
	display: inline-flex;
	flex: 0 0 auto;
}

.almc-phone-wa-hint .almc-phone-wa-mark {
	width: 20px;
	height: 20px;
}

/*
 * Empty until something is wrong. `:empty` rather than a class, so the row
 * takes no vertical space at rest and the form does not jump when it fills.
 */
.almc-phone-error {
	margin: var(--sp-2, 8px) 0 0;
	font-size: var(--fs-small, 16px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--almc-phone-bad);
}

.almc-phone-error:empty {
	margin: 0;
	display: none;
}

/* The number itself never drops under 16px: at 15px iOS zooms the page on
   focus and the person loses the form they were filling in. */
/*
 * Three classes deep, and it has to be. `.almc-cuenta .almc-phone input` in
 * almc-cuenta/assets/cuenta.css line 1710 — a shim left over from the native
 * select this control replaced — is (0,2,1) and beat a two-class rule, which
 * is how an 18px number ended up 9px wider than its own box on his phone.
 * Matching on the control the input actually sits in is (0,3,0) and true.
 */
.almc-phone .almc-phone-control .almc-phone-number,
.almc-phone .almc-phone-pop .almc-phone-search,
.almc-phone .almc-phone-toggle .almc-phone-dial-text,
.almc-phone .almc-phone-list .almc-phone-opt {
	font-size: max(16px, var(--fs-small, 16px));
}