/* Appaza Form Styler — front-end themes.
 * Per-form CSS custom properties are injected inline (scoped to .cf7sb-form-<id>);
 * this stylesheet consumes them and defines the visual themes + grid layout. */

.cf7sb-form {
	--cf7sb-accent: #2563eb;
	--cf7sb-text: #1f2937;
	--cf7sb-form-bg: transparent;
	--cf7sb-form-pad: 0px;
	--cf7sb-field-bg: #ffffff;
	--cf7sb-border: #d1d5db;
	--cf7sb-radius: 8px;
	--cf7sb-gap: 18px;
	--cf7sb-col-gap: 18px;
	--cf7sb-label-gap: 6px;
	--cf7sb-font-size: 16px;
	--cf7sb-label-fw: 600;
	--cf7sb-btn-bg: #2563eb;
	--cf7sb-btn-text: #ffffff;
	--cf7sb-btn-radius: 8px;

	color: var(--cf7sb-text);
	font-size: var(--cf7sb-font-size);
	line-height: 1.5;
	background: var(--cf7sb-form-bg);
	padding: var(--cf7sb-form-pad);
	border-radius: var(--cf7sb-radius);
}

/* ---- grid / columns ---- */
.cf7sb-form .cf7sb-fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--cf7sb-col-gap);
	row-gap: var(--cf7sb-gap);
	align-items: start;
}
.cf7sb-form .cf7sb-col { grid-column: span 12; min-width: 0; }
.cf7sb-form .cf7sb-col[data-col="6"] { grid-column: span 6; }
.cf7sb-form .cf7sb-col[data-col="4"] { grid-column: span 4; }
.cf7sb-form .cf7sb-col[data-col="3"] { grid-column: span 3; }
.cf7sb-form .cf7sb-col[data-col="8"] { grid-column: span 8; }
.cf7sb-form .cf7sb-col[data-col="9"] { grid-column: span 9; }

@media (max-width: 600px) {
	.cf7sb-form .cf7sb-col { grid-column: span 12 !important; }
}

/* ---- labels ---- */
.cf7sb-form .cf7sb-label {
	display: block;
	font-weight: var(--cf7sb-label-fw);
	margin-bottom: var(--cf7sb-label-gap);
}
.cf7sb-form .cf7sb-req { color: #dc2626; }
.cf7sb-form .cf7sb-heading { margin: 8px 0 4px; }
.cf7sb-form .cf7sb-paragraph { margin: 0 0 4px; color: #6b7280; }

/* ---- base controls ---- */
.cf7sb-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.cf7sb-form textarea,
.cf7sb-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: var(--cf7sb-font-size);
	color: var(--cf7sb-text);
	background: var(--cf7sb-field-bg);
	border: 1px solid var(--cf7sb-border);
	border-radius: var(--cf7sb-radius);
	transition: border-color .15s, box-shadow .15s;
}
.cf7sb-form input:focus,
.cf7sb-form textarea:focus,
.cf7sb-form select:focus {
	outline: none;
	border-color: var(--cf7sb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7sb-accent) 22%, transparent);
}
.cf7sb-form textarea { min-height: 120px; resize: vertical; }

/* ---- submit button ---- */
.cf7sb-form .wpcf7-submit,
.cf7sb-form input[type="submit"] {
	appearance: none;
	cursor: pointer;
	padding: 11px 26px;
	font-size: var(--cf7sb-font-size);
	font-weight: 600;
	color: var(--cf7sb-btn-text);
	background: var(--cf7sb-btn-bg);
	border: 0;
	border-radius: var(--cf7sb-btn-radius);
	transition: filter .15s, transform .05s;
}
.cf7sb-form .wpcf7-submit:hover { filter: brightness(.93); }
.cf7sb-form .wpcf7-submit:active { transform: translateY(1px); }
.cf7sb-form.cf7sb-btn-full .wpcf7-submit { width: 100%; }

/* ---- theme: outline ---- */
.cf7sb-theme-outline input:not([type="submit"]),
.cf7sb-theme-outline textarea,
.cf7sb-theme-outline select { background: transparent; border-width: 2px; }

/* ---- theme: underline ---- */
.cf7sb-theme-underline input:not([type="submit"]),
.cf7sb-theme-underline textarea,
.cf7sb-theme-underline select {
	border: 0;
	border-bottom: 2px solid var(--cf7sb-border);
	border-radius: 0;
	padding-left: 2px; padding-right: 2px;
	background: transparent;
}
.cf7sb-theme-underline input:focus,
.cf7sb-theme-underline textarea:focus,
.cf7sb-theme-underline select:focus { box-shadow: none; border-bottom-color: var(--cf7sb-accent); }

