/*!
 * MyElectric — phone dialog
 * Fetched only when the dialog is actually needed.
 * Animations use transform/opacity only, so there is no layout work on the
 * main thread and no repaint storm on lower-powered phones.
 */

.mephone {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mephone[hidden] { display: none; }

.mephone__scrim {
	position: absolute;
	inset: 0;
	background: rgba(16, 20, 26, .52);
	opacity: 0;
	transition: opacity .24s ease;
	backdrop-filter: blur(2px);
}
.mephone.is-open .mephone__scrim { opacity: 1; }

.mephone__card {
	position: relative;
	width: 100%;
	max-width: 396px;
	background: #fff;
	color: #16191c;
	border-radius: 16px;
	padding: 30px 28px 22px;
	box-shadow: 0 24px 60px -18px rgba(12, 18, 28, .45);
	opacity: 0;
	transform: translateY(12px) scale(.985);
	transition: opacity .26s cubic-bezier(.2, .7, .3, 1), transform .26s cubic-bezier(.2, .7, .3, 1);
	will-change: transform, opacity;
	text-align: left;
}
.mephone.is-open .mephone__card { opacity: 1; transform: none; }

.mephone__x {
	position: absolute;
	top: 10px; right: 12px;
	width: 32px; height: 32px;
	border: 0; background: transparent;
	font-size: 24px; line-height: 1;
	color: #98a2ad; cursor: pointer; border-radius: 8px;
}
.mephone__x:hover { color: #16191c; background: #f2f4f6; }

.mephone__icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: #eaf1ff;
	color: #1f5fd8;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 15px;
}

.mephone__title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #16191c;
	text-wrap: balance;
}

.mephone__form { display: flex; flex-direction: column; gap: 9px; }

.mephone__label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #3a4550;
}

.mephone__row {
	display: flex;
	align-items: stretch;
	border: 1.5px solid #dfe3e8;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.mephone__row:focus-within {
	border-color: #1f5fd8;
	box-shadow: 0 0 0 3px rgba(31, 95, 216, .14);
}
.mephone__cc {
	display: flex; align-items: center;
	padding: 0 11px;
	background: #f5f7f9;
	border-right: 1px solid #e4e8ec;
	font-size: 14.5px; font-weight: 600; color: #5c6873;
}
.mephone__input {
	flex: 1; min-width: 0;
	border: 0; outline: 0;
	padding: 13px 14px;
	font-size: 16px;            /* 16px stops iOS zooming on focus */
	color: #16191c;
	background: transparent;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}
.mephone__input[aria-invalid="true"] { color: #b23a2e; }

.mephone__err {
	margin: 0;
	font-size: 13px;
	color: #b23a2e;
}

.mephone__save {
	margin-top: 5px;
	border: 0;
	background: #1f5fd8;
	color: #fff;
	font-size: 15px; font-weight: 600;
	padding: 13px 18px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .16s ease;
}
.mephone__save:hover:not(:disabled) { background: #1546a8; }
.mephone__save:disabled { opacity: .72; cursor: default; }

.mephone__skip {
	border: 0; background: transparent;
	color: #6a7787;
	font-size: 13.5px; font-weight: 500;
	padding: 7px; cursor: pointer; border-radius: 7px;
}
.mephone__skip:hover { color: #16191c; text-decoration: underline; }

.mephone__fine {
	margin: 15px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #8a95a1;
}

.mephone__card.is-done .mephone__save { background: #2c6e4b; }

.mephone__x:focus-visible,
.mephone__save:focus-visible,
.mephone__skip:focus-visible {
	outline: 2px solid #1f5fd8;
	outline-offset: 2px;
}

/* Small screens: sheet from the bottom, which is easier to reach one-handed */
@media (max-width: 480px) {
	.mephone { align-items: flex-end; padding: 0; }
	.mephone__card {
		max-width: none;
		border-radius: 18px 18px 0 0;
		padding: 26px 22px calc(20px + env(safe-area-inset-bottom));
		transform: translateY(26px);
	}
}

@media (prefers-color-scheme: dark) {
	.mephone__card { background: #191d21; color: #e4e8eb; }
	.mephone__title { color: #e4e8eb; }
	.mephone__label { color: #c3cbd2; }
	.mephone__row { background: #14181b; border-color: #2c333a; }
	.mephone__cc { background: #1f242a; border-right-color: #2c333a; color: #98a4ae; }
	.mephone__input { color: #e4e8eb; }
	.mephone__icon { background: #14243d; color: #7aa6f0; }
	.mephone__x:hover { background: #23292f; color: #e4e8eb; }
	.mephone__fine { color: #7d8892; }
}

@media (prefers-reduced-motion: reduce) {
	.mephone__scrim,
	.mephone__card { transition: none; }
	.mephone__card { transform: none; }
}

/* ---------------------------------------------------------------- country select */
select.mephone__cc {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	max-width: 132px;
	padding: 0 26px 0 12px;
	background-color: #f5f7f9;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%235c6873' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	font-size: 14px;
	font-weight: 600;
	color: #3a4550;
	cursor: pointer;
	text-overflow: ellipsis;
	border-right: 1px solid #e4e8ec;
	border-radius: 0;
}
select.mephone__cc:focus-visible { outline: 2px solid #1f5fd8; outline-offset: -2px; }

/* ------------------------------------------------ Google button on login forms */
.me-gbtn { margin: 18px 0 4px; }
.me-gbtn__divider {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 14px;
	color: #8a95a1; font-size: 12.5px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.me-gbtn__divider::before,
.me-gbtn__divider::after {
	content: ""; flex: 1; height: 1px; background: #e0e4e8;
}
.me-gbtn__btn { display: flex; justify-content: center; min-height: 44px; }
.me-gbtn__status {
	margin: 10px 0 0; font-size: 13px; color: #5c6873; text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.me-gbtn__status.is-error { color: #b23a2e; }

@media (prefers-color-scheme: dark) {
	select.mephone__cc { background-color: #1f242a; color: #c3cbd2; border-right-color: #2c333a; }
	.me-gbtn__divider { color: #7d8892; }
	.me-gbtn__divider::before, .me-gbtn__divider::after { background: #2c333a; }
	.me-gbtn__status { color: #98a4ae; }
}