/* TW Formulari — built-in forms. Colours and radius are variables so a theme can adapt them:
   .twf-form { --twf-accent: #0f766e; --twf-radius: 12px; } */

.twf-form {
	--twf-accent: #2563eb;
	--twf-accent-text: #ffffff;
	--twf-text: #111827;
	--twf-muted: #6b7280;
	--twf-border: #d1d5db;
	--twf-bg: #ffffff;
	--twf-error: #b91c1c;
	--twf-radius: 8px;
	--twf-gap: 22px;
	--twf-subgap: 12px;
	position: relative;
	max-width: 100%;
	color: var(--twf-text);
	font: inherit;
}

.twf-form *, .twf-form *::before, .twf-form *::after { box-sizing: border-box; }

.twf-fields { display: flex; flex-wrap: wrap; gap: var(--twf-gap); }
.twf-field { flex: 1 1 100%; min-width: 0; }
.twf-field[hidden], .twf-step[hidden], .twf-form [hidden] { display: none !important; }
.twf-width-half { flex-basis: calc(50% - var(--twf-gap) / 2); }
@media (max-width: 600px) { .twf-width-half { flex-basis: 100%; } }

.twf-step__title { margin: 0 0 var(--twf-gap); font-size: .9em; color: var(--twf-muted); }
.twf-label, .twf-form legend { display: block; margin: 0 0 8px; font-weight: 600; padding: 0; }
.twf-req { color: var(--twf-error); }
.twf-req[hidden] { display: none; }
.twf-description, .twf-hint { margin: 0 0 8px; font-size: .875em; color: var(--twf-muted); }
.twf-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.twf-section__title { margin: var(--twf-gap) 0 0; font-size: 1.15em; }

.twf-form input[type=text], .twf-form input[type=email], .twf-form input[type=tel], .twf-form input[type=number],
.twf-form input[type=date], .twf-form input[type=file], .twf-form select, .twf-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--twf-border);
	border-radius: var(--twf-radius);
	background: var(--twf-bg);
	color: var(--twf-text);
	font: inherit;
	line-height: 1.4;
}
.twf-form textarea { resize: vertical; }
.twf-form input:focus, .twf-form select:focus, .twf-form textarea:focus, .twf-btn:focus-visible {
	outline: 2px solid var(--twf-accent);
	outline-offset: 1px;
}
.twf-form [aria-invalid=true] { border-color: var(--twf-error); }

.twf-row { display: flex; gap: var(--twf-subgap); margin: 0; }
.twf-row > * { flex: 1 1 0; min-width: 0; }
/* Parts of one field (street, zip and city, country; first and last name): always the same space between them. */
.twf-group > :is(input, .twf-row) + :is(input, .twf-row) { margin-top: var(--twf-subgap); }
@media (max-width: 480px) { .twf-row { flex-direction: column; } }

.twf-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-weight: 400; cursor: pointer; }
.twf-check input { margin-top: .3em; flex: 0 0 auto; }
.twf-calc { display: inline-block; padding: 8px 0; font-size: 1.25em; font-weight: 700; }

.twf-error { margin: 4px 0 0; min-height: 0; font-size: .875em; color: var(--twf-error); }
.twf-error:empty { display: none; }

