.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;
} .cf7m-pro-col > * {
width: 100%;
box-sizing: border-box;
} .cf7m-pro-col > p,
.cf7m-pro-col > div,
.cf7m-pro-col > label,
.cf7m-pro-col > span {
width: 100%;
display: flex;
flex-direction: column;
} .cf7m-pro-col input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cf7m-pro-col select,
.cf7m-pro-col textarea {
width: 100%;
} .cf7m-pro-col .wpcf7-form-control-wrap {
width: 100%;
display: block;
} .cf7m-pro-col label {
width: 100%;
} .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;
} .cf7m-pro-col input[type="file"] {
width: 100%;
} .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%;
} .cf7m-pro-col select.wpcf7-form-control {
width: 100%;
max-width: 100%;
} .cf7m-pro-col .cf7m-number-field {
display: flex;
width: 100%;
} .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);
} .cf7m-pro-col > p:not(:last-child),
.cf7m-pro-col > div:not(:last-child) {
margin-bottom: 16px;
} .cf7m-pro-col > p {
margin-top: 0;
} .cf7m-pro-col input[type="submit"],
.cf7m-pro-col button.wpcf7-submit {
width: auto;
align-self: flex-start;
} @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;
}
} .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;
} .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;
} .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;
} .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;
} .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;
} .cf7m-progress--connected .cf7m-progress-connector.completed {
background: #111827;
} @media (max-width: 600px) {
.cf7m-progress--connected .cf7m-progress-label {
display: none;
}
.cf7m-progress--connected .cf7m-progress-connector {
min-width: 16px;
margin: 0 4px;
}
} .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);
} .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;
} .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;
} .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;
} .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;
} @media (max-width: 480px) {
.cf7m-total {
font-size: 16px;
padding: 6px 10px;
}
} .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);
}
}  .dipe-cf7 .cf7m-number-field,
.cf7m-cf7-styler .cf7m-number-field {
--cf7m-field-border: inherit;
--cf7m-field-radius: inherit;
--cf7m-field-bg: inherit;
} .dipe-cf7 .cf7m-number-field {
border-color: inherit;
border-radius: inherit;
background-color: inherit;
} .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;
} .dipe-cf7 .cf7m-number-field input,
.cf7m-cf7-styler .cf7m-number-field input {
border: none !important;
box-shadow: none !important;
background: transparent !important;
} .dipe-cf7 .cf7m-calc-summary,
.cf7m-cf7-styler .cf7m-calc-summary {
border-radius: inherit;
} .dipe-cf7 .cf7m-heading,
.cf7m-cf7-styler .cf7m-heading {
color: inherit;
} .cf7m-number-field .wpcf7-form-control-wrap {
display: contents;
} .dipe-cf7 input[type="file"],
.dipe-cf7 select,
.cf7m-cf7-styler input[type="file"],
.cf7m-cf7-styler select {
width: 100%;
}  .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;
} .cf7m-number-field label {
display: contents;
} .cf7m-number-field p {
margin: 0;
display: contents;
}