/* Stay Booking Engine — front-end booking flow */

.sbe-be {
	/* 之前这里给了 900px 的 max-width，导致不管把短代码放进多宽的容器（全宽区块、
	   窄侧边栏、page builder 的某一栏……）搜索条视觉上都封顶在 900px，两边留白。
	   客户要求搜索条能 100% 撑满容器——这里改成显式 width:100%（不依赖容器默认
	   是不是 block 元素撑满，flex/grid 容器里的子项默认不一定会自动撑满宽度，
	   显式声明能保证不管放进什么类型的容器都撑满），并且不再设置 max-width，
	   容器多宽它就多宽。注意：结果/结账弹窗是 position:fixed 盖满整个屏幕的
	   浮层，跟"贴合外层容器"没关系，另有自己的宽度逻辑，不受这里影响。

	   container-type/container-name：把 .sbe-be 自己注册成一个"容器查询"的
	   参照对象。原来搜索条从"一行三个字段"切换成"手机上下堆叠"是用
	   @media(max-width:640px)——这个只看**浏览器视口**宽度，如果短代码被
	   放进一个本身就比较窄的容器（比如桌面端一个 320px 的侧边栏小组件），
	   容器早就窄到装不下一行三个字段了，但视口本身还是桌面宽度，媒体查询
	   不会触发，三个字段的文字会挤在一起看不清——这正好是"无论放进哪个
	   容器都要正常显示"这句话字面上的意思，所以改用 @container 查询
	   （见下面 Responsive 区块），让布局跟着*容器实际宽度*走，而不是视口
	   宽度。结果/结账弹窗是盖满全屏的浮层，跟它挂载在哪个容器里没关系，
	   那部分的手机适配还是保留原来基于视口宽度的 @media。 */
	container-type: inline-size;
	container-name: sbe-be;
	width: 100%;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

.sbe-be * {
	box-sizing: border-box;
}

/* ---------- Search bar (Step 1) ----------
   融入页面正文——没有独立的背景图/悬浮卡片/hover 渐变效果了，就是主题页面
   背景上普通的一块内容，只用一层很浅的中性色 + 细边框给出"这是一个可操作
   控件"的提示，不会跟大多数主题的页面背景（通常是白色/浅色）打架。 */

.sbe-be-search-panel {
	padding: 8px 0 20px;
}

.sbe-be-searchbar-wrap {
	/* 同样去掉 640px 封顶——搜索条胶囊本身跟着 .sbe-be 一起 100% 撑满容器。
	   三个字段是 flex:1 1 0（见下面 .sbe-be-sb-field），撑满之后会自动
	   平分多出来的宽度，不需要额外处理。 */
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.sbe-be-searchbar {
	display: flex;
	align-items: stretch;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.06 );
}

/* 这几个字段/日历格子/步进器按钮全都是 <button> 元素——浏览器给表单控件的
   默认文字颜色（很多主题也会自己再加一层 button 样式重置）跟普通文字的
   继承规则不一样，不会自动应用 .sbe-be-popover 这类父级容器上设的 color。
   之前只在父容器设了颜色、没在按钮本身显式声明，导致个别主题下这些按钮里
   的文字实际上是不可见的（颜色被主题的全局按钮样式盖掉）。这里全部加上
   !important，确保不管装在哪个主题的页面里，文字颜色都是这里定义的、
   而不是被主题的按钮样式覆盖成看不见的颜色。 */
.sbe-be-sb-field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	background: none;
	border: none;
	padding: 8px 18px;
	text-align: left;
	cursor: pointer;
	border-radius: 999px;
	color: #0f172a !important;
	transition: background-color 0.2s ease;
}

.sbe-be-sb-field:hover,
.sbe-be-sb-field[ aria-expanded="true" ] {
	background: #eef2f7 !important;
}

.sbe-be-sb-field-guests {
	flex: 0 0 auto;
}

.sbe-be-sb-label {
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #64748b !important;
}

.sbe-be-sb-value {
	font-size: 0.95em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	color: #0f172a !important;
}

