/**
 * Banderas de país.
 *
 * Windows no trae glifos de banderas: los emoji «🇨🇴» se pintan ahí como las
 * dos letras del código («CO»), y dentro de un <option> no se puede meter una
 * imagen. Por eso las banderas son SVG propios y el desplegable de países es
 * un componente aparte, no un <select> nativo.
 *
 * Los SVG son de Twemoji (CC-BY 4.0, Twitter) y se sirven desde el plugin: no
 * se pide nada a terceros al abrir el formulario.
 */

.cgm-flag {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: none;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: -.22em;
	border-radius: 2px;
}
.cgm-flag--ad { background-image: url(../flags/ad.svg); }
.cgm-flag--ae { background-image: url(../flags/ae.svg); }
.cgm-flag--ao { background-image: url(../flags/ao.svg); }
.cgm-flag--ar { background-image: url(../flags/ar.svg); }
.cgm-flag--at { background-image: url(../flags/at.svg); }
.cgm-flag--au { background-image: url(../flags/au.svg); }
.cgm-flag--be { background-image: url(../flags/be.svg); }
.cgm-flag--bg { background-image: url(../flags/bg.svg); }
.cgm-flag--bo { background-image: url(../flags/bo.svg); }
.cgm-flag--br { background-image: url(../flags/br.svg); }
.cgm-flag--bz { background-image: url(../flags/bz.svg); }
.cgm-flag--ca { background-image: url(../flags/ca.svg); }
.cgm-flag--ch { background-image: url(../flags/ch.svg); }
.cgm-flag--cl { background-image: url(../flags/cl.svg); }
.cgm-flag--cn { background-image: url(../flags/cn.svg); }
.cgm-flag--co { background-image: url(../flags/co.svg); }
.cgm-flag--cr { background-image: url(../flags/cr.svg); }
.cgm-flag--cu { background-image: url(../flags/cu.svg); }
.cgm-flag--cy { background-image: url(../flags/cy.svg); }
.cgm-flag--cz { background-image: url(../flags/cz.svg); }
.cgm-flag--de { background-image: url(../flags/de.svg); }
.cgm-flag--dk { background-image: url(../flags/dk.svg); }
.cgm-flag--do { background-image: url(../flags/do.svg); }
.cgm-flag--dz { background-image: url(../flags/dz.svg); }
.cgm-flag--ec { background-image: url(../flags/ec.svg); }
.cgm-flag--ee { background-image: url(../flags/ee.svg); }
.cgm-flag--eg { background-image: url(../flags/eg.svg); }
.cgm-flag--es { background-image: url(../flags/es.svg); }
.cgm-flag--fi { background-image: url(../flags/fi.svg); }
.cgm-flag--fr { background-image: url(../flags/fr.svg); }
.cgm-flag--gb { background-image: url(../flags/gb.svg); }
.cgm-flag--gq { background-image: url(../flags/gq.svg); }
.cgm-flag--gr { background-image: url(../flags/gr.svg); }
.cgm-flag--gt { background-image: url(../flags/gt.svg); }
.cgm-flag--hn { background-image: url(../flags/hn.svg); }
.cgm-flag--hr { background-image: url(../flags/hr.svg); }
.cgm-flag--ht { background-image: url(../flags/ht.svg); }
.cgm-flag--hu { background-image: url(../flags/hu.svg); }
.cgm-flag--id { background-image: url(../flags/id.svg); }
.cgm-flag--ie { background-image: url(../flags/ie.svg); }
.cgm-flag--il { background-image: url(../flags/il.svg); }
.cgm-flag--in { background-image: url(../flags/in.svg); }
.cgm-flag--is { background-image: url(../flags/is.svg); }
.cgm-flag--it { background-image: url(../flags/it.svg); }
.cgm-flag--jm { background-image: url(../flags/jm.svg); }
.cgm-flag--jp { background-image: url(../flags/jp.svg); }
.cgm-flag--ke { background-image: url(../flags/ke.svg); }
.cgm-flag--kr { background-image: url(../flags/kr.svg); }
.cgm-flag--lb { background-image: url(../flags/lb.svg); }
.cgm-flag--lt { background-image: url(../flags/lt.svg); }
.cgm-flag--lu { background-image: url(../flags/lu.svg); }
.cgm-flag--lv { background-image: url(../flags/lv.svg); }
.cgm-flag--ma { background-image: url(../flags/ma.svg); }
.cgm-flag--mt { background-image: url(../flags/mt.svg); }
.cgm-flag--mx { background-image: url(../flags/mx.svg); }
.cgm-flag--my { background-image: url(../flags/my.svg); }
.cgm-flag--ng { background-image: url(../flags/ng.svg); }
.cgm-flag--ni { background-image: url(../flags/ni.svg); }
.cgm-flag--nl { background-image: url(../flags/nl.svg); }
.cgm-flag--no { background-image: url(../flags/no.svg); }
.cgm-flag--nz { background-image: url(../flags/nz.svg); }
.cgm-flag--pa { background-image: url(../flags/pa.svg); }
.cgm-flag--pe { background-image: url(../flags/pe.svg); }
.cgm-flag--ph { background-image: url(../flags/ph.svg); }
.cgm-flag--pl { background-image: url(../flags/pl.svg); }
.cgm-flag--pr { background-image: url(../flags/pr.svg); }
.cgm-flag--pt { background-image: url(../flags/pt.svg); }
.cgm-flag--py { background-image: url(../flags/py.svg); }
.cgm-flag--ro { background-image: url(../flags/ro.svg); }
.cgm-flag--ru { background-image: url(../flags/ru.svg); }
.cgm-flag--sa { background-image: url(../flags/sa.svg); }
.cgm-flag--se { background-image: url(../flags/se.svg); }
.cgm-flag--sg { background-image: url(../flags/sg.svg); }
.cgm-flag--si { background-image: url(../flags/si.svg); }
.cgm-flag--sk { background-image: url(../flags/sk.svg); }
.cgm-flag--sn { background-image: url(../flags/sn.svg); }
.cgm-flag--sv { background-image: url(../flags/sv.svg); }
.cgm-flag--th { background-image: url(../flags/th.svg); }
.cgm-flag--tr { background-image: url(../flags/tr.svg); }
.cgm-flag--ua { background-image: url(../flags/ua.svg); }
.cgm-flag--us { background-image: url(../flags/us.svg); }
.cgm-flag--uy { background-image: url(../flags/uy.svg); }
.cgm-flag--ve { background-image: url(../flags/ve.svg); }
.cgm-flag--vn { background-image: url(../flags/vn.svg); }
.cgm-flag--za { background-image: url(../flags/za.svg); }

