/* ═══════════════════════════════════════════════════════
   Open Form — Frontend CSS
   • Horizontal & Vertical Multi-step with animations
   • Animated progress connector line
   • Custom step colors via CSS vars
   • Background image with overlay
   • Font Awesome field icons
   • RTL / EN-AR language support
   • Advanced Form Group / Section Styling
   • Google Fonts Integration (Inter, Poppins, Roboto, etc.)
═══════════════════════════════════════════════════════ */

/* ══ Google Fonts — Famous Font Families ══════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Nunito:wght@300;400;600;700;800&family=Montserrat:wght@300;400;500;600;700;800&family=Lato:wght@300;400;700&family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables (defaults, overridden per-form) ───── */
:root {
  --fcp-brand:    #0073aa;
  --fcp-brand-dk: #005a87;
  --fcp-ink:      #1a1a2e;
  --fcp-muted:    #6b7280;
  --fcp-border:   #d1d5db;
  --fcp-light:    #f9fafb;
  --fcp-radius:   8px;
  --fcp-err:      #dc2626;
  --fcp-ok:       #16a34a;
  /* Step colors — overridden inline per form */
  --fcp-step-active:   #0073aa;
  --fcp-step-done:     #16a34a;
  --fcp-step-line:     #0073aa;
  --fcp-step-inactive: #e2e8f0;
  /* Button */
  --fcp-btn-color: #0073aa;
  --fcp-btn-text:  #ffffff;
  --fcp-btn-hover: #005a87;
}

/* ── Base ────────────────────────────────────────────── */
.fcp-form-outer {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 15px; line-height: 1.6; color: var(--fcp-ink);
  max-width: 100%;
}

/* ── BG Wrap (holds background image) ───────────────── */
.fcp-bg-wrap {
  border-radius: var(--fcp-radius);
  overflow: hidden;
}

/* ── Language bar ────────────────────────────────────── */
/* ══ Smart Auto-Detect Language Banner ══ */
.fcp-lang-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #0c4a6e;
  animation: fcpBannerIn .4s cubic-bezier(.34,1.56,.64,1) both;
  position: relative;
  flex-wrap: wrap;
}
.fcp-lang-banner.fcp-lb-hide {
  animation: fcpBannerOut .3s ease forwards;
}
@keyframes fcpBannerIn {
  from { opacity:0; transform: translateY(-10px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes fcpBannerOut {
  to { opacity:0; transform: translateY(-8px) scale(.97); }
}
.fcp-lb-icon { font-size: 18px; flex-shrink: 0; }
.fcp-lb-msg  { flex: 1; line-height: 1.4; font-size: 12.5px; }
.fcp-lb-lang { color: var(--fcp-brand); }
.fcp-lb-yes {
  background: var(--fcp-brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.fcp-lb-yes:hover { filter: brightness(1.1); transform: translateY(-1px); }
.fcp-lb-no {
  background: none;
  border: none;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 6px;
  transition: color .15s;
  white-space: nowrap;
}
.fcp-lb-no:hover { color: #374151; }

/* Current language chip (always visible) */
.fcp-lb-current {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #6b7280;
  position: relative;
}
.fcp-lbc-flag { font-size: 15px; }
.fcp-lbc-name { font-weight: 600; color: #374151; }
.fcp-lbc-change {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--fcp-brand);
  cursor: pointer;
  transition: all .15s;
}
.fcp-lbc-change:hover { border-color: var(--fcp-brand); background: color-mix(in srgb, var(--fcp-brand) 8%, white); }

/* Mini language picker */
.fcp-minipicker {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 210px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.13);
  z-index: 9999;
  overflow: hidden;
  animation: fcpBannerIn .18s ease both;
}
.fcp-mp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 1px solid #f3f4f6;
}
.fcp-mp-close {
  background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 12px; padding: 0;
}
.fcp-mp-close:hover { color: #374151; }
.fcp-mp-search {
  width: 100%; box-sizing: border-box;
  border: none; border-bottom: 1px solid #f3f4f6;
  padding: 7px 12px; font-size: 12px; outline: none;
}
.fcp-mp-list { list-style: none; margin: 0; padding: 4px 0; max-height: 190px; overflow-y: auto; }
.fcp-mp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; font-size: 12.5px; color: #374151;
  transition: background .1s;
}
.fcp-mp-item:hover { background: #f9fafb; }
.fcp-mp-flag { font-size: 15px; flex-shrink: 0; }
.fcp-mp-name { flex: 1; }
.fcp-mp-code { font-size: 10px; color: #9ca3af; font-weight: 700; }

/* ── Form box ────────────────────────────────────────── */
.fcp-form-wrap {
  background: var(--fcp-form-bg, transparent);
  padding: 28px;
  border-radius: var(--fcp-radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.07);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
}

/* ── Step counter badge ──────────────────────────────── */
.fcp-step-counter {
  display: inline-flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--fcp-step-active) 10%, white);
  border: 1px solid color-mix(in srgb, var(--fcp-step-active) 30%, white);
  color: var(--fcp-step-active);
  font-size: 12px; font-weight: 800; padding: 3px 12px;
  border-radius: 100px; margin-bottom: 18px; letter-spacing: .04em;
}
.fcp-sc-sep { opacity: .5; }

/* ══════════════════════════════════════════════════════
   HORIZONTAL MULTI-STEP PROGRESS BAR
══════════════════════════════════════════════════════ */
.fcp-steps-nav.fcp-steps-horizontal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
}

.fcp-steps-horizontal .fcp-step-node {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; position: relative;
}

/* Circle */
.fcp-steps-horizontal .fcp-step-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--fcp-step-inactive);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--fcp-muted);
  border: 3px solid var(--fcp-step-inactive);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative; z-index: 2;
}

.fcp-steps-horizontal .fcp-step-check { display: none; }

.fcp-steps-horizontal .fcp-step-node.active .fcp-step-circle {
  background: var(--fcp-step-active);
  border-color: var(--fcp-step-active);
  color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--fcp-step-active) 20%, white);
  transform: scale(1.12);
}

.fcp-steps-horizontal .fcp-step-node.done .fcp-step-circle {
  background: var(--fcp-step-done);
  border-color: var(--fcp-step-done);
  color: #fff;
  transform: scale(1);
}

.fcp-steps-horizontal .fcp-step-node.done .fcp-step-num  { display: none; }
.fcp-steps-horizontal .fcp-step-node.done .fcp-step-check { display: block; }

