/* Storefront v211 - Form3 / Form4 / E-Ticaret genel zorunlu alan doğrulaması */

/* Varsayılan feedback gizli kalır; hata state'inde görünür. */
.cx-modern-order-form .invalid-feedback,
.cx-form4-order-form .invalid-feedback,
.cx-ecom-order-form .invalid-feedback{
  display:none;
}

/* Grup hata state'i: bütün form tiplerinde aynı kırmızı geri bildirim. */
.cx-modern-order-form .form-group.cx-field-error .invalid-feedback,
.cx-form4-order-form .form-group.cx-field-error .invalid-feedback,
.cx-ecom-order-form .form-group.cx-field-error .invalid-feedback,
.cx-modern-order-form .form-group .is-invalid ~ .invalid-feedback,
.cx-form4-order-form .form-group .is-invalid ~ .invalid-feedback,
.cx-ecom-order-form .form-group .is-invalid ~ .invalid-feedback{
  display:block!important;
  width:100%!important;
  margin:7px 0 0!important;
  padding:0!important;
  background:transparent!important;
  color:#dc2626!important;
  font-size:14px!important;
  line-height:1.4!important;
  font-weight:800!important;
  opacity:1!important;
}

/* Başlık / yardımcı metin kırmızı. Inline font color=black olsa bile !important ile ezilir. */
.cx-modern-order-form .form-group.cx-field-error > .inputtitleclass,
.cx-modern-order-form .form-group.cx-field-error > .inputtitleclass strong,
.cx-modern-order-form .form-group.cx-field-error > .inputtitleclass font,
.cx-modern-order-form .form-group.cx-field-error > .cx-field-help,
.cx-form4-order-form .form-group.cx-field-error > .inputtitleclass,
.cx-form4-order-form .form-group.cx-field-error > .inputtitleclass strong,
.cx-form4-order-form .form-group.cx-field-error > .inputtitleclass font,
.cx-form4-order-form .form-group.cx-field-error > .cx-field-help,
.cx-ecom-order-form .form-group.cx-field-error > .inputtitleclass,
.cx-ecom-order-form .form-group.cx-field-error > .inputtitleclass strong,
.cx-ecom-order-form .form-group.cx-field-error > .inputtitleclass font,
.cx-ecom-order-form .form-group.cx-field-error > .cx-field-help{
  color:#dc2626!important;
}

/* Input/select/textarea kırmızı. Random name/id kullanılmaz. */
.cx-modern-order-form .form-group.cx-field-error > input:not([type="hidden"]),
.cx-modern-order-form .form-group.cx-field-error > textarea,
.cx-modern-order-form .form-group.cx-field-error > select,
.cx-form4-order-form .form-group.cx-field-error > input:not([type="hidden"]),
.cx-form4-order-form .form-group.cx-field-error > textarea,
.cx-form4-order-form .form-group.cx-field-error > select,
.cx-ecom-order-form .form-group.cx-field-error > input:not([type="hidden"]),
.cx-ecom-order-form .form-group.cx-field-error > textarea,
.cx-ecom-order-form .form-group.cx-field-error > select,
.cx-modern-order-form .form-group > .is-invalid,
.cx-form4-order-form .form-group > .is-invalid,
.cx-ecom-order-form .form-group > .is-invalid{
  border:2px solid #ef4444!important;
  border-color:#ef4444!important;
  background:#fff1f2!important;
  background-color:#fff1f2!important;
  color:#991b1b!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.16)!important;
  outline:none!important;
}

/* Placeholder da hata state'inde okunur kırmızı tonunda olsun. */
.cx-modern-order-form .form-group.cx-field-error > input::placeholder,
.cx-modern-order-form .form-group.cx-field-error > textarea::placeholder,
.cx-form4-order-form .form-group.cx-field-error > input::placeholder,
.cx-form4-order-form .form-group.cx-field-error > textarea::placeholder,
.cx-ecom-order-form .form-group.cx-field-error > input::placeholder,
.cx-ecom-order-form .form-group.cx-field-error > textarea::placeholder{
  color:#b91c1c!important;
  opacity:.72!important;
}

/* Ödeme native select görünmüyorsa görünür kart grubunun kendisi kırmızı olsun. */
.cx-modern-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards],
.cx-form4-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards],
.cx-ecom-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards]{
  padding:5px!important;
  border:2px solid #ef4444!important;
  border-radius:14px!important;
  background:rgba(239,68,68,.06)!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.12)!important;
}
.cx-modern-order-form .cx-field-payment.cx-field-error .cx-payment-card:not(.is-active):not(.is-selected),
.cx-form4-order-form .cx-field-payment.cx-field-error .cx-payment-card:not(.is-active):not(.is-selected),
.cx-ecom-order-form .cx-field-payment.cx-field-error .cx-payment-card:not(.is-active):not(.is-selected){
  border-color:#ef4444!important;
}

