/* ============================================================
   VenForms - Safelify Brand Theme v2
   Brand: #E30613 | Dark: #111827 | Font: Plus Jakarta Sans + Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* === Form Container === */
.venforms-form {
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}
.venforms-form * { box-sizing: border-box; }

.venforms-container {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
  padding: 28px;
  margin-bottom: 20px;
}

/* === Help Bar === */
.venforms-help-section {
  background: linear-gradient(135deg, #fef2f2, #fff5f5);
  border-radius: 16px;
  padding: 16px 22px;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.venforms-help-section p {
  font-size: 14px; color: #991b1b; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.venforms-help-phone {
  font-size: 18px; font-weight: 700; color: #E30613;
  text-decoration: none; white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}

/* === Typography === */
.venforms-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 36px; font-weight: 800; color: #111827;
  margin-bottom: 8px; line-height: 1.2;
}
.venforms-description {
  font-size: 16px; color: #6b7280;
  margin-bottom: 24px; line-height: 1.6;
}
.venforms-label {
  display: block; font-size: 14px; font-weight: 600; color: #374151;
  margin-bottom: 8px; font-family: 'Inter', sans-serif;
}

/* === Section Headers === */
.venforms-section-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.venforms-section-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.3s;
}
.venforms-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px; font-weight: 700; color: #111827; margin: 0;
}
.venforms-required { color: #E30613; }

/* Horizontal radio / checkbox groups */
.venforms-radio-horizontal .venforms-field-option,
.venforms-checkbox-horizontal .venforms-field-option {
  display: inline-flex; align-items: center; gap: 8px;
  margin-right: 20px; margin-bottom: 8px;
}
.venforms-radio-horizontal .venforms-field-option input[type="radio"],
.venforms-checkbox-horizontal .venforms-field-option input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #E30613; flex-shrink: 0;
}

/* Keep native choices horizontal without allowing theme input rules to stretch
   the radio across the row or place it over a neighbouring label. */
.venforms-radio-group,
.venforms-radio-grid { min-width: 0; }
.venforms-radio-group .venforms-choice-label,
.venforms-radio-grid .venforms-choice-label {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 10px; min-width: 0; margin: 0; cursor: pointer; line-height: 1.4;
}
.venforms-radio-group .venforms-choice-input,
.venforms-radio-grid .venforms-choice-input {
  position: static !important; display: inline-block !important;
  width: 20px !important; height: 20px !important; min-width: 20px !important;
  max-width: 20px !important; flex: 0 0 20px !important;
  margin: 0 !important; padding: 0 !important; opacity: 1 !important;
  pointer-events: auto !important; accent-color: #E30613;
}
.venforms-radio-group .venforms-choice-label > span,
.venforms-radio-grid .venforms-choice-label > span {
  display: block; min-width: 0; position: static; transform: none;
}

/* Dynamic traveler details are stored in field 50, but edited through the
   accessible repeatable guest cards generated by the frontend script. */
/* The host textarea is the store the guest cards serialise into - it must never be
   visible, or the raw JSON payload shows up on the step. VenForms wraps the control
   in `.venforms-field`, so the textarea is a grandchild of the group: the old
   `> textarea` child selector never matched and the JSON rendered in plain view.
   The generated cards are appended directly to the host, so hiding the wrapper is
   safe - it removes the label, the textarea and its validation chrome together. */
