/* ===== Composant « phone-input » : saisie de téléphone international (100 % natif) =====
   Rendu/piloté par Scripts/Visa/components/phone-input.js. Remplace l'ancien plugin
   jQuery intl-tel-input. Le champ national utilise le composant .field / .form-control ;
   ce fichier ajoute le sélecteur de pays (drapeau + indicatif) et la liste déroulante. */

.phone-input {
    position: relative;
    display: block;
}

/* Le champ national laisse de la place à gauche pour le bouton pays. */
.phone-input .form-control {
    padding-left: 4.2rem;
}

/* Bouton d'ouverture du sélecteur de pays (drapeau + chevron), ancré à gauche. */
.phone-input__toggle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs3);
    padding: 0 var(--spacing-xs2) 0 var(--spacing-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);

    &:focus-visible {
        outline: 0.2rem solid var(--color-primary);
        outline-offset: -0.2rem;
    }
}

.phone-input__arrow {
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.5rem solid var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.phone-input.is-open .phone-input__arrow {
    transform: rotate(180deg);
}

/* Liste déroulante des pays.
   position:fixed → échappe tout stacking context et overflow parent ;
   top/left/width sont posés en inline style par phone-input.js (_positionDropdown). */
.phone-input__dropdown {
    position: fixed;
    z-index: var(--z-index-dropdown);
    background: var(--color-white);
    border: 0.1rem solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;

    &[hidden] {
        display: none;
    }
}

.phone-input__search {
    display: block;
    width: 100%;
    padding: var(--spacing-xs2) var(--spacing-sm);
    font-size: var(--font-size-base);
    border: none;
    border-bottom: 0.1rem solid var(--color-border);

    &:focus {
        outline: none;
        border-bottom-color: var(--color-primary);
    }
}

.phone-input__list {
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs3) 0;
    max-height: 24rem;
    overflow-y: auto;
}

.phone-input__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);
    padding: var(--spacing-xs5) var(--spacing-sm2);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);

    &.is-active,
    &:hover {
        background: var(--color-primary-light);
    }

    &.is-selected {
        font-weight: var(--font-weight-semibold);
    }

    &[hidden] {
        display: none;
    }
}

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

.phone-input__dial {
    color: var(--color-text-muted);
}

.phone-input__empty {
    padding: var(--spacing-sm) var(--spacing-sm2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);

    &[hidden] {
        display: none;
    }
}

/* ===== Drapeaux (sprite WebP) =====
   Sprite repris d'intl-tel-input, converti en WebP. URL isolée sur une seule ligne.
   Les positions par pays sont générées plus bas. */
.phone-input__flag {
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 15px;
    box-shadow: 0 0 1px 0 var(--color-flag-border);
    background-repeat: no-repeat;
    background-color: var(--color-flag-bg);
    background-image: url("/Content/themes/Visa/images/flags@2x.webp");
    background-size: 5652px 15px;
    background-position: 20px 0;
}

