/* To Shopify WebUX — front-end form
   Colors come from CSS variables set inline (accent/button), so the
   whole look is customizable from the settings screen. */

:root {
	--tsw-accent: #e0b352;
	--tsw-btn: #111111;
	--tsw-btn-text: #ffffff;
}

.tsw-wrap {
	max-width: 640px;
	margin: 0 auto;
	padding: 8px;
	box-sizing: border-box;
	color: #1a1a1a;
	font-family: inherit;
}
.tsw-wrap *,
.tsw-wrap *::before,
.tsw-wrap *::after { box-sizing: border-box; }

/* Progress bar */
.tsw-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}
.tsw-progress-bar {
	flex: 1;
	height: 6px;
	border-radius: 6px;
	background: #ececec;
	overflow: hidden;
}
.tsw-progress-fill {
	display: block;
	height: 100%;
	background: #b9b9b9;
	transition: width .3s ease;
}
.tsw-progress-num {
	font-weight: 700;
	font-size: 15px;
	min-width: 44px;
	text-align: right;
}

/* Brand */
.tsw-brand { margin-bottom: 20px; }
.tsw-logo { max-height: 42px; width: auto; }
.tsw-brand-name { font-size: 22px; font-weight: 800; letter-spacing: .5px; }

.tsw-intro { color: #333; line-height: 1.6; font-size: 15px; }
.tsw-divider { border: 0; border-top: 1px solid #eaeaea; margin: 22px 0; }

/* Steps */
.tsw-step { display: none; }
.tsw-step.is-active { display: block; animation: tsw-fade .25s ease; }
@keyframes tsw-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tsw-step-title { font-size: 24px; font-weight: 800; margin: 8px 0 6px; }
.tsw-step-desc { color: #555; line-height: 1.6; margin-bottom: 20px; }

/* Fields */
.tsw-field { margin-bottom: 26px; }
.tsw-label { display: block; font-weight: 700; font-size: 18px; margin-bottom: 6px; }
.tsw-req { color: #e11; margin-left: 3px; }
.tsw-help { color: #8a8a8a; font-size: 14px; line-height: 1.55; margin: 0 0 12px; }

.tsw-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	font-size: 15px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.tsw-input:focus {
	outline: none;
	border-color: var(--tsw-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsw-accent) 25%, transparent);
}
.tsw-textarea { min-height: 92px; resize: vertical; }

/* Two-up group (name, etc.) */
.tsw-group { display: flex; gap: 16px; }
.tsw-group .tsw-field { flex: 1; }
.tsw-half { width: 100%; }

/* Options (radio / checkbox) */
.tsw-options { display: grid; gap: 12px; }
.tsw-cols-2 { grid-template-columns: 1fr 1fr; }
.tsw-checks { grid-template-columns: 1fr; }

.tsw-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
	transition: background .15s, border-color .15s;
}
.tsw-option:hover { border-color: #cbb; }
.tsw-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.tsw-option-mark {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #c7c7c7;
	border-radius: 50%;
	position: relative;
	transition: border-color .15s;
}
.tsw-checks .tsw-option-mark,
.tsw-consent .tsw-option-mark { border-radius: 4px; }
.tsw-option input:checked ~ .tsw-option-mark {
	border-color: var(--tsw-btn);
	background: var(--tsw-btn);
}
.tsw-option input:checked ~ .tsw-option-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
}
.tsw-options .tsw-option input[type="radio"]:checked ~ .tsw-option-mark::after {
	width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.tsw-checks .tsw-option input:checked ~ .tsw-option-mark::after,
.tsw-consent input:checked ~ .tsw-option-mark::after {
	width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg); top: 1px; left: 5px; margin: 0;
}
.tsw-option input:checked ~ .tsw-option-text { font-weight: 600; }
.tsw-option:has(input:checked) {
	border-color: var(--tsw-accent);
	background: color-mix(in srgb, var(--tsw-accent) 12%, #fff);
}
.tsw-consent { border: 0; padding: 4px 0; }

/* File upload */
.tsw-file {
	position: relative;
	border: 1px dashed #cfcfcf;
	border-radius: 8px;
	padding: 26px 16px;
	text-align: center;
	color: #333;
	background: #fafafa;
	transition: border-color .15s, background .15s;
}
.tsw-file.is-drag { border-color: var(--tsw-accent); background: #fff; }
.tsw-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.tsw-file-label { font-weight: 600; }
.tsw-file-names { display: block; margin-top: 8px; font-size: 13px; color: #666; }

/* Nav / buttons */
.tsw-nav { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.tsw-btn {
	width: 100%;
	padding: 15px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--tsw-btn);
	color: var(--tsw-btn-text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s, transform .05s;
}
.tsw-btn:hover { opacity: .9; }
.tsw-btn:active { transform: translateY(1px); }
.tsw-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tsw-outline {
	background: #fff;
	color: #111;
	border: 1px solid #cfcfcf;
}

/* Validation */
.tsw-field.has-error .tsw-input,
.tsw-field.has-error .tsw-options,
.tsw-field.has-error .tsw-file { border-color: #e11 !important; }
.tsw-error-msg { display: none; color: #e11; font-size: 13px; margin-top: 6px; }
.tsw-field.has-error .tsw-error-msg { display: block; }

/* Success */
.tsw-success { text-align: center; padding: 40px 16px; }
.tsw-success-icon {
	width: 64px; height: 64px; line-height: 64px; margin: 0 auto 18px;
	border-radius: 50%; background: var(--tsw-accent); color: #fff;
	font-size: 32px; font-weight: 700;
}
.tsw-success-text { font-size: 18px; color: #222; }

/* Responsive */
@media (max-width: 560px) {
	.tsw-cols-2 { grid-template-columns: 1fr; }
	.tsw-group { flex-direction: column; gap: 0; }
	.tsw-step-title { font-size: 21px; }
	.tsw-label { font-size: 16px; }
}