/* Tarsil Forms — frontend. High-specificity, self-contained rules so theme
 * and page-builder (Elementor) resets don't bleed in. All selectors are
 * scoped under .tf-form-wrap and force key properties explicitly. */

.tf-form-wrap{
	/* Accent is overridable (global setting or Elementor control) via --tf-accent. */
	--tf-accent:#007BFF;
	--tf-blue:var(--tf-accent);--tf-blue-600:#0069d9;--tf-blue-50:#e9f3ff;
	--tf-ink:#0f1729;--tf-ink-2:#3b4657;--tf-ink-3:#697586;
	--tf-line:#d3dae4;--tf-err:#c0362c;--tf-err-bg:#fdeceb;--tf-ok:#12805c;--tf-ok-bg:#e3f6ee;
	--tf-radius:10px;
	/* Per-instance overridable tokens (Elementor style controls). Each falls
	   back to a sensible default so empty controls never break the form. */
	--tf-label-color:var(--tf-ink-2);
	--tf-input-border:var(--tf-line);
	--tf-button-bg:var(--tf-accent);
	--tf-button-text:#fff;
	--tf-button-radius:var(--tf-radius);
	max-width:640px;box-sizing:border-box;
	font-family:inherit;color:var(--tf-ink);
}
.tf-form-wrap *,.tf-form-wrap *::before,.tf-form-wrap *::after{box-sizing:border-box}

.tf-form-wrap .tf-form-head{margin:0 0 18px}
.tf-form-wrap .tf-form-title{font-size:20px;font-weight:700;margin:0;color:var(--tf-ink);line-height:1.3}

/* Grid */
.tf-form-wrap .tf-fields-grid{display:flex;flex-wrap:wrap;gap:20px 16px;margin:0}
.tf-form-wrap .tf-field{flex:0 0 100%;min-width:0;margin:0;padding:0}
.tf-form-wrap .tf-w-1{flex-basis:100%}
.tf-form-wrap .tf-w-1-2{flex-basis:calc(50% - 8px)}
.tf-form-wrap .tf-w-1-3{flex-basis:calc(33.333% - 11px)}

/* Labels */
.tf-form-wrap .tf-label{display:block;font-size:13.5px;font-weight:600;color:var(--tf-label-color);margin:0 0 7px;line-height:1.4}
.tf-form-wrap .tf-req{color:var(--tf-err);margin-left:2px}

/* Controls — force appearance so themes can't restyle unexpectedly */
.tf-form-wrap .tf-control,
.tf-form-wrap select.tf-control,
.tf-form-wrap textarea.tf-control{
	display:block;width:100%;padding:12px 14px;margin:0;
	font-size:15px;line-height:1.4;font-family:inherit;
	color:var(--tf-ink);background-color:#fff;
	border:1.5px solid var(--tf-input-border);border-radius:var(--tf-radius);
	box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;
	transition:border-color .15s,box-shadow .15s;
}
.tf-form-wrap textarea.tf-control{min-height:110px;resize:vertical}
.tf-form-wrap select.tf-control{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697586' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.tf-form-wrap .tf-control::placeholder{color:#9aa5b4;opacity:1}
.tf-form-wrap .tf-control:focus{border-color:var(--tf-blue);box-shadow:0 0 0 4px rgba(0,123,255,.13)}

/* Choices */
.tf-form-wrap .tf-choices{display:flex;flex-direction:column;gap:8px;margin:0}
.tf-form-wrap .tf-choice{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--tf-ink-2);cursor:pointer;margin:0;padding:9px 12px;border:1px solid var(--tf-line);border-radius:var(--tf-radius);transition:.12s}
.tf-form-wrap .tf-choice:hover{border-color:var(--tf-blue);background:var(--tf-blue-50)}
.tf-form-wrap .tf-control-choice{width:17px;height:17px;margin:0;flex:0 0 auto;accent-color:var(--tf-blue)}

