/* ----------------------------------------------------------- */
/* #Reservation_room 範圍限定樣式 */
/* ----------------------------------------------------------- */
#wrap .workframe {display: flex;flex-direction: column;}

#Reservation_room {max-width: 800px;margin: 0 auto;background: #ffffff;padding: 40px;border-radius: 12px;box-shadow: 0 10px 30px rgba(0,0,0,0.08);border-top: 5px solid #1e73bf;box-sizing: border-box;margin: 5rem auto;}
#Reservation_room * { box-sizing: border-box; }


#Reservation_room .nowrap_box { width: 100%; }
#Reservation_room p { margin-bottom: 24px; position: relative; }
#Reservation_room ul { list-style: none; padding: 0; margin: 0; }
#Reservation_room li {margin-bottom: 12px;display: flex;align-items: center;color: #555;gap: 8px;}

#Reservation_room .note { font-size: 0.95em; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 15px; color: #666; }
#Reservation_room .red, #Reservation_room .txt_primary_5 { color: #e63946; margin-left: 4px; font-weight: bold; }
#Reservation_room .d_block { display: block; }
#Reservation_room a { text-decoration: none; }


#Reservation_room .txt_white_5 { color: #2c3e50; font-weight: 700; font-size: 15px; margin-bottom: 10px; padding-left: 10px; border-left: 4px solid #1e73bf; line-height: 1.2; letter-spacing: 0.5px; text-align: left; }


#Reservation_room input[type="text"], #Reservation_room input[type="number"], #Reservation_room input[type="email"], #Reservation_room input[type="tel"] { width: 100%; padding: 12px 16px; border: 1px solid #dde2e5; background-color: #fcfcfc; color: #333; border-radius: 8px; font-size: 16px; height: 48px; transition: all 0.3s ease; appearance: none; -webkit-appearance: none; }
#Reservation_room input[type="text"]:focus, #Reservation_room input[type="number"]:focus, #Reservation_room input[type="email"]:focus, #Reservation_room input[type="tel"]:focus { border-color: #1e73bf; background-color: #fff; box-shadow: 0 0 0 3px rgba(30, 115, 191, 0.15); outline: none; }
#Reservation_room input[type="checkbox"] {width: 20px;height: 20px;aspect-ratio: 1/1;cursor: pointer;accent-color: #1e73bf;border-radius: 4px;}


#Reservation_room .custom-select {position: relative;width: 100%;background: unset;padding: 0;height: 48px;border: 1px solid #dde2e5;border-radius: 8px;background-color: #fcfcfc;cursor: pointer;user-select: none;transition: all 0.3s ease;}
#Reservation_room .custom-select:focus, #Reservation_room .custom-select.active { border-color: #1e73bf; box-shadow: 0 0 0 3px rgba(30, 115, 191, 0.15); outline: none; }


#Reservation_room .select-selected { position: relative; display: block; height: 100%; line-height: 46px; padding: 0 40px 0 16px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#Reservation_room .select-selected:after { content: ""; position: absolute; top: 50%; right: 16px; width: 0; height: 0; border: 6px solid transparent; border-color: #888 transparent transparent transparent; transform: translateY(25%); transition: transform 0.3s; }
#Reservation_room .custom-select.active .select-selected:after { border-color: transparent transparent #1e73bf transparent; transform: translateY(-75%); }


#Reservation_room .select-items { position: absolute; background-color: #fff; top: 100%; left: 0; right: 0; z-index: 99; border: 1px solid #e1e1e1; border-radius: 8px; margin-top: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; }
#Reservation_room .select-items.select-show { opacity: 1; visibility: visible; transform: translateY(0); }


#Reservation_room .select-items div { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f5f5f5; color: #555; transition: background 0.2s; }
#Reservation_room .select-items div:last-child { border-bottom: none; }
#Reservation_room .select-items div:hover, #Reservation_room .select-items div.same-as-selected { background-color: #f0f7ff; color: #1e73bf; font-weight: 500; }


#Reservation_room .custom-date-wrapper { position: relative; width: 100%; height: 48px; border: 1px solid #dde2e5; border-radius: 8px; background-color: #fcfcfc; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; }
#Reservation_room .custom-date-wrapper:hover { border-color: #bbb; }
#Reservation_room .custom-date-wrapper:focus-within { border-color: #1e73bf; box-shadow: 0 0 0 3px rgba(30, 115, 191, 0.15); }


#Reservation_room .date-display { flex: 1; padding: 0 16px; color: #333; white-space: nowrap; overflow: hidden; pointer-events: none; }
#Reservation_room .date-display.placeholder { color: #888; }


#Reservation_room .date-icon { width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #888; }
#Reservation_room .date-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

#Reservation_room input[type="date"].hidden-date-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; -webkit-appearance: none; appearance: none; padding: 0; margin: 0; border: none; }


#Reservation_room .time-range-group { display: flex; align-items: center; gap: 15px; }
#Reservation_room .time-range-group input { text-align: center; font-weight: 600; color: #1e73bf; }
#Reservation_room .tilde { color: #888; font-weight: bold; }


#Reservation_room .checknum { margin-top: 10px; }
#Reservation_room .checknum font { display: flex; align-items: center; gap: 12px; }
#Reservation_room .checknum input { width: 140px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold; text-align: center; }
#Reservation_room .checknum img {height: auto;border-radius: 8px;border: 1px solid #dde2e5;cursor: pointer;transition: opacity 0.3s;}
#Reservation_room .checknum img:hover { opacity: 0.8; }


#Reservation_room #btnOK { display: block; width: 100%; max-width: 240px; margin: 40px auto 0; padding: 14px; background: linear-gradient(135deg, #1e73bf 0%, #155a96 100%); color: white; border-radius: 30px; font-weight: bold; font-size: 16px; letter-spacing: 1px; transition: transform 0.2s, box-shadow 0.2s; text-align: center; box-shadow: 0 4px 15px rgba(30, 115, 191, 0.3); }
#Reservation_room #btnOK:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30, 115, 191, 0.4); }
#Reservation_room #btnOK:active { transform: translateY(0); }


@media (min-width: 768px) {
	#Reservation_room { padding: 50px; }
	#Reservation_room p { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 28px; }
	#Reservation_room p label { width: 28%; min-width: 140px; margin-bottom: 0; text-align: right; padding-right: 25px; align-self: flex-start; margin-top: 12px; }
	#Reservation_room p > input, #Reservation_room p > .custom-select, #Reservation_room p > .custom-date-wrapper, #Reservation_room p > ul { width: 72%; flex: 1; }
	#Reservation_room .time-range-group { width: 72%; flex: 1; }
	#Reservation_room .checknum label { width: 28%; min-width: 140px; align-self: center; margin-top: 0; }
	#Reservation_room .checknum font { width: 72%; }
}

@media (max-width: 767px) {
	#Reservation_room .time-range-group { display: flex; justify-content: space-between; }
	#Reservation_room .time-range-group input { width: 45%; }
	#Reservation_room #btnOK { width: 100%; max-width: 100%; border-radius: 8px; }
	#Reservation_room .txt_white_5 { margin-bottom: 12px; border-left-width: 5px; background: rgba(30, 115, 191, 0.05); padding: 8px 10px; border-radius: 0 4px 4px 0; }
}