/* Этап 46c. Выбор страны у телефонного поля.
 *
 * Замена вендорному `intlTelInput.css` (22 719 Б + спрайт флагов 65 960 Б):
 * выпадашку теперь строит `xPhoneMask()` в /js/app.js, а размеры и позиции
 * повторяют прежние 1:1 — они снимались в браузере перед правкой:
 *   обёртка          position:relative, display:inline-block
 *   поле             padding-left:52px, padding-right:6px
 *   кнопка страны    слева, во всю высоту поля, ширина 46px (у вендора
 *                    .allow-dropdown .selected-flag), фон при наведении
 *                    rgba(0,0,0,.05)
 *   список           абсолютный, z-index 2001, белый, рамка #CCC,
 *                    max-height 200px со своей прокруткой
 *
 * 🔴 Правила ширины продублированы здесь НАМЕРЕННО. В style.css лежат
 * `.form-group > .intl-tel-input{width:100%}` и
 * `.mobile-phone__div .intl-tel-input.allow-dropdown{width:100%}` — они
 * написаны по классам снятого плагина и на новую обёртку не действуют, а
 * трогать style.css этап не имеет права (общее правило 46, п.1: CSS и
 * разметку не трогаем). Без них поле подвала и мобильного меню сжалось бы до
 * ширины inline-block по содержимому.
 *
 * Флаги остались вендорные — вырезаны из его же спрайта пиксель-в-пиксель и
 * лежат ниже как `data:` (778 и 1 897 Б вместо 65 960 и 173 609). Подробности
 * и почему они вернулись — в комментарии к `.phone-country__flag`.
 */

.phone-country {
    position: relative;
    display: inline-block;
}

.phone-country * {
    box-sizing: border-box;
}

/* Поле остаётся своим (form-control, mobile-phone__input …) — здесь только
   место под кнопку слева и снятие внешних отступов, как делал вендор. */
.phone-country input,
.phone-country input[type=text],
.phone-country input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0;
    padding-left: 52px;
    padding-right: 6px;
}

.form-group > .phone-country,
.mobile-phone__div .phone-country {
    width: 100%;
}

.phone-country__button {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: 47px;
    margin: 0;
    padding: 0 0 0 8px;
    border: 0;
    background: transparent;
    font: inherit;
    line-height: normal;
    color: #555;
    text-align: left;
    cursor: pointer;
}

.phone-country__button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Стрелка — та же фигура из бордюров, что рисовал вендор (.iti-arrow). */
.phone-country__button:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #555;
}

.phone-country__button[aria-expanded="true"]:after {
    border-top: none;
    border-bottom: 4px solid #555;
}

/* Флаги пяти стран.
 *
 * 🔴 Вырезаны из вендорного спрайта `flags.png` пиксель-в-пиксель, порядок —
 * как в списке (am, by, kz, kg, ru), ячейка 20×15. Вендорный спрайт весил
 * 65 960 Б на 240 стран плюс 173 609 Б ретиновый; наш — 778 и 1 897 Б, и оба
 * лежат прямо здесь как `data:`, то есть не стоят ни одного запроса.
 *
 * Флаги вернулись после замечания пользователя на сдаче 46c: первая редакция
 * заменила их текстом кода страны, и обоснование («флаг и так не рисуется»)
 * оказалось неверным — оно опиралось на скриншот, снятый после программной
 * очистки поля, когда intlTelInput снимал у флага класс страны и оставался
 * серый прямоугольник фона. На живом сайте флаги рисуются, что видно и на
 * проде. Заодно только флаг и различает Россию с Казахстаном: код у них
 * общий (+7).
 *
 * Размеры и тени — вендорные (`.iti-flag`): своя высота у каждого флага,
 * `background-color` виден там, где страна не выбрана (номер чужой страны).
 */
