/* ================================================================
   CONTACT FORM 7 — CINEMATIC STYLING SYSTEM   |  cf7-cinematic.css
   ----------------------------------------------------------------
   Reproduces the ORIGINAL cinematic form design — the underline
   .c-field / .c-label / .c-input system from the prototype — for any
   CF7 form (.sm-cf7). A CF7 form dropped into the Consultation
   form-finale or the Contact section then looks NATIVE, not merely
   "restyled": transparent inputs, a single thin underline, tracked
   uppercase crimson micro-labels, and the crimson magnetic-pill CTA.

   Two contexts, one design:
     • Default        — theme-aware tokens. The Contact section sits
                        on var(--bg) and follows the light/dark theme.
     • #c-form-finale — the consultation finale's backdrop is a fixed
                        plum (GSAP-morphed, not theme-driven), so the
                        palette is forced to ivory-on-plum there.

   RTL-aware throughout.
   ================================================================ */

.sm-cf7,
.wpcf7-form {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	color: var(--text-primary, #1A0D14);
}

/* ─── Field rhythm — CF7 wraps each field in a <p> ─── */
.sm-cf7 p { margin: 0 0 1.4rem; }
.sm-cf7 p:last-of-type { margin-bottom: 0; }

/* Optional 2-column grid — add class="sm-cf7-grid" on a wrapping
   <div> in the CF7 form template to mirror the prototype's grid. */
.sm-cf7 .sm-cf7-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 640px) {
	.sm-cf7 .sm-cf7-grid { grid-template-columns: 1fr; }
}

/* ─── Labels — tracked uppercase crimson micro-label (= .c-label) ─── */
.sm-cf7 label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: rgba(187,38,73,0.85);
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

/* ─── Inputs — transparent, underline-only (= .c-input) ─── */
.sm-cf7 input[type="text"],
.sm-cf7 input[type="email"],
.sm-cf7 input[type="tel"],
.sm-cf7 input[type="url"],
.sm-cf7 input[type="number"],
.sm-cf7 input[type="date"],
.sm-cf7 input[type="search"],
.sm-cf7 textarea,
.sm-cf7 select {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border, rgba(26,13,20,0.18));
	border-radius: 0;
	color: var(--text-primary, #1A0D14);
	font-family: 'Space Grotesk', sans-serif;
	font-size: 15px;
	font-weight: 300;
	padding: 0.6rem 0;
	outline: none;
	transition: border-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sm-cf7 textarea {
	resize: none;
	min-height: 92px;
	line-height: 1.7;
}

.sm-cf7 input::placeholder,
.sm-cf7 textarea::placeholder {
	color: var(--text-muted, rgba(26,13,20,0.5));
	opacity: 0.65;
}

.sm-cf7 input:focus,
.sm-cf7 textarea:focus,
.sm-cf7 select:focus {
	border-bottom-color: #BB2649;
}

/* Select — custom crimson chevron (= .c-select) */
.sm-cf7 select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BB2649' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	padding-right: 1.6rem;
}
.sm-cf7 select option {
	background: var(--bg-card, #fff);
	color: var(--text-primary, #1A0D14);
}

/* ─── Submit — crimson magnetic pill (= .c-submit / .magnetic-btn) ─── */
.sm-cf7 input[type="submit"],
.sm-cf7 .sm-cf7-submit,
.sm-cf7 button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.6rem;
	background: #BB2649;
	color: #fff;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	border: 0;
	border-radius: 9999px;
	padding: 1rem 2.5rem;
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, background 0.3s ease;
}
.sm-cf7 input[type="submit"]:hover,
.sm-cf7 .sm-cf7-submit:hover,
.sm-cf7 button[type="submit"]:hover {
	background: #a11f3f;
	box-shadow: 0 14px 38px -12px rgba(187,38,73,0.6);
}
.sm-cf7 input[type="submit"]:disabled,
.sm-cf7 button[type="submit"]:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ─── Checkbox / radio / acceptance ─── */
.sm-cf7 .wpcf7-checkbox .wpcf7-list-item,
.sm-cf7 .wpcf7-radio .wpcf7-list-item,
.sm-cf7 .wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 0.5rem;
}
.sm-cf7 .wpcf7-list-item-label {
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-primary, #1A0D14);
}
.sm-cf7 input[type="checkbox"],
.sm-cf7 input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: #BB2649;
	margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   CONSULTATION FORM-FINALE — fixed plum backdrop.
   The #c-form-finale background is GSAP-morphed to plum and is NOT
   driven by [data-theme], so the form palette is pinned to
   ivory-on-plum here regardless of the active light/dark theme.
   ════════════════════════════════════════════════════════════════ */