/* Help + error */
.tf-form-wrap .tf-help{font-size:13px;color:var(--tf-ink-3);margin:6px 0 0;line-height:1.4}
.tf-form-wrap .tf-error{font-size:13px;color:var(--tf-err);margin:6px 0 0;font-weight:500;line-height:1.4}
.tf-form-wrap .tf-field.tf-invalid .tf-control,
.tf-form-wrap .tf-field.tf-invalid .tf-choices{border-color:var(--tf-err)}
.tf-form-wrap .tf-field.tf-invalid .tf-control{box-shadow:0 0 0 3px rgba(192,54,44,.1)}

/* Layout fields */
.tf-form-wrap .tf-section-heading h4{font-size:17px;font-weight:700;color:var(--tf-ink);margin:6px 0 2px}
.tf-form-wrap .tf-section-heading p{font-size:13.5px;color:var(--tf-ink-3);margin:0}
.tf-form-wrap .tf-html-block{font-size:14px;color:var(--tf-ink-2)}

/* Honeypot — off-screen, not display:none (some autofillers skip none) */
.tf-form-wrap .tf-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Turnstile */
.tf-form-wrap .tf-turnstile{margin:16px 0 0}

/* Actions */
.tf-form-wrap .tf-form-actions{margin:34px 0 0}
.tf-form-wrap .tf-submit{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	width:100%;padding:15px 24px;margin:0;
	font-size:15.5px;font-weight:700;font-family:inherit;line-height:1;
	color:var(--tf-button-text);background-color:var(--tf-button-bg);
	border:none;border-radius:var(--tf-button-radius);cursor:pointer;
	box-shadow:0 10px 24px -6px rgba(0,123,255,.4);transition:background-color .12s,opacity .12s,transform .15s,box-shadow .15s;
	-webkit-appearance:none;appearance:none;
}
.tf-form-wrap .tf-submit:hover{background-color:var(--tf-blue-600);color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px -6px rgba(0,123,255,.45)}
.tf-form-wrap .tf-submit:disabled{opacity:.7;cursor:default}
.tf-form-wrap .tf-submit-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;display:none;animation:tf-spin .6s linear infinite}
.tf-form-wrap .tf-submit.is-sending .tf-submit-spinner{display:inline-block}