.phone-country__flag {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-repeat: no-repeat;
    background-color: #dbdbdb;
    background-position: 20px 0;
    box-shadow: 0 0 1px 0 #888;
    vertical-align: middle;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAPCAYAAAAS0WrNAAAC0UlEQVR42u2XWUiUURTHr2Zl81C2TGSkIYRSkgsaJeQCRdq0mFCjaEUQKMm8hQoalUoZmiVo4My4oE2TETijs2RikLSNGhmBhJUWaWVoUC70Evy798t6KGdcvsO8NAd+cLgzT/fH+Z/7sX62CpQMXdPjfaUOvfvT4IiIhSMyThZBLVZEWwzwMXWBmbplM7JyKynUxV7xS6TkQ50Bw/pGPE9OhyNcvpAkWzVO382Br8nh4qJ7JGGLpntZQvz+wt1C+ryUoOTtpQrOVfSqjpBMSIK1Fplt57DUiRAvzqZWMzLulEBlq4Kf+b5LKbNd8OfALRiNCsYYR/RuF5IcpAElA0WleJ1fhN59qSRCdtm0yG4r4BPyZMbJWG7uxPn2Uxh5sB7POsOwl0vxXqCQ0cgQjOf6Y6pytYToxZlbhbDoRlAyrK3ne6SGLLJ22/TQcCH/TkgP1rZ0INZah+p7qfjxSIFPXMrJtkJssxixZEaB3U5jSkzDBBcwWabERME6CannZ9KkOImvetsAKYxF8osk5LeQFwfT0RW2E93hcbJwLuQpQlpNPM7O4rC9DPoONYrbs3DIfoX/Px/LTI/nJWQsOhhT5WsweVmJb5kbJEQvzsRvzoQo4m+RwtKOZ4KSwcJS9J8pRnP2MWgz9kB3NFEWriJrMZcU0tqMzZbbSLDpEGOtx3ZrAwJa7E73iEshpUp8PRGA700rJEQvzlwJYTuMtHwx+oCSd3yp95dXILc2CyqDGgdkMttS9+YozA8RZbmBeGsNNvJn8ryX+p/I4lGV9yuqpLjK85fOXEUWi7lJy0QTAyUfaw0YbLiOHIMGiUY1VMZUWczt2SumpWta2sKfvWKBCwGTJVzIReWclrpvTCMpbJxfIiVDVXq8qdYjpyEbSQRC3P1hKKZBRJRgLs/eCxEppLD/rag/DF+GBpDiESKTvtBAUpin5JVHiEeIp9xZPwE67mRUg9T8jgAAAABJRU5ErkJggg==);
}

.phone-country__flag--am { height: 10px; background-position: 0 0; }
.phone-country__flag--by { height: 10px; background-position: -20px 0; }
.phone-country__flag--kz { height: 10px; background-position: -40px 0; }
.phone-country__flag--kg { height: 12px; background-position: -60px 0; }
.phone-country__flag--ru { height: 14px; background-position: -80px 0; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .phone-country__flag {
        background-size: 100px 15px;
        background-image: url(data:image/png;base64,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);
    }
}

/* Колонка флага в строке списка — ширина как у вендора (.flag-box). Отступ
   справа у вендора давал пробел между тегами в его разметке; здесь узлы
   строятся кодом, пробельных текстовых узлов нет, поэтому отступ явный. */
.phone-country__flagbox {
    display: inline-block;
    width: 20px;
    margin-right: 4px;
    vertical-align: middle;
}

.phone-country__list {
    position: absolute;
    z-index: 2001;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    color: #333;
    font-size: 14px;
    line-height: normal;
}

.phone-country__item {
    padding: 5px 10px;
    cursor: pointer;
}

.phone-country__item:hover,
.phone-country__item.phone-country__item--active {
    background-color: rgba(0, 0, 0, 0.05);
}

.phone-country__name {
    vertical-align: middle;
}

.phone-country__dial {
    color: #999;
    margin-left: 6px;
    vertical-align: middle;
}

/* На узком экране вендор разрешал списку переноситься (@media max-width:500px
   у .country-list) — иначе он вылезает за край экрана. */
@media (max-width: 500px) {
    .phone-country__list {
        white-space: normal;
    }
}