/*
	TOSS TENNIS — SimplyBook Custom CSS（按官方模板格式填写）
	整段复制，替换后台 Custom CSS 输入框里的全部内容
	风格：纸感米白底 · 超粗大写标题 · 等宽小标签 · 细线 · 胶囊按钮
	色号：暖墨 #2E2922 / 深暖灰 #61584C / 奶油 #D8D8C5 / 纸白 #EFEDE4
	      沙金 #D0BF87 / 铁锈红 #9E5242 / 灰蓝 #727B84
*/

/* ---------- 字体（拿到品牌字体后只改这一行） ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');


/* ========== 1. 服务列表：服务名称（超粗全大写，P1 / P6） ========== */
 #events h3   {
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 800 !important;
	font-stretch: 112%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1 !important;
	font-size: 26px !important;
	color: #2E2922 !important;
	margin: 0 0 8px 0 !important;
}


/* ========== 2. 服务列表：时长（等宽小标签，P5 / P7） ========== */
 #events p.duration, #events div.duration   {
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #61584C !important;
	margin: 0 0 10px 0 !important;
}


/* ========== 3. 服务列表：介绍文字 ========== */
 #events p.description, #events div.description   {
	font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: #2E2922 !important;
	max-width: 560px;
}


/* ========== 4. 已选中的服务（沙金淡底 + 左侧色条） ========== */
 #events .selectedEvent   {
	background: rgba(208, 191, 135, 0.22) !important;
	border: 0 !important;
	border-top: 1px solid #2E2922 !important;
	border-left: 4px solid #D0BF87 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px 18px !important;
}


/* ========== 5. 主按钮「预约此时段」（铁锈红胶囊，P1 / P4） ========== */
 #events input.reserve_time_btn   {
	background: #9E5242 !important;
	color: #D8D8C5 !important;
	border: 1px solid #9E5242 !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	box-shadow: none !important;
	background-image: none !important;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
 #events input.reserve_time_btn:hover   {
	background: #2E2922 !important;
	border-color: #2E2922 !important;
	color: #EFEDE4 !important;
}


/* ========== 6. 次按钮「选择其他服务」（描边胶囊） ========== */
 #events input.select_another_btn   {
	background: transparent !important;
	color: #2E2922 !important;
	border: 1px solid #2E2922 !important;
	border-radius: 999px !important;
	padding: 12px 28px !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	box-shadow: none !important;
	background-image: none !important;
	cursor: pointer;
}
 #events input.select_another_btn:hover   {
	background: #2E2922 !important;
	color: #EFEDE4 !important;
}


/* ========== 7. 选日期 / 选时间 两个区块的标题（窄体大写，P6） ========== */
 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 800 !important;
	font-stretch: 75%;
	text-transform: uppercase;
	font-size: 34px !important;
	line-height: 0.95 !important;
	letter-spacing: 0;
	color: #2E2922 !important;
	border-bottom: 1px solid #2E2922 !important;
	padding-bottom: 10px !important;
	margin: 28px 0 16px 0 !important;
}


/* ========== 8. 提交按钮「确认预约」（最显眼的铁锈红胶囊） ========== */
 #eventForm #save_button   {
	background: #9E5242 !important;
	color: #D8D8C5 !important;
	border: 1px solid #9E5242 !important;
	border-radius: 999px !important;
	padding: 14px 36px !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	box-shadow: none !important;
	background-image: none !important;
	cursor: pointer;
}
 #eventForm #save_button:hover   {
	background: #2E2922 !important;
	border-color: #2E2922 !important;
	color: #EFEDE4 !important;
}


/* ========== 9. 日历主体（纸白底、细线、无阴影，P4） ========== */
 div.ui-widget-content   {
	background: #EFEDE4 !important;
	background-image: none !important;
	border: 1px solid #2E2922 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #2E2922 !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 13px !important;
}
/* 日历里的每一天（jQuery 日历的日期格子） */
 div.ui-widget-content .ui-state-default   {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #2E2922 !important;
	text-align: center !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
}
/* 今天 */
 div.ui-widget-content .ui-state-highlight   {
	border: 1px solid #9E5242 !important;
	color: #9E5242 !important;
}
/* 已选中的日期 */
 div.ui-widget-content .ui-state-active, div.ui-widget-content .ui-state-hover   {
	background: #2E2922 !important;
	color: #EFEDE4 !important;
}
/* 不能选的日期 */
 div.ui-widget-content .ui-datepicker-unselectable .ui-state-default,
 div.ui-widget-content .ui-state-disabled   {
	color: #727B84 !important;
	opacity: 0.45 !important;
}


/* ========== 10. 日历顶部的月份栏（深暖灰色块，像课表图） ========== */
 div.ui-widget-header   {
	background: #61584C !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #D8D8C5 !important;
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
 div.ui-widget-header .ui-icon   {
	filter: invert(0.9);
}


/* ========== 11. 时间表整体 ========== */
 #timeline-container table.timeline   {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 4px !important;
	background: transparent !important;
	border: 0 !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 12px !important;
	color: #2E2922 !important;
}


/* ========== 12. 教练不上班的时间（留空，几乎看不见） ========== */
 .timeline td.not_worked_time   {
	background: transparent !important;
	background-image: none !important;
	color: rgba(46, 41, 34, 0.25) !important;
	border: 1px dashed rgba(46, 41, 34, 0.15) !important;
	border-radius: 999px !important;
}


/* ========== 13. 可预约时段（沙金色 = Flagstaff 色） ========== */
 .timeline td.free_time   {
	background: #D0BF87 !important;
	background-image: none !important;
	color: #2E2922 !important;
	border: 0 !important;
	border-radius: 999px !important;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease;
}
 .timeline td.free_time:hover   {
	background: #9E5242 !important;
	color: #EFEDE4 !important;
}


/* ========== 14. 已选中的时段（暖墨色） ========== */
 .timeline td.selected_time   {
	background: #2E2922 !important;
	background-image: none !important;
	color: #EFEDE4 !important;
	border: 0 !important;
	border-radius: 999px !important;
}


/* ========== 15. 已被预约的时段（灰蓝 + 删除线） ========== */
 .timeline td.reserved_time   {
	background: #727B84 !important;
	background-image: none !important;
	color: #D8D8C5 !important;
	border: 0 !important;
	border-radius: 999px !important;
	text-decoration: line-through;
	opacity: 0.7;
	cursor: not-allowed;
}


/* ========== 16. 加载中提示 ========== */
 div#loading   {
	background: #61584C !important;
	background-image: none !important;
	color: #D8D8C5 !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 10px 22px !important;
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	box-shadow: none !important;
}


/* ========== 17. 日期区块里的字段名（等宽小标签） ========== */
/* 注：原模板后两段漏了 #，这里已补上，否则不会生效 */
 #start_date-block-container .zend_form dt, #start_date-block-container .zend_form dt b, #start_date-block-container .zend_form dd label   {
	font-family: 'JetBrains Mono', Menlo, monospace !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #61584C !important;
}