.sbe-be-sb-divider {
	width: 1px;
	margin: 8px 0;
	background: #e2e8f0;
}

.sbe-be-sb-submit {
	flex: 0 0 auto;
	border: none;
	border-radius: 999px;
	padding: 0 26px;
	background: #7f1e2d !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.95em;
	cursor: pointer;
	white-space: nowrap;
}

.sbe-be-sb-submit:hover {
	background: #5a0f1a !important;
}

/* ---------- Popovers (calendar + guests) ---------- */

.sbe-be-popover {
	position: absolute;
	top: calc( 100% + 10px );
	left: 0;
	z-index: 10;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 45px rgba( 15, 23, 42, 0.25 );
	padding: 16px;
	color: #0f172a;
}

.sbe-be-popover-calendar {
	width: 320px;
}

.sbe-be-popover-guests {
	width: 260px;
	left: auto;
	right: 0;
}

.sbe-be-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.sbe-be-cal-nav {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: #f1f5f9 !important;
	color: #0f172a !important;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
}

.sbe-be-cal-nav:hover {
	background: #e2e8f0 !important;
}

.sbe-be-cal-head-selects {
	display: flex;
	flex: 1;
	justify-content: center;
	gap: 6px;
}

.sbe-be-cal-head-selects select {
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px;
	padding: 4px 6px;
	font-size: 0.9em;
	color: #0f172a !important;
	background: #fff !important;
}

.sbe-be-cal-weekdays {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	text-align: center;
	font-size: 0.75em;
	font-weight: 700;
	color: #94a3b8;
	margin-bottom: 4px;
}

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

.sbe-be-cal-day {
	padding: 8px 0;
	border: none;
	border-radius: 6px;
	background: none;
	color: #0f172a !important;
	font-size: 0.9em;
	text-align: center;
	cursor: pointer;
}

.sbe-be-cal-day:hover:not( :disabled ) {
	background: #fbeaed !important;
}

.sbe-be-cal-day-blank {
	cursor: default;
}

.sbe-be-cal-day-disabled {
	color: #cbd5e1 !important;
	cursor: default;
}

.sbe-be-cal-day-today {
	color: #7f1e2d !important;
	font-weight: 700;
}

.sbe-be-cal-day-in-range {
	background: #f3d7db !important;
	border-radius: 0;
}

.sbe-be-cal-day-start,
.sbe-be-cal-day-end {
	background: #7f1e2d !important;
	color: #fff !important;
	font-weight: 700;
}

.sbe-be-cal-day-start {
	border-radius: 50% 0 0 50%;
}

.sbe-be-cal-day-end {
	border-radius: 0 50% 50% 0;
}

.sbe-be-cal-day-start.sbe-be-cal-day-end {
	border-radius: 50%;
}

.sbe-be-cal-hint {
	min-height: 1.2em;
	margin: 10px 0 0;
	font-size: 0.85em;
	color: #64748b;
	text-align: center;
}

.sbe-be-guest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f1f5f9;
}

.sbe-be-guest-row:last-of-type {
	border-bottom: none;
}

.sbe-be-guest-row-title {
	font-size: 0.95em;
	font-weight: 600;
	color: #0f172a !important;
}

.sbe-be-stepper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sbe-be-stepper-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #cbd5e1;
	border-radius: 50%;
	background: #fff !important;
	color: #7f1e2d !important;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
}

.sbe-be-stepper-btn:hover {
	background: #fbeaed !important;
	border-color: #7f1e2d;
}

.sbe-be-stepper-value {
	min-width: 1.5em;
	text-align: center;
	font-weight: 600;
	color: #0f172a !important;
}

.sbe-be-guests-done {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 8px;
	border: none;
	border-radius: 8px;
	background: #7f1e2d !important;
	color: #fff !important;
	font-weight: 700;
	cursor: pointer;
}

.sbe-be-guests-done:hover {
	background: #5a0f1a !important;
}