/* ============================================================
   Desplegable de país
   ============================================================ */

.cgm-fsel { position: relative; display: block; }

/* El <select> real sigue ahí y sigue siendo el que se envía: solo se saca de
   la vista. Escondido con display:none dejaría de enviarse en algunos casos y
   los lectores de pantalla perderían la etiqueta. */
.cgm-fsel__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.cgm-fsel__btn {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 46px;
	padding: 10px 38px 10px 13px;
	border: 1px solid #dfe4f0;
	border-radius: 12px;
	background: #fff;
	color: #1b2137;
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cgm-fsel__btn:hover { border-color: #c3cade; }

.cgm-fsel__btn:focus-visible,
.cgm-fsel__btn[aria-expanded="true"] {
	outline: 0;
	border-color: #b9a3f5;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}

.cgm-fsel__btn.is-empty .cgm-fsel__btnTxt { color: #97a0b8; }

.cgm-fsel__btnTxt {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cgm-fsel__caret {
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-right: 2px solid #79829a;
	border-bottom: 2px solid #79829a;
	transform: rotate(45deg);
}

.cgm-fsel__pop {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid #e2e7f2;
	border-radius: 12px;
	box-shadow: 0 18px 44px -20px rgba(20, 28, 56, .4);
	overflow: hidden;
}

.cgm-fsel__pop[hidden] { display: none; }

.cgm-fsel__search {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-bottom: 1px solid #eef1f8;
	padding: 11px 14px;
	font: inherit;
	font-size: 14px;
	color: #1b2137;
	background: #fbfcff;
}

.cgm-fsel__search:focus { outline: 0; background: #fff; }

.cgm-fsel__list {
	margin: 0;
	padding: 5px;
	list-style: none;
	max-height: 264px;
	overflow-y: auto;
}

.cgm-fsel__opt {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 14.5px;
	color: #1b2137;
	cursor: pointer;
}

.cgm-fsel__opt[hidden] { display: none; }
.cgm-fsel__opt.is-active { background: #f3ecff; color: #4c1d95; }
.cgm-fsel__opt[aria-selected="true"] { font-weight: 600; }
.cgm-fsel__opt.is-blank { color: #97a0b8; }
.cgm-fsel__opt .cgm-flag { font-size: 17px; }

.cgm-fsel__txt {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cgm-fsel__hint {
	flex: none;
	color: #79829a;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.cgm-fsel__opt.is-active .cgm-fsel__hint { color: #6d28d9; }

/* El prefijo del teléfono es estrecho: su lista necesita salirse del campo. */
.cgm-fsel--dial .cgm-fsel__btn { padding-right: 30px; }
.cgm-fsel--dial .cgm-fsel__pop { right: auto; width: 300px; max-width: 78vw; }