/**
 * 방문예약 폼 · 결과 모달
 *
 * 테마 색상 토큰(--cta-bg, --color-primary 등)이 있으면 그것을 따르고,
 * 없으면 폴백 값을 쓴다 — 플러그인이 테마에 종속되지 않도록.
 */

.dsc-reservation {
	width: 100%;
}

.dsc-reservation__title {
	margin: 0 0 20px;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* ── 폼 ──────────────────────────────────────────────────── */

.dsc-form {
	display: grid;
	gap: 16px;
}

/* 축약형(메인 SEC-07 인라인)은 가로로 눕힌다 */
.dsc-reservation--compact .dsc-form {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 12px 16px;
}

.dsc-reservation--compact .dsc-form__row--consent,
.dsc-reservation--compact .dsc-form__submit {
	grid-column: 1 / -1;
}

.dsc-form__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dsc-form__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.dsc-form__req {
	color: #E5484D;
}

.dsc-form__optional {
	font-weight: 400;
	opacity: 0.65;
}

.dsc-form__input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-md, 8px);
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	font-family: inherit;
	font-size: 15px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.dsc-form__input::placeholder {
	color: currentColor;
	opacity: 0.45;
}

.dsc-form__input:focus {
	outline: none;
	border-color: var(--cta-bg, #C4A882);
	background: rgba(255, 255, 255, 0.14);
}

.dsc-form__input.is-invalid {
	border-color: #E5484D;
}

.dsc-form__textarea {
	min-height: 110px;
	padding: 12px 14px;
	resize: vertical;
}

/* date 입력의 기본 달력 아이콘이 어두운 배경에서 안 보이는 문제 */
.dsc-form__input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.7;
	cursor: pointer;
}

.dsc-form__error {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #FF8A8E;
	min-height: 0;
}

.dsc-form__error:empty {
	display: none;
}

/* ── 동의 ────────────────────────────────────────────────── */

.dsc-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.dsc-form__consent input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--cta-bg, #C4A882);
	cursor: pointer;
}

.dsc-form__privacy {
	margin: 8px 0 0;
	padding: 12px 14px;
	border-radius: var(--radius-sm, 4px);
	background: rgba(255, 255, 255, 0.06);
	font-size: 12.5px;
	line-height: 1.6;
	opacity: 0.8;
}

.dsc-form__privacy-link {
	margin: 6px 0 0;
	font-size: 12.5px;
}

.dsc-form__privacy-link a {
	color: inherit;
	text-decoration: underline;
	opacity: 0.8;
}

/* ── Honeypot — 화면·스크린리더 양쪽에서 감춘다 ──────────── */

.dsc-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 제출 버튼 ───────────────────────────────────────────── */

.dsc-form__submit {
	min-height: 54px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--radius-full, 9999px);
	background: var(--cta-bg, #C4A882);
	color: var(--cta-color, #fff);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.dsc-form__submit:hover:not(:disabled),
.dsc-form__submit:focus-visible:not(:disabled) {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

.dsc-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ── 결과 모달 ───────────────────────────────────────────── */

body.dsc-modal-open {
	overflow: hidden;
}

.dsc-modal[hidden] {
	display: none;
}

.dsc-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 400);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.dsc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 27, 43, 0.72);
}

.dsc-modal__dialog {
	position: relative;
	width: min(100%, 420px);
	padding: 32px 28px 24px;
	border-radius: var(--radius-lg, 16px);
	background: #fff;
	color: #1A1A2E;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.dsc-modal__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.dsc-modal--success .dsc-modal__title {
	color: #1E7A4B;
}

.dsc-modal--error .dsc-modal__title {
	color: #C13A3F;
}

.dsc-modal__text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.7;
	color: #4A5568;
}

.dsc-modal__text:empty {
	display: none;
}

.dsc-modal__btn {
	min-width: 120px;
	min-height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius-full, 9999px);
	background: var(--color-primary, #0B1B2B);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

/* ── 밝은 배경(서브페이지)에 놓일 때 ─────────────────────── */

.dsc-reservation--light .dsc-form__input {
	border-color: #E0E0E0;
	background: #fff;
	color: #1A1A2E;
}

.dsc-reservation--light .dsc-form__privacy {
	background: #F5F3EF;
	color: #4A5568;
	opacity: 1;
}

.dsc-reservation--light .dsc-form__input[type="date"]::-webkit-calendar-picker-indicator {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.dsc-form__input,
	.dsc-form__submit {
		transition: none;
	}

	.dsc-form__submit:hover:not(:disabled) {
		transform: none;
	}
}

@media (max-width: 767px) {
	.dsc-reservation--compact .dsc-form {
		grid-template-columns: 1fr;
	}
}