/* ==========================================================
   jQuery UI の日付カレンダー（#ui-datepicker-div）の見た目。外部の CSS（jQuery UI のテーマ）に頼らず、これだけで完結する。
   MW WP Form は、jQuery UI の CSS を Google の配信サーバーから読み込んでいて、それが効いていないサイトでは、
   カレンダーが入力欄の下に重なって崩れる（背景がなく、「Prev Next」の文字がむき出し）。
   色は、案件に合わせて、:root の変数 3 つを書き換える。
   ========================================================== */

:root {
	--smf-dp-accent: #333;     /* 見出し・選択中の日付 */
	--smf-dp-today: #e8e8e8;   /* 今日の背景 */
	--smf-dp-line: #ccc;       /* 枠 */
}

#ui-datepicker-div.ui-datepicker {
	display: none;
	box-sizing: border-box;
	width: 19em;
	max-width: calc(100vw - 16px); /* スマホで画面の外にはみ出さない */
	padding: 8px;
	background: #fff;
	color: #222;
	border: 1px solid var(--smf-dp-line);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	font-size: 14px;
	line-height: 1.4;
	z-index: 9999 !important; /* 固定のヘッダーやボタンより前に出す */
}
#ui-datepicker-div .ui-helper-hidden-accessible {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

/* 見出し：前へ・次へ と、年・月のプルダウン */
#ui-datepicker-div .ui-datepicker-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 36px;
	margin-bottom: 4px;
	background: #f4f4f4;
	border-radius: 3px;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	width: 32px;
	justify-content: center;
	font-size: 0; /* 「前へ」「次へ」の文字は隠して、矢印だけ出す（読み上げ用の文字は残る） */
	color: var(--smf-dp-accent);
	cursor: pointer;
	text-decoration: none;
}
#ui-datepicker-div .ui-datepicker-prev {
	left: 0;
}
#ui-datepicker-div .ui-datepicker-next {
	right: 0;
}
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}
#ui-datepicker-div .ui-datepicker-prev::before {
	transform: rotate(-45deg);
}
#ui-datepicker-div .ui-datepicker-next::before {
	transform: rotate(135deg);
}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled {
	opacity: 0.3;
	cursor: default;
}
#ui-datepicker-div .ui-datepicker-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0;
	font-weight: 700;
	color: var(--smf-dp-accent);
}
#ui-datepicker-div .ui-datepicker-title select {
	width: auto;
	min-width: 4.5em;
	height: 28px;
	margin: 0;
	padding: 0 4px;
	font-size: 14px;
	color: #222;
	background: #fff;
	border: 1px solid var(--smf-dp-line);
	border-radius: 3px;
}

/* 日付の表 */
#ui-datepicker-div table.ui-datepicker-calendar {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}
#ui-datepicker-div .ui-datepicker-calendar th {
	padding: 4px 0;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	border: 0;
	background: none;
}
#ui-datepicker-div .ui-datepicker-calendar th:first-child {
	color: #c0392b; /* 日曜 */
}
#ui-datepicker-div .ui-datepicker-calendar th:last-child {
	color: #2a6fb0; /* 土曜 */
}
#ui-datepicker-div .ui-datepicker-calendar td {
	padding: 1px;
	border: 0;
	background: none;
	text-align: center;
}
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
	display: block;
	padding: 6px 0;
	color: #222;
	text-decoration: none;
	border-radius: 3px;
}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
	background: #eee;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a {
	background: var(--smf-dp-today);
	font-weight: 700;
}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
	background: var(--smf-dp-accent);
	color: #fff;
}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span {
	color: #aaa;
}