.sbe-be-search-panel .sbe-be-error {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* "Already booked?" 这行字直接坐在页面正文背景上——很多主题这里其实是一张
   实景照片（不是纯色），文字如果不给自己一块背景，遇到花纹复杂的照片就会
   看不清。给它一个小小的浅色胶囊背景，跟搜索条自己"给一块保证可读的浅色
   底"是同一个思路，不管背后是什么背景图都能保证看清楚。 */
.sbe-be-search-panel .sbe-be-lookup-toggle {
	display: table;
	margin: 14px auto 0;
	padding: 8px 16px;
	background: rgba( 255, 255, 255, 0.92 ) !important;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.08 );
}

/* Look Up Your Booking 这一步（订单号+邮箱查询）也是直接站在页面背景上，
   同样给一块保证可读的浅色卡片——不然标题、Booking number / Email 这些
   label 文字在实景照片背景上很容易糊在一起看不清。 */
#sbe-be-step-lookup {
	max-width: 420px;
	margin: 0 auto;
	padding: 28px 24px;
	background: rgba( 255, 255, 255, 0.94 ) !important;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba( 15, 23, 42, 0.15 );
}

/* ---------- Results / checkout / confirmation popup ----------
   点 "Check availability" 之后不再往下展开撑大页面，而是弹出这个小弹窗，
   盖在原来的页面上面，原页面结构/滚动位置完全不受影响。手机上贴底展开
   （bottom sheet），单手操作更顺手，也不会因为弹窗太高看不到关闭按钮。 */

body.sbe-be-modal-open {
	overflow: hidden;
}

/* 客户反馈截图——桌面端这个弹窗最顶部会跟网站自己的顶部菜单栏（Logo/Gallery/
   FAQs/About Us/Contact Us/FR/Reserve 那一整条，是主题自带的头部，不是这个
   插件画的）撞在一起，弹窗右上角的关闭按钮几乎贴着菜单的"FR"文字，容易点错。
   根因是原来 `align-items: center` 只保证弹窗在视口里垂直居中，视口不够高
   （或者弹窗内容本身比较长）时弹窗顶边会被顶到贴着 y=0，正好落在顶部菜单栏
   占用的那段空间里。改成顶部对齐（`align-items: flex-start`）+ 固定的顶部
   留白：弹窗的可点击区域从根源上就不会伸到菜单栏那段空间，不用依赖"弹窗
   z-index 必须永远盖在菜单上面"这种跟主题头部实现细节强绑定、随时可能被
   破坏的假设。140px 是按客户这次截图里顶部菜单栏（Logo+导航链接+Reserve
   按钮那一整条）目测量出来的高度留了一点余量——如果换一个主题、头部实际
   高度不一样，这个数值需要跟着调；`overflow-y: auto` 是极端窄视口下的兜底，
   正常情况下弹窗自己的 `max-height`（见下方 .sbe-be-modal）已经会把弹窗
   完全留在可视区域内，不需要整个浮层跟着滚。 */
.sbe-be-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 140px 24px 24px;
	background: rgba( 15, 23, 42, 0.55 );
	overflow-y: auto;
}

/* `display: flex` 上面这条规则的优先级跟浏览器默认的 `[hidden]{display:none}`
   一样高（都是单个选择器），作者样式表会盖过 UA 默认样式——不显式加这条，
   哪怕 JS 已经把 hidden 属性设置上了，弹窗还是会一直显示、挡住点击。 */
.sbe-be-modal-overlay[ hidden ] {
	display: none;
}

/* 弹窗背景：整个弹窗用这张民宿实拍图铺满（图片来自 Settings → Booking
   Engine Appearance，没填就用插件内置的默认图），上面叠一层半透明白色
   蒙层（Overlay）——图片作为氛围背景始终看得见，同时保证表单/列表/按钮
   这些正文内容的可读性不受这张图明暗的影响。图片 URL 通过内联 style 直接
   写在这个元素上（见 booking-engine.php），CSS 这里只负责 size/position
   和兜底色。 */