.venforms-guest-repeater-host > .venforms-section-header,
.venforms-guest-repeater-host > .venforms-label,
.venforms-guest-repeater-host > .venforms-field,
.venforms-guest-repeater-host textarea { display: none !important; }
.venforms-guest-repeater { display: grid; gap: 16px; }
.venforms-guest-card {
  padding: 18px; border: 1px solid #e5e7eb; border-radius: 14px;
  background: #fff;
}
.venforms-guest-card h4 { margin: 0 0 14px; font-size: 16px; color: #111827; }
.venforms-guest-fields {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.venforms-guest-fields label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: #475467; }
.venforms-guest-fields input {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 10px; background: #f9fafb;
}
.venforms-guest-repeater-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 4px;
}
.venforms-guest-repeater-note { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
/* A solo booking has no companions to describe; hide the block rather than
   leaving an empty titled panel on the step. */
.venforms-guest-repeater-host.venforms-guest-repeater-empty { display: none !important; }
@media (max-width: 720px) {
  .venforms-guest-fields { grid-template-columns: 1fr; }
}

/* Helper text sits between the label and the control, where it is read before
   the field is filled in rather than after. */
.venforms-field-description {
  font-size: 13px; line-height: 1.5; color: #6b7280;
  margin: -4px 0 10px;
}

/* === Standard Inputs === */
.venforms-input, .venforms-textarea, .venforms-select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: 15px; font-family: 'Inter', sans-serif;
  color: #111827; background: #f9fafb;
  transition: all 0.2s ease; outline: none;
}
.venforms-input:focus, .venforms-textarea:focus, .venforms-select:focus {
  border-color: #E30613; background: #fff;
  box-shadow: 0 0 0 4px rgba(227,6,19,0.08);
}
.venforms-textarea { resize: vertical; min-height: 100px; }
.venforms-select {
  appearance: none;
  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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 44px; cursor: pointer;
}

/* Input with Icon */
.venforms-input-icon-wrapper { position: relative; }
.venforms-input-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); width: 20px; height: 20px;
  color: #9ca3af; pointer-events: none;
}
.venforms-input-icon-wrapper .venforms-input { padding-left: 48px; }

