/* MsPhoneInput / MsSelect (layers/microsite). Linked from each microsite layout, after
   the site stylesheet, which sets the --ms-* variables so the controls match its inputs. */
.ms-control {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; min-height: var(--ms-min-h, 46px);
  font: inherit; font-size: var(--ms-font-size, 1rem); color: var(--ink); text-align: start;
  background: #fff; border: var(--ms-border-w, 1px) solid var(--ms-border, #CBD5E1); border-radius: var(--ms-radius, 8px);
  transition: border-color .18s, box-shadow .18s;
}
.ms-control:focus-within, .ms-control:focus-visible, .ms-control[data-state="open"] { outline: none; border-color: var(--ms-focus, #0F1E3C); box-shadow: var(--ms-ring, 0 0 0 3px rgba(15,30,60,.12)); }
.ms-control.is-invalid { border-color: var(--danger, #C0392B); }

.ms-select { padding: var(--ms-pad, .68rem .8rem); cursor: pointer; justify-content: space-between; }
.ms-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-select[data-placeholder] .ms-select__value { color: var(--ms-muted, #6E7890); }
.ms-chevron { width: 1rem; height: 1rem; flex: none; color: var(--ms-muted, #6E7890); transition: transform .18s; }
.ms-control[data-state="open"] .ms-chevron, .ms-phone__country[data-state="open"] .ms-chevron { transform: rotate(180deg); }

.ms-phone { gap: 0; padding: 0; padding-inline-end: .5rem; }
.ms-phone__country {
  display: flex; align-items: center; gap: .3rem; flex: none; align-self: stretch; padding-inline: .6rem .2rem;
  font: inherit; font-size: .92em; color: var(--ink); background: none; border: 0;
  border-radius: var(--ms-radius, 8px) 0 0 var(--ms-radius, 8px); cursor: pointer;
}
[dir="rtl"] .ms-phone__country { border-radius: 0 var(--ms-radius, 8px) var(--ms-radius, 8px) 0; }
.ms-phone__country:focus-visible { outline: none; }
.ms-phone__country:hover .ms-chevron, .ms-phone__country:focus-visible .ms-chevron { color: var(--ink); }
/* beats the sites' `.field input` / `.field.is-invalid input` rules */
.ms-phone.ms-control input.ms-phone__input {
  flex: 1; width: auto; min-width: 0; margin: 0; padding: var(--ms-pad, .68rem .8rem); padding-inline: .3rem; text-align: start;
  font: inherit; color: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
}
.ms-flag { display: block; width: 20px; height: 15px; flex: none; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

.ms-popover {
  z-index: 60; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--ms-line, #E4E7EE);
  border-radius: var(--ms-radius, 8px); box-shadow: 0 12px 32px rgba(9,20,48,.16); font-size: var(--ms-font-size, 1rem);
}
.ms-popover--countries { width: 19rem; max-width: calc(100vw - 2rem); }
.ms-popover--select { width: var(--reka-select-trigger-width); max-height: var(--reka-select-content-available-height); }
.ms-search { display: flex; align-items: center; gap: .5rem; padding-inline: .75rem; border-bottom: 1px solid var(--ms-line, #E4E7EE); }
.ms-search svg { width: 1rem; height: 1rem; flex: none; color: var(--ms-muted, #6E7890); }
.ms-search input { width: 100%; padding: .65rem 0; font: inherit; font-size: .92em; color: var(--ink); background: transparent; border: 0; outline: none; box-shadow: none; }
.ms-search input:focus, .ms-search input:focus-visible { outline: none; box-shadow: none; }
.ms-list { max-height: 16rem; overflow-y: auto; padding: .25rem; }
.ms-popover--select .ms-list { max-height: none; }
.ms-option { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: calc(var(--ms-radius, 8px) - 2px); cursor: pointer; user-select: none; outline: none; }
.ms-option[data-highlighted] { background: var(--ms-hover, #F7F8FA); }
.ms-option[data-state="checked"] { font-weight: 600; }
.ms-option__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-option__meta { margin-inline-start: auto; flex: none; color: var(--ms-muted, #6E7890); }
.ms-check { display: block; width: 1rem; height: 1rem; color: var(--ms-focus, #0F1E3C); }
.ms-empty { margin: 0; padding: 1rem .75rem; text-align: center; color: var(--ms-muted, #6E7890); font-size: .92em; }