/* Intl phone field: country select + national input. */
.tf-form-wrap .tf-phone{display:flex;gap:8px;align-items:stretch}
.tf-form-wrap .tf-phone-country{flex:0 0 auto;width:auto;min-width:96px;max-width:130px;border:1px solid var(--tf-input-border);border-radius:var(--tf-radius);background:#fff;color:var(--tf-ink);font-family:inherit;font-size:15px;padding:0 8px}
.tf-form-wrap .tf-phone-input{flex:1 1 auto;min-width:0}
.tf-form-wrap .tf-phone-country:focus{border-color:var(--tf-blue);outline:none;box-shadow:0 0 0 3px var(--tf-blue-50)}
@media(max-width:400px){.tf-form-wrap .tf-phone{flex-direction:column}.tf-form-wrap .tf-phone-country{max-width:none;width:100%}}

/* Label visibility (Elementor control toggles --tf-label-display). */
.tf-form-wrap .tf-label{display:var(--tf-label-display,block)}

/* Defensive: guarantee the submit button is visible even when a theme or
   page-builder injects aggressive resets that would hide or collapse it. */
.tf-form-wrap .tf-form-actions{display:block!important;visibility:visible!important;opacity:1!important}
.tf-form-wrap button.tf-submit{display:inline-flex!important;visibility:visible!important;opacity:1!important;height:auto!important;min-height:44px;width:100%;pointer-events:auto!important}
@keyframes tf-spin{to{transform:rotate(360deg)}}

/* Form-level alert */
.tf-form-wrap .tf-form-alert{padding:12px 14px;border-radius:var(--tf-radius);font-size:14px;margin:0 0 16px;line-height:1.45}
.tf-form-wrap .tf-form-alert-error{background:var(--tf-err-bg);color:var(--tf-err);border:1px solid #f3c9c5}

/* Success state */
.tf-form-wrap .tf-form-success{text-align:center;padding:24px 20px}
.tf-form-wrap .tf-success-ic{width:64px;height:64px;border-radius:50%;background:var(--tf-ok-bg);color:var(--tf-ok);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.tf-form-wrap .tf-success-msg{font-size:16px;color:var(--tf-ink-2);margin:0;line-height:1.5}

/* Editor hint (admins only) */
.tf-admin-hint{padding:10px 14px;background:#fff6e0;border:1px solid #ffe08a;border-radius:8px;color:#9a6700;font-size:13px;margin:0 0 12px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
	.tf-form-wrap .tf-submit-spinner{animation:none}
	.tf-form-wrap .tf-control{transition:none}
	.tf-form-wrap .tf-submit{transition:none}
	.tf-form-wrap .tf-submit:hover{transform:none}
	.tf-booking-grid{animation:none}
}

/* Small screens: stack multi-column.
   Kept well below the embed/overlay frame width — inside an iframe a media
   query resolves against the FRAME's viewport, so a breakpoint near the frame
   width silently stacks every half-width field on a desktop screen. */
@media (max-width:480px){
	.tf-form-wrap .tf-w-1-2,.tf-form-wrap .tf-w-1-3{flex-basis:100%}
}
/* Thirds need more room than halves before they become unusable. */
@media (min-width:481px) and (max-width:600px){
	.tf-form-wrap .tf-w-1-3{flex-basis:calc(50% - 8px)}
}

/* --- Popup / modal display mode ------------------------------------------ */
.tf-popup{--tf-modal-width:520px}
.tf-popup.tf-align-center{text-align:center}
.tf-popup.tf-align-right{text-align:right}
.tf-popup-trigger{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	box-sizing:border-box;min-width:0;min-height:0;margin:0;
	padding:12px 22px;font-size:15px;font-weight:650;font-family:inherit;line-height:1;
	color:var(--tf-trigger-text,#fff);background:var(--tf-trigger-bg,var(--tf-accent,#007BFF));
	border:var(--tf-trigger-border-width,0) solid var(--tf-trigger-border-color,transparent);
	border-radius:var(--tf-trigger-radius,8px);cursor:pointer;text-decoration:none;
	-webkit-appearance:none;appearance:none;transition:opacity .12s,background-color .12s}
.tf-popup-trigger:hover{opacity:.92}
.tf-popup-trigger:focus-visible{outline:2px solid var(--tf-trigger-bg,var(--tf-accent,#007BFF));outline-offset:2px}
/* Site owner drives the popup from their own button. Hidden only once JS has
   taken over, so a no-JS visitor never loses the only way in. */
.tf-popup.tf-trigger-hidden.tf-js .tf-popup-trigger{display:none}

/* When JS is active, hide the no-JS inline fallback form (kept in DOM). */
.tf-popup.tf-js .tf-modal[hidden]{display:none}
.tf-popup.tf-nojs-inline:not(.tf-js) .tf-modal{position:static;display:block!important}
.tf-popup.tf-nojs-inline:not(.tf-js) .tf-modal-overlay,
.tf-popup.tf-nojs-inline:not(.tf-js) .tf-modal-close{display:none}
.tf-popup.tf-nojs-inline:not(.tf-js) .tf-popup-trigger{display:none}
/* If no-JS fallback is OFF and JS never runs, the modal stays hidden. */
.tf-popup:not(.tf-nojs-inline):not(.tf-js) .tf-modal[hidden]{display:none}

/* z-index kept above common third-party floating chat/support FABs so the
   form overlays them while open. */
/* The overlay itself scrolls, and the dialog is sized by its content. A tall
   form is reached by scrolling the overlay rather than being clipped, which
   also means no height has to be guessed. align-items:flex-start + margin:auto
   centres a short dialog without cutting off the top of a tall one — the
   classic flex-overflow trap that align-items:center falls into. */
.tf-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-start;justify-content:center;padding:20px;background:rgba(15,23,41,.55);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tf-modal[hidden]{display:none}
/* Click-catcher only; the dim colour lives on .tf-modal so it still covers the
   area revealed when the overlay is scrolled. */
.tf-modal-overlay{position:fixed;inset:0;background:transparent;cursor:pointer}
.tf-modal-dialog{position:relative;z-index:1;width:100%;max-width:var(--tf-modal-width,520px);margin:auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -15px rgba(15,23,41,.28),0 4px 12px rgba(15,23,41,.08);padding:26px 26px 28px;text-align:left;animation:tf-modal-in .16s ease}
.tf-modal-dialog::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#007BFF 0%,#3fa2ff 100%);z-index:1}
/* Reserve space at the top-right so the close button never sits on the title. */
.tf-modal-body .tf-form-title{padding-right:44px}
/* Same hero touches as the standalone page and the iframe-overlay popup:
   icon badge, bigger title, calendar-check on the submit button. Scoped to
   the modal only — a plain inline form embedded in page content keeps the
   original compact header. */
.tf-modal-body .tf-form-wrap .tf-form-head{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.tf-modal-body .tf-form-wrap .tf-form-head::before{
	content:"";display:block;flex:0 0 auto;width:40px;height:40px;border-radius:11px;
	background-color:var(--tf-blue-50,#e9f3ff);background-repeat:no-repeat;
	background-position:center;background-size:20px 20px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007BFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cline x1='16' y1='2.5' x2='16' y2='6.5'/%3E%3Cline x1='8' y1='2.5' x2='8' y2='6.5'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.tf-modal-body .tf-form-wrap .tf-form-title{font-size:22px;font-weight:800;letter-spacing:-.01em}
.tf-modal-body .tf-form-wrap button.tf-submit::before{
	content:"";display:inline-block;flex:0 0 auto;width:18px;height:18px;
	background-repeat:no-repeat;background-position:center;background-size:contain;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cline x1='16' y1='2.5' x2='16' y2='6.5'/%3E%3Cline x1='8' y1='2.5' x2='8' y2='6.5'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8.5 15l2 2 4.5-4.5'/%3E%3C/svg%3E");
}
/* The close button lives outside .tf-form-wrap, so the plugin's box-sizing
   reset doesn't reach it — theme button padding would otherwise inflate the
   fixed 32x32 box, and themes like Astra/Elementor paint bare buttons with the
   site accent colour. Geometry and paint are both forced here. */
.tf-modal .tf-modal-close{
	position:absolute;top:14px;right:14px;z-index:2;
	box-sizing:border-box!important;width:32px!important;height:32px!important;
	min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;
	display:grid;place-items:center;line-height:0;font-size:0;
	border:none!important;background:transparent!important;color:#8a94a6!important;
	border-radius:50%!important;box-shadow:none!important;
	cursor:pointer;-webkit-appearance:none;appearance:none;
	transition:background-color .12s,color .12s}
.tf-modal .tf-modal-close:hover{background:#f1f4f8!important;color:#0f1729!important}
.tf-modal .tf-modal-close:focus-visible{outline:2px solid var(--tf-accent,#007BFF);outline-offset:2px}
.tf-modal .tf-modal-close svg{display:block}
.tf-modal-body .tf-form-wrap{max-width:none}

@keyframes tf-modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:560px){
	.tf-modal{padding:0}
	.tf-modal-dialog{max-width:none;width:100%;min-height:100vh;min-height:100dvh;margin:0;border-radius:0;padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 24px)}
	/* Full-screen mobile sheet: pin close button, give the title clear top room. */
	.tf-modal .tf-modal-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;width:36px!important;height:36px!important;background:#f1f4f8!important}
	.tf-modal-body .tf-form-title{padding-right:0;padding-top:6px}
}
@media(prefers-reduced-motion:reduce){
	.tf-modal-dialog{animation:none}
}

/* ---- Custom submit-button styling (Custom mode only) --------------- */
.tf-form-wrap .tf-submit.tf-submit-custom{
	background:var(--tf-sb-bg,#007BFF);
	color:var(--tf-sb-text,#fff);
	border:var(--tf-sb-border-width,0) solid var(--tf-sb-border-color,transparent);
	border-radius:var(--tf-sb-radius,10px);
	transition:background-color .15s ease,box-shadow .15s ease,transform .12s ease,opacity .15s ease;
}
.tf-form-wrap .tf-submit.tf-submit-custom:hover{background-color:var(--tf-sb-bg,#007BFF);color:var(--tf-sb-text,#fff)}
.tf-form-wrap .tf-submit.tf-submit-full{width:100%}
.tf-form-wrap .tf-submit.tf-hover-darken:hover{filter:brightness(.9)}
.tf-form-wrap .tf-submit.tf-hover-lift:hover{transform:translateY(-2px)}
.tf-form-wrap .tf-submit.tf-hover-shadow:hover{box-shadow:0 8px 20px rgba(16,24,40,.28)}
.tf-form-wrap .tf-submit.tf-hover-grow:hover{transform:scale(1.04)}

/* ---- Newsletter popup entrance animations ------------------------- */
.tf-modal-anim-fade .tf-modal-dialog{animation:tf-anim-fade .22s ease}
.tf-modal-anim-zoomin .tf-modal-dialog{animation:tf-anim-zoomin .24s cubic-bezier(.2,.8,.25,1)}
.tf-modal-anim-zoomout .tf-modal-dialog{animation:tf-anim-zoomout .24s cubic-bezier(.2,.8,.25,1)}
.tf-modal-anim-stretch .tf-modal-dialog{animation:tf-anim-stretch .26s cubic-bezier(.2,.8,.25,1)}
.tf-modal-anim-slideup .tf-modal-dialog{animation:tf-anim-slideup .26s cubic-bezier(.2,.8,.25,1)}
@keyframes tf-anim-fade{from{opacity:0}to{opacity:1}}
@keyframes tf-anim-zoomin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes tf-anim-zoomout{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}
@keyframes tf-anim-stretch{from{opacity:0;transform:scaleX(.7) scaleY(1.05)}to{opacity:1;transform:scaleX(1) scaleY(1)}}
@keyframes tf-anim-slideup{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
	.tf-modal-anim-fade .tf-modal-dialog,
	.tf-modal-anim-zoomin .tf-modal-dialog,
	.tf-modal-anim-zoomout .tf-modal-dialog,
	.tf-modal-anim-stretch .tf-modal-dialog,
	.tf-modal-anim-slideup .tf-modal-dialog{animation:none}
	.tf-form-wrap .tf-submit.tf-hover-lift:hover,
	.tf-form-wrap .tf-submit.tf-hover-grow:hover{transform:none}
}

/* ---- Booking / appointment picker --------------------------------- */
.tf-booking{display:block;background:#f8fafd;border:1px solid #e7ecf3;border-radius:14px;padding:18px 18px 20px}
/* Timezone note sits inside the field label; the brackets come from CSS so the
   visitor-timezone hint appended by JS lands inside them. */
.tf-form-wrap .tf-label .tf-booking-tz{font-weight:500;font-size:12.5px;color:var(--tf-ink-3,#697586);margin-left:6px}
.tf-form-wrap .tf-label .tf-booking-tz::before{content:"("}
.tf-form-wrap .tf-label .tf-booking-tz::after{content:")"}
.tf-booking-tz-local{color:#94a3b8}
.tf-booking-sublabel{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#475569;margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tf-booking-sublabel svg{flex:0 0 auto}
.tf-booking-daterow{margin-bottom:16px}
.tf-booking-hint{font-size:13px;color:#64748b;margin:4px 0}
.tf-booking-closed{color:#b45309}
.tf-booking-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px;animation:tf-slot-in .22s ease both}
@keyframes tf-slot-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.tf-slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:1.5px solid #d3dae4;border-radius:10px;background:#fff;cursor:pointer;font-size:13px;color:#0f1729;transition:border-color .15s,background-color .15s,box-shadow .15s}
.tf-slot:hover:not(.is-full){border-color:var(--tf-accent,#007BFF);background:var(--tf-blue-50,#e9f3ff)}
.tf-slot.is-selected{border:2px solid var(--tf-accent,#007BFF);background:#e9f3ff;font-weight:600;box-shadow:0 4px 10px -3px rgba(0,123,255,.35)}
.tf-slot.is-full{background:#f1f4f8;color:#94a3b8;cursor:not-allowed;border-style:dashed}
.tf-slot:focus-visible{outline:2px solid var(--tf-accent,#007BFF);outline-offset:2px}
.tf-slot-time{line-height:1.1}
.tf-slot-meta{font-size:10px;color:#059669}
.tf-slot.is-full .tf-slot-meta{color:#94a3b8}
.tf-slot.is-selected .tf-slot-meta{color:var(--tf-accent,#007BFF)}

/* ---- Conditional logic ------------------------------------------------ */
/* !important resists theme display overrides; the grid collapses (no gap). */
.tf-form-wrap .tf-field.tf-logic-hidden{display:none!important}

/* ---- Multi-step -------------------------------------------------------- */
/* Progress header (numbered dots + titles, connectors fill as steps done). */
.tf-form-wrap .tf-steps{display:flex;align-items:flex-start;margin:0 0 26px;flex:0 0 100%}
.tf-form-wrap .tf-steps-item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.tf-form-wrap .tf-steps-item:not(:last-child)::after{content:"";position:absolute;top:14px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:#e3e8ef;border-radius:2px}
.tf-form-wrap .tf-steps-item.is-done:not(:last-child)::after{background:var(--tf-accent,#007BFF)}
.tf-form-wrap .tf-steps-dot{width:28px;height:28px;border-radius:50%;border:2px solid #e3e8ef;background:#fff;color:#697586;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1;transition:.2s;box-sizing:border-box}
.tf-form-wrap .tf-steps-item.is-active .tf-steps-dot{border-color:var(--tf-accent,#007BFF);color:var(--tf-accent,#007BFF);box-shadow:0 0 0 4px rgba(0,123,255,.12)}
.tf-form-wrap .tf-steps-item.is-done .tf-steps-dot{border-color:var(--tf-accent,#007BFF);background:var(--tf-accent,#007BFF);color:#fff}
.tf-form-wrap .tf-steps-check{display:none}
.tf-form-wrap .tf-steps-item.is-done .tf-steps-num{display:none}
.tf-form-wrap .tf-steps-item.is-done .tf-steps-check{display:inline}
.tf-form-wrap .tf-steps-lbl{font-size:11.5px;font-weight:600;color:#697586;margin-top:7px;text-align:center;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-form-wrap .tf-steps-item.is-active .tf-steps-lbl{color:var(--tf-accent,#007BFF)}
.tf-form-wrap .tf-steps-item.is-done .tf-steps-lbl{color:#3b4657}

/* Step panes: class toggling only, values keep posting from all steps. */
.tf-form-wrap .tf-form.tf-steps-on .tf-field.tf-step-hidden{display:none!important}
.tf-form-wrap .tf-form.tf-steps-on .tf-field.tf-type-step{display:none!important}

/* No-JS fallback: markers render as section headings, all steps stacked. */
.tf-form-wrap .tf-step-marker{border-top:1px solid #eef1f6;padding-top:14px;margin-top:6px}
.tf-form-wrap .tf-step-marker h4{margin:0;font-size:14.5px;color:#0f1729}

/* Nav buttons share the actions row with submit. */
.tf-form-wrap .tf-actions-steps{display:flex;align-items:center;gap:10px}
.tf-form-wrap .tf-step-next,.tf-form-wrap .tf-step-back{border:none;border-radius:9px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.tf-form-wrap .tf-step-next{background:var(--tf-accent,#007BFF);color:#fff;margin-left:auto}
.tf-form-wrap .tf-step-next:hover{filter:brightness(.92)}
.tf-form-wrap .tf-step-back{background:#fff;color:#3b4657;border:1px solid #e3e8ef}
.tf-form-wrap .tf-step-back:hover{border-color:#697586}
.tf-form-wrap .tf-actions-steps .tf-submit{margin-left:auto}
.tf-form-wrap .tf-step-back:not([hidden]) ~ .tf-submit{margin-left:auto}

@media(max-width:480px){
	.tf-form-wrap .tf-steps-lbl{max-width:70px;font-size:10.5px}
}

/* ---- Name field (single / split) ----------------------------------- */
.tf-form-wrap .tf-name-row{display:flex;gap:14px}
.tf-form-wrap .tf-name-part{flex:1;min-width:0;display:block}
@media(max-width:480px){
	.tf-form-wrap .tf-name-row{flex-direction:column;gap:10px}
}
/* Visually hidden but available to screen readers. */
.tf-form-wrap .tf-sr-only{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Country field (combobox over a native select) ------------------ */
.tf-form-wrap .tf-country{position:relative}
/* Without JS the native select is the control; JS moves it out of view but
   keeps it in the DOM because it is what actually posts. */
.tf-form-wrap .tf-country .tf-country-native{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0}
.tf-form-wrap .tf-country-input{padding-right:34px}
.tf-form-wrap .tf-country-caret{
	position:absolute;right:13px;top:50%;width:9px;height:9px;margin-top:-6px;
	border-right:2px solid var(--tf-ink-3,#697586);border-bottom:2px solid var(--tf-ink-3,#697586);
	transform:rotate(45deg);pointer-events:none}
.tf-form-wrap .tf-country-list{
	position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;
	background:#fff;border:1px solid var(--tf-line,#d3dae4);border-radius:9px;
	box-shadow:0 12px 30px rgba(16,24,40,.14);
	max-height:230px;overflow-y:auto;padding:5px;-webkit-overflow-scrolling:touch}
.tf-form-wrap .tf-country-list[hidden]{display:none}
.tf-form-wrap .tf-country-opt{
	padding:8px 10px;border-radius:6px;font-size:14px;color:var(--tf-ink,#0f1729);cursor:pointer}
.tf-form-wrap .tf-country-opt.is-active{background:var(--tf-blue-50,#e9f3ff)}
.tf-form-wrap .tf-country-opt.is-current{font-weight:600}
.tf-form-wrap .tf-country-none{padding:9px 10px;font-size:13px;color:var(--tf-ink-3,#697586)}

/* ---- Consent field --------------------------------------------------- */
.tf-form-wrap .tf-consent{
	display:flex;align-items:flex-start;gap:10px;cursor:pointer;
	font-size:14px;line-height:1.55;color:var(--tf-ink-2,#3b4657)}
.tf-form-wrap .tf-consent-box{
	box-sizing:border-box;width:17px;height:17px;min-width:17px;margin:2px 0 0;padding:0;
	flex:none;accent-color:var(--tf-accent,#007BFF);cursor:pointer}
.tf-form-wrap .tf-consent-text{min-width:0}
.tf-form-wrap .tf-consent-link{
	color:var(--tf-accent,#007BFF);text-decoration:underline;text-underline-offset:2px}
.tf-form-wrap .tf-consent-link:hover{text-decoration:none}
.tf-form-wrap .tf-field.tf-invalid .tf-consent-box{outline:2px solid var(--tf-err,#c0362c);outline-offset:2px}