.sbe-be-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* 客户反馈桌面端这个弹窗太窄，房型照片挤得太小看不清——620px 是早期
	   照着手机端宽度顺出来的一个偏保守的值，桌面上完全放得下更宽的弹窗。
	   改成 1080px；`width: 100%` 还在，桌面窗口比 1080+48px（左右各 24px
	   的 overlay padding）更窄时，弹窗还是会跟着收缩，不会溢出视口——不用
	   额外加断点。640px 及以下的手机断点另有专门的覆盖规则（见下方
	   Responsive 区块），弹窗会变成贴底的全宽 bottom sheet，不受这里改动
	   影响。 */
	max-width: 1080px;
	/* 弹窗顶部对齐（见上面 .sbe-be-modal-overlay 的 140px 顶部留白）之后，
	   弹窗自己的高度上限要跟着改成"视口高度减去顶部留白和底部 padding"，
	   不能再用原来那个假设"弹窗垂直居中、上下留白差不多"的 88vh——不然
	   矮一点的视口下弹窗会被顶部留白往下挤、底部反而超出可视区域。 */
	max-height: calc( 100vh - 164px );
	background-color: #7f1e2d;
	background-size: cover;
	background-position: center;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba( 15, 23, 42, 0.35 );
}

.sbe-be-modal::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba( 255, 255, 255, 0.86 );
}

.sbe-be-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba( 15, 23, 42, 0.55 ) !important;
	color: #fff !important;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}

.sbe-be-modal-close:hover {
	background: rgba( 15, 23, 42, 0.75 ) !important;
}

.sbe-be-modal-body {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 52px 24px 24px;
}

/* 结果卡片/结账摘要卡这些密集文字区域单独给一个纯白底，跟弹窗背景图的
   蒙层区分开——图片氛围留在卡片之间的空隙和弹窗上下留白处，卡片内部
   还是干净的白底黑字，不受背景图影响。 */
.sbe-be-result-card,
.sbe-be-summary-card {
	background: #fff !important;
}

.sbe-be h2 {
	font-size: 1.2em;
	margin: 1.2em 0 0.6em;
}

.sbe-be h3 {
	font-size: 1.05em;
	margin: 0 0 0.3em;
}

/* ---------- Buttons / links ---------- */

.sbe-be-btn {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #7f1e2d !important;
	border-radius: 4px;
	background: #fff !important;
	color: #7f1e2d !important;
	font-size: 0.95em;
	cursor: pointer;
}

.sbe-be-btn-primary {
	background: #7f1e2d !important;
	color: #fff !important;
}

.sbe-be-btn-primary:hover {
	background: #5a0f1a !important;
	border-color: #5a0f1a !important;
}

.sbe-be-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.sbe-be-btn-block {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 16px;
}

.sbe-be-link-btn {
	background: none;
	border: none;
	color: #7f1e2d !important;
	cursor: pointer;
	padding: 0;
	font-size: 0.9em;
	margin-bottom: 12px;
}

.sbe-be-lookup-toggle {
	display: block;
	margin: 14px 0 0;
}

.sbe-be-lookup-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
}

#sbe-be-confirmation-new-search {
	margin-top: 16px;
}

/* ---------- Form fields ---------- */

.sbe-be-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* 顺手修一个之前就有的小 bug：Province/State 那个字段平时靠 hidden 属性
   藏起来（只有选了 Canada 才显示，见 booking-engine.js），但 .sbe-be-field
   自己设了 display:flex，跟浏览器默认的 [hidden]{display:none} 优先级打平后
   author 样式会赢，导致这个字段其实一直显示。今天这次顺带发现顺带修掉。 */
.sbe-be-field[ hidden ] {
	display: none;
}

.sbe-be-field label {
	font-size: 0.85em;
	font-weight: 600;
}

.sbe-be-field input,
.sbe-be-field textarea,
.sbe-be-field select {
	padding: 8px 10px;
	border: 1px solid #ccc !important;
	border-radius: 4px;
	font-size: 1em;
	color: #0f172a !important;
	background: #fff !important;
}

.sbe-be-checkout-form .sbe-be-field {
	margin-bottom: 12px;
}

