/* ============================================================
   Contact Form Pro — Public Styles
   Supports three modes via wrapper class:
     (no class)         = Inherit — minimal styling, inherits theme colors
     .cfp-theme-light   = Light — standalone light palette
     .cfp-theme-dark    = Dark  — standalone dark palette
   ============================================================ */

/* ============================================================
   BASE LAYER — Structure, layout, animation (always applies)
   ============================================================ */

.cfp-form-wrap {
  font-size: 15px;
  max-width: 760px;
  width: 100%;
  line-height: 1.5;
}

/* Messages */
.cfp-messages { margin-bottom: 16px; min-height: 0; transition: all .3s; }
.cfp-msg { padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: cfpFadeIn .3s ease; }
.cfp-msg-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.cfp-msg-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
@keyframes cfpFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* Form layout */
.cfp-form { width: 100%; }
.cfp-fields { display: flex; flex-wrap: wrap; gap: 18px 20px; }

.cfp-col-full  { width: 100%; }
.cfp-col-half  { width: calc(50% - 10px); }
.cfp-col-third { width: calc(33.333% - 14px); }
@media (max-width: 600px) { .cfp-col-half, .cfp-col-third { width: 100%; } }

/* Labels */
.cfp-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; letter-spacing: .01em; }
.cfp-required { color: #ef4444; margin-left: 3px; }
.cfp-field-desc { font-size: 12px; margin: 0 0 6px; opacity: .7; }

/* Inputs — structural */
.cfp-input {
  display: block; width: 100%; padding: 11px 14px;
  border: 1.5px solid currentColor; border-radius: 10px;
  font-size: 14px; font-family: inherit; transition: border-color .18s, box-shadow .18s;
  appearance: none; -webkit-appearance: none;
  background: transparent; color: inherit;
  border-color: rgba(128,128,128,.35);
}
.cfp-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.cfp-input::placeholder { opacity: .5; }
.cfp-input.cfp-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }

.cfp-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.cfp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; cursor: pointer;
}
select[multiple].cfp-select { background-image: none; padding-right: 14px; height: 120px; }

/* Radio & Checkbox */
.cfp-radio-group, .cfp-checkbox-group { display: flex; flex-direction: column; gap: 10px; }
.cfp-radio-label, .cfp-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; line-height: 1.4; }
.cfp-radio-label input[type="radio"],
.cfp-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0; }

