/* ==========================================================================
   Clarino - pages/water-heater-estimate-request.css
   /water-heater-estimate-request/ 専用。

   このファイルは is_page('water-heater-estimate-request') のときだけ読み込まれる。
   グローバルなタグセレクタは使わない。例外は body.water-heater-estimate-request で、
   固定の依頼ボタンの下にフッターが隠れないよう余白を足すためだけに使う。
   サイト共通のスマホ固定CTAは、このページでは依頼ボタンと重なるため隠す。
   ========================================================================== */

body.water-heater-estimate-request {
	padding-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
}

body.water-heater-estimate-request .fixed-mobile-cta {
	display: none;
}

.site-main > article.water-heater-estimate-request-page {
	max-width: 720px;
	padding-bottom: var(--space-4);
}

.water-heater-estimate-request__hero {
	padding-top: var(--space-3);
	padding-bottom: var(--space-2);
}

.water-heater-estimate-request__eyebrow {
	margin: 0 0 var(--space-1);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-accent-dark);
}

.water-heater-estimate-request__title,
.water-heater-estimate-request__section-title {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1.4;
}

.water-heater-estimate-request__title {
	font-size: var(--fs-hero);
}

.water-heater-estimate-request__lead,
.water-heater-estimate-request__photo-desc,
.water-heater-estimate-request__privacy,
.water-heater-estimate-request__confirm-lead {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.7;
}

.water-heater-estimate-request__summary,
.water-heater-estimate-request__fieldset,
.water-heater-estimate-request__confirm {
	margin: 0 0 var(--space-4);
}

.water-heater-estimate-request__fieldset {
	min-inline-size: 0;
	padding: 0;
	border: 0;
}

.water-heater-estimate-request__legend,
.water-heater-estimate-request__section-title {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
}

.water-heater-estimate-request__summary-list {
	margin: 0 0 var(--space-2);
}

.water-heater-estimate-request__summary-list div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 12px 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.water-heater-estimate-request__summary-list dt,
.water-heater-estimate-request__summary-list dd {
	margin: 0;
}

.water-heater-estimate-request__summary-list dt {
	flex: 0 0 auto;
	color: var(--color-gray-800);
}

.water-heater-estimate-request__summary-list dd {
	min-width: 0;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}

.water-heater-estimate-request__summary-price {
	flex-wrap: wrap;
	align-items: baseline;
}

.water-heater-estimate-request__summary-price dd {
	min-width: max-content;
	margin-left: auto;
	font-size: 22px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--color-accent-dark);
}

.water-heater-estimate-request__unknown {
	margin: 0 0 var(--space-2);
	color: var(--color-accent-dark);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.6;
}

.water-heater-estimate-request__missing p {
	margin: 0 0 var(--space-2);
}

.water-heater-estimate-request__missing .button {
	margin-top: var(--space-1);
}

.water-heater-estimate-request__text-link {
	display: inline-block;
	min-height: 44px;
	padding: 10px 0;
	font-weight: 700;
}

.water-heater-estimate-request__field {
	margin: 0 0 var(--space-3);
}

.water-heater-estimate-request__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 700;
}

.water-heater-estimate-request__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--color-accent);
	color: var(--color-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.water-heater-estimate-request__badge--optional {
	background-color: var(--color-gray-50);
	color: var(--color-gray-800);
}

.water-heater-estimate-request__control {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--color-gray-200);
	border-radius: 12px;
	background-color: var(--color-white);
	color: var(--color-black);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	box-shadow: none;
	appearance: none;
}

textarea.water-heater-estimate-request__control {
	min-height: 120px;
	resize: vertical;
}

.water-heater-estimate-request__control[aria-invalid="true"] {
	border-color: var(--color-accent-dark);
	box-shadow: inset 0 0 0 1px var(--color-accent-dark);
}

.water-heater-estimate-request__error {
	margin: 8px 0 0;
	color: var(--color-accent-dark);
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.5;
}

.water-heater-estimate-request__photo-note {
	margin: 0 0 var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: 12px;
	background-color: var(--color-gray-50);
}

.water-heater-estimate-request__photo-note p {
	margin: 0;
}

.water-heater-estimate-request__photo-note p + p {
	margin-top: 8px;
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.water-heater-estimate-request__photos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.water-heater-estimate-request__photo {
	padding: var(--space-3);
	border: 1px solid var(--color-gray-200);
	border-radius: 16px;
	background-color: var(--color-white);
	box-shadow: var(--shadow-card);
}

.water-heater-estimate-request__photo--important {
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 1px var(--color-accent), var(--shadow-card);
}

.water-heater-estimate-request__photo-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: 8px;
}

