/* 簡易表單大師 — 前台樣式
   所有可調整項目都走 CSS 變數，Elementor 樣式分頁會覆蓋這些變數。 */

.sfb-wrap {
	--sfb-gap-x: 16px;
	--sfb-gap-y: 18px;
	--sfb-label-color: inherit;
	--sfb-label-gap: 6px;
	--sfb-required-color: #d63638;
	--sfb-input-color: #1f2328;
	--sfb-input-bg: #ffffff;
	--sfb-input-border-color: #d5d8dc;
	--sfb-input-border-width: 1px;
	--sfb-input-radius: 6px;
	--sfb-input-padding: 10px 12px;
	--sfb-input-focus-color: #2271b1;
	--sfb-placeholder-color: #9aa1a9;
	--sfb-option-gap: 10px;
	--sfb-option-color: inherit;
	--sfb-accent: #2271b1;
	--sfb-desc-color: #6b7280;
	--sfb-error-color: #d63638;
	--sfb-btn-bg: #2271b1;
	--sfb-btn-color: #ffffff;
	--sfb-btn-bg-hover: #135e96;
	--sfb-btn-color-hover: #ffffff;
	--sfb-btn-radius: 6px;
	--sfb-btn-padding: 12px 28px;
	--sfb-btn-border-color: transparent;
	--sfb-btn-border-width: 0px;
	--sfb-btn-width: auto;
	--sfb-btn-align: flex-start;

	box-sizing: border-box;
}

.sfb-wrap *,
.sfb-wrap *::before,
.sfb-wrap *::after {
	box-sizing: border-box;
}

.sfb-form-title {
	margin: 0 0 16px;
}

/* 版面 */
.sfb-rows {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc( var( --sfb-gap-x ) / -2 );
	margin-right: calc( var( --sfb-gap-x ) / -2 );
}

.sfb-field {
	padding-left: calc( var( --sfb-gap-x ) / 2 );
	padding-right: calc( var( --sfb-gap-x ) / 2 );
	margin-bottom: var( --sfb-gap-y );
	width: 100%;
	min-width: 0;
}

.sfb-w-50 {
	width: 50%;
}

.sfb-w-33 {
	width: 33.3333%;
}

@media ( max-width: 767px ) {
	.sfb-w-50,
	.sfb-w-33 {
		width: 100%;
	}
}

/* 標籤 */
.sfb-label {
	display: block;
	margin-bottom: var( --sfb-label-gap );
	color: var( --sfb-label-color );
	font-weight: 600;
	line-height: 1.4;
}

.sfb-required {
	color: var( --sfb-required-color );
	margin-left: 2px;
}

/* 輸入框 */
.sfb-input {
	display: block;
	width: 100%;
	max-width: 100%;
	color: var( --sfb-input-color );
	background-color: var( --sfb-input-bg );
	border: var( --sfb-input-border-width ) solid var( --sfb-input-border-color );
	border-radius: var( --sfb-input-radius );
	padding: var( --sfb-input-padding );
	line-height: 1.5;
	font-family: inherit;
	font-size: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.sfb-input:focus {
	outline: none;
	border-color: var( --sfb-input-focus-color );
	box-shadow: 0 0 0 2px rgba( 34, 113, 177, 0.15 );
}

.sfb-input::placeholder {
	color: var( --sfb-placeholder-color );
	opacity: 1;
}

.sfb-textarea {
	min-height: 120px;
	resize: vertical;
}

.sfb-select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
	cursor: pointer;
}

/* 單選 / 多選 */
.sfb-options {
	display: flex;
	flex-direction: column;
	gap: var( --sfb-option-gap );
}

.sfb-options.sfb-options--inline {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: calc( var( --sfb-option-gap ) * 2 );
}

.sfb-option-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.sfb-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var( --sfb-option-color );
	line-height: 1.5;
	margin: 0;
}

.sfb-option input[type="radio"],
.sfb-option input[type="checkbox"] {
	width: 1.05em;
	height: 1.05em;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var( --sfb-accent );
	cursor: pointer;
}

.sfb-option__label {
	user-select: none;
}

/* 品牌 Logo 縮圖 */
.sfb-option__logo {
	width: auto;
	height: var( --sfb-logo-height, 28px );
	max-width: 120px;
	object-fit: contain;
	flex: 0 0 auto;
	display: block;
}

/* 「其他：__」補充填寫格 */
.sfb-extra {
	flex: 1 1 180px;
	min-width: 140px;
	max-width: 100%;
	padding: 6px 10px;
	margin-top: 0;
}

.sfb-type-select .sfb-extra {
	margin-top: 8px;
	width: 100%;
}

.sfb-extra[hidden] {
	display: none !important;
}

/* 日期：年 / 月 / 日 */
.sfb-date {
	display: flex;
	flex-wrap: wrap;
	gap: var( --sfb-date-gap, 10px );
	align-items: center;
}

.sfb-date__part {
	flex: 1 1 0;
	min-width: 88px;
}

.sfb-date__part--y {
	flex-grow: 1.3;
}

.sfb-date .sfb-input {
	width: 100%;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
	cursor: pointer;
}

