/* ────────────────────────────────────────────────────────
   intl-tel-input + Choices.js — Festivall 테마 오버라이드
   (vendor CSS 뒤에 로드되어 우선 적용)
   ──────────────────────────────────────────────────────── */

/* ===========================
   Choices.js — 국가 select
   =========================== */

/* 기본 컨테이너 — 다른 input과 동일한 스타일 */
.choices {
  margin-bottom: 0;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.4);
}
.choices__inner {
  min-height: 44px;
  padding: 6px 10px;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  font-size: 14px;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .choices__inner { min-height: 40px; }
}

/* 선택된 항목 텍스트 */
.choices__list--single {
  padding: 0;
}
.choices__list--single .choices__item {
  color: hsl(var(--foreground));
  font-size: 14px;
}

/* placeholder */
.choices__placeholder {
  opacity: 0.6;
  color: hsl(var(--muted-foreground));
}

/* 드롭다운 본체 */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--card-foreground));
  border-radius: 0.5rem;
  margin-top: 4px;
  z-index: 50;
}

/* 드롭다운 항목 */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  color: hsl(var(--card-foreground));
  padding: 8px 12px;
  font-size: 14px;
}
/* 강조(키보드/마우스 hover) + 이전에 선택됐던 항목 — 다크모드에서도 가독성 확보 */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* 드롭다운 안 검색 input — 항상 보이고, 입력해도 폭 변하지 않도록 */
.choices[data-type*="select-one"] .choices__input,
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input,
.choices__input--cloned {
  display: block !important;
  width: calc(100% - 16px) !important;
  min-width: calc(100% - 16px) !important;
  max-width: calc(100% - 16px) !important;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  margin: 8px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.choices[data-type*="select-one"] .choices__input::placeholder,
.choices__input::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.7;
}
.choices__input:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
}

/* 화살표 아이콘 색 */
.choices[data-type*="select-one"]:after {
  border-color: hsl(var(--muted-foreground)) transparent transparent;
}
.choices[data-type*="select-one"].is-open:after {
  border-color: transparent transparent hsl(var(--muted-foreground));
}

/* ===========================
   intl-tel-input — 전화번호
   =========================== */

/* 본 입력 — 앱의 다른 input과 동일한 스타일 */
.iti--separate-dial-code .iti__country-container {
  background-color: hsl(var(--background));
  border-right: 1px solid hsl(var(--border));
}
.iti__selected-country {
  background-color: transparent;
  color: hsl(var(--foreground));
}
.iti__selected-country:hover,
.iti__selected-country:focus {
  background-color: hsl(var(--muted) / 0.5);
}

/* 드롭다운 컨테이너 (국가 목록) */
.iti__dropdown-content {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.iti__country-list {
  background-color: transparent;
  color: hsl(var(--card-foreground));
  border: none;
}

.iti__country {
  color: hsl(var(--card-foreground));
  padding: 8px 12px;
}

.iti__country.iti__highlight,
.iti__country:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.iti__divider {
  border-bottom-color: hsl(var(--border));
}

.iti__dial-code {
  color: hsl(var(--muted-foreground));
}

/* 드롭다운 검색 input
   주의: padding-left/right 는 라이브러리 기본값이 search/clear 아이콘 자리에 맞춰 calc() 로 잡혀 있음.
   덮어쓰면 아이콘과 글자가 겹치므로 좌우 padding 은 변경하지 않는다. */
.iti__search-input {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  margin: 6px 8px;
  font-size: 14px;
}
.iti__search-input::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
}
.iti__search-icon-svg { stroke: hsl(var(--muted-foreground)); }

/* 본 input과 ITI 컨테이너가 form 안에서 가지런하도록 */
.iti {
  width: 100%;
  display: block;
}

/* 본 tel input */
.iti-input,
.iti input[type="tel"] {
  height: 44px;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 14px;
}
@media (min-width: 768px) {
  .iti-input,
  .iti input[type="tel"] { height: 40px; }
}
.iti-input:focus,
.iti input[type="tel"]:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.4);
}