/* 首页专属样式（index.blade.php 引用）：下拉框还原、字段宽度、自研日期时间选择器、手机预览防遮挡 */

/* 主题原本用 Choices.js 替换下拉框，原生 select 的样式是「深色背景 + mask 箭头」兜底，
   mask 会把整个元素连边框一起遮掉。我们没引它的脚本，这里把 select 还原成普通下拉框 */
form#sms select#send-type,
form#sms select#identity,
form#sms select#receiver-dial {
	background-color: #fff;
	mask: none;
	-webkit-mask: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 12px 8px;
}

/* 区号下拉与号码输入框并排：区号只显示「旗帜 + 区号」，给固定窄宽度 */
.phone-input {
	display: flex;
	gap: 8px;
}

/* 选择器比上面的 reset 规则更具体，才能盖掉它的 40px 右内边距与箭头位置 */
form#sms .phone-input select#receiver-dial {
	flex: 0 0 auto;
	width: 112px;
	min-width: 0;
	padding-right: 26px;
	background-position: right 10px center;
}

form#sms .phone-input input#receiver-phone {
	flex: 1 1 auto;
	min-width: 0;
}

/* 主题里 form .field#field-* 统一是 52% 宽（消息框、提交按钮也是），
   我们改造/新增的字段 id 不在那份列表里，这里补齐，保持整行宽度一致 */
form .field#field-type,
form .field#field-email,
form .field#field-phone,
form .field#field-identity,
form .field#field-sender-name,
form .field#field-reserve,
form .field#field-images {
	position: relative;
	width: 52%;
}

/* 窄屏（手机）：表单字段改成整行宽度。
   主题把字段宽度写死成 52% 且没有窄屏覆盖，手机上只占半屏、输入框很挤。
   主题用的是 ID 选择器，这里必须同样带 ID 才盖得住（index.css 在 style.css 之后加载），
   本文件上面那条 52% 规则同理，所以两批 ID 都要列进来 */
@media (max-width: 739px) {

	form .field,
	form .field#field-type,
	form .field#field-email,
	form .field#field-phone,
	form .field#field-identity,
	form .field#field-sender-name,
	form .field#field-reserve,
	form .field#field-sender,
	form .field#field-senderInput,
	form .field#field-receivers,
	form .field#field-bericht,
	form .field#field-attachments,
	form .field#field-name,
	form .field#field-mail,
	form .field#field-submit {
		width: 100%;
	}

	/* 提交按钮下方的隐私说明跟着一起拉满，避免与上面的字段宽度不一致 */
	form .privacy-statement {
		width: 100%;
	}
}

/* 字段下方的说明文字（预约发送时间） */
.field-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #8a93a0;
}

/* 字段下方的实时校验提示（红色） */
.field-error {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #e5484d;
}

/* 消息的字数 / 条数 / 金额提示，随短信配置实时刷新 */
.price-hint {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 10px 0 0;
	padding: 6px 12px;
	border-left: 3px solid #ff8c00;
	border-radius: 0 8px 8px 0;
	background: #fff6e8;
	font-size: 12px;
	line-height: 1.6;
}

/* 计费说明：弱化，作为价格的前缀说明 */
.price-hint-prompt {
	color: #b07a3a;
}

/* 条数与金额：强调 */
.price-hint-amount {
	color: #a35c00;
	font-weight: 600;
	letter-spacing: .3px;
}

/* 未配置价格时脚本会把内容清空，避免露出一个空色块 */
.price-hint:empty {
	display: none;
}

/* 预约时间用自研日历：原生的 datetime-local 文案跟随浏览器语言，
   中文页面在英文浏览器下也会显示英文，所以这里自己画一个跟随站点语言的 */
#reserve-send-at-display {
	background-color: #fff;
	cursor: pointer;
}

.ost-dtp {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	box-sizing: border-box;
	width: 300px;
	margin-top: 6px;
	padding: 10px 12px 12px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}

.ost-dtp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.ost-dtp-title {
	font-size: 14px;
	font-weight: 600;
	color: #273443;
}

.ost-dtp-nav {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #f4f5f7;
	color: #5b6472;
	font-size: 16px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
}

.ost-dtp-nav:hover {
	background: #e9ebef;
}

.ost-dtp-week,
.ost-dtp-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.ost-dtp-week span {
	padding: 4px 0;
	font-size: 12px;
	color: #98a1b0;
	text-align: center;
}

.ost-dtp-day {
	padding: 7px 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #273443;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}

.ost-dtp-day:hover:not(:disabled) {
	background: #f2f4f7;
}

.ost-dtp-day.is-today {
	color: #0a84ff;
	font-weight: 700;
}

.ost-dtp-day.is-active {
	background: #0a84ff;
	color: #fff;
	font-weight: 700;
}

.ost-dtp-day:disabled {
	color: #c9ced6;
	cursor: default;
}

.ost-dtp-time {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #f0f1f3;
}

.ost-dtp-time-label {
	font-size: 13px;
	color: #667085;
}

/* id 选择器压过主题的 form .field select（含 mask 箭头），否则下拉会被遮掉 */
#ost-dtp select {
	width: auto;
	min-width: 60px;
	mask: none;
	-webkit-mask: none;
	background-color: #fff;
}

.ost-dtp-colon {
	color: #667085;
}

.ost-dtp-foot {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

.ost-dtp-clear,
.ost-dtp-ok {
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
}

.ost-dtp-clear {
	background: #f4f5f7;
	color: #5b6472;
}

.ost-dtp-ok {
	background: #ff8c00;
	color: #fff;
	font-weight: 600;
}

/* 右侧手机预览是纯装饰，禁止其吃点击事件，避免遮挡表单控件 */
.image,
.image-container,
.mobile-background,
.mobile-device,
.device-screen-container {
	pointer-events: none;
}

/* ---------- 附件图片上传（field-images）：缩略图网格 ---------- */

.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

/* 「+」添加按钮：上传满 5 张后由 app.js 隐藏 */
.image-add {
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1.5px dashed #c7ccd4;
	border-radius: 10px;
	background: #fff;
	color: #9aa1ac;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}

.image-add:hover {
	border-color: #e2b6bb;
	color: #e2b6bb;
}

/* 已选图片的缩略图磁贴 */
.image-tile {
	position: relative;
	width: 72px;
	height: 72px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	overflow: hidden;
	background: #f3f4f6;
}

.image-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 上传中：图片压暗 + 转圈 */
.image-tile.is-uploading img {
	opacity: .45;
}

.image-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid #d8dbe0;
	border-top-color: #e2b6bb;
	border-radius: 50%;
	animation: ost-image-spin .8s linear infinite;
}

@keyframes ost-image-spin {
	to {
		transform: rotate(360deg);
	}
}

.image-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(17, 24, 39, .55);
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}

.image-remove:hover {
	background: rgba(17, 24, 39, .8);
}

/* 手机预览气泡里的附件缩略图（#preview-attachments） */
.preview-attach {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.preview-attach img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}