/* ============================================================
   International phone control — shared styles for the country
   picker (.cf-phone / .ccwrap) used by BOTH the contact page and
   the site-wide call modal. The contact page also ships these rules
   in contact.css; they are duplicated here (identically) so the modal
   is styled on every page, where contact.css is not loaded.
   Wired by phone-intl.js. Uses tokens from site.css / home.css.
   ============================================================ */

/* ---- picker + input row ---- */
.cf-phone{display:flex;gap:clamp(14px,1.6vw,22px);align-items:stretch;}
.cf-phone .cf-ctrl{flex:1;min-width:0;}
.ccwrap{position:relative;flex:none;}
.ccwrap::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
	background:var(--red,#E73F3F);transform:scaleX(0);transform-origin:left;
	transition:transform .4s var(--ease,cubic-bezier(.22,1,.36,1));
}
.ccwrap:hover::after,
.ccwrap:focus-within::after{transform:scaleX(1);}
.ccbtn{
	display:flex;align-items:center;gap:8px;height:100%;
	padding:clamp(20px,1.8vw,24px) 2px clamp(9px,.9vw,12px);
	background:transparent;border:0;border-bottom:1px solid rgba(27,18,0,.30);border-radius:0;
	font:inherit;font-size:clamp(14px,1.05vw,16px);font-weight:700;font-variant-numeric:tabular-nums;
	color:var(--ink,#141922);cursor:pointer;
}
.ccbtn:focus-visible{outline:none;}
.ccbtn .flag{width:20px;height:20px;border-radius:50%;flex:none;object-fit:cover;}
.ccbtn .chev{width:12px;height:12px;flex:none;color:var(--faint,rgba(20,25,34,.4));transition:transform .25s var(--ease,ease);}
.ccwrap.is-open .ccbtn .chev{transform:rotate(180deg);}

.ccmenu{
	position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:min(330px,84vw);padding:8px;
	background:#fff;border-radius:12px;border:1px solid rgba(20,25,34,.08);
	box-shadow:0 20px 46px -14px rgba(12,20,30,.4);
	opacity:0;visibility:hidden;transform:translateY(-6px);
	transition:opacity .2s var(--ease,ease),transform .2s var(--ease,ease),visibility .2s;
}
.ccwrap.is-open .ccmenu{opacity:1;visibility:visible;transform:none;}
.ccsearch{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border:1px solid var(--line,rgba(20,25,34,.14));border-radius:8px;margin-bottom:6px;}
.ccsearch svg{width:15px;height:15px;color:var(--faint,rgba(20,25,34,.4));flex:none;}
.ccsearch input{width:100%;border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--ink,#141922);}
.cclist{max-height:262px;overflow:auto;overscroll-behavior:contain;margin:0;padding:0;list-style:none;}
.ccopt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink,#141922);}
.ccopt .flag{width:18px;height:18px;border-radius:50%;flex:none;object-fit:cover;}
.ccopt .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ccopt .dial{margin-left:auto;padding-left:8px;color:var(--soft,rgba(20,25,34,.6));font-variant-numeric:tabular-nums;}
.ccopt:hover,.ccopt.is-hl{background:var(--card,#f4f6f8);}
.ccopt.is-active{background:var(--card,#f4f6f8);font-weight:700;}
.ccopt.is-active::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow,#F5B21B);margin-left:8px;flex:none;}
.ccempty{padding:12px 10px;font-size:12.5px;color:var(--faint,rgba(20,25,34,.4));}

/* ---- inside the call modal: inputs are boxed, so match the picker button ---- */
.callmodal .cf-phone{gap:8px;align-items:flex-start;}
.callmodal .cf-phone .ccwrap::after{display:none;}
.callmodal .cf-phone .ccbtn{
	height:52px;padding:0 12px;
	border:1.5px solid rgba(20,25,34,.16);border-radius:11px;
	font-size:15px;
}
.callmodal .cf-phone .ccbtn:hover{border-color:rgba(20,25,34,.28);}
.callmodal .cf-phone .ccwrap.is-open .ccbtn,
.callmodal .cf-phone .ccbtn:focus-visible{border-color:var(--yellow,#F5B21B);}
/* the phone input always shows a format example, so keep its label floated */
.callmodal .cf-phone .cf-ctrl label{transform:translateY(-9px);font-size:11px;color:rgba(20,25,34,.55);}