/* Label under circle */
.fcp-steps-horizontal .fcp-step-meta {
  margin-top: 8px; text-align: center;
}
.fcp-steps-horizontal .fcp-step-label {
  font-size: 12px; font-weight: 700;
  color: var(--fcp-muted); white-space: nowrap;
  transition: color .3s;
}
.fcp-steps-horizontal .fcp-step-node.active .fcp-step-label { color: var(--fcp-step-active); }
.fcp-steps-horizontal .fcp-step-node.done   .fcp-step-label { color: var(--fcp-step-done); }

/* Connector line between nodes */
.fcp-steps-horizontal .fcp-step-connector {
  position: absolute;
  top: 19px; /* center of 40px circle */
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 3px;
  background: var(--fcp-step-inactive);
  border-radius: 2px;
  overflow: hidden;
  z-index: 1;
  transition: background .4s;
}
/* Animated fill when step becomes done */
.fcp-steps-horizontal .fcp-step-connector::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--fcp-step-line);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  border-radius: 2px;
}
.fcp-steps-horizontal .fcp-step-node.done .fcp-step-connector::after {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════════════════
   VERTICAL MULTI-STEP (sidebar layout)
══════════════════════════════════════════════════════ */
.fcp-v-layout {
  display: flex !important; flex-direction: row !important;
  align-items: stretch; gap: 0; min-height: 300px;
  border-radius: inherit; overflow: hidden;
}

.fcp-v-steps-col {
  width: 220px; flex-shrink: 0;
  background: #f8fafc;
  border-right: 1.5px solid #e5e7eb;
  border-radius: 12px 0 0 12px;
  padding: 24px 0;
}

.fcp-v-steps-col .fcp-steps-nav {
  padding: 0;
  position: static;
}

.fcp-v-form-col {
  flex: 1; min-width: 0;
}

.fcp-steps-nav.fcp-steps-vertical {
  display: flex; flex-direction: column;
  padding: 20px 0 20px 0;
  position: sticky; top: 80px;
}

.fcp-steps-vertical .fcp-step-node {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 14px; position: relative; padding-bottom: 0;
}

/* Circle */
.fcp-steps-vertical .fcp-step-circle {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--fcp-step-inactive);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--fcp-muted);
  border: 3px solid var(--fcp-step-inactive);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative; z-index: 2;
}

.fcp-steps-vertical .fcp-step-check { display: none; }

.fcp-steps-vertical .fcp-step-node.active .fcp-step-circle {
  background: var(--fcp-step-active); border-color: var(--fcp-step-active);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fcp-step-active) 18%, white);
  transform: scale(1.1);
}
.fcp-steps-vertical .fcp-step-node.done .fcp-step-circle {
  background: var(--fcp-step-done); border-color: var(--fcp-step-done); color: #fff;
}
.fcp-steps-vertical .fcp-step-node.done .fcp-step-num  { display: none; }
.fcp-steps-vertical .fcp-step-node.done .fcp-step-check { display: block; }