/* === Card Selector — Modern Redesign === */
.venforms-card-selector-grid {
  display: grid; gap: 16px;
}
.venforms-card {
  border: 2px solid #e5e7eb; border-radius: 16px;
  padding: 14px; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff; position: relative;
  display: flex; flex-direction: column;
  min-height: 160px;
}
.venforms-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.venforms-card:focus-visible,
.venforms-toggle-btn:focus-visible {
    outline: 3px solid rgba(227, 6, 19, 0.35);
    outline-offset: 3px;
}
.venforms-card-selected {
  border-color: #E30613 !important;
  box-shadow: 0 12px 32px rgba(227,6,19,0.12);
  transform: translateY(-2px) scale(1.01);
  background: linear-gradient(135deg, #fff 60%, #fef2f2);
}
.venforms-card-badge {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #E30613, #ff4d5a);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 14px; border-radius: 999px;
  white-space: nowrap; z-index: 10;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.venforms-card-icon-wrapper { margin-bottom: 12px; }
.venforms-card-icon {
  display: inline-flex; width: 52px; height: 52px;
  border-radius: 14px; align-items: center; justify-content: center;
  font-size: 24px; transition: all 0.3s;
}
.venforms-card-icon-default { background: #f3f4f6; color: #9ca3af; }
.venforms-card-icon-selected {
  background: linear-gradient(135deg, #E30613, #ff4d5a);
  color: #fff; box-shadow: 0 4px 12px rgba(227,6,19,0.25);
}
.venforms-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700; margin: 0 0 8px;
  transition: color 0.3s; line-height: 1.3;
}
.venforms-card-title-selected { color: #E30613; }
.venforms-card-title-default { color: #111827; }
.venforms-card-description {
  font-size: 13px; color: #6b7280; margin-bottom: 12px;
  line-height: 1.5; flex: 1;
}
.venforms-card-features { margin-top: auto; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.venforms-card-feature {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; font-size: 13px; color: #374151;
}
.venforms-card-feature:last-child { margin-bottom: 0; }
.venforms-card-feature-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.venforms-card-price {
  margin-top: 10px; font-size: 20px; font-weight: 800;
  color: #E30613; font-family: 'Plus Jakarta Sans', sans-serif;
}
.venforms-card-price::before { content: '$'; font-size: 14px; }

/* === Toggle Button Group — Polished === */
.venforms-toggle-group-grid { display: grid; gap: 12px; }
.venforms-toggle-btn {
  padding: 16px 20px; border-radius: 14px;
  border: 2px solid #e5e7eb; background: #fff;
  cursor: pointer; transition: all 0.2s ease; text-align: left;
  position: relative;
}
.venforms-toggle-btn:hover {
  border-color: #fca5a5; transform: translateY(-1px);
}
.venforms-toggle-btn-selected {
  border-color: #E30613 !important;
  background: #fef2f2; box-shadow: 0 4px 12px rgba(227,6,19,0.08);
}
.venforms-toggle-btn-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 15px; color: #111827;
}
.venforms-toggle-btn-subtitle { font-size: 13px; color: #6b7280; margin-top: 2px; }
.venforms-toggle-btn-price {
  font-size: 13px; font-weight: 600; margin-top: 4px;
}
.venforms-toggle-btn-price-selected { color: #E30613; }
.venforms-toggle-btn-price-default { color: #9ca3af; }

/* === Toggle Boolean (Switch) — Refined === */
.venforms-toggle-boolean {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-radius: 14px;
  border: 2px solid #e5e7eb; transition: all 0.25s; cursor: pointer;
}
.venforms-toggle-boolean:hover { border-color: #fca5a5; }
.venforms-toggle-boolean.checked {
  border-color: #E30613; background: #fef2f2;
  box-shadow: 0 4px 12px rgba(227,6,19,0.06);
}
.venforms-switch {
  position: relative; display: inline-block;
  width: 48px; height: 26px; flex-shrink: 0;
}
.venforms-switch input { opacity: 0; width: 0; height: 0; }
.venforms-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: #d1d5db; border-radius: 26px; transition: 0.3s;
}
.venforms-slider::before {
  position: absolute; content: ""; height: 20px; width: 20px;
  border-radius: 50%; background: #fff; transition: 0.3s;
  top: 3px; left: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.venforms-switch input:checked + .venforms-slider { background: #E30613; }
.venforms-switch input:checked + .venforms-slider::before { transform: translateX(22px); }

/* === File Upload Grid === */
.venforms-file-upload-previews {
  display: grid; gap: 12px; margin-bottom: 12px;
}
.venforms-file-upload-dropzone {
  width: 100%; min-height: 112px; padding: 20px; color: inherit; font: inherit;
  aspect-ratio: auto; background: #f9fafb;
  border: 2px dashed #d1d5db; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; cursor: pointer; transition: all 0.2s;
}
.venforms-file-upload-dropzone:hover {
  border-color: #E30613; background: #fef2f2; transform: scale(1.02);
}

/* === Price Calculator — Dark Premium === */
.venforms-price-calculator {
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #fff; border-radius: 16px; padding: 20px 24px;
  position: relative; overflow: hidden;
}
.venforms-price-calculator::before {
  content: ''; position: absolute; top: -50%; right: -50%;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(227,6,19,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.venforms-price-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: #9ca3af; margin-bottom: 4px; font-weight: 600;
}
.venforms-price-total {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 42px; font-weight: 800; margin-bottom: 16px;
}
.venforms-vat-row {
  font-size: 14px; color: #9ca3af;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px; margin-top: 4px;
}
.venforms-vat-row-inner {
  display: flex; justify-content: space-between; margin-bottom: 6px;
}
.venforms-grand-total-row {
  display: flex; justify-content: space-between;
  font-weight: 700; font-size: 16px;
}
.venforms-grand-total { font-size: 20px; }
.venforms-grand-total-amount { color: #E30613; }

/* === Multi-Step Progress — Complete Redesign === */
.venforms-multi-step { margin-bottom: 24px; }
.venforms-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.venforms-progress-step-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: #111827;
  letter-spacing: 0.5px;
}
.venforms-progress-percent {
  font-size: 13px; color: #6b7280; font-weight: 500;
}

.venforms-progress-connector {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; padding: 8px 0;
}
.venforms-connector-line-bg {
  position: absolute; top: 50%; left: 30px; right: 30px;
  height: 3px; background: #e5e7eb; border-radius: 3px;
  transform: translateY(-50%); z-index: 0;
}
.venforms-connector-line-fill {
  position: absolute; top: 50%; left: 30px;
  height: 3px; background: linear-gradient(90deg, #E30613, #ff4d5a);
  border-radius: 3px; transform: translateY(-50%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.venforms-connector-step {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 2; gap: 8px;
}
.venforms-step-circle {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 16px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 3px solid #e5e7eb; background: #fff; color: #9ca3af;
}
.venforms-connector-step.active .venforms-step-circle {
  border-color: #E30613; background: #E30613; color: #fff;
  box-shadow: 0 4px 12px rgba(227,6,19,0.3);
  transform: scale(1.1);
}
.venforms-connector-step.done .venforms-step-circle {
  border-color: #16a34a; background: #16a34a; color: #fff;
}
.venforms-step-number { line-height: 1; }
.venforms-step-icon { width: 20px; height: 20px; }
.venforms-step-label-text {
  font-size: 11px; font-weight: 600; color: #9ca3af;
  text-align: center; max-width: 80px;
  font-family: 'Inter', sans-serif;
}
.venforms-connector-step.active .venforms-step-label-text { color: #E30613; font-weight: 700; }
.venforms-connector-step.done .venforms-step-label-text { color: #16a34a; }

/* === Step Content Transitions === */
.venforms-step-content {
  animation: venforms-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.venforms-step-hidden { display: none !important; }
.venforms-step-active {
  display: block !important;
  animation: venforms-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes venforms-slide-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Step Navigation === */
.venforms-step-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid #f3f4f6;
}
.venforms-nav-right {
  display: flex; align-items: center; gap: 16px;
}
.venforms-nav-total {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 8px 16px; background: #f9fafb; border-radius: 10px;
}
.venforms-nav-total-label {
  font-size: 10px; color: #9ca3af; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600;
}
.venforms-nav-total-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px; font-weight: 800; color: #E30613; line-height: 1;
}

/* === Buttons === */
.venforms-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; border: none;
  cursor: pointer; transition: all 0.2s ease;
  text-decoration: none; line-height: 1;
}
.venforms-btn-primary {
  background: #E30613; color: #fff;
  box-shadow: 0 4px 12px rgba(227,6,19,0.2);
}
.venforms-btn-primary:hover {
  background: #b5000b; transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(227,6,19,0.25);
}
.venforms-btn-primary:active { transform: scale(0.97); }
.venforms-btn-primary:disabled {
  background: #e5e7eb; color: #9ca3af;
  cursor: not-allowed; transform: none; box-shadow: none;
}
.venforms-btn-secondary {
  background: #f3f4f6; color: #374151;
}
.venforms-btn-secondary:hover { background: #e5e7eb; }
.venforms-btn-ghost { background: transparent; color: #6b7280; }
.venforms-btn-ghost:hover { color: #E30613; }

/* === Field Group Spacing === */
.venforms-field-group { margin-bottom: 20px; position: relative; }

/* === Sidebar Redesign === */
.venforms-sidebar { margin-top: 24px; }
.venforms-sidebar-dark {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 16px; padding: 24px;
  color: #fff;
}
.venforms-sidebar-estimate-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #9ca3af; margin-bottom: 4px;
}
.venforms-sidebar-total {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 36px; font-weight: 800; margin-bottom: 20px;
}
.venforms-sidebar-vat-note {
  margin: -4px 0 18px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.venforms-nav-total-vat {
  margin-top: 3px;
  line-height: 1.2;
}
.venforms-sidebar-row {
  display: flex; justify-content: space-between;
  font-size: 14px; color: #d1d5db; margin-bottom: 8px;
}
.venforms-sidebar-divider {
  height: 1px; background: rgba(255,255,255,0.1);
  margin: 12px 0;
}
.venforms-sidebar-features { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.venforms-sidebar-status {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af;
}
.venforms-sidebar-status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #16a34a;
}
.venforms-sidebar-white {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 16px; padding: 24px;
}

/* === Currency switcher === */
.venforms-currency-switcher {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.venforms-currency-option {
  padding: 8px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 500;
  color: #374151; font-family: inherit; transition: all 0.15s;
}
.venforms-currency-option:hover { border-color: #E30613; }
.venforms-currency-option.is-selected {
  border-color: #E30613; background: #fef2f2; color: #E30613; font-weight: 700;
}

/* === Payment gateway picker === */
.venforms-payment-gateway {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.venforms-gateway-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 12px; border: 1.5px solid #e5e7eb; border-radius: 12px;
  background: #fff; cursor: pointer; font-family: inherit; transition: all 0.15s;
  text-align: center;
}
.venforms-gateway-option:hover { border-color: #E30613; box-shadow: 0 4px 12px rgba(227,6,19,0.08); }
.venforms-gateway-option.is-selected {
  border-color: #E30613; background: #fef2f2; box-shadow: 0 4px 16px rgba(227,6,19,0.12);
}
.venforms-gateway-ico { font-size: 20px; }
.venforms-gateway-label { font-size: 13px; font-weight: 600; color: #111827; }
.venforms-gateway-badge {
  font-size: 10px; font-weight: 700; color: #E30613; background: #fff;
  border: 1px solid #fecaca; border-radius: 999px; padding: 2px 8px;
}
.venforms-payment-summary {
  background: #f8f9fb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px;
}
.venforms-ps-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 14px; color: #6b7280;
}
.venforms-ps-total {
  border-top: 1px solid #e5e7eb; margin-top: 4px; padding-top: 12px;
  font-weight: 700; color: #111827; font-size: 16px;
}
.venforms-ps-grand { color: #E30613; font-weight: 800; }
.venforms-ps-currency-note { font-weight: 500; color: #9ca3af; font-size: 11px; }
.venforms-price-currency-code { font-weight: 500; color: #9ca3af; font-size: 12px; }
.venforms-has-error {
  outline: 2px solid rgba(227,6,19,0.35); outline-offset: 2px; border-radius: 12px;
}
.venforms-step-hidden { display: none !important; }
.venforms-step-active { display: block; }
.venforms-field-group { max-width: 100%; min-width: 0; overflow: hidden; }
.venforms-card-selector-grid { max-width: 100%; }
.venforms-form, .venforms-container { max-width: 100%; box-sizing: border-box; }
.venforms-form *, .venforms-form *::before, .venforms-form *::after { box-sizing: border-box; }

/* === Grid Layouts / Column rows === */
.venforms-layout {
  width: 100%; max-width: 100%; margin-bottom: 20px;
  box-sizing: border-box; min-width: 0;
}
.venforms-layout *,
.venforms-layout *::before,
.venforms-layout *::after { box-sizing: border-box; }
.venforms-layout-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 8px;
}
.venforms-layout-desc { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
.venforms-layout-columns {
  display: flex; flex-wrap: wrap; gap: 16px;
  width: 100%; max-width: 100%; min-width: 0;
}
.venforms-layout-column {
  min-width: 0; flex: 1 1 0%;
}
.venforms-layout-column > .venforms-field-group:last-child { margin-bottom: 0; }
.venforms-col-half { display: inline-block; width: calc(50% - 8px); vertical-align: top; margin-right: 16px; }
.venforms-col-half:nth-child(even) { margin-right: 0; }
.venforms-col-third { display: inline-block; width: calc(33.333% - 11px); vertical-align: top; margin-right: 16px; }
.venforms-col-two-thirds { display: inline-block; width: calc(66.666% - 8px); vertical-align: top; margin-right: 16px; }

/* Column rows inside a multi-step body.
   The inline-block rules above are whitespace-sensitive: two calc(50% - 8px) boxes
   plus a 16px margin plus the newline between the divs exceeds 100%, so the second
   field wraps onto its own line. Flex lays the same markup out without counting
   whitespace text nodes, and drops the odd/even margin bookkeeping entirely. */
.venforms-step-content.venforms-step-active:not(.venforms-step-hidden) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 16px;
  align-items: flex-start;
}
.venforms-step-content > * { flex: 0 0 100%; min-width: 0; }
.venforms-step-content > .venforms-col-half { flex: 0 0 calc(50% - 8px); margin-right: 0; }
.venforms-step-content > .venforms-col-third { flex: 0 0 calc(33.333% - 11px); margin-right: 0; }
.venforms-step-content > .venforms-col-two-thirds { flex: 0 0 calc(66.666% - 8px); margin-right: 0; }

/* Steps carrying a sidebar are laid out by the theme (main-v2.css) as a 2fr/1fr grid
   with every field pinned to `grid-column: 1`, which forces one field per row. The
   theme also raises the gap to 24px, so two calc(50% - 8px) columns total 788px in a
   780px container and wrap. The theme's selectors have the same specificity as the
   ones above and its stylesheet loads later, so these have to be explicit to win.
   Columns are sized with a 12px inset to stay clear of whichever gap applies. */
.venforms-step-content.venforms-step-active.has-sidebar,
.venforms-step-content.venforms-step-active:not(.venforms-step-hidden) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 16px !important;
  align-items: flex-start;
}
.venforms-step-content.venforms-step-active > .venforms-field-group,
.venforms-step-content.venforms-step-active > .venforms-sidebar {
  grid-column: auto !important;
}
.venforms-step-content.venforms-step-active > .venforms-col-half {
  flex: 0 0 calc(50% - 12px) !important;
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
  margin-right: 0 !important;
}
/* The sidebar is no longer a grid track here, so give it its own full-width row. */
.venforms-step-content.venforms-step-active > .venforms-sidebar { flex: 0 0 100%; width: 100%; }

/* === Notifications === */
.venforms-success { text-align: center; padding: 48px; }
.venforms-success-icon {
  width: 80px; height: 80px; background: #dcfce7;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 24px;
}
.venforms-success-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px; font-weight: 800; color: #111827; margin-bottom: 12px;
}
.venforms-success-text { font-size: 16px; color: #6b7280; }

/* === Error States === */
.venforms-error { color: #dc2626; font-size: 13px; margin-top: 4px; }
.venforms-input.error, .venforms-textarea.error, .venforms-select.error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}

/* === Loading === */
.venforms-spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid #e5e7eb; border-top-color: #E30613;
  border-radius: 50%; animation: venforms-spin 0.6s linear infinite;
}
@keyframes venforms-spin { to { transform: rotate(360deg); } }

/* === Badge === */
.venforms-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; background: #fef2f2;
  border: 1px solid #fecaca; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #E30613;
}

/* === Divider === */
.venforms-divider-field { margin: 8px 0 24px; }
.venforms-divider-line { border: none; border-top: 1px solid #e5e7eb; margin: 0 0 16px; }
.venforms-divider-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 4px;
}
.venforms-divider-desc { font-size: 14px; color: #6b7280; }

/* === Conditional Section === */
.venforms-conditional-section {
  border: 2px dashed #fecaca; border-radius: 12px;
  padding: 16px; background: #fef2f2;
}

.venforms-choice-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; color: #374151;
}
.venforms-choice-input {
  width: 18px; height: 18px; accent-color: #E30613; flex-shrink: 0;
}
.venforms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 22px; border-radius: 12px; border: none;
  font-size: 14px; font-weight: 650; cursor: pointer; font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.venforms-btn-primary {
  background: #E30613; color: #fff;
  box-shadow: 0 4px 14px rgba(227,6,19,0.25);
}
.venforms-btn-primary:hover { background: #c50510; }
.venforms-btn-primary:disabled { opacity: 0.65; cursor: wait; }
.venforms-step-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

/* === Responsive === */
@media (max-width: 768px) {
  .venforms-container { padding: 20px; border-radius: 16px; }
  .venforms-title { font-size: 28px; }
  .venforms-card { min-height: 140px; padding: 14px; }
  .venforms-card-selector-grid { grid-template-columns: 1fr !important; }
  .venforms-toggle-group-grid { grid-template-columns: 1fr !important; }
  .venforms-price-total { font-size: 32px; }
  .venforms-col-half, .venforms-col-third, .venforms-col-two-thirds {
    width: 100% !important; margin-right: 0 !important;
  }
  /* width alone does not collapse a flex item; the basis has to go too, and these
     have to carry !important to beat the sized columns above. */
  .venforms-step-content > .venforms-col-half,
  .venforms-step-content > .venforms-col-third,
  .venforms-step-content > .venforms-col-two-thirds,
  .venforms-step-content.venforms-step-active > .venforms-col-half {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .venforms-layout-columns { flex-direction: column; gap: 0; }
  .venforms-layout-column {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .venforms-step-circle { width: 36px; height: 36px; font-size: 14px; }
  .venforms-step-label-text { font-size: 10px; max-width: 60px; }
  .venforms-help-section { flex-direction: column; text-align: center; }
  .venforms-payment-gateway { grid-template-columns: 1fr; }
  .venforms-nav-right { width: 100%; justify-content: space-between; }
}


/* Alignment system: consistent spacing, labels, responsive stacking */
.venforms-field-group .venforms-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.venforms-radio-grid {
  row-gap: 12px;
  column-gap: 16px;
}
.venforms-payment-grid {
  align-items: stretch;
}
.venforms-payment-card {
  display: flex;
  flex-direction: column;
}
.venforms-payment-card > div:last-of-type {
  margin-top: auto;
}
.venforms-checkbox-group label,
.venforms-choice-label {
  line-height: 1.4;
}
.venforms-checkbox-group {
  row-gap: 10px;
}
@media (max-width: 768px) {
  .venforms-radio-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  .venforms-payment-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Item 4: alignment polish === */
.venforms-radio-group .venforms-choice-label {
  white-space: nowrap;
}
.venforms-radio-group .venforms-choice-label .venforms-choice-input {
  margin: 0;
}
.venforms-checkbox-group label {
  margin: 0;
}
.venforms-nav-total {
  flex-shrink: 0;
}
.venforms-step-nav .venforms-btn {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .venforms-radio-group,
  .venforms-checkbox-group {
    flex-direction: column !important;
    align-items: flex-start;
  }
  .venforms-radio-group .venforms-choice-label {
    white-space: normal;
  }
}
@media (max-width: 480px) {
  .venforms-step-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .venforms-nav-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .venforms-nav-total {
    padding: 6px 0;
    background: transparent;
  }
}