/**
 * 老墨旅遊 Rezio 預訂元件。
 *
 * 全部樣式都關在 .omr-booking 底下，而且不設字體與主色 —— 這個元件會被貼進
 * 客戶既有的行程頁，繼承主題的字體才不會看起來像外掛。
 *
 * 觸控目標一律 44px 起跳：這是行動裝置上真的按得到的最小尺寸，
 * 而旅遊行程頁有八成以上的流量來自手機。
 */

.omr-booking {
	--omr-line: #e3e3e3;
	--omr-ink: #1f1f1f;
	--omr-dim: #767676;
	--omr-accent: #0b6b63;
	--omr-warn: #b35309;
	--omr-error: #b32d2e;

	border: 1px solid var(--omr-line);
	border-radius: 12px;
	padding: 1.25rem;
	max-width: 480px;
	color: var(--omr-ink);
	line-height: 1.5;
}

/* 標題。刻意不設 font-family —— 跟整包一樣，繼承主題的字體。
 * 主題常對 h3 下很大的 margin，這裡歸零，不然標題跟日曆會離很遠。 */
.omr-title {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--omr-ink);
}

.omr-booking button {
	font: inherit;
	cursor: pointer;
}

.omr-booking button[disabled] {
	cursor: not-allowed;
	opacity: .45;
}

/* ---- 月份切換 ---- */

.omr-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .75rem;
}

.omr-cal-title {
	font-weight: 600;
	font-size: 1.05rem;
}

.omr-nav-btn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--omr-line);
	border-radius: 8px;
	background: #fff;
	font-size: 1.25rem;
	line-height: 1;
}

.omr-nav-btn:hover:not([disabled]) {
	border-color: var(--omr-accent);
	color: var(--omr-accent);
}

/* ---- 日期格 ---- */

.omr-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.omr-cal-wd {
	text-align: center;
	font-size: .75rem;
	color: var(--omr-dim);
	padding-bottom: .25rem;
}

.omr-cal-pad {
	min-height: 44px;
}

.omr-cal-day {
	min-height: 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	padding: 2px;
}

/* 沒有場次的日子。用 div 不是 button，鍵盤 tab 不會停在上面。 */
.omr-off {
	color: #c4c4c4;
}

.omr-open {
	border-color: var(--omr-line);
	background: #fff;
	color: var(--omr-ink);
}

.omr-open:hover {
	border-color: var(--omr-accent);
}

.omr-few .omr-day-num {
	color: var(--omr-warn);
}

.omr-day-left {
	font-size: .625rem;
	color: var(--omr-warn);
	line-height: 1;
	margin-top: 2px;
}

.omr-selected {
	background: var(--omr-accent);
	border-color: var(--omr-accent);
	color: #fff;
}

.omr-selected .omr-day-num,
.omr-selected .omr-day-left {
	color: #fff;
}

/* ---- 場次 ---- */

.omr-panel {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--omr-line);
}

.omr-hint {
	color: var(--omr-dim);
	margin: 0;
}

.omr-sessions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}

.omr-session {
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--omr-line);
	border-radius: 8px;
	background: #fff;
}

.omr-remaining {
	margin: 0 0 .75rem;
	font-size: .875rem;
	color: var(--omr-dim);
}

/* ---- 票種 ---- */

.omr-ticket {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .625rem 0;
	border-bottom: 1px solid var(--omr-line);
}

.omr-ticket-info {
	display: flex;
	flex-direction: column;
}

.omr-ticket-label {
	font-weight: 500;
}

.omr-ticket-price {
	font-size: .875rem;
	color: var(--omr-dim);
}

.omr-stepper {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.omr-step {
	width: 44px;
	height: 44px;
	border: 1px solid var(--omr-line);
	border-radius: 8px;
	background: #fff;
	font-size: 1.125rem;
	line-height: 1;
}

.omr-step:hover {
	border-color: var(--omr-accent);
	color: var(--omr-accent);
}

.omr-count {
	min-width: 2.25rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- 合計與送出 ---- */

.omr-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 1rem 0;
}

.omr-total-value {
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
}

.omr-submit {
	display: block;
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 8px;
	background: var(--omr-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.omr-link {
	line-height: 48px;
}

.omr-link-plain {
	display: block;
	text-align: center;
	margin-top: .75rem;
	color: var(--omr-dim);
	font-size: .875rem;
}

.omr-done-title {
	margin: 0 0 .75rem;
	font-weight: 600;
	text-align: center;
}

/* ---- 訊息 ---- */

.omr-msg {
	margin-top: .75rem;
	padding: .625rem .75rem;
	border-radius: 8px;
	font-size: .875rem;
}

.omr-msg-notice {
	background: #fdf4e6;
	color: var(--omr-warn);
}

.omr-msg-error {
	background: #fcefef;
	color: var(--omr-error);
}

.omr-loading {
	color: var(--omr-dim);
	text-align: center;
	padding: 2rem 0;
}

.omr-error {
	border-color: var(--omr-error);
	color: var(--omr-error);
}

/* 共用範本的「立即預訂」按鈕連過來時的落點。
 * scroll-margin 是留給固定頁首的，不然預訂框的上緣會被選單蓋住。 */
.omr-anchor {
	display: block;
	scroll-margin-top: 100px;
}

.admin-bar .omr-anchor {
	scroll-margin-top: 132px;
}

/* ---- 右側固定預訂框（sticky="yes"）----
 *
 * 桌機：釘在欄位裡跟著捲動。
 *
 * 黏的是 .omr-sticky-host —— 由 JS 從元件往上爬，找到第一個「父層比自己高」
 * 的那一層才掛上去。Elementor 包的 .elementor-widget 與 .elementor-widget-container
 * 高度都貼齊元件，掛在那裡 room = 0，sticky 等於沒作用。
 * 要生效還有兩個前提：那一欄要比預訂框高（雙欄版面、而且欄位是 stretch 不是
 * 靠上對齊），而且祖先不能有 overflow: hidden。
 *
 * 手機：沒有「右側」可以釘，改成底部浮動條，捲到預訂框時自己收起來。
 */

@media ( min-width: 1024px ) {
	.omr-sticky-host {
		position: sticky;
		top: 24px;
	}

	/* 登入時 WordPress 的黑色工具列是 fixed、32px 高、z-index 99999，
	 * 會直接壓在黏住的預訂框上緣。訪客沒有這條，但編輯的人每次看都是壞的，
	 * 會以為是版面爛掉。 */
	.admin-bar .omr-sticky-host {
		top: 56px;
	}

	.omr-booking.omr-is-sticky {
		/* 行程票種多的時候會比螢幕還高，讓它自己捲，不要溢出視窗。 */
		max-height: calc( 100vh - 48px );
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.admin-bar .omr-booking.omr-is-sticky {
		max-height: calc( 100vh - 80px );
	}
}

.omr-jump {
	/* 自帶一份主色：這個連結在 .omr-booking 外面，繼承不到那邊的變數。 */
	--omr-accent: #0b6b63;
	display: none;
}

@media ( max-width: 1023px ) {
	.omr-jump {
		display: block;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 999;
		min-height: 52px;
		line-height: 52px;
		border-radius: 10px;
		background: var(--omr-accent);
		color: #fff;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 6px 20px rgba( 0, 0, 0, .25 );
		transition: opacity .2s ease, transform .2s ease;
	}

	/* 預訂框已經在畫面上了就不用再擋著內容。 */
	.omr-jump.omr-jump-off {
		opacity: 0;
		transform: translateY( 150% );
		pointer-events: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.omr-jump {
		transition: none;
	}
}