.phone-input__flag.be { width: 18px; }
.phone-input__flag.ch { width: 15px; }
.phone-input__flag.mc { width: 19px; }
.phone-input__flag.ne { width: 18px; }
.phone-input__flag.np { width: 13px; }
.phone-input__flag.va { width: 15px; }
.phone-input__flag.ac { height: 10px; background-position: 0px 0px; }
.phone-input__flag.ad { height: 14px; background-position: -22px 0px; }
.phone-input__flag.ae { height: 10px; background-position: -44px 0px; }
.phone-input__flag.af { height: 14px; background-position: -66px 0px; }
.phone-input__flag.ag { height: 14px; background-position: -88px 0px; }
.phone-input__flag.ai { height: 10px; background-position: -110px 0px; }
.phone-input__flag.al { height: 15px; background-position: -132px 0px; }
.phone-input__flag.am { height: 10px; background-position: -154px 0px; }
.phone-input__flag.ao { height: 14px; background-position: -176px 0px; }
.phone-input__flag.aq { height: 14px; background-position: -198px 0px; }
.phone-input__flag.ar { height: 13px; background-position: -220px 0px; }
.phone-input__flag.as { height: 10px; background-position: -242px 0px; }
.phone-input__flag.at { height: 14px; background-position: -264px 0px; }
.phone-input__flag.au { height: 10px; background-position: -286px 0px; }
.phone-input__flag.aw { height: 14px; background-position: -308px 0px; }
.phone-input__flag.ax { height: 13px; background-position: -330px 0px; }
.phone-input__flag.az { height: 10px; background-position: -352px 0px; }
.phone-input__flag.ba { height: 10px; background-position: -374px 0px; }
.phone-input__flag.bb { height: 14px; background-position: -396px 0px; }
.phone-input__flag.bd { height: 12px; background-position: -418px 0px; }
.phone-input__flag.be { height: 15px; background-position: -440px 0px; }
.phone-input__flag.bf { height: 14px; background-position: -460px 0px; }
.phone-input__flag.bg { height: 12px; background-position: -482px 0px; }
.phone-input__flag.bh { height: 12px; background-position: -504px 0px; }
.phone-input__flag.bi { height: 12px; background-position: -526px 0px; }
.phone-input__flag.bj { height: 14px; background-position: -548px 0px; }
.phone-input__flag.bl { height: 14px; background-position: -570px 0px; }
.phone-input__flag.bm { height: 10px; background-position: -592px 0px; }
.phone-input__flag.bn { height: 10px; background-position: -614px 0px; }
.phone-input__flag.bo { height: 14px; background-position: -636px 0px; }
.phone-input__flag.bq { height: 14px; background-position: -658px 0px; }
.phone-input__flag.br { height: 14px; background-position: -680px 0px; }
.phone-input__flag.bs { height: 10px; background-position: -702px 0px; }
.phone-input__flag.bt { height: 14px; background-position: -724px 0px; }
.phone-input__flag.bv { height: 15px; background-position: -746px 0px; }
.phone-input__flag.bw { height: 14px; background-position: -768px 0px; }
.phone-input__flag.by { height: 10px; background-position: -790px 0px; }
.phone-input__flag.bz { height: 14px; background-position: -812px 0px; }
.phone-input__flag.ca { height: 10px; background-position: -834px 0px; }
.phone-input__flag.cc { height: 10px; background-position: -856px 0px; }
.phone-input__flag.cd { height: 15px; background-position: -878px 0px; }
.phone-input__flag.cf { height: 14px; background-position: -900px 0px; }
.phone-input__flag.cg { height: 14px; background-position: -922px 0px; }
.phone-input__flag.ch { height: 15px; background-position: -944px 0px; }
.phone-input__flag.ci { height: 14px; background-position: -961px 0px; }
.phone-input__flag.ck { height: 10px; background-position: -983px 0px; }
.phone-input__flag.cl { height: 14px; background-position: -1005px 0px; }
.phone-input__flag.cm { height: 14px; background-position: -1027px 0px; }
.phone-input__flag.cn { height: 14px; background-position: -1049px 0px; }
.phone-input__flag.co { height: 14px; background-position: -1071px 0px; }
.phone-input__flag.cp { height: 14px; background-position: -1093px 0px; }
.phone-input__flag.cr { height: 12px; background-position: -1115px 0px; }
.phone-input__flag.cu { height: 10px; background-position: -1137px 0px; }
.phone-input__flag.cv { height: 12px; background-position: -1159px 0px; }
.phone-input__flag.cw { height: 14px; background-position: -1181px 0px; }
.phone-input__flag.cx { height: 10px; background-position: -1203px 0px; }
.phone-input__flag.cy { height: 14px; background-position: -1225px 0px; }
.phone-input__flag.cz { height: 14px; background-position: -1247px 0px; }
.phone-input__flag.de { height: 12px; background-position: -1269px 0px; }
.phone-input__flag.dg { height: 10px; background-position: -1291px 0px; }
.phone-input__flag.dj { height: 14px; background-position: -1313px 0px; }
.phone-input__flag.dk { height: 15px; background-position: -1335px 0px; }
.phone-input__flag.dm { height: 10px; background-position: -1357px 0px; }
.phone-input__flag.do { height: 14px; background-position: -1379px 0px; }
.phone-input__flag.dz { height: 14px; background-position: -1401px 0px; }
.phone-input__flag.ea { height: 14px; background-position: -1423px 0px; }
.phone-input__flag.ec { height: 14px; background-position: -1445px 0px; }
.phone-input__flag.ee { height: 13px; background-position: -1467px 0px; }
.phone-input__flag.eg { height: 14px; background-position: -1489px 0px; }
.phone-input__flag.eh { height: 10px; background-position: -1511px 0px; }
.phone-input__flag.er { height: 10px; background-position: -1533px 0px; }
.phone-input__flag.es { height: 14px; background-position: -1555px 0px; }
.phone-input__flag.et { height: 10px; background-position: -1577px 0px; }
.phone-input__flag.eu { height: 14px; background-position: -1599px 0px; }
.phone-input__flag.fi { height: 12px; background-position: -1621px 0px; }
.phone-input__flag.fj { height: 10px; background-position: -1643px 0px; }
.phone-input__flag.fk { height: 10px; background-position: -1665px 0px; }
.phone-input__flag.fm { height: 11px; background-position: -1687px 0px; }
.phone-input__flag.fo { height: 15px; background-position: -1709px 0px; }
.phone-input__flag.fr { height: 14px; background-position: -1731px 0px; }
.phone-input__flag.ga { height: 15px; background-position: -1753px 0px; }
.phone-input__flag.gb { height: 10px; background-position: -1775px 0px; }
.phone-input__flag.gd { height: 12px; background-position: -1797px 0px; }
.phone-input__flag.ge { height: 14px; background-position: -1819px 0px; }
.phone-input__flag.gf { height: 14px; background-position: -1841px 0px; }
.phone-input__flag.gg { height: 14px; background-position: -1863px 0px; }
.phone-input__flag.gh { height: 14px; background-position: -1885px 0px; }
.phone-input__flag.gi { height: 10px; background-position: -1907px 0px; }
.phone-input__flag.gl { height: 14px; background-position: -1929px 0px; }
.phone-input__flag.gm { height: 14px; background-position: -1951px 0px; }
.phone-input__flag.gn { height: 14px; background-position: -1973px 0px; }
.phone-input__flag.gp { height: 14px; background-position: -1995px 0px; }
.phone-input__flag.gq { height: 14px; background-position: -2017px 0px; }
.phone-input__flag.gr { height: 14px; background-position: -2039px 0px; }
.phone-input__flag.gs { height: 10px; background-position: -2061px 0px; }
.phone-input__flag.gt { height: 13px; background-position: -2083px 0px; }
.phone-input__flag.gu { height: 11px; background-position: -2105px 0px; }
.phone-input__flag.gw { height: 10px; background-position: -2127px 0px; }
.phone-input__flag.gy { height: 12px; background-position: -2149px 0px; }
.phone-input__flag.hk { height: 14px; background-position: -2171px 0px; }
.phone-input__flag.hm { height: 10px; background-position: -2193px 0px; }
.phone-input__flag.hn { height: 10px; background-position: -2215px 0px; }
.phone-input__flag.hr { height: 10px; background-position: -2237px 0px; }
.phone-input__flag.ht { height: 12px; background-position: -2259px 0px; }
.phone-input__flag.hu { height: 10px; background-position: -2281px 0px; }
.phone-input__flag.ic { height: 14px; background-position: -2303px 0px; }
.phone-input__flag.id { height: 14px; background-position: -2325px 0px; }
.phone-input__flag.ie { height: 10px; background-position: -2347px 0px; }
.phone-input__flag.il { height: 15px; background-position: -2369px 0px; }
.phone-input__flag.im { height: 10px; background-position: -2391px 0px; }
.phone-input__flag.in { height: 14px; background-position: -2413px 0px; }
.phone-input__flag.io { height: 10px; background-position: -2435px 0px; }
.phone-input__flag.iq { height: 14px; background-position: -2457px 0px; }
.phone-input__flag.ir { height: 12px; background-position: -2479px 0px; }
.phone-input__flag.is { height: 15px; background-position: -2501px 0px; }
.phone-input__flag.it { height: 14px; background-position: -2523px 0px; }
.phone-input__flag.je { height: 12px; background-position: -2545px 0px; }
.phone-input__flag.jm { height: 10px; background-position: -2567px 0px; }
.phone-input__flag.jo { height: 10px; background-position: -2589px 0px; }
.phone-input__flag.jp { height: 14px; background-position: -2611px 0px; }
.phone-input__flag.ke { height: 14px; background-position: -2633px 0px; }
.phone-input__flag.kg { height: 12px; background-position: -2655px 0px; }
.phone-input__flag.kh { height: 13px; background-position: -2677px 0px; }
.phone-input__flag.ki { height: 10px; background-position: -2699px 0px; }
.phone-input__flag.km { height: 12px; background-position: -2721px 0px; }
.phone-input__flag.kn { height: 14px; background-position: -2743px 0px; }
.phone-input__flag.kp { height: 10px; background-position: -2765px 0px; }
.phone-input__flag.kr { height: 14px; background-position: -2787px 0px; }
.phone-input__flag.kw { height: 10px; background-position: -2809px 0px; }
.phone-input__flag.ky { height: 10px; background-position: -2831px 0px; }
.phone-input__flag.kz { height: 10px; background-position: -2853px 0px; }
.phone-input__flag.la { height: 14px; background-position: -2875px 0px; }
.phone-input__flag.lb { height: 14px; background-position: -2897px 0px; }
.phone-input__flag.lc { height: 10px; background-position: -2919px 0px; }
.phone-input__flag.li { height: 12px; background-position: -2941px 0px; }
.phone-input__flag.lk { height: 10px; background-position: -2963px 0px; }
.phone-input__flag.lr { height: 11px; background-position: -2985px 0px; }
.phone-input__flag.ls { height: 14px; background-position: -3007px 0px; }
.phone-input__flag.lt { height: 12px; background-position: -3029px 0px; }
.phone-input__flag.lu { height: 12px; background-position: -3051px 0px; }
.phone-input__flag.lv { height: 10px; background-position: -3073px 0px; }
.phone-input__flag.ly { height: 10px; background-position: -3095px 0px; }
.phone-input__flag.ma { height: 14px; background-position: -3117px 0px; }
.phone-input__flag.mc { height: 15px; background-position: -3139px 0px; }
.phone-input__flag.md { height: 10px; background-position: -3160px 0px; }
.phone-input__flag.me { height: 10px; background-position: -3182px 0px; }
.phone-input__flag.mf { height: 14px; background-position: -3204px 0px; }
.phone-input__flag.mg { height: 14px; background-position: -3226px 0px; }
.phone-input__flag.mh { height: 11px; background-position: -3248px 0px; }
.phone-input__flag.mk { height: 10px; background-position: -3270px 0px; }
.phone-input__flag.ml { height: 14px; background-position: -3292px 0px; }
.phone-input__flag.mm { height: 14px; background-position: -3314px 0px; }
.phone-input__flag.mn { height: 10px; background-position: -3336px 0px; }
.phone-input__flag.mo { height: 14px; background-position: -3358px 0px; }
.phone-input__flag.mp { height: 10px; background-position: -3380px 0px; }
.phone-input__flag.mq { height: 14px; background-position: -3402px 0px; }
.phone-input__flag.mr { height: 14px; background-position: -3424px 0px; }
.phone-input__flag.ms { height: 10px; background-position: -3446px 0px; }
.phone-input__flag.mt { height: 14px; background-position: -3468px 0px; }
.phone-input__flag.mu { height: 14px; background-position: -3490px 0px; }
.phone-input__flag.mv { height: 14px; background-position: -3512px 0px; }
.phone-input__flag.mw { height: 14px; background-position: -3534px 0px; }
.phone-input__flag.mx { height: 12px; background-position: -3556px 0px; }
.phone-input__flag.my { height: 10px; background-position: -3578px 0px; }
.phone-input__flag.mz { height: 14px; background-position: -3600px 0px; }
.phone-input__flag.na { height: 14px; background-position: -3622px 0px; }
.phone-input__flag.nc { height: 10px; background-position: -3644px 0px; }
.phone-input__flag.ne { height: 15px; background-position: -3666px 0px; }
.phone-input__flag.nf { height: 10px; background-position: -3686px 0px; }
.phone-input__flag.ng { height: 10px; background-position: -3708px 0px; }
.phone-input__flag.ni { height: 12px; background-position: -3730px 0px; }
.phone-input__flag.nl { height: 14px; background-position: -3752px 0px; }
.phone-input__flag.no { height: 15px; background-position: -3774px 0px; }
.phone-input__flag.np { height: 15px; background-position: -3796px 0px; }
.phone-input__flag.nr { height: 10px; background-position: -3811px 0px; }
.phone-input__flag.nu { height: 10px; background-position: -3833px 0px; }
.phone-input__flag.nz { height: 10px; background-position: -3855px 0px; }
.phone-input__flag.om { height: 10px; background-position: -3877px 0px; }
.phone-input__flag.pa { height: 14px; background-position: -3899px 0px; }
.phone-input__flag.pe { height: 14px; background-position: -3921px 0px; }
.phone-input__flag.pf { height: 14px; background-position: -3943px 0px; }
.phone-input__flag.pg { height: 15px; background-position: -3965px 0px; }
.phone-input__flag.ph { height: 10px; background-position: -3987px 0px; }
.phone-input__flag.pk { height: 14px; background-position: -4009px 0px; }
.phone-input__flag.pl { height: 13px; background-position: -4031px 0px; }
.phone-input__flag.pm { height: 14px; background-position: -4053px 0px; }
.phone-input__flag.pn { height: 10px; background-position: -4075px 0px; }
.phone-input__flag.pr { height: 14px; background-position: -4097px 0px; }
.phone-input__flag.ps { height: 10px; background-position: -4119px 0px; }
.phone-input__flag.pt { height: 14px; background-position: -4141px 0px; }
.phone-input__flag.pw { height: 13px; background-position: -4163px 0px; }
.phone-input__flag.py { height: 11px; background-position: -4185px 0px; }
.phone-input__flag.qa { height: 8px; background-position: -4207px 0px; }
.phone-input__flag.re { height: 14px; background-position: -4229px 0px; }
.phone-input__flag.ro { height: 14px; background-position: -4251px 0px; }
.phone-input__flag.rs { height: 14px; background-position: -4273px 0px; }
.phone-input__flag.ru { height: 14px; background-position: -4295px 0px; }
.phone-input__flag.rw { height: 14px; background-position: -4317px 0px; }
.phone-input__flag.sa { height: 14px; background-position: -4339px 0px; }
.phone-input__flag.sb { height: 10px; background-position: -4361px 0px; }
.phone-input__flag.sc { height: 10px; background-position: -4383px 0px; }
.phone-input__flag.sd { height: 10px; background-position: -4405px 0px; }
.phone-input__flag.se { height: 13px; background-position: -4427px 0px; }
.phone-input__flag.sg { height: 14px; background-position: -4449px 0px; }
.phone-input__flag.sh { height: 10px; background-position: -4471px 0px; }
.phone-input__flag.si { height: 10px; background-position: -4493px 0px; }
.phone-input__flag.sj { height: 15px; background-position: -4515px 0px; }
.phone-input__flag.sk { height: 14px; background-position: -4537px 0px; }
.phone-input__flag.sl { height: 14px; background-position: -4559px 0px; }
.phone-input__flag.sm { height: 15px; background-position: -4581px 0px; }
.phone-input__flag.sn { height: 14px; background-position: -4603px 0px; }
.phone-input__flag.so { height: 14px; background-position: -4625px 0px; }
.phone-input__flag.sr { height: 14px; background-position: -4647px 0px; }
.phone-input__flag.ss { height: 10px; background-position: -4669px 0px; }
.phone-input__flag.st { height: 10px; background-position: -4691px 0px; }
.phone-input__flag.sv { height: 12px; background-position: -4713px 0px; }
.phone-input__flag.sx { height: 14px; background-position: -4735px 0px; }
.phone-input__flag.sy { height: 14px; background-position: -4757px 0px; }
.phone-input__flag.sz { height: 14px; background-position: -4779px 0px; }
.phone-input__flag.ta { height: 10px; background-position: -4801px 0px; }
.phone-input__flag.tc { height: 10px; background-position: -4823px 0px; }
.phone-input__flag.td { height: 14px; background-position: -4845px 0px; }
.phone-input__flag.tf { height: 14px; background-position: -4867px 0px; }
.phone-input__flag.tg { height: 13px; background-position: -4889px 0px; }
.phone-input__flag.th { height: 14px; background-position: -4911px 0px; }
.phone-input__flag.tj { height: 10px; background-position: -4933px 0px; }
.phone-input__flag.tk { height: 10px; background-position: -4955px 0px; }
.phone-input__flag.tl { height: 10px; background-position: -4977px 0px; }
.phone-input__flag.tm { height: 14px; background-position: -4999px 0px; }
.phone-input__flag.tn { height: 14px; background-position: -5021px 0px; }
.phone-input__flag.to { height: 10px; background-position: -5043px 0px; }
.phone-input__flag.tr { height: 14px; background-position: -5065px 0px; }
.phone-input__flag.tt { height: 12px; background-position: -5087px 0px; }
.phone-input__flag.tv { height: 10px; background-position: -5109px 0px; }
.phone-input__flag.tw { height: 14px; background-position: -5131px 0px; }
.phone-input__flag.tz { height: 14px; background-position: -5153px 0px; }
.phone-input__flag.ua { height: 14px; background-position: -5175px 0px; }
.phone-input__flag.ug { height: 14px; background-position: -5197px 0px; }
.phone-input__flag.um { height: 11px; background-position: -5219px 0px; }
.phone-input__flag.un { height: 14px; background-position: -5241px 0px; }
.phone-input__flag.us { height: 11px; background-position: -5263px 0px; }
.phone-input__flag.uy { height: 14px; background-position: -5285px 0px; }
.phone-input__flag.uz { height: 10px; background-position: -5307px 0px; }
.phone-input__flag.va { height: 15px; background-position: -5329px 0px; }
.phone-input__flag.vc { height: 14px; background-position: -5346px 0px; }
.phone-input__flag.ve { height: 14px; background-position: -5368px 0px; }
.phone-input__flag.vg { height: 10px; background-position: -5390px 0px; }
.phone-input__flag.vi { height: 14px; background-position: -5412px 0px; }
.phone-input__flag.vn { height: 14px; background-position: -5434px 0px; }
.phone-input__flag.vu { height: 12px; background-position: -5456px 0px; }
.phone-input__flag.wf { height: 14px; background-position: -5478px 0px; }
.phone-input__flag.ws { height: 10px; background-position: -5500px 0px; }
.phone-input__flag.xk { height: 15px; background-position: -5522px 0px; }
.phone-input__flag.ye { height: 14px; background-position: -5544px 0px; }
.phone-input__flag.yt { height: 14px; background-position: -5566px 0px; }
.phone-input__flag.za { height: 14px; background-position: -5588px 0px; }
.phone-input__flag.zm { height: 14px; background-position: -5610px 0px; }
.phone-input__flag.zw { height: 10px; background-position: -5632px 0px; }
.phone-input__flag.np { background-color: transparent; }