/* ===============================================================
   常時表示の予約導線
     - スマホ（〜768px）：画面下部の固定バー（電話／WEB予約）
     - PC（769px〜）    ：画面右下の丸いWEB予約ボタン
   同時には出ないよう、幅で出し分けている。
   固定バーはもとテーマ astra の functions.php ＋ カスタマイザーの
   追加CSS にあったものを、このプラグインへ移設したもの。
   =============================================================== */

/* ---------------------------------------------------------------
   スマホ：下部固定バー
   --------------------------------------------------------------- */
#sp-fixed-bar.tsuda-sp-bar {
	display: none;
}

@media (max-width: 768px) {
	#sp-fixed-bar.tsuda-sp-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		height: 56px;
		background: #a9853a;
		border-top: 1px solid rgba(255, 255, 255, 0.28);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.32);
	}

	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-tel,
	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-reserve {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		color: #fff !important;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.05em;
		text-decoration: none !important;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
		border: none;
		transition: filter 0.2s ease;
	}

	/* 電話：やや深いゴールド */
	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-tel {
		background: linear-gradient(135deg, #bd9950 0%, #a9853a 100%);
		border-right: 1px solid rgba(255, 255, 255, 0.32);
	}

	/* WEB予約：明るいゴールド（主導線） */
	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-reserve {
		background: linear-gradient(135deg, #d9b871 0%, #c19c4c 52%, #ac883c 100%);
	}

	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-tel:hover,
	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-tel:active,
	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-reserve:hover,
	#sp-fixed-bar.tsuda-sp-bar .sp-fixed-reserve:active {
		color: #fff !important;
		filter: brightness(1.08);
	}

	/* ページ下部が固定バーに隠れないように */
	body {
		padding-bottom: 56px !important;
	}

	/* 「トップへ戻る」ボタンを固定バーの上へ */
	#ast-scroll-top {
		bottom: 86px !important;
	}
}

/* ---------------------------------------------------------------
   PC：右下の丸いWEB予約ボタン
   --------------------------------------------------------------- */
.tsuda-fab {
	--tsuda-fab-size: clamp(96px, 8.4vw, 122px);
	display: none;
}

@media (min-width: 769px) {
	.tsuda-fab {
		display: flex;
		position: fixed;
		right: clamp(20px, 2.4vw, 34px);
		bottom: clamp(20px, 2.4vw, 34px);
		z-index: 9000;

		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;

		width: var(--tsuda-fab-size);
		height: var(--tsuda-fab-size);
		border-radius: 50%;
		box-sizing: border-box;

		background: linear-gradient(140deg, #c8a558 0%, #b18f42 55%, #9c7c34 100%);
		color: #fff !important;
		text-decoration: none !important;
		box-shadow:
			inset 0 0 0 1.5px rgba(255, 255, 255, 0.5),
			0 10px 28px rgba(0, 0, 0, 0.34);

		/* スクロールして初めて現れる */
		opacity: 0;
		visibility: hidden;
		transform: translateY(14px);
		transition:
			opacity 0.35s ease,
			visibility 0.35s ease,
			transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
			filter 0.2s ease,
			box-shadow 0.2s ease;
	}

	.tsuda-fab.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.tsuda-fab:hover,
	.tsuda-fab:focus-visible {
		color: #fff !important;
		filter: brightness(1.07);
		box-shadow:
			inset 0 0 0 1.5px rgba(255, 255, 255, 0.62),
			0 14px 34px rgba(0, 0, 0, 0.42);
	}

	.tsuda-fab.is-visible:hover,
	.tsuda-fab.is-visible:focus-visible {
		transform: translateY(-3px);
	}

	.tsuda-fab svg {
		display: block;
		width: clamp(28px, 2.4vw, 34px);
		height: auto;
	}

	.tsuda-fab .tsuda-fab-txt {
		font-size: clamp(13px, 1.05vw, 15px);
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: 1.2;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	}

	/* 「トップへ戻る」ボタンは画面左下へ。
	   右下は丸いWEB予約ボタンの定位置なので、重なりを避けて左へ寄せる。 */
	#ast-scroll-top {
		left: clamp(20px, 2.4vw, 34px) !important;
		right: auto !important;
		bottom: clamp(20px, 2.4vw, 34px) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsuda-fab {
		transition: opacity 0.2s ease, visibility 0.2s ease;
		transform: none;
	}
}