/* =======================================================================
   AWTel v1.0 — Stylesheet
   ======================================================================= */

.awtel {
  --awtel-accent:       #4f7ef8;
  --awtel-border:       #d7dbe4;
  --awtel-radius:       8px;
  --awtel-text:         #1c1e2a;
  /* #8891a4 ne donnait que 3,17:1 sur blanc : sous le seuil AA de 4,5:1 pour
     l'indicatif (« +33 »), la loupe et le texte de substitution de la
     recherche. #6b7280 monte à 4,85:1 sans changer la teinte. */
  --awtel-text-muted:   #6b7280;
  --awtel-bg:           #ffffff;
  --awtel-bg-hover:     #f5f7fc;
  --awtel-shadow:       0 8px 24px rgba(20,24,40,.12);
  --awtel-success:      #1ea672;
  --awtel-error:        #e23d3d;
  --awtel-font:         system-ui, -apple-system, "Segoe UI", sans-serif;

  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
  font-family: var(--awtel-font);
  font-size: 14px;
  color: var(--awtel-text);
}

.awtel *, .awtel *::before, .awtel *::after { box-sizing: border-box; }

/* --- Flag button --------------------------------------------------------- */
.awtel-flag-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--awtel-border);
  border-right: none;
  border-radius: var(--awtel-radius) 0 0 var(--awtel-radius);
  background: var(--awtel-bg);
  cursor: pointer;
  font-size: 14px;
  color: var(--awtel-text);
  white-space: nowrap;
  transition: background .15s ease;
}
.awtel-flag-btn:hover { background: var(--awtel-bg-hover); }
.awtel-flag-btn-open  { background: var(--awtel-bg-hover); }

.awtel-flag-btn .awtel-flag { font-size: 18px; line-height: 1; }
.awtel-flag-btn .awtel-dial { color: var(--awtel-text-muted); }
.awtel-caret {
  font-size: 10px;
  color: var(--awtel-text-muted);
  transition: transform .15s ease;
}
.awtel-flag-btn-open .awtel-caret { transform: rotate(180deg); }

/* --- Input --------------------------------------------------------------- */
.awtel-original-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--awtel-border);
  border-left: none;
  border-radius: 0 var(--awtel-radius) var(--awtel-radius) 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--awtel-text);
  background: var(--awtel-bg);
  outline: none;
}
.awtel-original-input:focus {
  border-color: var(--awtel-accent);
  box-shadow: 0 0 0 3px rgba(79,126,248,.15);
}

.awtel-valid .awtel-original-input   { border-color: var(--awtel-success); }
.awtel-invalid .awtel-original-input { border-color: var(--awtel-error); }
.awtel-valid .awtel-flag-btn   { border-color: var(--awtel-success); }
.awtel-invalid .awtel-flag-btn { border-color: var(--awtel-error); }

/* --- Dropdown ------------------------------------------------------------ */
.awtel-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  width: 290px;
  max-width: 90vw;
  background: var(--awtel-bg);
  border: 1px solid var(--awtel-border);
  border-radius: var(--awtel-radius);
  box-shadow: var(--awtel-shadow);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.awtel-dropdown-open { display: flex; }

.awtel-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--awtel-border);
}
.awtel-search-icon { font-size: 13px; color: var(--awtel-text-muted); }
.awtel-search {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--awtel-text);
  background: transparent;
}
.awtel-search::placeholder { color: var(--awtel-text-muted); }

/* --- List ---------------------------------------------------------------- */
.awtel-list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
}

.awtel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.awtel-item:hover,
.awtel-item-active { background: var(--awtel-bg-hover); }

.awtel-item .awtel-flag { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.awtel-item-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.awtel-item-dial { color: var(--awtel-text-muted); flex: 0 0 auto; }

.awtel-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--awtel-border);
}

.awtel-no-results {
  padding: 12px;
  text-align: center;
  color: var(--awtel-text-muted);
}

/* --- Scrollbar ----------------------------------------------------------- */
.awtel-list::-webkit-scrollbar { width: 8px; }
.awtel-list::-webkit-scrollbar-thumb {
  background: var(--awtel-border);
  border-radius: 4px;
}
.awtel-list::-webkit-scrollbar-track { background: transparent; }