/* Country code + mobile — shared (cards + modals) */

.wf-phone-group {
  --wf-phone-h: 42px;
  --wf-phone-code-w: 6.75rem;
  --wf-phone-bg: var(--tblr-bg-surface, var(--surface, #fff));
  --wf-phone-bg-2: var(--tblr-bg-surface-secondary, var(--surface-2, #f1f4f2));
  --wf-phone-border: var(--tblr-border-color, var(--border-strong, #d0d5d2));
  --wf-phone-text: var(--tblr-body-color, var(--text, #111));
  --wf-phone-muted: var(--tblr-secondary, var(--text-muted, #6b7280));
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--wf-phone-border);
  border-radius: 8px;
  background: var(--wf-phone-bg);
  overflow: hidden;
  box-shadow: none;
  color: var(--wf-phone-text);
}

.wf-phone-group:focus-within {
  border-color: var(--tblr-primary, var(--primary, #25d366));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tblr-primary, #25d366) 22%, transparent);
}

.wf-phone-group.is-invalid,
.has-error .wf-phone-group,
.was-validated .wf-phone-group:invalid {
  border-color: var(--danger, var(--tblr-danger, #d63939));
}

/* Keep native select out of sight until Select2 replaces it (no load FOUC) */
.wf-phone-group .wf-phone-code {
  width: var(--wf-phone-code-w);
  max-width: 42%;
}
.wf-phone-group:not(.is-ready) .wf-phone-code {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: var(--wf-phone-code-w) !important;
  height: var(--wf-phone-h) !important;
  margin: 0 !important;
  border: 0 !important;
}
.wf-phone-group:not(.is-ready)::before {
  content: '';
  flex: 0 0 var(--wf-phone-code-w);
  width: var(--wf-phone-code-w);
  max-width: 42%;
  height: var(--wf-phone-h);
  border-right: 1px solid var(--wf-phone-border);
  background: color-mix(in srgb, var(--wf-phone-bg-2) 80%, var(--wf-phone-bg));
}

.wf-phone-group > .select2-container {
  flex: 0 0 var(--wf-phone-code-w) !important;
  width: var(--wf-phone-code-w) !important;
  max-width: 42% !important;
}

/* Closed selection: force vertical center */
.wf-phone-group .select2-container .select2-selection--single {
  display: flex !important;
  align-items: center !important;
  height: var(--wf-phone-h) !important;
  min-height: var(--wf-phone-h) !important;
  margin: 0 !important;
  padding: 0 1.4rem 0 0.6rem !important;
  border: 0 !important;
  border-right: 1px solid var(--wf-phone-border) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--wf-phone-bg-2) 70%, var(--wf-phone-bg)) !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--wf-phone-text) !important;
}

.wf-phone-group .select2-container--default.select2-container--focus .select2-selection--single,
.wf-phone-group .select2-container--default.select2-container--open .select2-selection--single,
.wf-phone-group .select2-container--focus .select2-selection--single,
.wf-phone-group .select2-container--open .select2-selection--single {
  border: 0 !important;
  border-right: 1px solid var(--wf-phone-border) !important;
  outline: none !important;
  box-shadow: none !important;
  background: color-mix(in srgb, var(--wf-phone-bg-2) 70%, var(--wf-phone-bg)) !important;
}

.wf-phone-group .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--wf-phone-text) !important;
}

.wf-phone-group .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  right: 2px !important;
  width: 18px !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wf-phone-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
  position: static !important;
  margin: 0 !important;
  border-color: var(--wf-phone-muted) transparent transparent transparent !important;
}

.wf-phone-group .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--wf-phone-muted) transparent !important;
}

.wf-phone-group .wf-phone-number,
.wf-phone-group input.form-control.wf-phone-number {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--wf-phone-h) !important;
  min-height: var(--wf-phone-h) !important;
  margin: 0 !important;
  padding: 0 0.85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--wf-phone-text) !important;
  font-size: 0.95rem;
  line-height: 1.2;
}

.wf-phone-group .wf-phone-number::placeholder {
  color: var(--wf-phone-muted);
  opacity: 0.75;
}

.wf-phone-group .wf-phone-number:focus,
.wf-phone-group input.form-control.wf-phone-number:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Selection / option rows */
.wf-cc-opt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem;
  line-height: 1 !important;
  vertical-align: middle;
}

.wf-cc-opt.is-option {
  width: 100%;
  align-items: center !important;
}

.wf-cc-flag {
  display: block;
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(15, 23, 20, 0.12);
}

.wf-phone-group .wf-cc-flag {
  width: 20px;
  height: 14px;
}

.wf-cc-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}

.wf-cc-dial {
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  line-height: 1.15 !important;
}

.wf-cc-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.2 !important;
  color: var(--tblr-secondary, var(--text-muted, #6b7280));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown panel — fixed sane width (not full modal width) */
.wf-cc-dropdown.select2-dropdown {
  width: 16rem !important;
  min-width: 16rem !important;
  max-width: min(16rem, calc(100vw - 1.5rem)) !important;
  background: var(--tblr-bg-surface, var(--surface, #fff)) !important;
  color: var(--tblr-body-color, var(--text, #111)) !important;
  border: 1px solid var(--tblr-border-color, var(--border-strong, #d0d5d2)) !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 20, 0.16);
  z-index: 2050;
}

.wf-cc-dropdown .select2-search--dropdown {
  padding: 8px;
  background: var(--tblr-bg-surface, var(--surface, #fff)) !important;
}

.wf-cc-dropdown .select2-search--dropdown .select2-search__field {
  width: 100% !important;
  box-sizing: border-box;
  background: var(--tblr-bg-surface-secondary, var(--surface-2, #f1f4f2)) !important;
  color: var(--tblr-body-color, var(--text, #111)) !important;
  border: 1px solid var(--tblr-border-color, var(--border-strong, #d0d5d2)) !important;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.9rem;
  outline: none;
  box-shadow: none;
}

.wf-cc-dropdown .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--tblr-primary, #25d366);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tblr-primary, #25d366) 20%, transparent);
}

.wf-cc-dropdown .select2-results__options {
  max-height: 240px;
  background: var(--tblr-bg-surface, var(--surface, #fff)) !important;
}

.wf-cc-dropdown .select2-results__option,
.select2-container--default .wf-cc-dropdown .select2-results__option {
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  background: transparent !important;
  color: var(--tblr-body-color, var(--text, #111)) !important;
}

.wf-cc-dropdown .select2-results__option[aria-selected='true'],
.select2-container--default .wf-cc-dropdown .select2-results__option[aria-selected='true'] {
  background: var(--tblr-bg-surface-secondary, var(--surface-2, #f1f4f2)) !important;
  color: var(--tblr-body-color, var(--text, #111)) !important;
}

.wf-cc-dropdown .select2-results__option--highlighted,
.wf-cc-dropdown .select2-results__option--highlighted[aria-selected],
.wf-cc-dropdown .select2-results__option--highlighted[aria-selected='true'],
.select2-container--default .wf-cc-dropdown .select2-results__option--highlighted,
.select2-container--default .wf-cc-dropdown .select2-results__option--highlighted[aria-selected],
.select2-container--default .wf-cc-dropdown .select2-results__option--highlighted[aria-selected='true'] {
  background: var(--tblr-primary, var(--primary, #0f7a4a)) !important;
  color: var(--on-primary, #fff) !important;
}

.wf-cc-dropdown .select2-results__option--highlighted .wf-cc-dial,
.wf-cc-dropdown .select2-results__option--highlighted .wf-cc-name,
.wf-cc-dropdown .select2-results__option--highlighted .wf-cc-opt {
  color: inherit !important;
}

.wf-cc-dropdown .select2-results__option[aria-selected='true']:not(.select2-results__option--highlighted) .wf-cc-name {
  color: var(--tblr-secondary, var(--text-muted, #6b7280)) !important;
}

/* Cards / profile: slightly taller */
.wfp-card .wf-phone-group,
.wf-auth .wf-phone-group,
.wf-field .wf-phone-group {
  --wf-phone-h: 48px;
}

/* Modals: compact + no outer shadow clash */
.modal .wf-phone-group {
  --wf-phone-h: 38px;
  box-shadow: none;
}

body.modal-open .wf-cc-dropdown.select2-dropdown {
  z-index: 2100;
}