/* Public contact form — portal-style channel picker (Telegram / Session / Teams / Phone) */
.portal-contact-picker {
  width: 100%;
}
.portal-contact-picker .text-danger {
  color: #dc3545;
}
.portal-contact-picker .mb-2 {
  margin-bottom: 0.4rem;
}
.portal-contact-picker .mb-0 {
  margin-bottom: 0;
}
.portal-contact-picker .portal-form-hint {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.72;
  margin: 0.4rem 0 0;
}
.portal-contact-picker > span,
.portal-contact-picker > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.portal-contact-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  width: 100%;
}
.portal-contact-option {
  position: relative;
  display: block;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.portal-contact-picker input[type="radio"][name="contact_channel"],
body.wgl-style-input .portal-contact-picker input[type="radio"][name="contact_channel"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  display: block !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
.portal-contact-picker input[type="radio"][name="contact_channel"]::before,
.portal-contact-picker input[type="radio"][name="contact_channel"]::after,
body.wgl-style-input .portal-contact-picker input[type="radio"][name="contact_channel"]::before,
body.wgl-style-input .portal-contact-picker input[type="radio"][name="contact_channel"]::after {
  content: none !important;
  display: none !important;
}
.portal-contact-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  text-align: center;
  padding: 0 18px;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  pointer-events: none;
}
.portal-contact-option.is-active span {
  border-color: var(--main-color, #8980f1);
  background: color-mix(in srgb, var(--main-color, #8980f1) 14%, transparent);
  color: var(--main-color, #8980f1);
}
.portal-contact-option input:focus-visible + span {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color, #8980f1) 25%, transparent);
}
.portal-contact-field,
.portal-contact-picker .portal-contact-field,
.portal-contact-picker .portal-contact-field[hidden],
.portal-contact-picker .portal-contact-field:not(.is-active) {
  display: none !important;
  margin-top: 0.25rem;
}
.portal-contact-picker .portal-contact-field.is-active {
  display: block !important;
}
.portal-contact-picker .portal-form-control {
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 16px;
  font-family: inherit;
}
.portal-contact-picker .portal-form-control:focus {
  outline: none;
  border-color: var(--main-color, #8980f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color, #8980f1) 18%, transparent);
}
.portal-phone {
  position: relative;
  width: 100%;
}
.portal-phone-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.portal-phone-dial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  height: 54px;
  min-width: 92px;
  padding: 0 14px;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
.portal-phone-dial:hover:not(:disabled) {
  border-color: var(--main-color, #8980f1);
}
.portal-phone-dial:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.portal-phone-flag {
  font-size: 1.05rem;
  line-height: 1;
}
.portal-phone-code {
  font-variant-numeric: tabular-nums;
}
.portal-phone-national {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  height: 54px;
  box-sizing: border-box;
}
.portal-phone-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  max-height: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.portal-phone-menu[hidden] {
  display: none !important;
}
.portal-phone-search {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  padding: 0.55rem 0.7rem;
  background: #fff;
  color: #111;
  font-size: 0.8125rem;
}
.portal-phone-search:focus {
  outline: none;
}
.portal-phone-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  max-height: 210px;
}
.portal-phone-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  font-size: 0.8125rem;
}
.portal-phone-item:hover,
.portal-phone-item.is-selected {
  background: rgba(137, 128, 241, 0.12);
}
.portal-phone-item-name {
  flex: 1 1 auto;
  min-width: 0;
}
.portal-phone-item-dial {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}