/*
  可重複使用的元件：卡片、表單、按鈕、訊息、成功頁、OTP 輸入框。

  類名沿革：
  - `is-invalid` / `invalid-feedback` 是 Bootstrap 留下的名字，但**刻意保留**——
    模板用 th:errorclass="is-invalid" 綁著它，RegisterSubmitTests 等測試也會踩到。
    這裡自己把樣式寫出來，不需要 Bootstrap。
  - 其餘 Bootstrap 形狀的類名（alert alert-danger 之類）一律改名成 .notice--*，
    刪掉框架後還留著框架的類名，只會讓下一個人搞不清楚到底還載入了什麼。
*/

/* ---- 卡片 -------------------------------------------------------------- */

.card {
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: clamp(20px, 4vw, 40px);
	max-width: 640px;
	margin-inline: auto;
}
.card--wide { max-width: 860px; }

.card > h1, .card > .title { margin-top: 0; }
.lead { color: var(--muted); margin-bottom: 1.5em; }
.register-intro { margin-bottom: 1.5em; }
.register-intro .lead { margin: 0; }
.register-intro .lead + .lead { margin-top: 4px; }

/* 步驟指示。設計稿沒有，但三步的政府流程需要它 */
.step-pill {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	background: var(--orange-soft);
	/* 用 --orange-dark 而非 --orange-text：後者疊在 --orange-soft 上只有 4.49:1，
	   差一點點就不到內文要求的 4.5:1 */
	color: var(--orange-dark);
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* ---- 表單 -------------------------------------------------------------- */

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }

@media (max-width: 640px) {
	.form-grid { grid-template-columns: 1fr; }
}

.field label { font-weight: 700; color: var(--ink); }
.required { color: var(--orange-text); margin-left: 2px; }

.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 52px;
	padding: 10px 14px;
	border: 1.5px solid var(--field-line);
	border-radius: 14px;
	background: #fff;
	color: var(--brown);
	font: inherit;
	font-size: 16px;   /* 低於 16px 時 iOS Safari 會在聚焦時自動放大整頁 */
}
.field input:hover { border-color: var(--orange-text); }
.field input::placeholder { color: #8a7059; }

/* 原生日期選擇器的圖示調成品牌色，其餘交給平台 */
.field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.hint { font-size: var(--fs-sm); color: var(--muted); }

/* 同意條款區塊 */
.consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	margin-top: 4px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 22px; height: 22px;
	margin: 2px 0 0;
	accent-color: var(--orange-text);
	cursor: pointer;
}
.consent label { cursor: pointer; line-height: 1.6; }

/* 個資聲明固定高度，讓使用者在區塊內捲動閱讀，不把註冊頁拉得過長。 */
.privacy-notice {
	margin-top: 18px;
	padding: 16px;
	background: #fffaf1;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.privacy-notice h2 {
	margin: 0 0 10px;
	font-size: 1.1rem;
	color: var(--brown);
}
.privacy-notice__scroll {
	max-height: 240px;
	overflow-y: auto;
	padding: 12px 16px 12px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	line-height: 1.7;
	font-size: var(--fs-sm);
	color: var(--brown);
	-webkit-overflow-scrolling: touch;
}
.privacy-notice__scroll:focus {
	outline: 2px solid var(--orange-text);
	outline-offset: 2px;
}
.privacy-notice__scroll h3 {
	margin: 14px 0 4px;
	font-size: var(--fs-sm);
	color: var(--ink);
}
.privacy-notice__scroll p { margin: 0 0 8px; }
.privacy-notice__date { font-weight: 700; }

/* ---- 驗證錯誤 ---------------------------------------------------------- */

/* 不只用顏色標示錯誤：邊框加粗、另有文字訊息 */
.is-invalid,
.field input.is-invalid {
	border-color: var(--danger) !important;
	border-width: 2px;
	background: var(--danger-bg);
}
/* 每個 invalid-feedback 在模板裡都包在 th:if="${#fields.hasErrors(...)}" 內，
   沒有錯誤時根本不在 DOM，所以不需要 Bootstrap 那套 display:none + 兄弟選擇器 */
.invalid-feedback {
	display: block;
	color: var(--danger);
	font-size: var(--fs-sm);
	font-weight: 600;
}

/* ---- 按鈕 -------------------------------------------------------------- */