/* Meta text */
.fcp-steps-vertical .fcp-step-meta { display: flex; flex-direction: column; padding-top: 4px; }
.fcp-steps-vertical .fcp-step-label {
  font-size: 14px; font-weight: 700; color: var(--fcp-muted); line-height: 1.2;
  transition: color .3s;
}
.fcp-steps-vertical .fcp-step-sub { font-size: 11px; color: #aaa; margin-top: 2px; }
.fcp-steps-vertical .fcp-step-node.active .fcp-step-label { color: var(--fcp-step-active); }
.fcp-steps-vertical .fcp-step-node.done   .fcp-step-label { color: var(--fcp-step-done); }

/* Vertical connector */
.fcp-steps-vertical .fcp-step-connector {
  position: absolute;
  top: 36px; left: 17px; /* center of 36px circle */
  width: 3px; height: 40px;
  background: var(--fcp-step-inactive);
  border-radius: 2px; overflow: hidden;
  z-index: 1;
  margin-bottom: 0;
}
.fcp-steps-vertical .fcp-step-connector::after {
  content: ''; position: absolute; inset: 0;
  background: var(--fcp-step-line);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  border-radius: 2px;
}
.fcp-steps-vertical .fcp-step-node.done .fcp-step-connector::after {
  transform: scaleY(1);
}

/* Spacing between vertical nodes */
.fcp-steps-vertical .fcp-step-node { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════
   STEP PANEL SLIDE ANIMATION
══════════════════════════════════════════════════════ */
.fcp-step-panel {
  animation: none;
}
.fcp-step-panel.fcp-slide-in-right {
  animation: slideInRight .35s cubic-bezier(.4,0,.2,1) both;
}
.fcp-step-panel.fcp-slide-in-left {
  animation: slideInLeft .35s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════
   FIELDS
══════════════════════════════════════════════════════ */
.fcp-field { margin-bottom: 18px; }

/* Label */
.fcp-label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fcp-lbl-fs, 14px);
  font-weight: var(--fcp-lbl-fw, 700);
  color: var(--fcp-lbl-tc, var(--fcp-ink));
  margin-bottom: 7px; cursor: pointer;
}
/* Font Awesome icon in label */
.fcp-field-icon-fa { font-size: 14px; color: var(--fcp-brand); }
/* Emoji icon */
.fcp-field-icon    { font-size: 15px; line-height: 1; }
.fcp-label-text    { } /* no flex:1 — star stays right after label text */
.fcp-req   { color: var(--fcp-req-tc, var(--fcp-err)); font-weight: 900; font-size: 13px; line-height: 1; margin-left: 2px; }
/* Tooltip pushed to end */
.fcp-tip   { margin-left: auto; }
.fcp-tip   { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fcp-border); color: var(--fcp-muted); font-size: 11px; cursor: help; transition: background .15s; }
.fcp-tip:hover { background: var(--fcp-brand); color: #fff; }

/* Inputs */
.fcp-input, .fcp-textarea, .fcp-select {
  width: 100%;
  box-sizing: border-box;
  padding: var(--fcp-inp-pad, 10px 14px);
  font-size: var(--fcp-inp-fs, 15px);
  font-family: inherit;
  color: var(--fcp-inp-tc, var(--fcp-ink));
  background: var(--fcp-inp-bg, #fff);
  border: var(--fcp-inp-bw, 1.5px) solid var(--fcp-inp-bc, var(--fcp-border));
  border-radius: var(--fcp-inp-br, var(--fcp-radius));
  outline: none; transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none;
}
.fcp-input::placeholder, .fcp-textarea::placeholder {
  color: var(--fcp-ph-tc, #9ca3af);
}
.fcp-input:focus, .fcp-textarea:focus, .fcp-select:focus {
  border-color: var(--fcp-inp-focus, var(--fcp-brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fcp-inp-focus, var(--fcp-brand)) 15%, white);
}
.fcp-input.err, .fcp-textarea.err, .fcp-select.err {
  border-color: var(--fcp-err);
}
.fcp-phone-wrap.err {
  border-color: var(--fcp-err) !important;
  box-shadow: none !important;
}
.fcp-phone-wrap.err .fcp-dial-trigger {
  border-right-color: var(--fcp-err) !important;
}
.fcp-textarea { resize: vertical; min-height: 96px; }
.fcp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
[dir="rtl"] .fcp-select { background-position: left 12px center; padding-right: 14px; padding-left: 36px; }

/* Choice */
.fcp-radio-group, .fcp-check-group { display: flex; flex-direction: column; gap: 8px; }
.fcp-choice-lbl {
  display: flex; align-items: center; gap: 10px;
  padding: var(--fcp-inp-pad, 10px 14px); border: var(--fcp-inp-bw, 1.5px) solid var(--fcp-inp-bc, var(--fcp-border)); border-radius: var(--fcp-inp-br, var(--fcp-radius));
  font-size: var(--fcp-inp-fs, 15px); cursor: pointer; transition: all .15s; background: #fff;
}
.fcp-choice-lbl:hover { border-color: var(--fcp-brand); background: #f0f8ff; }
.fcp-choice-lbl input { accent-color: var(--fcp-brand); width: 16px; height: 16px; flex-shrink: 0; }

/* Star rating (FA stars) */
.fcp-rating { display: flex; gap: 4px; }
.fcp-star   { font-size: 26px; color: #e2e8f0; cursor: pointer; transition: color .1s, transform .1s; }
.fcp-star:hover, .fcp-star.active { color: #f59e0b; transform: scale(1.15); }
.fcp-star .fa { pointer-events: none; }

/* File */
.fcp-file {
  width: 100%; padding: var(--fcp-inp-pad, 10px 14px); border: var(--fcp-inp-bw, 1.5px) dashed var(--fcp-border);
  border-radius: var(--fcp-inp-br, var(--fcp-radius)); font-size: var(--fcp-inp-fs, 15px); cursor: pointer; background: var(--fcp-light);
  transition: border-color .2s;
}
.fcp-file:hover { border-color: var(--fcp-brand); }
.fcp-file-preview { margin-top: 8px; font-size: 13px; color: var(--fcp-muted); }

/* Misc */
.fcp-heading { margin: 4px 0 16px; font-weight: 800; }
.fcp-divider { border: none; border-top: 2px solid var(--fcp-border); margin: 4px 0; }

/* Field error */
.fcp-field-error { display: none; color: var(--fcp-err-tc, var(--fcp-err)); font-size: 12px; font-weight: 600; margin-top: 5px; }
.fcp-field.has-err .fcp-field-error { display: block; }
.fcp-field.has-err .fcp-input,
.fcp-field.has-err .fcp-textarea,
.fcp-field.has-err .fcp-select { border-color: var(--fcp-err); }

/* Required error highlight for ALL field types */
.fcp-field.has-err .fcp-phone-wrap { border-color: var(--fcp-err) !important; box-shadow: none !important; }
.fcp-field.has-err .fcp-phone-wrap .fcp-dial-trigger { border-right-color: var(--fcp-err) !important; }
.fcp-field.has-err .fcp-phone-wrap .fcp-phone-input { border-color: transparent !important; box-shadow: none !important; }
.fcp-phone-wrap.err .fcp-phone-input { border-color: transparent !important; box-shadow: none !important; }
.fcp-field.has-err .fcp-file { border-color: var(--fcp-err) !important; }
.fcp-field.has-err .fcp-sig-pad { border: 1.5px solid var(--fcp-err) !important; border-radius: var(--fcp-inp-br, var(--fcp-radius)); }
.fcp-field.has-err .fcp-rating .fcp-star i { color: var(--fcp-err) !important; opacity: 0.5; }
.fcp-field.has-err .fcp-nps { outline: 1.5px solid var(--fcp-err); border-radius: var(--fcp-inp-br, var(--fcp-radius)); padding: 4px; }
.fcp-field.has-err .fcp-img-choices { outline: 1.5px solid var(--fcp-err); border-radius: var(--fcp-inp-br, var(--fcp-radius)); padding: 4px; }
.fcp-field.has-err .fcp-color-wrap { outline: 2px solid var(--fcp-err); border-radius: 6px; }
.fcp-field.has-err .fcp-range-wrap { outline: 1.5px solid var(--fcp-err); border-radius: 6px; padding: 4px; }
.fcp-field.has-err .fcp-toggle-wrap { outline: 2px solid var(--fcp-err); border-radius: 6px; padding: 2px 6px; }
.fcp-field.has-err .fcp-matrix-wrap { outline: 1.5px solid var(--fcp-err); border-radius: 6px; }
.fcp-field.has-err .fcp-address-block .fcp-input:first-child { border-color: var(--fcp-err); }
.fcp-field.has-err .fcp-booking-slots { outline: 1.5px solid var(--fcp-err); border-radius: 6px; padding: 4px; }
.fcp-field.has-err .fcp-likert { outline: 1.5px solid var(--fcp-err); border-radius: 6px; padding: 4px; }

/* ── Form footer / Buttons ───────────────────────────── */
.fcp-form-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px; flex-wrap: wrap;
}

/* Submit & Nav buttons */
.fcp-btn {
  --fcp-btn-color: #0073aa; --fcp-btn-text: #fff; --fcp-btn-hover: #005a87;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 28px; font-size: 15px; font-weight: 700; font-family: inherit;
  border: 2px solid var(--fcp-btn-color); border-radius: var(--fcp-radius);
  cursor: pointer; transition: all .2s;
}
.fcp-btn-solid    { background: var(--fcp-btn-color); color: var(--fcp-btn-text); }
.fcp-btn-solid:hover { background: var(--fcp-btn-hover, var(--fcp-btn-color)); border-color: var(--fcp-btn-hover, var(--fcp-btn-color)); color: var(--fcp-btn-hover-text, var(--fcp-btn-text)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,115,170,.3); }
.fcp-btn-outline  { background: transparent; color: var(--fcp-btn-color); }
.fcp-btn-outline:hover { background: var(--fcp-btn-color); color: var(--fcp-btn-hover-text, var(--fcp-btn-text)); }
.fcp-btn-gradient { background: linear-gradient(135deg,var(--fcp-btn-color),var(--fcp-btn-hover,#005a87)); color: var(--fcp-btn-text); border-color: transparent; }
.fcp-btn-gradient:hover { opacity:.9; transform:translateY(-1px); color: var(--fcp-btn-hover-text, var(--fcp-btn-text)); }
.fcp-btn-3d { background: var(--fcp-btn-color); color: var(--fcp-btn-text); box-shadow: 0 5px 0 var(--fcp-btn-hover,#005a87); transform: translateY(-3px); }
.fcp-btn-3d:hover { transform: translateY(-1px); box-shadow: 0 2px 0 var(--fcp-btn-hover,#005a87); }
.fcp-btn-shadow    { box-shadow: 0 8px 24px rgba(0,115,170,.4) !important; }
.fcp-btn-scale:hover  { transform: scale(1.04) !important; }
.fcp-btn-uppercase    { text-transform: uppercase; }
.fcp-form-wrap        { gap: var(--fcp-field-gap, 16px); }
.fcp-btn-rounded { border-radius: 100px !important; }
.fcp-btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }
.fcp-btn-submit.fcp-btn-err,
.fcp-btn-submit.fcp-btn-err:hover,
.fcp-btn-submit.fcp-btn-err:active,
.fcp-btn-submit.fcp-btn-err:focus {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25) !important;
  animation: fcp-btn-shake .4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes fcp-btn-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.fcp-btn-icon    { font-size: 17px; }

/* Prev/Next */
.fcp-btn-prev, .fcp-btn-next {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; font-size: 14px; font-weight: 700; font-family: inherit;
  border: 1.5px solid var(--fcp-border); border-radius: var(--fcp-radius);
  background: #fff; cursor: pointer; transition: all .15s;
}
.fcp-btn-next {
  background: var(--fcp-step-active, var(--fcp-brand));
  border-color: var(--fcp-step-active, var(--fcp-brand));
  color: #fff;
}
.fcp-btn-next:hover { opacity: .88; transform: translateY(-1px); }
.fcp-btn-prev:hover { background: var(--fcp-light); }

/* Spinner */
.fcp-btn-spinner .fa { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Success ─────────────────────────────────────────── */
.fcp-success-msg {
  padding: 22px 26px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--fcp-radius); color: var(--fcp-ok);
  font-weight: 700; font-size: 15px; text-align: center;
  animation: pop-in .3s ease;
}
@keyframes pop-in { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:none} }

.fcp-notice { padding: 14px 18px; background: #fff3cd; border: 1px solid #ffc107; border-radius: var(--fcp-radius); color: #856404; font-weight: 600; }
.fcp-error  { color: var(--fcp-err); font-weight: 700; }

/* ── RTL ─────────────────────────────────────────────── */
[dir="rtl"] .fcp-form-wrap,
[dir="rtl"] .fcp-label,
[dir="rtl"] .fcp-choice-lbl  { text-align: right; }
[dir="rtl"] .fcp-input,
[dir="rtl"] .fcp-textarea     { text-align: right; }
[dir="rtl"] .fcp-form-footer  { flex-direction: row-reverse; }
[dir="rtl"] .fcp-steps-horizontal .fcp-step-connector {
  left: auto; right: calc(50% + 20px);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 700px) {
  .fcp-v-layout { flex-direction: column; }
  .fcp-v-steps-col { width: 100%; }
  .fcp-steps-nav.fcp-steps-vertical {
    flex-direction: row; overflow-x: auto; padding: 12px 0;
  }
  .fcp-steps-vertical .fcp-step-node { flex-direction: column; align-items: center; flex: 1; margin-bottom: 0; }
  .fcp-steps-vertical .fcp-step-connector { top: 18px; left: calc(50% + 18px); width: 100%; height: 3px; }
  .fcp-steps-vertical .fcp-step-connector::after { transform-origin: left; transition: transform .5s; }
  .fcp-steps-vertical .fcp-step-node.done .fcp-step-connector::after { transform: scaleX(1); }
  .fcp-steps-vertical .fcp-step-sub { display: none; }
  .fcp-form-footer { flex-direction: column; align-items: stretch; }
  .fcp-form-footer .fcp-btn,
  .fcp-form-footer .fcp-btn-next,
  .fcp-form-footer .fcp-btn-prev { width: 100%; justify-content: center; }
  .fcp-lang-btn { padding: 7px 14px; font-size: 13px; }
  .fcp-form-wrap { padding: 16px !important; }
}

/* ── Image Choice field ─────────────────────────────── */
.fcp-img-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
/* Custom column count via data-cols attribute */
.fcp-img-choices[data-cols="1"] { grid-template-columns: repeat(1, 1fr); }
.fcp-img-choices[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.fcp-img-choices[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.fcp-img-choices[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.fcp-img-choices[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 500px) {
  .fcp-img-choices { grid-template-columns: repeat(2, 1fr) !important; }
}
.fcp-img-choice {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 14px 12px 10px;
  border: 2px solid #e2e6eb; border-radius: 12px;
  cursor: pointer; transition: all .2s;
  position: relative; background: #fff; text-align: center;
  width: 100%;
}
.fcp-img-choice input[type=radio] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.fcp-img-choice img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; display: block;
  border: 1.5px solid #e2e6eb;
}
.fcp-img-ph {
  width: 72px; height: 72px; border-radius: 8px;
  background: #f1f3f6; border: 1.5px solid #e2e6eb;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 28px;
}
.fcp-img-choice span:not(.fcp-img-step-badge) {
  font-size: 13px; font-weight: 600; color: #475569;
  line-height: 1.3; transition: color .15s;
}
.fcp-img-choice:hover {
  border-color: #4f46e5; background: #f5f3ff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(79,70,229,.12);
}
.fcp-img-choice:hover span:not(.fcp-img-step-badge) { color: #4f46e5; }
.fcp-img-choice.selected {
  border-color: #4f46e5; background: #ede9fe;
  box-shadow: 0 0 0 3px rgba(79,70,229,.18);
}
.fcp-img-choice.selected span:not(.fcp-img-step-badge) { color: #4f46e5; font-weight: 700; }
.fcp-img-choice.selected::after {
  content: '✓';
  position: absolute; top: 7px; right: 7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #4f46e5; color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 20px; text-align: center;
}
.fcp-img-step-badge {
  display: inline-flex; align-items: center;
  font-size: 10px !important; font-weight: 700 !important;
  color: #4f46e5 !important;
  background: #ede9fe; border: 1px solid #c4b5fd;
  padding: 2px 8px; border-radius: 100px;
  white-space: nowrap; letter-spacing: .04em;
}

/* ── Category / Sub-category field ───────────────────────── */
.fcp-cat-wrap { display: flex; flex-direction: column; gap: 10px; }
.fcp-cat-select,
.fcp-subcat-select {
  width: 100%; padding: var(--fcp-inp-pad, 10px 14px);
  border: var(--fcp-inp-bw, 1.5px) solid var(--fcp-inp-bc, var(--fcp-border)); border-radius: var(--fcp-inp-br, var(--fcp-radius));
  font-size: var(--fcp-inp-fs, 15px); background: var(--fcp-inp-bg, #fff); color: var(--fcp-inp-tc, var(--fcp-ink));
  appearance: auto; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.fcp-cat-select:focus,
.fcp-subcat-select:focus {
  outline: none; border-color: var(--fcp-inp-focus, var(--fcp-brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fcp-inp-focus, var(--fcp-brand)) 15%, white);
}
.fcp-subcat-wrap { display: none; }
.fcp-subcat-wrap.visible { display: block; }

/* ═══════════════════════════════════════════════════════════
   FCP Role Selector / Form Group Widget
   ═══════════════════════════════════════════════════════════ */
.fcp-role-selector {
  font-family: inherit;
  width: 100%;
}

/* Header */
.fcp-rs-header {
  text-align: center;
  margin-bottom: 36px;
}
.fcp-rs-title {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  color: #0f1117;
  margin: 0 0 8px;
  line-height: 1.15;
}
.fcp-rs-sub {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

/* Cards row */
.fcp-rs-cards {
  display: grid;
  gap: 18px;
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .fcp-rs-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
}
@media (max-width: 340px) {
  .fcp-rs-cards { grid-template-columns: 1fr !important; }
}

/* Single card */
.fcp-rs-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 2.5px solid #e5e7eb;
  background: #fff;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              border-color .2s,
              box-shadow .25s;
  outline: none;
  user-select: none;
}
.fcp-rs-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.fcp-rs-card:focus-visible {
  outline: 3px solid var(--card-color, #4f46e5);
  outline-offset: 3px;
}
.fcp-rs-card.fcp-rs-active {
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--card-color, #4f46e5),
              0 14px 36px rgba(0,0,0,.12);
  transform: translateY(-4px);
}

/* Card visual area */
.fcp-rs-card-visual {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--card-color, #4f46e5) 15%, #fff) 0%,
    var(--card-color, #4f46e5) 100%
  );
}
.fcp-rs-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.fcp-rs-card:hover .fcp-rs-card-visual img { transform: scale(1.05); }

/* Emoji placeholder */
.fcp-rs-card-emoji {
  font-size: clamp(48px, 8vw, 72px);
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.18));
  transition: transform .3s ease;
}
.fcp-rs-card:hover .fcp-rs-card-emoji { transform: scale(1.1) translateY(-4px); }

/* Noise texture overlay */
.fcp-rs-card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 150px;
  pointer-events: none;
  opacity: .35;
}

/* Card footer */
.fcp-rs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #fff;
}
.fcp-rs-card-label {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.fcp-rs-card-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #f3f4f6;
  color: #9ca3af;
  transition: background .2s, color .2s, transform .25s;
}
.fcp-rs-card:hover  .fcp-rs-card-arrow,
.fcp-rs-card.fcp-rs-active .fcp-rs-card-arrow {
  background: var(--card-color, #4f46e5);
  color: #fff;
  transform: rotate(45deg);
}

/* "Selected" badge */
.fcp-rs-active-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: #fff;
  color: var(--card-color, #4f46e5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(-6px) scale(.9);
  transition: opacity .25s .05s, transform .25s .05s;
  z-index: 5;
}
.fcp-rs-card.fcp-rs-active .fcp-rs-active-badge {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Connector line card → form */
.fcp-rs-connector {
  width: 2px;
  height: 30px;
  margin: 0 auto;
  background: var(--fcp-rs-conn-color, #4f46e5);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              opacity .3s;
}
.fcp-rs-connector.fcp-rs-conn-visible {
  transform: scaleY(1);
  opacity: 1;
}

/* Form panel */
.fcp-rs-form-panel {
  border-radius: 16px;
  overflow: hidden;
  animation: fcpRsPanelIn .4s cubic-bezier(.22,1,.36,1) both;
  border-top: 4px solid var(--fcp-panel-color, #4f46e5);
}
.fcp-rs-form-panel[hidden] { display: none !important; }

@keyframes fcpRsPanelIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Conversational Mode ────────────────────────────────── */
.fcp-conv-wrapper {
  --conv-bg: #4f46e5;
  --conv-text: #ffffff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--conv-bg);
  padding: 40px 20px;
  box-sizing: border-box;
}
.fcp-conv-welcome {
  text-align: center;
  color: var(--conv-text);
  max-width: 560px;
}
.fcp-conv-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: inherit;
}
.fcp-conv-subtitle {
  font-size: 1.1rem;
  opacity: 0.85;
  margin: 0 0 32px;
}
.fcp-conv-start-btn {
  font-size: 1.1rem;
  padding: 14px 36px;
  background: #fff;
  color: var(--conv-bg);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.15s;
}
.fcp-conv-start-btn:hover { transform: scale(1.05); }

.fcp-conv-form { max-width: 640px; width: 100%; }
.fcp-conv-progress {
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  margin-bottom: 32px;
}
.fcp-conv-progress-bar {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  width: 0%;
  transition: width 0.4s;
}

/* In conversational mode, show one field group at a time */
.fcp-conv-form .fcp-field-wrap {
  display: none;
  animation: fcp-fade-in 0.4s ease;
}
.fcp-conv-form .fcp-field-wrap.fcp-conv-active { display: block; }

@keyframes fcp-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fcp-conv-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.fcp-conv-next, .fcp-conv-prev {
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
}
.fcp-conv-next { background: #fff; color: var(--conv-bg); }
.fcp-conv-prev { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Phone Field with Dial Code ── */
.fcp-phone-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  border: var(--fcp-inp-bw, 1.5px) solid var(--fcp-inp-bc, var(--fcp-border));
  border-radius: var(--fcp-inp-br, var(--fcp-radius));
  overflow: hidden; /* keeps border-radius corners sharp on inner elements */
  transition: border-color .2s, box-shadow .2s;
}
.fcp-phone-wrap:focus-within {
  border-color: var(--fcp-inp-focus, var(--fcp-brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fcp-inp-focus, var(--fcp-brand)) 15%, white);
}
.fcp-dial-dropdown {
  position: relative;
  flex-shrink: 0;
}
.fcp-dial-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 10px;
  background: #f8fafc;
  border: none;
  border-right: 1.5px solid var(--fcp-border);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  transition: background .15s;
  min-width: 82px;
}
.fcp-dial-trigger:hover { background: #f0f4f8; }
.fcp-dial-flag { font-size: 18px; line-height: 1; }
.fcp-dial-code { font-size: 13px; font-weight: 600; color: #374151; }
.fcp-dial-arrow { font-size: 10px; color: #9ca3af; margin-left: 2px; }

.fcp-phone-wrap .fcp-phone-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
}

.fcp-dial-menu {
  position: fixed; /* fixed so it escapes overflow:hidden on fcp-phone-wrap */
  z-index: 99999;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  width: 260px;
  overflow: hidden;
}
.fcp-dial-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.fcp-dial-search {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 7px;
  font-size: 13px;
  outline: none;
}
.fcp-dial-search:focus { border-color: #2563eb; }
.fcp-dial-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
}
.fcp-dial-list::-webkit-scrollbar { width: 4px; }
.fcp-dial-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
.fcp-dial-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .1s;
}
.fcp-dial-item:hover { background: #f0f6ff; }
.fcp-dial-item.selected { background: #eff6ff; }
.fcp-di-flag { font-size: 18px; flex-shrink: 0; }
.fcp-di-name { font-size: 13px; color: #374151; flex: 1; }
.fcp-di-code { font-size: 12px; font-weight: 700; color: #2563eb; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════
   NEW FEATURES CSS
═══════════════════════════════════════════════════════════ */

/* ── Dark Mode ────────────────────────────────────────────── */
.fcp-form-dark,
[data-fcp-dark="1"] .fcp-form {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
}
.fcp-form-dark input,
.fcp-form-dark textarea,
.fcp-form-dark select {
    background: #16213e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}
.fcp-form-dark label { color: #ccc !important; }
.fcp-form-dark .fcp-step-bar { background: #333 !important; }

/* ── Signature Field ──────────────────────────────────────── */
.fcp-signature-wrap { border: var(--fcp-inp-bw, 1.5px) dashed var(--fcp-border); border-radius: var(--fcp-inp-br, var(--fcp-radius)); overflow: hidden; background: #fafafa; }
.fcp-signature-canvas { display: block; cursor: crosshair; touch-action: none; }
.fcp-signature-actions { padding: 6px 10px; background: #f0f0f0; display: flex; gap: 8px; }
.fcp-sig-clear { padding: 4px 12px; background: #e74c3c; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }

/* ── Image Choice ─────────────────────────────────────────── */
.fcp-image-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.fcp-image-choice-item { cursor: pointer; border: var(--fcp-inp-bw, 1.5px) solid var(--fcp-border); border-radius: var(--fcp-inp-br, var(--fcp-radius)); overflow: hidden; text-align: center; padding: 10px 14px; transition: border-color .2s; min-width: 100px; }
.fcp-image-choice-item:hover { border-color: #0073aa; }
.fcp-image-choice-item input { position: absolute; opacity: 0; pointer-events: none; }
.fcp-image-choice-item input:checked + img,
.fcp-image-choice-item:has(input:checked) { outline: 3px solid #0073aa; }
.fcp-image-choice-item:has(input:checked) { border-color: #0073aa; background: #f0f7ff; }
.fcp-image-choice-item img { max-width: 80px; height: 70px; object-fit: cover; border-radius: 4px; display: block; margin: 0 auto 6px; }
.fcp-image-choice-item span { font-size: var(--fcp-inp-fs, 15px); }

/* ── Slider / Range ───────────────────────────────────────── */
.fcp-slider-wrap { display: flex; align-items: center; gap: 12px; }
.fcp-range-input { flex: 1; accent-color: #0073aa; }
.fcp-range-value { font-weight: 700; color: #0073aa; min-width: 32px; text-align: center; }

/* ── Repeater ─────────────────────────────────────────────── */
.fcp-repeater-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: #f9f9f9; padding: 10px; border-radius: 6px; margin-bottom: 8px; position: relative; }
.fcp-repeater-field { flex: 1; min-width: 140px; }
.fcp-repeater-remove { background: #e74c3c; color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.fcp-repeater-add { background: #0073aa; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; margin-top: 4px; }

/* ── Cart ─────────────────────────────────────────────────── */
.fcp-cart-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fcp-cart-table th, .fcp-cart-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; }
.fcp-cart-table th { background: #f4f4f4; font-weight: 600; }
.fcp-cart-table tfoot td { font-size: 15px; }
.fcp-cart-table input[type="number"] { width: 60px; padding: 4px 6px; border: 1px solid #ddd; border-radius: 4px; }

/* ── Kanban ───────────────────────────────────────────────── */
.fcp-kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.fcp-kanban-col { min-width: 220px; background: #f4f4f4; border-radius: 8px; padding: 12px; }
.fcp-kanban-col-title { font-weight: 700; margin-bottom: 10px; text-transform: capitalize; font-size: 13px; color: #555; }
.fcp-kanban-card { background: #fff; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: grab; font-size: 13px; }
.fcp-kanban-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.12); }

/* ── GDPR Consent ─────────────────────────────────────────── */
.fcp-gdpr-field { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: #f9f9f9; border-radius: 6px; border: 1px solid #e0e0e0; }
.fcp-gdpr-field input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; }
.fcp-gdpr-field label { font-size: 13px; color: #555; line-height: 1.5; }

/* ── Form Password ────────────────────────────────────────── */
.fcp-password-gate { text-align: center; padding: 32px 24px; }
.fcp-password-gate h3 { margin-bottom: 16px; color: #333; }
.fcp-password-gate input { padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; width: 240px; }
.fcp-password-gate button { margin-left: 8px; padding: 10px 20px; background: #0073aa; color: #fff; border: none; border-radius: 6px; cursor: pointer; }

/* ── OTP Field ────────────────────────────────────────────── */
.fcp-otp-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fcp-otp-input { width: 120px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 20px; letter-spacing: 6px; text-align: center; }
.fcp-otp-send-btn { padding: 8px 16px; background: #0073aa; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.fcp-otp-verified { color: #27ae60; font-weight: 600; font-size: 13px; }

/* ── Poll Field ───────────────────────────────────────────── */
.fcp-field-poll .fcp-poll-options { display: flex; flex-direction: column; gap: 8px; }
.fcp-poll-option { display: flex; align-items: center; gap: 10px; padding: var(--fcp-inp-pad, 10px 14px); border: var(--fcp-inp-bw, 1.5px) solid var(--fcp-inp-bc, var(--fcp-border)); border-radius: var(--fcp-inp-br, var(--fcp-radius)); cursor: pointer; transition: border-color .2s, background .2s; }
.fcp-poll-option:hover { border-color: var(--fcp-brand); background: #f0f8ff; }
.fcp-poll-option.fcp-poll-selected { border-color: var(--fcp-brand); background: color-mix(in srgb, var(--fcp-brand) 8%, white); }
.fcp-poll-option input[type="radio"] { accent-color: var(--fcp-brand); }
.fcp-poll-label { flex: 1; font-size: var(--fcp-inp-fs, 15px); }
.fcp-poll-bar-wrap { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.fcp-poll-bar { height: 8px; background: #6366f1; border-radius: 4px; transition: width .5s; min-width: 0; }
.fcp-poll-pct { font-size: 12px; color: #6b7280; min-width: 32px; text-align: right; }

/* ── Voice Input ──────────────────────────────────────────── */
.fcp-voice-wrap { display: flex; flex-direction: column; gap: 8px; }
.fcp-voice-textarea { width: 100%; box-sizing: border-box; }
.fcp-voice-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #4f46e5; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background .2s; }
.fcp-voice-btn:hover { background: #4338ca; }
.fcp-voice-btn.fcp-voice-listening { background: #dc2626; animation: fcp-pulse 1s infinite; }
@keyframes fcp-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── Video Introduction ───────────────────────────────────── */
.fcp-video-intro { width: 100%; }
.fcp-vi-embed { border-radius: 8px; overflow: hidden; }
.fcp-vi-placeholder { background: #f1f5f9; border-radius: 8px; padding: 40px; text-align: center; color: #9ca3af; }

/* ── Waitlist ─────────────────────────────────────────────── */
.fcp-waitlist-wrap { display: flex; flex-direction: column; gap: 8px; }
.fcp-waitlist-pos-msg { margin: 0; }

/* ── Booking Calendar ─────────────────────────────────────── */
.fcp-booking-field { }
.fcp-booking-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.fcp-booking-slot { display: block; background: #f0f4ff; border: 1px solid #c7d2fe; color: #4f46e5; cursor: pointer; border-radius: 6px; padding: 8px 4px; text-align: center; font-size: 13px; transition: background .2s, color .2s; }
.fcp-booking-slot:hover:not(.fcp-slot-full) { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.fcp-slot-full { background: #f3f4f6 !important; border-color: #e5e7eb !important; color: #9ca3af !important; cursor: not-allowed !important; text-decoration: line-through; }

/* ── Product Configurator ─────────────────────────────────── */
.fcp-configurator { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; }
.fcp-cfg-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.fcp-cfg-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.fcp-cfg-total { margin-top: 12px; font-weight: 700; font-size: 16px; padding-top: 8px; border-top: 2px solid #e5e7eb; }

/* ── T&C Checkbox ─────────────────────────────────────────── */
.fcp-field-terms .fcp-terms-wrap { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.fcp-field-terms .fcp-terms-text { font-size: 13px; color: #374151; line-height: 1.5; }
.fcp-field-terms .fcp-terms-text a { color: #4f46e5; text-decoration: underline; }

/* ── Age Verification ─────────────────────────────────────── */
.fcp-field-age-verify { background: #fefce8; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 16px; }
.fcp-field-age-verify .fcp-terms-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fcp-age-denied { color: #ef4444; font-size: 12px; margin-top: 6px; }

/* ── Payment Field ────────────────────────────────────────── */
.fcp-payment-field { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 18px; }
.fcp-payment-amount-row { margin-bottom: 14px; }
.fcp-payment-amount-wrap { display: flex; align-items: center; border: 1.5px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; }
.fcp-payment-currency { padding: 9px 12px; background: #f3f4f6; font-weight: 700; color: #374151; border-right: 1px solid #e5e7eb; font-size: 14px; flex-shrink: 0; }
.fcp-payment-amount-input { border: none !important; outline: none !important; box-shadow: none !important; flex: 1; padding: 9px 12px; font-size: 15px; }
.fcp-payment-amount-val { font-size: 22px; font-weight: 800; color: #1e40af; }
.fcp-stripe-elements-wrap { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 14px; margin-bottom: 10px; }
.fcp-stripe-card-element { min-height: 22px; }
.fcp-stripe-errors { color: #ef4444; font-size: 13px; margin-top: 8px; min-height: 18px; }
.fcp-payment-note { font-size: 12px; color: #9ca3af; margin-top: 8px; display: flex; align-items: center; gap: 5px; }
.fcp-paypal-btn-wrap { margin-bottom: 10px; min-height: 44px; }
/* ── Payment Gateway Header / Simple Text Branding ── */
.fcp-pk-gateway-header { display:flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:8px; margin-bottom:14px; }
.fcp-gw-label { font-size:20px; font-weight:800; letter-spacing:0.5px; }
.fcp-pk-stripe-header    { background:#f0f1ff; border:2px solid #635bff; }
.fcp-pk-stripe-header    .fcp-gw-label { color:#635bff; }
.fcp-pk-paypal-header    { background:#f0f6ff; border:2px solid #003087; }
.fcp-pk-paypal-header    .fcp-gw-label { color:#003087; }

/* ══════════════════════════════════════════════════════════
   FONT VARIABLES — Apply Famous Fonts to Form
══════════════════════════════════════════════════════════ */
.fcp-font-inter      { font-family: 'Inter', sans-serif !important; }
.fcp-font-poppins    { font-family: 'Poppins', sans-serif !important; }
.fcp-font-roboto     { font-family: 'Roboto', sans-serif !important; }
.fcp-font-nunito     { font-family: 'Nunito', sans-serif !important; }
.fcp-font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.fcp-font-lato       { font-family: 'Lato', sans-serif !important; }
.fcp-font-opensans   { font-family: 'Open Sans', sans-serif !important; }
.fcp-font-raleway    { font-family: 'Raleway', sans-serif !important; }
.fcp-font-dmsans     { font-family: 'DM Sans', sans-serif !important; }
.fcp-font-jakarta    { font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* Default: Inter for the whole form (can be overridden per-form) */
.fcp-form-outer {
  font-family: var(--fcp-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ══════════════════════════════════════════════════════════
   ADVANCED FORM GROUP / SECTION STYLES
══════════════════════════════════════════════════════════ */

/* ── Base Section Break ─────────────────────────────── */
.fcp-section-break {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 20px;
  padding: 0;
}

.fcp-section-break > span {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fcp-sec-text, var(--fcp-brand));
  white-space: nowrap;
  flex-shrink: 0;
}

.fcp-section-break::before,
.fcp-section-break::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, var(--fcp-sec-line, var(--fcp-brand)) 0%, transparent 100%);
  border-radius: 99px;
  opacity: 0.3;
}
.fcp-section-break::before {
  background: linear-gradient(270deg, var(--fcp-sec-line, var(--fcp-brand)) 0%, transparent 100%);
}
.fcp-section-break::after {
  background: linear-gradient(90deg, var(--fcp-sec-line, var(--fcp-brand)) 0%, transparent 100%);
}

/* ── Section Style: Line (default) ─────────────────── */
.fcp-section-style-line {
  border-bottom: 2px solid var(--fcp-sec-color, var(--fcp-brand));
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.fcp-section-style-line .fcp-sec-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--fcp-sec-text, var(--fcp-ink));
}

/* ── Section Style: Card ────────────────────────────── */
.fcp-section-style-card {
  background: var(--fcp-sec-bg, #f8faff);
  border-left: 4px solid var(--fcp-sec-color, var(--fcp-brand));
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 24px 0 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ── Section Style: Banner ──────────────────────────── */
.fcp-section-style-banner {
  background: linear-gradient(135deg, var(--fcp-sec-color, var(--fcp-brand)) 0%, var(--fcp-sec-color-end, var(--fcp-brand-dk)) 100%);
  border-radius: 10px;
  padding: 14px 20px;
  margin: 24px 0 16px;
}
.fcp-section-style-banner .fcp-sec-label,
.fcp-section-style-banner .fcp-sec-desc {
  color: #fff !important;
}

/* ── Section Style: Minimal ─────────────────────────── */
.fcp-section-style-minimal {
  border-top: 1px solid var(--fcp-border);
  padding-top: 18px;
  margin-top: 24px;
  margin-bottom: 12px;
}

/* ── Section Style: Pill ────────────────────────────── */
.fcp-section-style-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fcp-sec-bg, #eef2ff);
  color: var(--fcp-sec-text, var(--fcp-brand));
  border-radius: 999px;
  padding: 6px 18px;
  margin: 20px 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  border: 1.5px solid var(--fcp-sec-color, var(--fcp-brand));
}

/* ── Section Style: Shadow Box ──────────────────────── */
.fcp-section-style-shadow {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 24px 0 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

/* ── Section Icon ───────────────────────────────────── */
.fcp-sec-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--fcp-sec-icon-bg, #eef2ff);
  color: var(--fcp-sec-color, var(--fcp-brand));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Section Label ──────────────────────────────────── */
.fcp-sec-label {
  font-size: var(--fcp-sec-fs, 16px);
  font-weight: 700;
  color: var(--fcp-sec-text, var(--fcp-ink));
  line-height: 1.3;
  margin: 0;
}

/* ── Section Description ────────────────────────────── */
.fcp-sec-desc {
  font-size: 13px;
  color: var(--fcp-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Section Collapse Toggle ────────────────────────── */
.fcp-sec-toggle {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fcp-muted);
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  line-height: 1;
}
.fcp-sec-toggle:hover { background: rgba(0,0,0,.06); color: var(--fcp-brand); }

.fcp-sec-body {
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.fcp-sec-body.fcp-sec-collapsed {
  max-height: 0 !important;
  opacity: 0;
}

/* ── Section Header (inner wrapper) ────────────────── */
.fcp-sec-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* ── Section Line Divider (between label and line) ── */
.fcp-sec-divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.fcp-sec-divider-line {
  flex: 1;
  height: 1.5px;
  background: var(--fcp-sec-color, var(--fcp-border));
  border-radius: 99px;
  opacity: 0.4;
}

/* ── Numbered Section Badge ─────────────────────────── */
.fcp-sec-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fcp-sec-color, var(--fcp-brand));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Progress Indicator in Section ──────────────────── */
.fcp-sec-progress {
  height: 3px;
  background: var(--fcp-sec-color, var(--fcp-brand));
  border-radius: 99px;
  margin-top: 8px;
  width: 0;
  transition: width .4s ease;
}

/* ── Section: Full Wrapper ──────────────────────────── */
.fcp-section-group {
  margin: 20px 0 8px;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s;
}
.fcp-section-group:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }

/* ── Section Animations ─────────────────────────────── */
@keyframes fcp-sec-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fcp-section-break,
.fcp-section-group {
  animation: fcp-sec-slide-in .3s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── RTL Section Support ────────────────────────────── */
[dir="rtl"] .fcp-section-style-card {
  border-left: none;
  border-right: 4px solid var(--fcp-sec-color, var(--fcp-brand));
  border-radius: 10px 0 0 10px;
}
[dir="rtl"] .fcp-sec-toggle { margin-left: 0; margin-right: auto; }

/* ── Dark Mode Section ──────────────────────────────── */
.fcp-form-dark .fcp-section-style-card { background: rgba(255,255,255,.05); }
.fcp-form-dark .fcp-section-style-shadow { background: #1e2030; border-color: rgba(255,255,255,.1); }
.fcp-form-dark .fcp-sec-label { color: #e2e8f0; }
.fcp-form-dark .fcp-sec-desc  { color: #94a3b8; }
.fcp-form-dark .fcp-section-break > span { color: #818cf8; }

/* ── Responsive Section ─────────────────────────────── */
@media (max-width: 600px) {
  .fcp-section-style-banner { padding: 12px 14px; border-radius: 8px; }
  .fcp-sec-label { font-size: 14px; }
  .fcp-section-style-card { padding: 10px 14px; }
}


/* ── Text Size Standardization ─────────────────────────────── */
/* Normalize all label/input/field text to consistent sizes    */
.fcp-form-wrap,
.fcp-form-outer {
  font-size: 15px;
}
.fcp-label,
.fcp-field > label,
.fcp-field-map label,
.fcp-field-signature label,
.fcp-field-address label,
.fcp-field-image-choice label {
  font-size: 14px;
  font-weight: 600;
}
.fcp-input,
.fcp-select,
.fcp-textarea,
select.fcp-input,
textarea.fcp-input {
  font-size: 15px;
}
.fcp-description,
.fcp-field-error,
.fcp-map-coords,
.fcp-file-preview,
.fcp-tip,
small {
  font-size: 12px;
}
.fcp-btn,
.fcp-next-btn,
.fcp-prev-btn,
.fcp-submit-btn {
  font-size: 15px;
}
.fcp-step-label {
  font-size: 12px;
}
.fcp-required,
.fcp-req {
  font-size: 14px;
}
/* Section headings */
.fcp-section-label {
  font-size: 14px;
  font-weight: 700;
}
/* Choice / radio / checkbox labels */
.fcp-choice-lbl,
.fcp-choice-item label {
  font-size: var(--fcp-inp-fs, 15px);
}
/* Normalize icon sizes inside fields */
.fcp-field i.fa {
  font-size: 14px;
}
.fcp-field-icon i.fa,
.fcp-field-icon-fa {
  font-size: 15px;
}