/* ProForm Frontend Styles */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

.pf-form-wrap *, .pf-form-wrap *::before, .pf-form-wrap *::after { box-sizing: border-box; }

.pf-form-wrap {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 100%;
  margin: 0 auto;
}

/* ── DARK THEME (default) ─────────────────────────────── */
.pf-theme-dark .pf-form {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

.pf-theme-dark .pf-field label {
  color: #e2e8f0;
}

.pf-theme-dark input,
.pf-theme-dark textarea,
.pf-theme-dark select {
  background: #161b22 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #cbd5e1 !important;
}

.pf-theme-dark input::placeholder,
.pf-theme-dark textarea::placeholder { color: rgba(203,213,225,.3) !important; }

.pf-theme-dark input:focus,
.pf-theme-dark textarea:focus,
.pf-theme-dark select:focus {
  border-color: rgba(99,102,241,.6) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
}

.pf-theme-dark .pf-radio-label span,
.pf-theme-dark .pf-checkbox-label span { color: #cbd5e1; }

.pf-theme-dark .pf-submit {
  background: linear-gradient(135deg,#5a67f6 0%,#6366f1 100%);
}

/* ── LIGHT THEME ──────────────────────────────────────── */
.pf-theme-light .pf-form {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
}
.pf-theme-light .pf-field label { color: oklch(45% .03 260); }
.pf-theme-light input,
.pf-theme-light textarea,
.pf-theme-light select {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}
.pf-theme-light input:focus,
.pf-theme-light textarea:focus,
.pf-theme-light select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
.pf-theme-light .pf-submit {
  background: #7a5c89 !important;
}

/* ── MINIMAL THEME ────────────────────────────────────── */
.pf-theme-minimal .pf-form { background: transparent; padding: 0; }
.pf-theme-minimal .pf-field label { color: #475569; }
.pf-theme-minimal input,
.pf-theme-minimal textarea,
.pf-theme-minimal select {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-radius: 0 !important;
  color: #1e293b !important;
  padding-left: 0 !important;
}
.pf-theme-minimal input:focus,
.pf-theme-minimal textarea:focus,
.pf-theme-minimal select:focus {
  border-bottom-color: #6366f1 !important;
  box-shadow: none !important;
}
.pf-theme-minimal .pf-submit {
  background: #1e293b;
  border-radius: 8px;
}

/* ── FIELDS ───────────────────────────────────────────── */
.pf-hp { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.pf-fields-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.pf-field { width: 100%; }
.pf-field--full  { width: 100%; position: relative;}
.pf-field--half  { width: calc(50% - 8px); }
@media(max-width:520px){ .pf-field--half { width:100%; } }

.pf-field[style*="display: none"],
.pf-field.pf-hidden { display: none !important; }

.pf-field label {
  display: block;
  font-family: 'Manrope', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 7px;
  letter-spacing: .02em;
}

.pf-required { color: #ef4444; margin-left: 2px; }

.pf-field input[type=text],
.pf-field input[type=email],
.pf-field input[type=tel],
.pf-field input[type=number],
.pf-field input[type=url],
.pf-field textarea,
.pf-field select {
  width: 100%;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}

.pf-field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.pf-select-wrap { position: relative; }
.pf-select-wrap svg {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; poManrope-events: none; opacity: .45;
  color: inherit;
}
.pf-select-wrap select { padding-right: 40px; cursor: poManrope; }

/* Radio & Checkbox */
.pf-radio-group,
.pf-checkbox-group { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

/* Stage 4: composite fields (Name / Address) */
.pf-name-group { display: flex; flex-wrap: wrap; gap: 16px; }
.pf-name-group .pf-sub-label { flex: 1 1 120px; }
.pf-address-group { display: flex; flex-wrap: wrap; gap: 16px; }
.pf-address-group .pf-sub-label { flex: 1 1 140px; }
.pf-sub-label {
  display: flex !important; flex-direction: column !important; gap: 6px;
  font-size: 12px !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: normal !important;
}

/* ── Multi-step (Stage 6) ─────────────────────────────── */
.pf-step[hidden] { display: none !important; }
.pf-step-head { margin-bottom: 16px; }
.pf-step-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 6px; outline: none; }
.pf-theme-dark .pf-step-title { color: #e2e8f0; }
.pf-theme-light .pf-step-title, .pf-theme-minimal .pf-step-title { color: #1e293b; }
.pf-step-desc { font-size: 13px; margin: 0; opacity: .7; }
.pf-progress { margin-bottom: 18px; }
.pf-steps-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pf-steps-list li {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 20px; background: rgba(148,163,184,.15); color: inherit; opacity: .75;
}
.pf-steps-list li.pf-step-current { background: #6366f1; color: #fff; opacity: 1; }
.pf-steps-list li.pf-step-done { background: rgba(16,185,129,.2); opacity: 1; }
.pf-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px;
  background: rgba(0,0,0,.18); flex-shrink: 0;
}
.pf-steps-list li.pf-step-current .pf-step-num { background: rgba(255,255,255,.25); }
.pf-progress-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; opacity: .8; }
.pf-progress-bar { height: 8px; border-radius: 4px; background: rgba(148,163,184,.2); overflow: hidden; }
.pf-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg,#6366f1,#8b5cf6); border-radius: 4px; transition: width .3s; }
.pf-step-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.pf-step-nav .pf-btn { border: 1px solid rgba(148,163,184,.35); background: transparent; border-radius: 50px; padding: 12px 26px; font-weight: 600; font-size: .875rem; cursor: poManrope; color: inherit; }
.pf-step-nav .pf-btn--primary { background: linear-gradient(135deg,#5a67f6 0%,#6366f1 100%); border-color: transparent; color: #fff; }
.pf-step-nav .pf-next-btn { margin-left: auto; }
.pf-no-steps { text-align: center; padding: 24px; font-size: 14px; opacity: .8; }
@media(max-width:520px){
  .pf-steps-list li { font-size: 11px; padding: 5px 10px; }
  .pf-step-nav { flex-direction: column-reverse; }
  .pf-step-nav .pf-next-btn { margin-left: 0; }
}
.pf-field input[type=date],
.pf-field input[type=time],
.pf-field input[type=datetime-local],
.pf-field input[type=file] {
  width: 100%;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.pf-radio-label,
.pf-checkbox-label {
  display: flex; align-items: center; gap: 10px; cursor: poManrope; font-size: 14px;
}

.pf-radio-label input[type=radio],
.pf-checkbox-label input[type=checkbox] {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: #6366f1; cursor: poManrope;
  /* Override global styles */
  border-radius: 50% !important; padding: 0 !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important;
}

.pf-field.pf-invalid input,
.pf-field.pf-invalid textarea,
.pf-field.pf-invalid select {
  border-color: rgba(239,68,68,.6) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}

.pf-error {
  display: block; color: #f87171; font-size: 12px; margin-top: 5px; min-height: 14px;position: absolute;top: -4px;right: 0;
}

/* ── Submit button ────────────────────────────────────── */
.pf-submit {
  width: 100%; border: none; border-radius: 50px; padding: 15px 24px;
  color: #fff; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: .02em; cursor: poManrope; display: flex; align-items: center;
  justify-content: center; gap: 10px; margin-top: 15px;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  cursor: pointer;
}
.pf-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99,102,241,.4); }
.pf-submit:active { transform: translateY(0); }
.pf-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.pf-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
.pf-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: pf-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-submit.pf-loading .pf-spinner { display: inline-block; }
.pf-submit.pf-loading .pf-btn-icon { display: none; }

/* ── Response ─────────────────────────────────────────── */
.pf-response {
  margin-top: 14px; border-radius: 10px; font-size: 14px; text-align: center;
  overflow: hidden; max-height: 0; transition: max-height .4s, padding .3s;
}
.pf-response.pf-visible { max-height: 120px; padding: 12px 16px; }
.pf-response.pf-success {background: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    border-top: 2px solid green;
    border-radius: 0;}
.pf-response.pf-failure { background: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    border-top: 2px solid #ef4444;
    border-radius: 0;}

.pf-error-text { color: #ef4444; font-size: 13px; }

/* ── Layout fields: Header & Paragraph ───────────────── */
.pf-layout-field { padding: 0; }
.pf-form-heading {
  font-family: 'Poppins', sans-serif;
  margin-bottom: -10px;
  font-weight: 700;
  color: inherit;
  line-height: 100%;
}
.pf-theme-dark  .pf-form-heading { color: #e2e8f0; }
.pf-theme-light .pf-form-heading { color: oklch(28% .12 260); }
.pf-theme-minimal .pf-form-heading { color: #1e293b; }
h2.pf-form-heading { font-size: 24px; }
h3.pf-form-heading { font-size: 16px; }
h4.pf-form-heading { font-size: 14px; }

.pf-form-paragraph {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 6px;
}
.pf-theme-dark  .pf-form-paragraph { color: rgba(203,213,225,.7); }
.pf-theme-light .pf-form-paragraph { color: #64748b; }
.pf-theme-minimal .pf-form-paragraph { color: #475569; }

/* ── Privacy Consent field ───────────────────────────── */
.pf-consent-label {
  text-transform: unset !important;
  letter-spacing: unset !important;
  font-weight: unset !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  cursor: poManrope;
  font-size: 13px;
  line-height: 1.5;
}
.pf-consent-label input[type=checkbox] {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #6366f1;
  cursor: poManrope;
  border-radius: 3px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-block !important;
}
.pf-consent-text { display: inline; }
.pf-consent-text a {
  color: #6366f1;
  text-decoration: underline;
}
.pf-consent-text a:hover { opacity: .8; }
.pf-theme-dark  .pf-consent-text { color: rgba(203,213,225,.8); }
.pf-theme-light .pf-consent-text { color: #475569; }
.pf-theme-minimal .pf-consent-text { color: #475569; }

/* Consent invalid state — red border on checkbox only, no text */
.pf-consent-label input[type=checkbox].pf-consent-invalid {
  outline: 2px solid #ef444438 !important;
  outline-offset: 1px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
/* Booking slots (Stage 7) */
.pf-slot-list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.pf-slot-list .pf-radio-label {
  border: 1px solid rgba(148,163,184,.4); border-radius: 10px; padding: 8px 14px;
}
.pf-slot-list .pf-radio-label:has(input:checked) { border-color: #6366f1; background: rgba(99,102,241,.12); }
.pf-slot-hint { font-size: 12px; opacity: .7; margin: 0; }
.pf-form-footer { margin-top: 6px; }
@media(max-width:520px){
  .pf-slot-list .pf-radio-label { flex: 1 1 45%; justify-content: center; }
}

/* Booking time dropdown: reuse select styling without changing shared fields. */
.pf-booking-time-control { min-width:0; }
.pf-booking-time-control .pf-booking-time-select { min-width:0; max-width:100%; cursor:pointer; }
.pf-booking-time-control .pf-select-wrap svg { pointer-events:none; }
.pf-booking-time-control .pf-slot-hint { margin-top:6px; }