/* 檔案上傳 */
.sfb-upload__drop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var( --sfb-upload-padding, 16px );
	border: 2px dashed var( --sfb-input-border-color );
	border-radius: var( --sfb-input-radius );
	background: var( --sfb-upload-bg, transparent );
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	margin: 0;
}

.sfb-upload__drop:hover,
.sfb-upload.is-dragover .sfb-upload__drop {
	border-color: var( --sfb-accent );
	background: var( --sfb-upload-bg-hover, rgba( 34, 113, 177, 0.04 ) );
}

.sfb-upload__input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
	overflow: hidden;
}

.sfb-upload__icon {
	color: var( --sfb-accent );
	flex: 0 0 auto;
	display: flex;
}

.sfb-upload__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sfb-upload__text strong {
	color: var( --sfb-input-color );
	line-height: 1.4;
}

.sfb-upload__text small {
	color: var( --sfb-desc-color );
	font-size: 0.82em;
	line-height: 1.5;
}

.sfb-upload__list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfb-upload__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: var( --sfb-input-border-width ) solid var( --sfb-input-border-color );
	border-radius: var( --sfb-input-radius );
	background: var( --sfb-input-bg );
	font-size: 0.9em;
	line-height: 1.4;
}

.sfb-upload__thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	flex: 0 0 auto;
	background: #f1f2f4;
}

.sfb-upload__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --sfb-input-color );
}

.sfb-upload__size {
	color: var( --sfb-desc-color );
	flex: 0 0 auto;
	font-size: 0.9em;
}

.sfb-upload__remove {
	flex: 0 0 auto;
	border: 0;
	background: none;
	color: var( --sfb-error-color );
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 4px;
}

.sfb-upload__remove:hover {
	background: rgba( 214, 54, 56, 0.08 );
}

/* 說明區塊 */
.sfb-type-html .sfb-html {
	display: flex;
	flex-direction: column;
	gap: var( --sfb-html-gap, 12px );
}

.sfb-html--box .sfb-html {
	background: var( --sfb-html-bg, #f6f7f9 );
	border: 1px solid var( --sfb-html-border, #e4e6ea );
	border-radius: var( --sfb-html-radius, 8px );
	padding: var( --sfb-html-padding, 16px );
}

.sfb-html--left .sfb-html,
.sfb-html--right .sfb-html {
	flex-direction: row;
	align-items: flex-start;
}

.sfb-html--right .sfb-html {
	flex-direction: row-reverse;
}

.sfb-html__media {
	flex: 0 0 auto;
	max-width: 100%;
}

.sfb-html--left .sfb-html__media,
.sfb-html--right .sfb-html__media {
	max-width: 40%;
}

.sfb-html__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --sfb-html-img-radius, 6px );
}

.sfb-html__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sfb-html__title {
	margin: 0 0 6px;
	color: var( --sfb-html-title-color, inherit );
	line-height: 1.4;
}

.sfb-html__text {
	color: var( --sfb-html-text-color, inherit );
	line-height: 1.7;
}

.sfb-html__text p {
	margin: 0 0 0.7em;
}

.sfb-html__text p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 600px ) {
	.sfb-html--left .sfb-html,
	.sfb-html--right .sfb-html {
		flex-direction: column;
	}

	.sfb-html--left .sfb-html__media,
	.sfb-html--right .sfb-html__media {
		max-width: 100%;
	}
}

/* 說明 / 錯誤 */
.sfb-desc {
	display: block;
	margin-top: 5px;
	color: var( --sfb-desc-color );
	font-size: 0.86em;
	line-height: 1.5;
}

.sfb-error {
	display: none;
	margin-top: 5px;
	color: var( --sfb-error-color );
	font-size: 0.86em;
	line-height: 1.5;
}

.sfb-field.has-error .sfb-error {
	display: block;
}

.sfb-field.has-error .sfb-input {
	border-color: var( --sfb-error-color );
}

/* 按鈕 */
.sfb-actions {
	display: flex;
	justify-content: var( --sfb-btn-align );
}

.sfb-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var( --sfb-btn-width );
	background-color: var( --sfb-btn-bg );
	color: var( --sfb-btn-color );
	border: var( --sfb-btn-border-width ) solid var( --sfb-btn-border-color );
	border-radius: var( --sfb-btn-radius );
	padding: var( --sfb-btn-padding );
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.sfb-submit:hover,
.sfb-submit:focus {
	background-color: var( --sfb-btn-bg-hover );
	color: var( --sfb-btn-color-hover );
}

.sfb-submit[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}

.sfb-spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: sfb-spin 0.7s linear infinite;
}

.sfb-form.is-sending .sfb-spinner {
	display: inline-block;
}

@keyframes sfb-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* 訊息 */
.sfb-message {
	display: none;
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 6px;
	line-height: 1.6;
}

.sfb-message.is-visible {
	display: block;
}

.sfb-message--success {
	background: #edfaef;
	color: #0a6b2e;
	border: 1px solid #a7e0b8;
}

.sfb-message--error {
	background: #fdf0f0;
	color: #a11a1c;
	border: 1px solid #f0b4b5;
}

/* 蜜罐 */
.sfb-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.sfb-notice {
	padding: 12px 16px;
	border-radius: 6px;
	background: #fdf0f0;
	color: #a11a1c;
	border: 1px solid #f0b4b5;
}