#c-form-finale .sm-cf7 { color: #F9F6F7; }

#c-form-finale .sm-cf7 input[type="text"],
#c-form-finale .sm-cf7 input[type="email"],
#c-form-finale .sm-cf7 input[type="tel"],
#c-form-finale .sm-cf7 input[type="url"],
#c-form-finale .sm-cf7 input[type="number"],
#c-form-finale .sm-cf7 input[type="date"],
#c-form-finale .sm-cf7 input[type="search"],
#c-form-finale .sm-cf7 textarea,
#c-form-finale .sm-cf7 select {
	color: #F9F6F7;
	border-bottom-color: rgba(249,246,247,0.2);
}
#c-form-finale .sm-cf7 input::placeholder,
#c-form-finale .sm-cf7 textarea::placeholder { color: rgba(249,246,247,0.28); }
#c-form-finale .sm-cf7 input:focus,
#c-form-finale .sm-cf7 textarea:focus,
#c-form-finale .sm-cf7 select:focus { border-bottom-color: #BB2649; }
#c-form-finale .sm-cf7 select option { background: #471C2F; color: #F9F6F7; }
#c-form-finale .sm-cf7 .wpcf7-list-item-label { color: #F9F6F7; }

/* ─── Loader — restyle CF7's spinner as a thin crimson ring ─── */
.sm-cf7 .wpcf7-spinner {
	width: 18px;
	height: 18px;
	margin: 0 0 0 0.6rem;
	background: none;
	border: 2px solid rgba(187,38,73,0.25);
	border-top-color: #BB2649;
	border-radius: 50%;
	animation: sm-cf7-spin 0.7s linear infinite;
}
.sm-cf7 .wpcf7-spinner::before { display: none; }
@keyframes sm-cf7-spin { to { transform: rotate(360deg); } }

/* Submitting state — dim the form while the AJAX request is in flight. */
.wpcf7 form.submitting .sm-cf7,
.wpcf7 form.submitting { opacity: 0.7; pointer-events: none; }

/* ─── Validation — crimson underline + inline tip ─── */
.sm-cf7 .wpcf7-not-valid { border-bottom-color: #BB2649 !important; }
.sm-cf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #BB2649;
}

/* ─── Response banners — error / success / spam ─── */
.wpcf7 .wpcf7-response-output {
	margin: 1.4rem 0 0;
	padding: 0.95rem 1.25rem;
	border-radius: 0.85rem;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background: rgba(187,38,73,0.08);
	border-color: rgba(187,38,73,0.4);
	color: #BB2649;
}
.wpcf7 form.sent .wpcf7-response-output {
	background: rgba(34,139,87,0.1);
	border-color: rgba(34,139,87,0.45);
	color: #1f7a4d;
	animation: sm-cf7-pop 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background: rgba(219,52,59,0.1);
	border-color: rgba(219,52,59,0.45);
	color: #c22;
}
@keyframes sm-cf7-pop {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── RTL ─── */
[dir="rtl"] .sm-cf7 label {
	letter-spacing: 0;
	font-size: 11px;
}
[dir="rtl"] .sm-cf7 select {
	background-position: left 0 center;
	padding-right: 0;
	padding-left: 1.6rem;
}
[dir="rtl"] .sm-cf7 input[type="submit"],
[dir="rtl"] .sm-cf7 .sm-cf7-submit,
[dir="rtl"] .sm-cf7 button[type="submit"] {
	letter-spacing: 0;
	flex-direction: row-reverse;
}
[dir="rtl"] .sm-cf7 .wpcf7-spinner { margin: 0 0.6rem 0 0; }

/* ─── Responsive ─── */
@media (max-width: 767px) {
	.sm-cf7 input[type="submit"],
	.sm-cf7 .sm-cf7-submit,
	.sm-cf7 button[type="submit"] { width: 100%; }
}