/* =====================================================================
   WhatsApp Contact Form Builder — shared stylesheet
   Used on both the wp-admin builder screen and the public shortcode
   output. Namespaced (wcfp-), !important-protected against theme CSS.
   ===================================================================== */
.wcfp-plugin-root, .wcfp-plugin-root *{
  box-sizing:border-box !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  list-style:none !important;
  text-decoration:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.wcfp-plugin-root{
  all:initial !important;
  display:block !important;
  width:100% !important;
  max-width:920px !important;
  margin:0 !important;
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif !important;
  color:#0b1f1a !important;
}
.wcfp-plugin-root *{ font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif !important; }

/* ---------- shell / tabs (admin builder only) ---------- */
.wcfp-shell{ background:#f6f1e4 !important; border:1px solid #e3ddc9 !important; border-radius:16px !important; padding:20px !important; }
.wcfp-tabbar{ display:flex !important; gap:8px !important; margin:0 0 18px 0 !important; }
.wcfp-tab{ flex:0 0 auto !important; padding:9px 18px !important; border-radius:999px !important; border:1.5px solid #e3ddc9 !important; background:#fff !important; color:#0b1f1a !important; font-size:13.5px !important; font-weight:700 !important; cursor:pointer !important; }
.wcfp-tab.wcfp-tab--active{ background:#0d5c3f !important; border-color:#0d5c3f !important; color:#fff !important; }
.wcfp-panel{ display:none !important; }
.wcfp-panel.wcfp-panel--active{ display:block !important; }
.wcfp-preview-hint{ font-size:12.5px !important; color:#6b7269 !important; margin:0 0 14px 0 !important; }

.wcfp-global-row{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; align-items:flex-end !important; margin:0 0 18px 0 !important; background:#fff !important; border:1px solid #e3ddc9 !important; border-radius:12px !important; padding:14px !important; }
.wcfp-global-row .wcfp-mini-field{ flex:1 1 200px !important; }
.wcfp-mini-label{ display:block !important; font-size:11.5px !important; font-weight:700 !important; color:#6b7269 !important; margin:0 0 5px 0 !important; }
.wcfp-mini-input{ width:100% !important; border:1.5px solid #e3ddc9 !important; border-radius:8px !important; padding:9px 10px !important; font-size:13.5px !important; background:#fcfbf7 !important; color:#0b1f1a !important; }

/* ---------- field cards (admin builder only) ---------- */
.wcfp-field-list{ display:flex !important; flex-direction:column !important; gap:12px !important; }
.wcfp-card{ background:#fff !important; border:1px solid #e3ddc9 !important; border-radius:12px !important; padding:16px !important; }
.wcfp-card-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 0 12px 0 !important; }
.wcfp-card-title{ display:flex !important; align-items:center !important; gap:8px !important; font-size:13px !important; font-weight:700 !important; }
.wcfp-type-badge{ background:#eef3ed !important; color:#0d5c3f !important; font-size:10.5px !important; font-weight:800 !important; padding:3px 8px !important; border-radius:999px !important; }
.wcfp-card-actions{ display:flex !important; gap:6px !important; }
.wcfp-icon-btn{ width:28px !important; height:28px !important; border-radius:7px !important; border:1.5px solid #e3ddc9 !important; background:#fcfbf7 !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#0b1f1a !important; padding:0 !important; }
.wcfp-icon-btn:hover{ background:#f0ede1 !important; }
.wcfp-icon-btn.wcfp-danger{ color:#c2452c !important; border-color:#f0c9be !important; }
.wcfp-icon-btn svg{ width:14px !important; height:14px !important; }

.wcfp-grid2{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin:0 0 10px 0 !important; }
.wcfp-field-group label.wcfp-mini-label{ margin-bottom:5px !important; }
.wcfp-checkbox-row{ display:flex !important; align-items:center !important; gap:7px !important; font-size:12.5px !important; font-weight:600 !important; color:#0b1f1a !important; margin:4px 0 10px 0 !important; }
.wcfp-checkbox-row input{ width:15px !important; height:15px !important; accent-color:#17a869 !important; }

.wcfp-options-box{ border:1px dashed #e3ddc9 !important; border-radius:9px !important; padding:10px !important; margin:0 0 10px 0 !important; background:#fcfbf7 !important; }
.wcfp-option-row{ display:flex !important; gap:6px !important; margin:0 0 6px 0 !important; }
.wcfp-option-row input{ flex:1 1 auto !important; border:1.5px solid #e3ddc9 !important; border-radius:7px !important; padding:7px 9px !important; font-size:13px !important; background:#fff !important; }
.wcfp-add-option{ font-size:12px !important; font-weight:700 !important; color:#0d5c3f !important; background:none !important; border:none !important; cursor:pointer !important; padding:2px 0 !important; }

.wcfp-color-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:8px !important; margin-top:8px !important; }
.wcfp-color-item{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; }
.wcfp-color-item label{ font-size:10px !important; font-weight:700 !important; color:#6b7269 !important; text-align:center !important; }
.wcfp-color-item input[type=color]{ width:34px !important; height:26px !important; border:1.5px solid #e3ddc9 !important; border-radius:6px !important; padding:0 !important; cursor:pointer !important; background:#fff !important; }

.wcfp-add-bar{ display:flex !important; gap:8px !important; margin-top:16px !important; }
.wcfp-add-bar select{ flex:1 1 auto !important; border:1.5px solid #e3ddc9 !important; border-radius:8px !important; padding:10px !important; font-size:13.5px !important; background:#fff !important; }
.wcfp-add-bar button{ flex:0 0 auto !important; background:#17a869 !important; color:#fff !important; border:none !important; border-radius:8px !important; padding:10px 16px !important; font-size:13.5px !important; font-weight:700 !important; cursor:pointer !important; }

/* ---------- save bar (admin builder only) ---------- */
.wcfp-save-bar{ display:flex !important; align-items:center !important; gap:12px !important; margin-top:16px !important; }
.wcfp-save-btn{ background:#0d5c3f !important; color:#fff !important; border:none !important; border-radius:8px !important; padding:11px 22px !important; font-size:13.5px !important; font-weight:700 !important; cursor:pointer !important; }
.wcfp-save-btn:hover{ background:#0a4a32 !important; }
.wcfp-save-btn:disabled{ opacity:0.6 !important; cursor:default !important; }
.wcfp-save-status{ font-size:13px !important; font-weight:600 !important; color:#6b7269 !important; }
.wcfp-save-status.wcfp-save-status--ok{ color:#0d5c3f !important; }
.wcfp-save-status.wcfp-save-status--err{ color:#c2452c !important; }

/* ---------- live preview / public form (shared) ---------- */
.wcfp-preview-wrap{ display:flex !important; justify-content:center !important; }
.wcfp-form{ width:100% !important; max-width:440px !important; background:#fff !important; border:1px solid #e3ddc9 !important; border-radius:14px !important; padding:26px !important; box-shadow:0 20px 40px -24px rgba(11,31,26,0.35) !important; }
.wcfp-pf{ margin:0 0 18px 0 !important; }
.wcfp-pf-label{ display:block !important; font-size:12.5px !important; font-weight:700 !important; margin:0 0 7px 0 !important; }
.wcfp-pf-control{ display:flex !important; align-items:center !important; border-radius:10px !important; border-style:solid !important; border-width:1.5px !important; }
.wcfp-pf-control input, .wcfp-pf-control textarea, .wcfp-pf-control select{
  flex:1 1 auto !important; border:none !important; outline:none !important; background:transparent !important;
  font-size:15px !important; padding:12px 12px 12px 10px !important; width:100% !important; color:inherit !important;
}
.wcfp-pf-control textarea{ resize:vertical !important; min-height:84px !important; padding-top:12px !important; }
.wcfp-pf-icon{ flex:0 0 auto !important; width:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.wcfp-pf-icon svg{ width:18px !important; height:18px !important; }
.wcfp-pf-flag{ flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:6px !important; padding:0 8px 0 12px !important; font-size:14px !important; font-weight:600 !important; border-right:1.5px solid #e3ddc9 !important; height:24px !important; }
.wcfp-pf-flag svg{ width:20px !important; height:14px !important; border-radius:2px !important; }
.wcfp-pf-error{ display:none !important; font-size:12px !important; color:#c2452c !important; font-weight:600 !important; margin:6px 0 0 0 !important; }
.wcfp-pf.wcfp-pf--invalid .wcfp-pf-control{ border-color:#c2452c !important; }
.wcfp-pf.wcfp-pf--invalid .wcfp-pf-error{ display:block !important; }

.wcfp-choice-list{ display:flex !important; flex-direction:column !important; gap:8px !important; }
.wcfp-choice-row{ display:flex !important; align-items:center !important; gap:9px !important; font-size:14px !important; }
.wcfp-choice-row input{ width:17px !important; height:17px !important; cursor:pointer !important; }

.wcfp-submit-btn{ width:100% !important; margin-top:6px !important; border:none !important; border-radius:10px !important; padding:14px 18px !important; font-size:15.5px !important; font-weight:700 !important; color:#fff !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; }
.wcfp-submit-btn svg{ width:18px !important; height:18px !important; }
.wcfp-submit-btn:disabled{ opacity:0.55 !important; cursor:default !important; }
.wcfp-foot-note{ margin:14px 0 0 0 !important; font-size:12px !important; color:#6b7269 !important; text-align:center !important; }