/* Dark mode */
html.dark .cx-modern-order-form .form-group.cx-field-error > input:not([type="hidden"]),
html.dark .cx-modern-order-form .form-group.cx-field-error > textarea,
html.dark .cx-modern-order-form .form-group.cx-field-error > select,
html.dark .cx-form4-order-form .form-group.cx-field-error > input:not([type="hidden"]),
html.dark .cx-form4-order-form .form-group.cx-field-error > textarea,
html.dark .cx-form4-order-form .form-group.cx-field-error > select,
html.dark .cx-ecom-order-form .form-group.cx-field-error > input:not([type="hidden"]),
html.dark .cx-ecom-order-form .form-group.cx-field-error > textarea,
html.dark .cx-ecom-order-form .form-group.cx-field-error > select,
body.dark .cx-modern-order-form .form-group.cx-field-error > input:not([type="hidden"]),
body.dark .cx-modern-order-form .form-group.cx-field-error > textarea,
body.dark .cx-modern-order-form .form-group.cx-field-error > select,
body.dark .cx-form4-order-form .form-group.cx-field-error > input:not([type="hidden"]),
body.dark .cx-form4-order-form .form-group.cx-field-error > textarea,
body.dark .cx-form4-order-form .form-group.cx-field-error > select,
body.dark .cx-ecom-order-form .form-group.cx-field-error > input:not([type="hidden"]),
body.dark .cx-ecom-order-form .form-group.cx-field-error > textarea,
body.dark .cx-ecom-order-form .form-group.cx-field-error > select,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error > input:not([type="hidden"]),
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error > textarea,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error > select,
[data-theme="dark"] .cx-form4-order-form .form-group.cx-field-error > input:not([type="hidden"]),
[data-theme="dark"] .cx-form4-order-form .form-group.cx-field-error > textarea,
[data-theme="dark"] .cx-form4-order-form .form-group.cx-field-error > select,
[data-theme="dark"] .cx-ecom-order-form .form-group.cx-field-error > input:not([type="hidden"]),
[data-theme="dark"] .cx-ecom-order-form .form-group.cx-field-error > textarea,
[data-theme="dark"] .cx-ecom-order-form .form-group.cx-field-error > select{
  border-color:#f87171!important;
  background:#3b1116!important;
  background-color:#3b1116!important;
  color:#fecaca!important;
  box-shadow:0 0 0 4px rgba(248,113,113,.20)!important;
}

html.dark .cx-modern-order-form .form-group.cx-field-error .invalid-feedback,
html.dark .cx-modern-order-form .form-group.cx-field-error .inputtitleclass,
html.dark .cx-modern-order-form .form-group.cx-field-error .inputtitleclass strong,
html.dark .cx-modern-order-form .form-group.cx-field-error .inputtitleclass font,
html.dark .cx-modern-order-form .form-group.cx-field-error .cx-field-help,
html.dark .cx-form4-order-form .form-group.cx-field-error .invalid-feedback,
html.dark .cx-form4-order-form .form-group.cx-field-error .inputtitleclass,
html.dark .cx-form4-order-form .form-group.cx-field-error .inputtitleclass strong,
html.dark .cx-form4-order-form .form-group.cx-field-error .inputtitleclass font,
html.dark .cx-form4-order-form .form-group.cx-field-error .cx-field-help,
html.dark .cx-ecom-order-form .form-group.cx-field-error .invalid-feedback,
html.dark .cx-ecom-order-form .form-group.cx-field-error .inputtitleclass,
html.dark .cx-ecom-order-form .form-group.cx-field-error .inputtitleclass strong,
html.dark .cx-ecom-order-form .form-group.cx-field-error .inputtitleclass font,
html.dark .cx-ecom-order-form .form-group.cx-field-error .cx-field-help,
body.dark .cx-modern-order-form .form-group.cx-field-error .invalid-feedback,
body.dark .cx-modern-order-form .form-group.cx-field-error .inputtitleclass,
body.dark .cx-modern-order-form .form-group.cx-field-error .inputtitleclass strong,
body.dark .cx-modern-order-form .form-group.cx-field-error .inputtitleclass font,
body.dark .cx-modern-order-form .form-group.cx-field-error .cx-field-help,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error .invalid-feedback,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error .inputtitleclass,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error .inputtitleclass strong,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error .inputtitleclass font,
[data-theme="dark"] .cx-modern-order-form .form-group.cx-field-error .cx-field-help{
  color:#f87171!important;
}

html.dark .cx-modern-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards],
html.dark .cx-form4-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards],
html.dark .cx-ecom-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards],
body.dark .cx-modern-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards],
[data-theme="dark"] .cx-modern-order-form .cx-field-payment.cx-field-error [data-cx-payment-cards]{
  border-color:#f87171!important;
  background:rgba(248,113,113,.08)!important;
  box-shadow:0 0 0 4px rgba(248,113,113,.16)!important;
}