/* ===== Contact form: Corporate floating labels + icons ===== */

/* Подстрой под твою тему */
:root{
  --form-control-bg: rgba(255,255,255,.04);
  --form-control-border: rgba(255,255,255,.10);
  --form-control-border-focus: rgba(99,116,190,.85); /* можно заменить на var(--theme-primary) */
  --form-text: rgba(255,255,255,.86);
  --form-placeholder: rgba(255,255,255,.55);
  --form-label: rgba(255,255,255,.62);
  --form-icon: rgba(255,255,255,.55);
  --form-shadow-focus: 0 0 0 .18rem rgba(99,116,190,.18);
}

/* Общий вид полей */
.gstar-contact-form .form-floating > .form-control,
.gstar-contact-form .form-floating > .form-control-plaintext,
.gstar-contact-form .form-floating > .form-select {
  background: var(--form-control-bg) !important;
  border: 1px solid var(--form-control-border) !important;
  color: var(--form-text) !important;
  border-radius: 12px;
}

.gstar-contact-form .form-floating > .form-control::placeholder {
  color: transparent; /* bootstrap floating labels: placeholder должен быть, но не видим */
}

.gstar-contact-form .form-floating > .form-control:focus {
  border-color: var(--form-control-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
}

/* ===== ФИКС белого фона у label ===== */
.gstar-contact-form .form-floating > label {
  color: var(--form-label) !important;
  font-size: 13px;
  letter-spacing: .2px;
  padding-left: 48px; /* место под иконку */
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

/* Именно это убирает “белую плашку” */
.gstar-contact-form .form-floating > label::after {
  background: transparent !important;
}

/* Когда фокус/заполнено — делаем label чуть “корпоративнее” */
.gstar-contact-form .form-floating > .form-control:focus ~ label,
.gstar-contact-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: rgba(255,255,255,.78) !important;
}

/* ===== ИКОНКИ внутри полей ===== */
.gstar-contact-form .field-with-icon {
  position: relative;
}

.gstar-contact-form .field-with-icon .field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--form-icon);
  pointer-events: none;
  transition: color .18s ease, opacity .18s ease;
  opacity: .9;
}

.gstar-contact-form .field-with-icon .form-control {
  padding-left: 43px !important; /* чтобы текст не налезал на иконку */
}

/* Иконка “подсвечивается” на фокус */
.gstar-contact-form .field-with-icon .form-control:focus + label,
.gstar-contact-form .field-with-icon .form-control:focus ~ .field-icon {
  color: rgba(255,255,255,.82);
}

/* Для textarea — иконку чуть вверх */
.gstar-contact-form .field-with-icon.textarea .field-icon {
  top: 22px;
  transform: none;
}

/* Bootstrap invalid state на тёмном фоне */
.gstar-contact-form .form-control.is-invalid,
.gstar-contact-form .was-validated .form-control:invalid {
  border-color: rgba(220,53,69,.7) !important;
  box-shadow: 0 0 0 .18rem rgba(220,53,69,.12) !important;
}

.gstar-contact-form .invalid-feedback {
  color: rgba(255, 160, 160, .95);
}

label{
    display: flex;
    align-items: center;
}

.label-msg{
    align-items: flex-start;
}

.icon-msg{
    top: 11px!important;
}

/* ===== Contact form: Light theme ===== */
:root:not(.dark-theme) {
  --form-control-bg: #ffffff;
  --form-control-border: #D8DEE6;
  --form-control-border-focus: rgba(99,116,190,.75); /* тот же акцент */
  --form-text: #1F2937;
  --form-placeholder: #6B7280;
  --form-label: #6B7280;
  --form-icon: #9CA3AF;
  --form-shadow-focus: 0 0 0 .18rem rgba(99,116,190,.18);
}

/* Поля */
:root:not(.dark-theme) .gstar-contact-form .form-floating > .form-control,
:root:not(.dark-theme) .gstar-contact-form .form-floating > textarea.form-control {
  background: var(--form-control-bg) !important;
  border: 1px solid var(--form-control-border) !important;
  color: var(--form-text) !important;
}

/* Placeholder (технический, не виден) */
:root:not(.dark-theme) .gstar-contact-form .form-control::placeholder {
  color: transparent;
}

/* Focus */
:root:not(.dark-theme) .gstar-contact-form .form-control:focus {
  border-color: var(--form-control-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
}

/* Label */
:root:not(.dark-theme) .gstar-contact-form .form-floating > label {
  color: var(--form-label) !important;
}

/* Label при фокусе / заполнении */
:root:not(.dark-theme)
.gstar-contact-form
.form-floating
> .form-control:focus ~ label,
:root:not(.dark-theme)
.gstar-contact-form


/* Иконки */
:root:not(.dark-theme) .gstar-contact-form .field-icon {
  color: var(--form-icon);
}

/* Invalid */
:root:not(.dark-theme)
.gstar-contact-form
.was-validated
.form-control:invalid {
  border-color: #DC3545 !important;
  box-shadow: 0 0 0 .18rem rgba(220,53,69,.15) !important;
}

:root:not(.dark-theme) .gstar-contact-form .invalid-feedback {
  color: #DC3545;
}

/* =========================
   THEME TOKENS FOR FORM
   ========================= */

/* LIGHT (когда НЕТ .dark-theme на body) */
body:not(.dark-theme) {
  --form-control-bg: #ffffff;
  --form-control-border: #D8DEE6;
  --form-control-border-focus: rgba(99,116,190,.75);
  --form-text: #1F2937;
  --form-label: #6B7280;
  --form-icon: #9CA3AF;
  --form-shadow-focus: 0 0 0 .18rem rgba(99,116,190,.18);
}

/* DARK (когда ЕСТЬ .dark-theme на body) */
body.dark-theme {
  --form-control-bg: rgba(255,255,255,.04);
  --form-control-border: rgba(255,255,255,.10);
  --form-control-border-focus: rgba(99,116,190,.85);
  --form-text: rgba(255,255,255,.86);
  --form-label: rgba(255,255,255,.62);
  --form-icon: rgba(255,255,255,.55);
  --form-shadow-focus: 0 0 0 .18rem rgba(99,116,190,.18);
}