/* 之前这里是不分 type 的 ".sbe-be-checkout-form input"，本意是让姓名/邮箱/
   电话这些文本输入框撑满宽度——但这个选择器也顺带选中了下面 Payment Method
   区块里的 <input type="radio">（它们同样嵌套在 #sbe-be-checkout-form 表单
   里）。radio 是 flex 布局里的一个 flex item，被塞进 width:100% 之后，它的
   flex-basis 会变成"跟整行一样宽"，flexbox 只能把剩下几乎所有空间都让给它、
   紧接着的房型名称/说明文字被挤压到只剩几十像素宽，手机上就会看到每个单词
   被拦腰截断、贴着屏幕右边缘一个字一行地往下排（这正是这次要修的 bug）。
   用 :not([type="radio"]):not([type="checkbox"]) 排除这两种控件——它们的
   宽度应该由内容本身（一个小圆点/方块）决定，不应该被撑满一整行。 */
.sbe-be-checkout-form input:not( [ type="radio" ] ):not( [ type="checkbox" ] ),
.sbe-be-checkout-form textarea,
.sbe-be-checkout-form select {
	width: 100%;
}

.sbe-be-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sbe-be-error {
	background: #fef2f2;
	border-left: 4px solid #dc2626;
	color: #b91c1c;
	padding: 8px 12px;
	margin-top: 12px;
	border-radius: 2px;
}

.sbe-be-empty {
	color: #666;
	padding: 24px 0;
}

/* ---------- Results ---------- */

.sbe-be-results-summary {
	font-weight: 600;
	margin-bottom: 16px;
}

.sbe-be-results-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbe-be-result-card {
	display: grid;
	/* 弹窗从 620px 加宽到 1080px 之后（见上面 .sbe-be-modal），照片列跟着
	   从 140px 放大到 260px——照之前的比例放大，不是随便挑的数字，配合下面
	   .sbe-be-result-image 的宽高一起改。 */
	grid-template-columns: 260px 1fr auto;
	gap: 20px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 16px;
	align-items: center;
}

.sbe-be-result-image {
	width: 260px;
	height: 180px;
	object-fit: cover;
	border-radius: 6px;
	background: #f0f0f0;
}

.sbe-be-result-image-placeholder {
	display: block;
}

.sbe-be-result-body h3 {
	/* 房型名称是这张卡片上客人第一眼要看清楚的信息，客户反馈"字要更大且
	   加粗"——这里单独针对结果卡片里的标题加大加粗，不改 `.sbe-be h3` 这条
	   全局规则（结账摘要等其它地方也在用普通大小的 h3，不该被这次改动
	   波及）。 */
	font-size: 1.4em;
	font-weight: 700;
	margin: 0 0 8px;
}

.sbe-be-result-desc {
	color: #555;
	font-size: 0.92em;
	margin: 4px 0;
}

.sbe-be-result-meta {
	font-size: 0.85em;
	color: #777;
	margin: 0;
}

.sbe-be-result-price {
	text-align: right;
	white-space: nowrap;
}

.sbe-be-price-total {
	font-size: 1.2em;
	font-weight: 700;
}

.sbe-be-price-per-night {
	font-size: 0.8em;
	color: #777;
	margin-bottom: 8px;
}

/* ---------- Checkout ---------- */

.sbe-be-checkout-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	align-items: start;
}

.sbe-be-summary-card {
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 16px;
	position: sticky;
	top: 16px;
}

.sbe-be-summary-total {
	font-size: 1.3em;
	font-weight: 700;
	margin-top: 10px;
}

/* 价格明细行（房价小计/住宿税/GST/QST/总计）：左边文案右边金额，跟
   .sbe-be-summary-total 叠一起用的时候（最后一行是总计）字号/字重照旧更醒目 */
.sbe-be-summary-line {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0;
}

.sbe-be-summary-total.sbe-be-summary-line {
	border-top: 1px solid #e2e2e2;
	padding-top: 8px;
}

.sbe-be-payment-methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 8px;
}

.sbe-be-payment-option {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	padding: 10px 12px;
	cursor: pointer;
}