.water-heater-estimate-request__photo-title {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: 1.4;
}

.water-heater-estimate-request__photo-desc {
	margin-bottom: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-gray-800);
}

.water-heater-estimate-request__example {
	margin: 0 0 var(--space-2);
}

.water-heater-estimate-request__example-caption {
	margin-bottom: 8px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-gray-800);
}

.water-heater-estimate-request__example-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	overflow: hidden;
	border: 1px dashed var(--color-gray-200);
	border-radius: 12px;
	background-color: var(--color-gray-50);
}

.water-heater-estimate-request__example-frame img {
	width: 100%;
	height: 160px;
	object-fit: contain;
}

.water-heater-estimate-request__example-empty {
	margin: 0;
	color: var(--color-gray-500);
	font-size: var(--fs-sm);
}

.water-heater-estimate-request__preview {
	margin-bottom: var(--space-2);
}

.water-heater-estimate-request__preview img {
	width: 100%;
	max-height: 280px;
	object-fit: cover;
	border-radius: 12px;
	background-color: var(--color-gray-50);
}

.water-heater-estimate-request__filename,
.water-heater-estimate-request__preview-fallback {
	margin: 8px 0 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	word-break: break-all;
}

.water-heater-estimate-request__preview-fallback {
	color: var(--color-gray-800);
}

.water-heater-estimate-request__photo-actions {
	display: flex;
	gap: 8px;
}

.water-heater-estimate-request__pick,
.water-heater-estimate-request__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px;
	border-radius: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.water-heater-estimate-request__pick {
	position: relative;
	flex: 1 1 auto;
	border: 0;
	background-color: var(--color-accent);
	color: var(--color-white);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.water-heater-estimate-request__photo.is-selected .water-heater-estimate-request__pick {
	border: 1px solid var(--color-accent);
	background-color: var(--color-white);
	color: var(--color-accent-dark);
}

.water-heater-estimate-request__file {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	font-size: 16px;
	cursor: pointer;
}

.water-heater-estimate-request__pick:focus-within {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.water-heater-estimate-request__remove {
	flex: 0 0 auto;
	border: 1px solid var(--color-gray-200);
	background-color: var(--color-white);
	color: var(--color-accent-dark);
}

.water-heater-estimate-request__privacy {
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-gray-800);
}

.water-heater-estimate-request__confirm {
	padding: var(--space-3);
	border-radius: 16px;
	background-color: var(--color-gray-50);
	scroll-margin-top: var(--space-2);
	scroll-margin-bottom: calc(148px + env(safe-area-inset-bottom, 0px));
}

.water-heater-estimate-request__confirm-status {
	margin: 0 0 var(--space-2);
	font-weight: 700;
	color: var(--color-accent-dark);
}

.water-heater-estimate-request__confirm-heading {
	margin: var(--space-3) 0 var(--space-1);
	font-size: var(--fs-lg);
	line-height: 1.4;
}

.water-heater-estimate-request__confirm-photos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.water-heater-estimate-request__confirm-photos li {
	margin: 0 0 var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-gray-200);
}

.water-heater-estimate-request__confirm-photos p {
	margin: 0;
}

.water-heater-estimate-request__confirm-photo-name {
	font-weight: 700;
}

.water-heater-estimate-request__confirm-photos img {
	width: 100%;
	max-height: 180px;
	margin-top: 8px;
	object-fit: cover;
	border-radius: 12px;
}

.water-heater-estimate-request-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 950;
	padding: 12px var(--space-2) calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-gray-200);
	background-color: var(--color-white);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.water-heater-estimate-request-bar__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 720px;
	margin: 0 auto;
}

.water-heater-estimate-request__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.water-heater-estimate-request-bar__submit:disabled {
	opacity: 0.55;
	cursor: default;
}

.water-heater-estimate-request__confirm-status--error {
	color: var(--color-accent-dark);
}

.water-heater-estimate-request-bar__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px var(--space-2);
	border: 0;
}

.water-heater-estimate-request-bar__note {
	margin: 0;
	color: var(--color-gray-500);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.water-heater-estimate-request-page [hidden],
.water-heater-estimate-request-bar[hidden] {
	display: none;
}