/**
 * CF7 Mate Pro – form field styles (multi-column, multi-step, star-rating, range-slider).
 * Premium-only. Enqueued on frontend when a CF7 form uses these fields.
 *
 * @package CF7_Mate
 * @since 3.0.0
 */

/* Multi-column [cf7m-row] [cf7m-col] – flex framework with proper spacing */
.cf7m-pro-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: calc(-1 * var(--cf7m-row-gap, 16px) / 2);
  margin-right: calc(-1 * var(--cf7m-row-gap, 16px) / 2);
  margin-bottom: var(--cf7m-row-gap, 16px);
}

.cf7m-pro-row:last-child {
  margin-bottom: 0;
}

.cf7m-pro-col {
  box-sizing: border-box;
  flex: 0 0 var(--cf7m-col-width, 50%);
  max-width: var(--cf7m-col-width, 50%);
  padding-left: calc(var(--cf7m-row-gap, 16px) / 2);
  padding-right: calc(var(--cf7m-row-gap, 16px) / 2);
  margin-bottom: var(--cf7m-row-gap, 16px);
  display: flex;
  flex-direction: column;
}

.cf7m-pro-row:last-child .cf7m-pro-col:last-child,
.cf7m-pro-col:last-child {
  margin-bottom: 0;
}

/* All direct children inside columns are full width */
.cf7m-pro-col > * {
  width: 100%;
  box-sizing: border-box;
}

/* Form elements inside columns */
.cf7m-pro-col > p,
.cf7m-pro-col > div,
.cf7m-pro-col > label,
.cf7m-pro-col > span {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Inputs, selects, textareas inside columns are full width */
.cf7m-pro-col input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cf7m-pro-col select,
.cf7m-pro-col textarea {
  width: 100%;
}

/* wpcf7 control wraps full width */
.cf7m-pro-col .wpcf7-form-control-wrap {
  width: 100%;
  display: block;
}

/* Labels inside columns */
.cf7m-pro-col label {
  width: 100%;
}

/* Checkbox and radio groups stay inline */
.cf7m-pro-col .wpcf7-checkbox,
.cf7m-pro-col .wpcf7-radio,
.cf7m-pro-col .wpcf7-acceptance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.cf7m-pro-col .wpcf7-checkbox .wpcf7-list-item,
.cf7m-pro-col .wpcf7-radio .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  width: auto;
}

/* File inputs full width */
.cf7m-pro-col input[type="file"] {
  width: 100%;
}

/* CF7 Mate special fields full width in columns */
.cf7m-pro-col .cf7m-number-field,
.cf7m-pro-col .cf7m-range-slider,
.cf7m-pro-col .cf7m-star-rating,
.cf7m-pro-col .cf7m-total-wrap {
  width: 100%;
}

/* Ensure select dropdown takes full width */
.cf7m-pro-col select.wpcf7-form-control {
  width: 100%;
  max-width: 100%;
}

/* Calculator inputs inside columns */
.cf7m-pro-col .cf7m-number-field {
  display: flex;
  width: 100%;
}

/* Nested rows inside columns */
.cf7m-pro-col .cf7m-pro-row {
  width: calc(100% + var(--cf7m-row-gap, 16px));
  margin-left: calc(-1 * var(--cf7m-row-gap, 16px) / 2);
  margin-right: calc(-1 * var(--cf7m-row-gap, 16px) / 2);
}

/* Spacing between field groups in columns */
.cf7m-pro-col > p:not(:last-child),
.cf7m-pro-col > div:not(:last-child) {
  margin-bottom: 16px;
}

/* Reset p margins inside columns for consistent spacing */
.cf7m-pro-col > p {
  margin-top: 0;
}

/* Submit button should not stretch inside flex columns */
.cf7m-pro-col input[type="submit"],
.cf7m-pro-col button.wpcf7-submit {
  width: auto;
  align-self: flex-start;
}

