/* Country phone picker (assets/js/itr-sca-phone.js) — portal registration
   and courses checkout. The wrapper takes over the look of the plain input
   it replaces; the inner number box is borderless. */
.itr-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--itr-border, #d9d9d9);
  border-radius: var(--itr-radius, 8px);
  overflow: visible;
}

.itr-phone-wrap:focus-within {
  border-color: var(--itr-teal, #1a8c8c);
}

/* Courses checkout: the fields there are borderless, rounded, with a soft
   shadow — the phone box matches them. */
#billing_phone_field .itr-phone-wrap {
  border: none;
  border-radius: 14px;
  box-shadow:
    0 1.06px 2.13px -1.06px rgba(0, 0, 0, 0.10),
    0 1.06px 3.19px 0 rgba(0, 0, 0, 0.10);
}

#billing_phone_field .itr-phone-wrap .itr-phone-trigger,
#billing_phone_field .itr-phone-wrap input.itr-phone-input {
  height: 41px;
}

.itr-phone-wrap .itr-phone-trigger,
.itr-phone-wrap .itr-phone-trigger:hover,
.itr-phone-wrap .itr-phone-trigger:focus,
.itr-phone-wrap .itr-phone-trigger:active {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 38px;
  margin: 0;
  padding: 0 10px;
  background: transparent !important;
  border: none;
  border-right: 1px solid var(--itr-border, #d9d9d9);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #4d4d4d !important;
  outline: none;
}

.itr-phone-flag {
  display: inline-flex;
  align-items: center;
}

.itr-phone-dial {
  white-space: nowrap;
}

.itr-phone-caret {
  font-size: 10px;
  color: #999;
}

.itr-phone-wrap input.itr-phone-input,
.itr-field .itr-phone-wrap input.itr-phone-input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 38px;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
  padding: 0 12px;
}

.itr-phone-wrap input.itr-phone-input:focus {
  outline: none;
}

.itr-phone-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  width: 260px;
  max-height: 280px;
  margin-top: 6px;
  padding: 6px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.itr-phone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.itr-phone-item:hover {
  background: #f2f2f2;
}

.itr-phone-item .itr-phone-flag {
  justify-content: center;
  width: 22px;
  flex-shrink: 0;
}

.itr-phone-name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.itr-phone-code {
  flex-shrink: 0;
  font-weight: 600;
  color: #888;
}

@media (max-width: 480px) {
  .itr-phone-wrap .itr-phone-trigger {
    padding: 0 8px;
    font-size: 13px;
  }
  .itr-phone-dropdown {
    width: calc(100vw - 60px);
    max-width: 300px;
  }
}