/* 双重保险：就算以后又不小心把某条 width:100% 之类的规则套到这个 radio 上
   （或者站点主题自己的全局 input 样式也这么干），这里显式钉死 radio 的
   flex-basis，不让它抢占本该留给文字说明的空间——手机窄屏下这类冲突最容易
   暴露出来（宽度被抢走后，文字被挤压到只剩几十像素，每个单词被拦腰截断、
   一个字一行地贴着容器边缘往下排），所以专门加固，不依赖"没人会不小心
   加一条太宽的选择器"这种脆弱的假设。 */
.sbe-be-payment-option input {
	flex: 0 0 auto;
	width: auto;
	margin-top: 4px;
}

/* 文字说明这部分（房型名称 + 说明文字）吃掉 radio 之外剩下的全部宽度，并且
   允许在窄屏上正常按单词换行——min-width:0 是让这个 flex item 能缩小到比
   它"最长一个词"更窄都不会撑破容器（flex item 默认 min-width:auto，遇到
   超长内容会把容器撑爆导致横向溢出/挤压邻居，就是这次要修的 bug 的成因）。 */
.sbe-be-payment-option > span {
	flex: 1 1 auto;
	min-width: 0;
}

.sbe-be-payment-instructions {
	color: #666;
	font-size: 0.88em;
	white-space: pre-line;
}

.sbe-be-card-element-wrapper {
	margin: -4px 0 4px 32px;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}

.sbe-be-card-element {
	padding: 6px 2px;
}

.sbe-be-card-errors {
	color: #b91c1c;
	font-size: 0.85em;
	margin-top: 6px;
	min-height: 1em;
}

/* ---------- Confirmation ---------- */

.sbe-be-confirmation-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}

.sbe-be-confirmation-table th,
.sbe-be-confirmation-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}

.sbe-be-confirmation-table th {
	width: 140px;
	color: #666;
	font-weight: 600;
}

/* ---------- Responsive ---------- */

/* 这部分跟着"容器实际宽度"走（不是视口宽度）：搜索条、"Already booked?"
   胶囊、查询卡片都是在页面正文里正常排布的内容，不管短代码被放进多宽/多窄
   的容器，只要容器本身窄到 640px 以下就应该切换成手机端的堆叠样式——哪怕
   浏览器视口本身是桌面宽度（比如放进一个窄侧边栏小组件）也一样。 */
@container sbe-be ( max-width: 640px ) {
	.sbe-be-search-panel {
		padding: 4px 0 16px;
	}

	#sbe-be-step-lookup {
		max-width: none;
		margin: 0 8px;
		padding: 20px 16px;
	}

	.sbe-be-searchbar {
		flex-direction: column;
		gap: 2px;
		border-radius: 20px;
	}

	.sbe-be-sb-divider {
		display: none;
	}

	.sbe-be-sb-field {
		width: 100%;
	}

	.sbe-be-sb-submit {
		width: 100%;
		margin-top: 4px;
		padding: 12px;
	}

	.sbe-be-popover {
		left: 0;
		right: 0;
		width: auto;
	}

	.sbe-be-popover-guests {
		left: 0;
	}
}

/* 这部分保留视口宽度媒体查询：结果/结账/确认弹窗是 position:fixed 盖满
   整个屏幕的浮层，它该不该变成手机端的贴底 bottom sheet，取决于用户的
   屏幕（视口）有多宽，跟短代码挂在哪个容器里无关——容器查询在这里不适用，
   继续用 @media。 */
@media ( max-width: 640px ) {
	.sbe-be-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.sbe-be-modal {
		max-width: none;
		max-height: 92vh;
		border-radius: 20px 20px 0 0;
	}

	.sbe-be-modal-body {
		padding: 48px 16px 20px;
	}

	.sbe-be-result-card {
		grid-template-columns: 1fr;
	}

	.sbe-be-result-image {
		width: 100%;
		height: 160px;
	}

	.sbe-be-result-price {
		text-align: left;
	}

	.sbe-be-checkout-layout {
		grid-template-columns: 1fr;
	}

	.sbe-be-summary-card {
		position: static;
		order: -1;
	}

	.sbe-be-btn-block {
		width: 100%;
	}
}