/* ==========================================================================
   Styles for public form popups (Bootstrap modals) used on the showcase sites.
   ========================================================================== */

/* Dark modal shell */
.kc-bs-content {
  background: linear-gradient(180deg, #15151b, #101015) !important;
  border: 1px solid #26262e !important;
  border-radius: 20px !important;
  color: #e7e7ea;
}
.kc-bs-content .modal-header {
  border-bottom: 1px solid #26262e;
  padding: 20px 24px;
}
.kc-bs-content .modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.kc-bs-content .modal-body {
  padding: 24px;
}

/* Form fields */
.kc-pf-form { display: flex; flex-direction: column; gap: 16px; }
.kc-pf-field { text-align: right; }
.kc-pf-label { display: block; font-size: 14px; color: #c4c4cc; margin-bottom: 6px; }
.kc-pf-req { color: #f87171; }
.kc-pf-input {
  width: 100%; background: #0f0f13; border: 1px solid #2e2e38; color: #fff; border-radius: 12px;
  padding: 12px 14px; outline: none; font-family: inherit; font-size: 15px;
}
.kc-pf-input:focus { border-color: #c9a227; }
.kc-pf-file { padding: 10px 14px; }
.kc-pf-choices { display: flex; flex-wrap: wrap; gap: 14px; }
.kc-pf-choice { display: flex; align-items: center; gap: 7px; color: #d4d4db; font-size: 14px; cursor: pointer; }
.kc-pf-btn {
  background: #c9a227; color: #1a1a1a; border: 0; border-radius: 12px; padding: 14px;
  font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; transition: .2s; width: 100%;
}
.kc-pf-btn:hover { background: #d8b02f; }
.kc-pf-error { color: #f87171; font-size: 13px; margin-top: 6px; }
.kc-pf-hint { font-size: 12px; color: #9a9aa3; margin-top: 4px; }

/* Flash toast shown after a successful submit */
.kc-flash {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 11000; padding: 14px 22px; border-radius: 12px; font-size: 15px; font-weight: 600;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.kc-flash-ok { background: #16a34a; color: #fff; }