.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 28px;
}
.actions--center { justify-content: center; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 12px 30px;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled,
.btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}
/* 首頁暫不開放的入口保留位置，但刻意做成明顯灰階，不讓人誤認為可點擊。 */
.btn--preview:disabled,
.btn--preview[disabled] {
	background: #aaa39b;
	color: #fff;
	border-color: #aaa39b;
	opacity: .62;
	cursor: not-allowed;
	pointer-events: none;
	filter: grayscale(1);
	box-shadow: none;
}

.btn--primary {
	background: var(--orange-text);   /* 承載白字，所以用深一階的橘 */
	color: #fff;
}
.btn--primary:hover { background: var(--orange-dark); color: #fff; }

.btn--secondary {
	background: #fff;
	border-color: var(--orange-text);
	color: var(--orange-text);
}
.btn--secondary:hover { background: var(--orange-soft); color: var(--orange-dark); }

.btn--link {
	min-height: 0;
	padding: 4px 2px;
	background: none;
	border: 0;
	color: var(--orange-text);
	font-size: var(--fs-body);
	text-decoration: underline;   /* 不只靠顏色區分 */
}
.btn--link:hover { color: var(--orange-dark); }
.btn--link:disabled { text-decoration: none; color: var(--muted); }

/* 按鈕尾端的圓形箭頭，沿用設計稿的樣子 */
.btn .arrow {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: #fff;
	color: var(--orange-text);
	font-size: 17px;
	line-height: 1;
}
.btn--secondary .arrow { border: 1px solid var(--orange-text); }

/* ---- 訊息區塊 ---------------------------------------------------------- */

.notice {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-radius: var(--radius);
	border-left: 5px solid transparent;
	font-weight: 600;
}
.notice--error   { background: var(--danger-bg);  color: var(--danger);       border-left-color: var(--danger); }
.notice--warning { background: var(--warning-bg); color: var(--warning-text); border-left-color: #d99b00; }
.notice--success { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }

/* ---- 成功頁 ------------------------------------------------------------ */

.success-card { text-align: center; }
.success-icon {
	display: grid;
	place-items: center;
	width: 84px; height: 84px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--success-bg);
	color: var(--success-text);
	font-size: 42px;
	line-height: 1;
}
.success-icon--wait { background: var(--warning-bg); color: var(--warning-text); }

/* ---- OTP 輸入 ---------------------------------------------------------- */

/*
  設計稿是四個一位數的方格；這裡是「一個六位數欄位」套上方格的視覺語彙。
  不做分格輸入的理由：後端收的是單一 name="otp"（分格要靠 JS 組裝才 post 得出去，
  等於改 controller），而且分格輸入會讓 iOS 的 one-time-code 自動填入失效、
  讀屏軟體會念成六個欄位。被否決的替代方案記錄在改版 spec 裡。
*/
/* 選擇器要寫得比 `.field input` 更明確，否則上面那組通用輸入框樣式會蓋掉這裡 */
.field input.otp-input {
	max-width: 340px;
	margin-inline: auto;
	text-align: center;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: .45em;
	text-indent: .45em;   /* 補掉 letter-spacing 掛在最後一字的空白，讓字看起來置中 */
	min-height: 74px;
}

.otp-mobile {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--orange-text);
}

/* ---- 浮動文字客服小幫手 ----------------------------------------------- */

.customer-service-helper {
	position: fixed;
	right: 18px;
	bottom: 28px;
	width: 147px;
	height: 190px;
	z-index: 90;
	transition: bottom .35s ease;
}
.customer-service-helper a,
.customer-service-helper img {
	display: block;
	width: 100%;
	height: auto;
}
.customer-service-helper__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: #ffc551;
	color: #25140a;
	font-size: 18px;
	line-height: 18px;
	cursor: pointer;
}
.customer-service-helper.is-collapsed { bottom: -162px; }
.customer-service-helper.is-collapsed .customer-service-helper__close { font-size: 0; }
.customer-service-helper.is-collapsed .customer-service-helper__close::after {
	content: "＋";
	font-size: 17px;
	line-height: 20px;
}
@media (max-width: 640px) {
	.customer-service-helper { right: 8px; bottom: 14px; transform: scale(.82); transform-origin: right bottom; }
	.customer-service-helper.is-collapsed { bottom: -166px; }
}