/* ---- theme: material (floating-ish) ---- */
.cf7sb-theme-material input:not([type="submit"]),
.cf7sb-theme-material textarea,
.cf7sb-theme-material select {
	border: 0;
	border-bottom: 2px solid var(--cf7sb-border);
	border-radius: 6px 6px 0 0;
	background: color-mix(in srgb, var(--cf7sb-border) 14%, transparent);
}
.cf7sb-theme-material input:focus,
.cf7sb-theme-material textarea:focus,
.cf7sb-theme-material select:focus { box-shadow: none; border-bottom-color: var(--cf7sb-accent); }

/* ---- theme: minimal ---- */
/* Light "filled" fields. We intentionally do NOT force border-color here:
   that would override the user's chosen Border color on textarea/select
   (whose base selectors have lower specificity than text inputs). */
.cf7sb-theme-minimal input:not([type="submit"]),
.cf7sb-theme-minimal textarea,
.cf7sb-theme-minimal select { background-color: #f8fafc; }
.cf7sb-theme-minimal input:focus,
.cf7sb-theme-minimal textarea:focus,
.cf7sb-theme-minimal select:focus { border-color: var(--cf7sb-accent); background-color: #fff; }

/* ---- custom field: star rating ---- */
.cf7sb-rating { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.cf7sb-rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf7sb-rating label {
	font-size: 1.7em; line-height: 1; cursor: pointer; color: var(--cf7sb-border);
	transition: color .12s;
}
.cf7sb-rating input:checked ~ label,
.cf7sb-rating label:hover,
.cf7sb-rating label:hover ~ label { color: #f59e0b; }

/* ---- range slider (CF7 native, enhanced by our engine) ---- */
.cf7sb-form input[type="range"] { accent-color: var(--cf7sb-accent); }
.cf7sb-range-wrap { display: flex; align-items: center; gap: 12px; }
.cf7sb-range { flex: 1; }
.cf7sb-range-out {
	min-width: 2.5em; text-align: center; font-weight: 600;
	padding: 2px 8px; border-radius: 999px;
	background: color-mix(in srgb, var(--cf7sb-accent) 14%, transparent);
	color: var(--cf7sb-accent);
}

/* ---- custom field: toggle switch ---- */
.cf7sb-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.cf7sb-toggle-input { position: absolute; opacity: 0; }
.cf7sb-toggle-track {
	position: relative; width: 44px; height: 24px; flex: 0 0 44px;
	background: var(--cf7sb-border); border-radius: 999px; transition: background .15s;
}
.cf7sb-toggle-track::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 20px; height: 20px; background: #fff; border-radius: 50%;
	transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cf7sb-toggle-input:checked + .cf7sb-toggle-track { background: var(--cf7sb-accent); }
.cf7sb-toggle-input:checked + .cf7sb-toggle-track::after { transform: translateX(20px); }
.cf7sb-toggle-input:focus-visible + .cf7sb-toggle-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7sb-accent) 30%, transparent); }

/* ---- multi-step ---- */
.cf7sb-form .cf7sb-step { border: 0; margin: 0; padding: 0; }
.cf7sb-form .cf7sb-step:not([data-active="1"]) { display: none; }
.cf7sb-step-nav {
	display: flex; align-items: center; gap: 12px; margin-top: var(--cf7sb-gap);
}
.cf7sb-step-nav .cf7sb-prev,
.cf7sb-step-nav .cf7sb-next {
	appearance: none; cursor: pointer; padding: 10px 22px; font-weight: 600;
	border: 1px solid var(--cf7sb-accent); border-radius: var(--cf7sb-btn-radius);
	background: transparent; color: var(--cf7sb-accent);
}
.cf7sb-step-nav .cf7sb-next { background: var(--cf7sb-accent); color: #fff; }
.cf7sb-step-nav .cf7sb-prev[hidden],
.cf7sb-step-nav .cf7sb-next[hidden] { display: none; }
.cf7sb-progress { height: 6px; border-radius: 999px; background: var(--cf7sb-border); margin-bottom: var(--cf7sb-gap); overflow: hidden; }
.cf7sb-progress > span { display: block; height: 100%; background: var(--cf7sb-accent); transition: width .25s; }

/* conditional-hidden fields */
.cf7sb-form .cf7sb-col[hidden] { display: none !important; }