.twf-nav { display: flex; gap: 10px; margin-top: calc(var(--twf-gap) + 4px); }
.twf-btn {
	appearance: none;
	padding: 11px 22px;
	border: 1px solid var(--twf-accent);
	border-radius: var(--twf-radius);
	background: var(--twf-accent);
	color: var(--twf-accent-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.twf-btn:hover { filter: brightness(.94); }
.twf-btn:disabled { opacity: .6; cursor: progress; }
.twf-btn--secondary { background: transparent; color: var(--twf-accent); }

.twf-status { margin-top: 10px; min-height: 1.4em; font-size: .9em; color: var(--twf-muted); }
.twf-confirmation { padding: 16px 18px; border: 1px solid var(--twf-border); border-radius: var(--twf-radius); background: #f0fdf4; }
.twf-confirmation:focus { outline: 2px solid var(--twf-accent); }

/* Payment (Stripe draws its own fields inside the element) */

.twf-notice { padding: 10px 12px; border-left: 4px solid #f59e0b; background: #fffbeb; color: #78350f; }
.twf-payment { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--twf-border); border-radius: var(--twf-radius); background: #fafafa; }
.twf-payment[hidden] { display: none; }
.twf-payment__title { margin: 0 0 6px; font-size: 1.05em; }
.twf-payment__total { margin: 0 0 12px; }
.twf-payment__total strong { font-size: 1.15em; }
.twf-payment__element { min-height: 60px; }
.twf-payment__secure { margin: 10px 0 0; font-size: .82em; color: var(--twf-muted); }
.twf-payment__message { margin: 8px 0 0; color: #b91c1c; font-size: .92em; }
.twf-payment__message:empty { display: none; }
.twf-paymethods { margin: 0 0 14px; padding: 0; border: 0; }
.twf-paymethods legend { padding: 0; margin: 0 0 8px; font-weight: 600; }
.twf-paymethod { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 11px 14px; border: 1px solid var(--twf-border); border-radius: var(--twf-radius); background: #fff; cursor: pointer; }
.twf-paymethod:hover { border-color: var(--twf-accent, #2563eb); }
.twf-paymethod:has(input:checked) { border-color: var(--twf-accent, #2563eb); box-shadow: 0 0 0 1px var(--twf-accent, #2563eb); }
.twf-paymethod input { margin: 0; }
.twf-paypanel[hidden] { display: none; }
.twf-payinfo { padding: 14px 16px; border: 1px solid var(--twf-border); border-radius: var(--twf-radius); background: #fff; }
.twf-payinfo__title { margin: 0 0 8px; font-weight: 600; }
.twf-payinfo__rows { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.twf-payinfo__rows dt { color: var(--twf-muted); }
.twf-payinfo__rows dd { margin: 0; overflow-wrap: anywhere; }
.twf-payinfo__note { margin: 12px 0 0; font-weight: 600; }
.twf-payinfo-wrap { margin-top: 14px; }
.twf-copy { margin-left: 8px; padding: 2px 9px; border: 1px solid var(--twf-border); border-radius: 999px; background: #fff; font-size: .8em; cursor: pointer; }
.twf-copy:hover { border-color: var(--twf-accent, #2563eb); }
@media (max-width: 480px) { .twf-payinfo__rows { grid-template-columns: 1fr; gap: 0; } .twf-payinfo__rows dd { margin-bottom: 8px; } }
.twf-payment__placeholder { padding: 22px; border: 1px dashed var(--twf-border); border-radius: var(--twf-radius); color: var(--twf-muted); text-align: center; background: #fff; }
.twf-locked .twf-step { opacity: .65; }

/* Styles */
.twf-style-flat input[type=text], .twf-style-flat input[type=email], .twf-style-flat input[type=tel], .twf-style-flat input[type=number],
.twf-style-flat input[type=date], .twf-style-flat select, .twf-style-flat textarea { border: 0; background: #f3f4f6; }
.twf-style-flat { --twf-radius: 4px; }

.twf-style-material input[type=text], .twf-style-material input[type=email], .twf-style-material input[type=tel], .twf-style-material input[type=number],
.twf-style-material input[type=date], .twf-style-material select, .twf-style-material textarea {
	border: 0; border-bottom: 2px solid var(--twf-border); border-radius: 0; background: transparent; padding-left: 2px;
}
.twf-style-material input:focus, .twf-style-material select:focus, .twf-style-material textarea:focus { outline: 0; border-bottom-color: var(--twf-accent); }
.twf-style-material { --twf-radius: 2px; }

@media (prefers-reduced-motion: reduce) { .twf-btn { transition: none; } }

/* Preview inside the visual editor */
.twf-is-preview .twf-step { border: 1px dashed var(--twf-border); border-radius: var(--twf-radius); padding: 14px; margin-bottom: 14px; }
.twf-is-preview .twf-field { position: relative; cursor: pointer; border-radius: var(--twf-radius); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .12s; }
.twf-is-preview .twf-field:hover { outline-color: #bfdbfe; }
.twf-is-preview .twf-field.twf-selected { outline-color: var(--twf-accent); background: rgba(37, 99, 235, .04); }
.twf-is-preview .twf-field[data-has-conditions="1"]::after {
	content: attr(data-condition-label); position: absolute; top: -8px; right: 4px; padding: 1px 8px; border-radius: 10px;
	background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600;
}
.twf-is-preview input, .twf-is-preview select, .twf-is-preview textarea, .twf-is-preview button { pointer-events: none; }