/* Toggle */
.cfp-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.cfp-toggle input[type="checkbox"] { display: none; }
.cfp-toggle-slider { width: 44px; height: 24px; background: rgba(128,128,128,.35); border-radius: 12px; position: relative; transition: background .2s; flex-shrink: 0; }
.cfp-toggle-slider::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cfp-toggle input:checked + .cfp-toggle-slider { background: #6366f1; }
.cfp-toggle input:checked + .cfp-toggle-slider::after { transform: translateX(20px); }
.cfp-toggle-text { font-size: 14px; }

/* Rating */
.cfp-rating { display: flex; align-items: center; gap: 6px; }
.cfp-star { font-size: 28px; color: rgba(128,128,128,.35); cursor: pointer; transition: color .15s, transform .12s; user-select: none; line-height: 1; }
.cfp-star:hover, .cfp-star.active { color: #f59e0b; }
.cfp-star:hover { transform: scale(1.15); }

/* Slider */
.cfp-slider-wrap { display: flex; align-items: center; gap: 14px; }
.cfp-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: rgba(128,128,128,.25); border-radius: 3px; border: none; padding: 0; cursor: pointer; }
.cfp-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #6366f1; border-radius: 50%; box-shadow: 0 1px 4px rgba(99,102,241,.4); cursor: pointer; transition: transform .15s; }
.cfp-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.cfp-slider-value { min-width: 40px; text-align: center; font-weight: 600; font-size: 14px; color: #6366f1; background: rgba(99,102,241,.1); padding: 4px 8px; border-radius: 6px; }

/* File Upload */
.cfp-file-drop-zone { border: 2px dashed rgba(128,128,128,.35); border-radius: 12px; padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.cfp-file-drop-zone:hover, .cfp-file-drop-zone.drag-over { border-color: #6366f1; }
.cfp-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.cfp-file-label { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.cfp-file-icon { font-size: 32px; }
.cfp-file-label span:last-child { font-size: 14px; font-weight: 500; opacity: .7; }
.cfp-file-preview { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cfp-file-preview-item { border: 1px solid rgba(128,128,128,.25); border-radius: 8px; padding: 8px 14px; font-size: 12px; display: flex; align-items: center; gap: 6px; max-width: 200px; overflow: hidden; }
.cfp-file-remove { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0 0 0 4px; opacity: .5; }
.cfp-file-remove:hover { opacity: 1; color: #ef4444; }

/* Signature */
.cfp-signature-wrap { border: 1.5px solid rgba(128,128,128,.35); border-radius: 10px; overflow: hidden; }
.cfp-signature-canvas { display: block; width: 100%; height: 140px; cursor: crosshair; touch-action: none; }
.cfp-sig-clear { display: block; width: 100%; padding: 8px; background: transparent; border: none; border-top: 1px solid rgba(128,128,128,.2); font-size: 12px; cursor: pointer; font-family: inherit; opacity: .7; }
.cfp-sig-clear:hover { opacity: 1; color: #ef4444; }

/* Acceptance */
.cfp-acceptance-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; line-height: 1.5; }
.cfp-acceptance-label input { width: 18px; height: 18px; margin-top: 2px; accent-color: #6366f1; flex-shrink: 0; }
.cfp-acceptance-label a { color: #6366f1; }

/* Section & Layout */
.cfp-section-heading { width: 100%; padding-bottom: 4px; border-bottom: 2px solid rgba(128,128,128,.2); margin-bottom: 4px; }
.cfp-section-heading h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.cfp-section-heading p  { font-size: 13px; margin: 0; opacity: .7; }
.cfp-divider { border: none; border-top: 1px solid rgba(128,128,128,.2); margin: 4px 0; width: 100%; }
.cfp-html-block { width: 100%; font-size: 14px; }

/* Submit Button */
.cfp-submit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 36px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: all .2s; letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(99,102,241,.4); position: relative; overflow: hidden;
}
.cfp-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(99,102,241,.5); }
.cfp-submit-btn:active { transform: translateY(0); }
.cfp-submit-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.cfp-submit-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.12), transparent); }
.cfp-btn-spinner { display: none; width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: cfpSpin .7s linear infinite; }
.cfp-form.submitting .cfp-btn-spinner { display: block; }
.cfp-form.submitting .cfp-btn-text    { opacity: .7; }
@keyframes cfpSpin { to { transform: rotate(360deg); } }

/* Field Error */
.cfp-field-error { font-size: 12px; color: #ef4444; margin-top: 5px; min-height: 0; font-weight: 500; }

/* Range value */
.cfp-range-value { font-size: 12px; font-weight: 600; color: #6366f1; margin-left: 8px; }

/* Color input */
input[type="color"].cfp-input { padding: 4px 6px; height: 44px; cursor: pointer; }

/* Honeypot */
.cfp-hp-field { display: none !important; }


/* ============================================================
   THEME: LIGHT
   ============================================================ */

.cfp-theme-light {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  color: #1a202c;
  background: #ffffff;
  padding: 32px;
  border-radius: 16px;
}
.cfp-theme-light .cfp-label { color: #374151; }
.cfp-theme-light .cfp-field-desc { color: #6b7280; }
.cfp-theme-light .cfp-input {
  background: #fff; border-color: #d1d5db; color: #111827;
}
.cfp-theme-light .cfp-input::placeholder { color: #9ca3af; }
.cfp-theme-light .cfp-radio-label,
.cfp-theme-light .cfp-checkbox-label { color: #374151; }
.cfp-theme-light .cfp-toggle-slider { background: #d1d5db; }
.cfp-theme-light .cfp-toggle-text { color: #374151; }
.cfp-theme-light .cfp-star { color: #d1d5db; }
.cfp-theme-light .cfp-slider { background: #e5e7eb; }
.cfp-theme-light .cfp-file-drop-zone { border-color: #d1d5db; background: #fafafa; }
.cfp-theme-light .cfp-file-drop-zone:hover,
.cfp-theme-light .cfp-file-drop-zone.drag-over { border-color: #6366f1; background: #eef2ff; }
.cfp-theme-light .cfp-file-label span:last-child { color: #6b7280; }
.cfp-theme-light .cfp-file-preview-item { background: #fff; border-color: #e5e7eb; color: #374151; }
.cfp-theme-light .cfp-file-remove { color: #9ca3af; }
.cfp-theme-light .cfp-signature-wrap { border-color: #d1d5db; background: #fff; }
.cfp-theme-light .cfp-sig-clear { background: #f9fafb; border-top-color: #e5e7eb; color: #6b7280; }
.cfp-theme-light .cfp-sig-clear:hover { background: #fee2e2; color: #ef4444; }
.cfp-theme-light .cfp-acceptance-label { color: #374151; }
.cfp-theme-light .cfp-section-heading { border-bottom-color: #e5e7eb; }
.cfp-theme-light .cfp-section-heading h3 { color: #111827; }
.cfp-theme-light .cfp-section-heading p  { color: #6b7280; }
.cfp-theme-light .cfp-divider { border-top-color: #e5e7eb; }
.cfp-theme-light .cfp-html-block { color: #374151; }


/* ============================================================
   THEME: DARK
   ============================================================ */

.cfp-theme-dark {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  color: #e2e8f0;
  background: #1e293b;
  padding: 32px;
  border-radius: 16px;
}
.cfp-theme-dark .cfp-label { color: #cbd5e1; }
.cfp-theme-dark .cfp-field-desc { color: #94a3b8; }
.cfp-theme-dark .cfp-input {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #f1f5f9;
}
.cfp-theme-dark .cfp-input::placeholder { color: #64748b; }
.cfp-theme-dark .cfp-input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.2); }
.cfp-theme-dark .cfp-msg-success { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
.cfp-theme-dark .cfp-msg-error   { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.3); }
.cfp-theme-dark .cfp-radio-label,
.cfp-theme-dark .cfp-checkbox-label { color: #cbd5e1; }
.cfp-theme-dark .cfp-radio-label input[type="radio"],
.cfp-theme-dark .cfp-checkbox-label input[type="checkbox"] { accent-color: #818cf8; }
.cfp-theme-dark .cfp-toggle-slider { background: rgba(255,255,255,.2); }
.cfp-theme-dark .cfp-toggle input:checked + .cfp-toggle-slider { background: #818cf8; }
.cfp-theme-dark .cfp-toggle-text { color: #cbd5e1; }
.cfp-theme-dark .cfp-star { color: rgba(255,255,255,.2); }
.cfp-theme-dark .cfp-slider { background: rgba(255,255,255,.12); }
.cfp-theme-dark .cfp-slider::-webkit-slider-thumb { background: #818cf8; }
.cfp-theme-dark .cfp-slider-value { color: #a5b4fc; background: rgba(129,140,248,.15); }
.cfp-theme-dark .cfp-file-drop-zone { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.03); }
.cfp-theme-dark .cfp-file-drop-zone:hover,
.cfp-theme-dark .cfp-file-drop-zone.drag-over { border-color: #818cf8; background: rgba(129,140,248,.08); }
.cfp-theme-dark .cfp-file-label span:last-child { color: #94a3b8; }
.cfp-theme-dark .cfp-file-preview-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #e2e8f0; }
.cfp-theme-dark .cfp-file-remove { color: #94a3b8; }
.cfp-theme-dark .cfp-signature-wrap { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.cfp-theme-dark .cfp-signature-canvas { background: rgba(0,0,0,.2); }
.cfp-theme-dark .cfp-sig-clear { border-top-color: rgba(255,255,255,.1); color: #94a3b8; }
.cfp-theme-dark .cfp-sig-clear:hover { color: #fca5a5; }
.cfp-theme-dark .cfp-acceptance-label { color: #cbd5e1; }
.cfp-theme-dark .cfp-acceptance-label input { accent-color: #818cf8; }
.cfp-theme-dark .cfp-section-heading { border-bottom-color: rgba(255,255,255,.12); }
.cfp-theme-dark .cfp-section-heading h3 { color: #f1f5f9; }
.cfp-theme-dark .cfp-section-heading p  { color: #94a3b8; }
.cfp-theme-dark .cfp-divider { border-top-color: rgba(255,255,255,.1); }
.cfp-theme-dark .cfp-html-block { color: #cbd5e1; }
.cfp-theme-dark .cfp-submit-btn { background: linear-gradient(135deg, #818cf8, #a78bfa); box-shadow: 0 4px 14px rgba(129,140,248,.35); }
.cfp-theme-dark .cfp-submit-btn:hover { box-shadow: 0 8px 22px rgba(129,140,248,.45); }
.cfp-theme-dark .cfp-field-error { color: #fca5a5; }
.cfp-theme-dark .cfp-range-value { color: #a5b4fc; }