/* 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:8px;
	/* 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:16px 14px;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% - 7px)}
.tf-form-wrap .tf-w-1-3{flex-basis:calc(33.333% - 10px)}

/* Labels */
.tf-form-wrap .tf-label{display:block;font-size:14px;font-weight:600;color:var(--tf-label-color);margin:0 0 6px;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:10px 12px;margin:0;
	font-size:15px;line-height:1.4;font-family:inherit;
	color:var(--tf-ink);background-color:#fff;
	border:1px solid var(--tf-input-border);border-radius:var(--tf-radius);
	box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;
	transition:border-color .12s,box-shadow .12s;
}
.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 12px center;padding-right:34px;
}
.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 3px 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:20px 0 0}
.tf-form-wrap .tf-submit{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	width:100%;padding:13px 20px;margin:0;
	font-size:15px;font-weight:650;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 2px 8px rgba(0,123,255,.3);transition:background-color .12s,opacity .12s;
	-webkit-appearance:none;appearance:none;
}
.tf-form-wrap .tf-submit:hover{background-color:var(--tf-blue-600);color:#fff}
.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;margin-top:6px}
.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}
}

/* Small screens: stack multi-column */
@media (max-width:560px){
	.tf-form-wrap .tf-w-1-2,.tf-form-wrap .tf-w-1-3{flex-basis:100%}
}

/* --- 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;
	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:none;border-radius:var(--tf-trigger-radius,8px);cursor:pointer;
	-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}

/* 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. */
.tf-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px}
.tf-modal[hidden]{display:none}
.tf-modal-overlay{position:absolute;inset:0;background:rgba(15,23,41,.55);cursor:pointer}
.tf-modal-dialog{position:relative;z-index:1;width:100%;max-width:var(--tf-modal-width,520px);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(16,24,40,.28);padding:26px 26px 28px;text-align:left;animation:tf-modal-in .16s ease}
/* Reserve space at the top-right so the close button never sits on the title. */
.tf-modal-body .tf-form-title{padding-right:44px}
.tf-modal-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border:none;background:#f1f4f8;color:#3b4657;border-radius:9px;cursor:pointer;transition:background-color .12s}
.tf-modal-close:hover{background:#e4e9f0;color:#0f1729}
.tf-modal-close:focus-visible{outline:2px solid var(--tf-accent,#007BFF);outline-offset:2px}
.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;max-height:100vh;max-height:100dvh;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-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;width:38px;height:38px}
	.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,8px);
	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}
.tf-booking-tz{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12px;color:#64748b;margin-bottom:10px}
.tf-booking-tz .dashicons{font-size:15px;width:15px;height:15px}
.tf-booking-tz-local{padding-left:6px;margin-left:1px;border-left:1px solid #d7dde6;color:#94a3b8}
.tf-booking-sublabel{display:block;font-size:12px;color:#475569;margin-bottom:5px;font-weight:600}
.tf-booking-daterow{margin-bottom:14px}
.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(88px,1fr));gap:8px}
.tf-slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border:1px solid #d3dae4;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:#0f1729;transition:border-color .12s,background-color .12s}
.tf-slot:hover:not(.is-full){border-color:var(--tf-accent,#007BFF)}
.tf-slot.is-selected{border:2px solid var(--tf-accent,#007BFF);background:#e9f3ff;font-weight:600}
.tf-slot.is-full{background:#f1f4f8;color:#94a3b8;cursor:not-allowed;border-style:dashed}
.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)}