/* ============================================================
   WinnerSoft — phone-input-overrides.css
   intl-tel-input v23  |  Тема: obsidian + gold (под styles.css)
   ============================================================ */

.iti { width: 100%; display: block; position: relative; }

/* Поле телефона. padding-left задаёт сама библиотека (inline). */
.f-group .iti input[type="tel"],
.pf-group .iti input[type="tel"] {
  padding-top: 14px; padding-bottom: 14px; padding-right: 16px;
  font-size: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  width: 100%;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.iti input[type="tel"]::placeholder { color: var(--muted-2); }
.iti input[type="tel"]:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(212,175,95,0.05);
  box-shadow: 0 0 0 3px rgba(212,175,95,0.12);
}

/* Кнопка выбора страны (v23: .iti__selected-country) */
.iti__selected-country {
  border-radius: 12px 0 0 12px;
  background: rgba(139,108,255,0.1);
  border-right: 1px solid var(--line-soft);
  padding: 0 10px 0 14px;
  transition: background 0.2s ease;
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(139,108,255,0.2); }
.iti__selected-country-primary { display: flex; align-items: center; gap: 6px; height: 100%; }

.iti--separate-dial-code .iti__selected-dial-code {
  color: var(--gold-bright); font-weight: 700; font-size: 13.5px;
  font-family: var(--body); margin-left: 4px;
}

.iti__arrow { border-top-color: var(--muted); margin-left: 4px; transition: transform 0.2s ease; }
.iti__arrow--up { border-top: none; border-bottom-color: var(--gold-bright); }

/* Прячем нативный дропдаун — используем кастомный */
.iti__dropdown-content { display: none !important; visibility: hidden !important; }

/* Валидация */
.pf-group.has-error .iti input[type="tel"],
.f-group.has-error  .iti input[type="tel"] { border-color: rgba(229,118,111,0.6); background: rgba(229,118,111,0.05); }
.pf-group.is-valid  .iti input[type="tel"],
.f-group.is-valid   .iti input[type="tel"] { border-color: rgba(123,224,164,0.45); }

/* ══════════════ КАСТОМНЫЙ ДРОПДАУН ══════════════ */
.wst-phone-dropdown {
  position: fixed; z-index: 19999;
  background: var(--surface-2, #1d1629);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 28px 70px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(212,175,95,0.08);
  overflow: hidden;
  animation: wstDDIn 0.15s ease;
}
@keyframes wstDDIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.wst-phone-search {
  display: block; width: calc(100% - 16px);
  padding: 9px 12px; box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--text); font-size: 14px; outline: none;
  font-family: var(--body); -webkit-appearance: none;
}
.wst-phone-search::placeholder { color: var(--muted-2); }
.wst-phone-search:focus { border-color: var(--gold); background: rgba(212,175,95,0.05); }

.wst-phone-list {
  list-style: none; padding: 0 0 6px; margin: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(212,175,95,0.4) transparent;
}
.wst-phone-list::-webkit-scrollbar { width: 5px; }
.wst-phone-list::-webkit-scrollbar-thumb { background: rgba(212,175,95,0.35); border-radius: 4px; }

.wst-phone-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: var(--text-2);
  font-size: 14px; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-family: var(--body); user-select: none; -webkit-user-select: none;
}
.wst-phone-item:hover { background: rgba(212,175,95,0.14); color: var(--text); }
.wst-phone-item .iti__flag { flex-shrink: 0; }
.wst-phone-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wst-phone-code { color: var(--gold-bright); font-weight: 600; font-size: 13px; flex-shrink: 0; }

.wst-phone-divider { height: 1px; background: var(--line-soft); margin: 4px 0; display: block; }