/* Responsive: stack columns on mobile with clear separation */
@media (max-width: 600px) {
  .cf7m-pro-row {
    margin-left: 0;
    margin-right: 0;
  }

  .cf7m-pro-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: var(--cf7m-row-gap, 16px);
  }

  .cf7m-pro-col:last-child {
    margin-bottom: 0;
  }
}

/* Multi-step [cf7m-step] */
.cf7m-steps-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.cf7m-progress-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.cf7m-progress-step.active {
  background: #3044D7;
  color: #fff;
}

.cf7m-progress-step.completed {
  background: #10b981;
  color: #fff;
}

.cf7m-step {
  display: none;
}

.cf7m-step.active {
  display: block;
}

.cf7m-steps-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 12px;
}

.cf7m-prev-step,
.cf7m-next-step {
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}

.cf7m-next-step {
  background: #111827;
  color: #fff;
}

.cf7m-prev-step {
  background: transparent;
  color: #374151;
  border-color: #d1d5db;
}

.cf7m-prev-step:hover {
  border-color: #9ca3af;
}

/* ── Style: Progress Bar ─────────────────────────────────────────────── */
.cf7m-progress--bar {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.cf7m-progress-bar-track {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.cf7m-progress-bar-fill {
  height: 100%;
  background: #111827;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.cf7m-progress-bar-label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* ── Style: Connected Circles with Labels ────────────────────────────── */
.cf7m-progress--connected {
  align-items: center;
  gap: 0;
}

.cf7m-progress--connected .cf7m-progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cf7m-progress--connected .cf7m-progress-step {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #fff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cf7m-progress--connected .cf7m-progress-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  transition: color 0.2s;
}

.cf7m-progress--connected .cf7m-progress-connector {
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: #e5e7eb;
  margin: 0 8px;
  transition: background 0.2s;
}

/* Active item */
.cf7m-progress--connected .cf7m-progress-item.active .cf7m-progress-step {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.cf7m-progress--connected .cf7m-progress-item.active .cf7m-progress-label {
  color: #111827;
  font-weight: 600;
}

/* Completed item */
.cf7m-progress--connected .cf7m-progress-item.completed .cf7m-progress-step {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.cf7m-progress--connected .cf7m-progress-item.completed .cf7m-progress-label {
  color: #374151;
}

/* Completed connector (between completed steps) */
.cf7m-progress--connected .cf7m-progress-connector.completed {
  background: #111827;
}

/* Responsive: connected labels hide on small screens */
@media (max-width: 600px) {
  .cf7m-progress--connected .cf7m-progress-label {
    display: none;
  }

  .cf7m-progress--connected .cf7m-progress-connector {
    min-width: 16px;
    margin: 0 4px;
  }
}

/* Calculator / Price Estimator [cf7m-number] [cf7m-calc] [cf7m-total] */
.cf7m-number-field {
  --cf7m-field-border: #e5e7eb;
  --cf7m-field-radius: 6px;
  --cf7m-field-bg: #fff;
  --cf7m-field-focus: #3044D7;
  --cf7m-prefix-bg: #f9fafb;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--cf7m-field-border);
  border-radius: var(--cf7m-field-radius);
  background: var(--cf7m-field-bg);
  overflow: hidden;
  width: 100%;
}

.cf7m-number-field:focus-within {
  border-color: var(--cf7m-field-focus);
  box-shadow: 0 0 0 2px rgba(87, 51, 255, 0.1);
}

.cf7m-number-prefix,
.cf7m-number-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--cf7m-prefix-bg);
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.cf7m-number-prefix {
  border-right: 1px solid var(--cf7m-field-border);
}

.cf7m-number-suffix {
  border-left: 1px solid var(--cf7m-field-border);
}

/* Input inside number field - reset parent styles */
.cf7m-calc-input {
  flex: 1;
  min-width: 60px;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  -moz-appearance: textfield;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
}

.cf7m-calc-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.cf7m-calc-input::-webkit-outer-spin-button,
.cf7m-calc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Total display – simple, neutral */
.cf7m-total-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cf7m-total-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.cf7m-total {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #111827;
  font-weight: 600;
  font-size: 18px;
}

.cf7m-total--updated {
  animation: cf7m-total-pulse 0.25s ease;
}

@keyframes cf7m-total-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.cf7m-total-prefix,
.cf7m-total-suffix {
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

.cf7m-total-value {
  font-variant-numeric: tabular-nums;
}

/* Inline total (in summary rows) */
.cf7m-calc-summary-row .cf7m-total {
  padding: 6px 10px;
  font-size: 15px;
}

.cf7m-calc-summary-row .cf7m-total-prefix,
.cf7m-calc-summary-row .cf7m-total-suffix {
  font-size: 12px;
}

/* Calculator summary box */
.cf7m-calc-summary {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.cf7m-calc-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.cf7m-calc-summary-row:last-child {
  border-bottom: none;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 2px solid #e5e7eb;
  font-weight: 700;
}

.cf7m-calc-summary-label {
  color: #6b7280;
  font-size: 14px;
}

.cf7m-calc-summary-value {
  font-weight: 600;
  color: #111827;
}

/* Responsive */
@media (max-width: 480px) {
  .cf7m-total {
    font-size: 16px;
    padding: 6px 10px;
  }
}

/* Conditional Logic [cf7m-if] */
.cf7m-condition {
  overflow: hidden;
}

.cf7m-condition--visible {
  animation: cf7m-fade-in 0.2s ease-out;
}

@keyframes cf7m-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Smart Integration: Inherit styles from parent CF7 Styler container
   When inside .dipe-cf7 or .cf7m-cf7-styler, our special fields should
   harmonize with the user's chosen design/preset without double borders.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Number field inherits parent input styles */
.dipe-cf7 .cf7m-number-field,
.cf7m-cf7-styler .cf7m-number-field {
  --cf7m-field-border: inherit;
  --cf7m-field-radius: inherit;
  --cf7m-field-bg: inherit;
}

/* When CF7 Styler sets field border color, use it */
.dipe-cf7 .cf7m-number-field {
  border-color: inherit;
  border-radius: inherit;
  background-color: inherit;
}

/* Prefix/suffix adapt to field background */
.dipe-cf7 .cf7m-number-prefix,
.dipe-cf7 .cf7m-number-suffix,
.cf7m-cf7-styler .cf7m-number-prefix,
.cf7m-cf7-styler .cf7m-number-suffix {
  border-color: inherit;
}

/* Ensure special inputs don't get double styled */
.dipe-cf7 .cf7m-number-field input,
.cf7m-cf7-styler .cf7m-number-field input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Calculator summary inherits border radius */
.dipe-cf7 .cf7m-calc-summary,
.cf7m-cf7-styler .cf7m-calc-summary {
  border-radius: inherit;
}

/* Heading shortcode - inherit text color */
.dipe-cf7 .cf7m-heading,
.cf7m-cf7-styler .cf7m-heading {
  color: inherit;
}

/* Reset all control wraps inside our special fields */
.cf7m-number-field .wpcf7-form-control-wrap {
  display: contents;
}

/* Ensure file inputs and selects still get full treatment */
.dipe-cf7 input[type="file"],
.dipe-cf7 select,
.cf7m-cf7-styler input[type="file"],
.cf7m-cf7-styler select {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Clean defaults for standalone usage (outside CF7 Styler)
   ═══════════════════════════════════════════════════════════════════════════ */

/* When not inside CF7 Styler, use clean defaults */
.wpcf7 .cf7m-number-field:not(.dipe-cf7 .cf7m-number-field):not(.cf7m-cf7-styler .cf7m-number-field) {
  --cf7m-field-border: #e5e7eb;
  --cf7m-field-radius: 6px;
  --cf7m-field-bg: #fff;
  --cf7m-field-focus: #3044D7;
}

/* Labels inside our fields should not have margin that breaks layout */
.cf7m-number-field label {
  display: contents;
}

/* Clean up any paragraph wrappers */
.cf7m-number-field p {
  margin: 0;
  display: contents;
}