/* ═══════════════════════════════════════════════════════════════════
   EditAtEase — unified contact form (contact.html design)
   Used on contact, brands, creators, and agencies pages
   ═══════════════════════════════════════════════════════════════════ */

.contact-form-panel {
  background: #ffffff;
  border: 1px solid #e6e9f0;
  border-radius: var(--radius-lg, var(--r-lg, 20px));
  padding: 2.75rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(13,17,23,.12), 0 4px 16px rgba(93,109,255,.08);
  max-width: 780px;
  margin: 0 auto;
}

.contact-form-panel--embedded {
  max-width: none;
  margin: 0;
}

.contact-form-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary, var(--primary, #5d6dff)), var(--color-accent, var(--accent, #00e5c3)));
}

.contact-form-panel h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0d1117;
  margin-bottom: .3rem;
}

.contact-form-panel > p,
.contact-form-panel > form > p {
  font-size: .875rem;
  color: #5b6478;
  margin-bottom: 2rem;
}

.contact-form-panel .form-group { margin-bottom: 1.2rem; }

.contact-form-panel .form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #0d1117;
  margin-bottom: .45rem;
}

.contact-form-panel .form-label .req {
  color: var(--color-primary, var(--primary, #5d6dff));
  margin-left: 2px;
}

.contact-form-panel .form-control,
.contact-form-panel .form-select {
  width: 100%;
  background: #f5f7fb !important;
  border: 1.5px solid #d9dee8 !important;
  border-radius: var(--radius-sm, var(--r-sm, 6px)) !important;
  color: #1a2233 !important;
  font-size: .875rem !important;
  padding: .7rem .95rem !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  outline: none !important;
  font-family: var(--font-body, 'IBM Plex Sans', system-ui, sans-serif) !important;
}

.contact-form-panel .form-control::placeholder { color: #9aa3b5 !important; }

.contact-form-panel .form-control:focus,
.contact-form-panel .form-select:focus {
  border-color: var(--color-primary, var(--primary, #5d6dff)) !important;
  box-shadow: 0 0 0 3px rgba(93,109,255,.18) !important;
  background: #ffffff !important;
}

.contact-form-panel .form-control.is-invalid,
.contact-form-panel .form-select.is-invalid {
  border-color: var(--color-error, #f87171) !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,.14) !important;
}

.contact-form-panel .invalid-feedback {
  font-size: .74rem;
  color: var(--color-error, #f87171);
  margin-top: .3rem;
  display: none;
}

.contact-form-panel .is-invalid ~ .invalid-feedback { display: block; }

.contact-form-panel .form-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8499' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  padding-right: 2.5rem !important;
}

.contact-form-panel .form-select option { background: #ffffff; color: #1a2233; }

.contact-form-panel textarea.form-control { resize: vertical; min-height: 130px; }

.contact-form-panel .role-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
}

.contact-form-panel .role-card-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .85rem .5rem;
  border: 1.5px solid #d9dee8;
  border-radius: var(--radius-md, var(--r-md, 12px));
  cursor: pointer;
  background: #f5f7fb;
  transition: border-color .2s, background .2s, box-shadow .2s;
  text-align: center;
}

.contact-form-panel .role-card-label:hover {
  border-color: rgba(93,109,255,.55);
  background: rgba(93,109,255,.08);
}

.contact-form-panel .role-card-label input[type="radio"] { display: none; }

.contact-form-panel .role-card-label.selected {
  border-color: var(--color-primary, var(--primary, #5d6dff));
  background: rgba(93,109,255,.14);
  box-shadow: 0 0 0 3px rgba(93,109,255,.18);
}

.contact-form-panel .role-card-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm, var(--r-sm, 6px));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: #eaecf3;
  color: #5b6478;
  transition: background .2s, color .2s;
}

.contact-form-panel .role-card-label.selected .role-card-icon {
  background: rgba(93,109,255,.18);
  color: var(--color-primary, var(--primary, #5d6dff));
}

.contact-form-panel .role-card-text {
  font-size: .77rem;
  font-weight: 600;
  color: #5b6478;
  transition: color .2s;
}

.contact-form-panel .role-card-label:hover .role-card-text { color: #1a2233; }

.contact-form-panel .role-card-label.selected .role-card-text {
  color: var(--color-primary, var(--primary, #5d6dff));
}

.contact-form-panel .phone-group { display: flex; gap: .5rem; }

.contact-form-panel .phone-country { flex-shrink: 0; width: 110px; }

.contact-form-panel .form-submit-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e6e9f0;
}

.contact-form-panel .submit-note {
  font-size: .73rem;
  color: #5b6478;
  line-height: 1.5;
  margin: 0;
}

.contact-form-panel .submit-note i {
  color: var(--color-primary, var(--primary, #5d6dff));
}

.contact-form-panel .form-error {
  flex: 1 1 100%;
  margin: 0;
  font-size: .82rem;
  color: #dc2626;
  line-height: 1.5;
}

.contact-form-panel .form-success {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
}

.contact-form-panel .form-success.show { display: block; }

.contact-form-panel .success-icon {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, var(--color-accent, var(--accent, #00e5c3)), var(--color-primary, var(--primary, #5d6dff)));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.7rem; color: #fff;
  box-shadow: 0 8px 30px rgba(93,109,255,.4);
}

.contact-form-panel .form-success h3 {
  font-size: 1.4rem;
  color: #0d1117;
  margin-bottom: .5rem;
}

.contact-form-panel .form-success p {
  font-size: .875rem;
  color: #5b6478;
}

@media (max-width: 768px) {
  .contact-form-panel { padding: 1.75rem 1.25rem; }
}

@media (max-width: 576px) {
  .contact-form-panel { padding: 1.5rem 1.1rem; }
  .contact-form-panel .role-cards { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .contact-form-panel .phone-group { flex-direction: column; }
  .contact-form-panel .phone-country { width: 100%; }
  .contact-form-panel .form-submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .contact-form-panel .form-submit-row .btn,
  .contact-form-panel .form-submit-row button { width: 100%; }
}