/**
 * Flatpickr — CTB Review Hub / サイトフォームに合わせた見た目（ピンク系アクセント）。
 */

/*
 * 角丸：vendor は .flatpickr-calendar に border-radius:5px、.flatpickr-rContainer が inline-block のため
 * 下端のクリップやテーマ上書きで角が潰れやすい。body 付きセレクタと !important で確実に適用する。
 */
body .flatpickr-calendar,
body .flatpickr-calendar.open,
body .flatpickr-calendar.inline {
	--ctb-fp-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d53369' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	z-index: 100000;
	font-family: 'Noto Sans JP', sans-serif !important;
	border-radius: 12px !important;
	-webkit-border-radius: 12px !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	box-shadow: 0 10px 40px rgb(0 0 0 / 18%) !important;
	border: 1px solid #e5e5e5 !important;
	background: #fff !important;
}

/* 白いグリッド周り：inline-block をやめて幅100%で親の overflow + 角丸に収める */
body .flatpickr-innerContainer {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 0 0 12px 12px !important;
	overflow: hidden !important;
	background: #fff !important;
}

body .flatpickr-rContainer {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	vertical-align: top !important;
	overflow: hidden !important;
}

body .flatpickr-days {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/*
 * flatpickr.min.css が .dayContainer に border-bottom-left/right-radius:0 を当てており、
 * 白い日付グリッドだけ下端が直角になる。overflow ではなく vendor のリセットが原因。
 */
body .flatpickr-calendar .dayContainer {
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

/* ヘッダー：上側の角はカレンダー全体のクリップに合わせる */
.flatpickr-months {
	--ctb-fp-header-control-h: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
	padding: 10px;
	box-sizing: border-box;
	background: #d53369;
	color: #fff;
	border-radius: 12px 12px 0 0 !important;
	overflow: hidden;
	fill: #d53369;
}

.flatpickr-months .flatpickr-month {
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
	background: transparent;
	color: #fff;
	padding: 0;
	margin: 0 !important;
	min-height: var(--ctb-fp-header-control-h);
	height: auto !important;
	line-height: normal !important;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* vendor .flatpickr-month は overflow:hidden のためドロップダウン等が切れる */
	overflow: visible !important;
}

/* 中央：年セレクト（表示は「2026年」）、月セレクト */
.flatpickr-current-month {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	max-width: 100%;
	padding: 0 !important;
	height: auto !important;
	min-height: 0;
	position: relative;
	left: 0;
	transform: none !important;
	font-size: 1rem !important;
	font-weight: 400;
	line-height: normal !important;
}

.flatpickr-current-month .numInputWrapper {
	display: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
	order: 2;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 45%;
}

.ctb-flatpickr-year-select,
.flatpickr-current-month .flatpickr-monthDropdown-months {
	box-sizing: border-box;
	height: var(--ctb-fp-header-control-h);
	min-height: var(--ctb-fp-header-control-h);
	line-height: calc(var(--ctb-fp-header-control-h) - 2px);
	padding: 0 1.55rem 0 0.5rem;
	margin: 0 !important;
	font-size: 1rem;
	font-weight: 700;
	font-family: 'Noto Sans JP', sans-serif !important;
	color: #1e1e1e !important;
	background-color: #fff !important;
	background-image: var(--ctb-fp-chevron) !important;
	background-repeat: no-repeat !important;
	background-position: right 0.28rem center !important;
	background-size: 0.78rem !important;
	border: 1px solid rgb(255 255 255 / 85%) !important;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
}

.ctb-flatpickr-year-select::-ms-expand,
.flatpickr-current-month .flatpickr-monthDropdown-months::-ms-expand {
	display: none;
}

.ctb-flatpickr-year-select {
	order: 1;
	flex-shrink: 0;
	max-width: 48%;
	min-width: 4.5rem;
}

.ctb-flatpickr-year-select:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
	background-color: #fff9fb !important;
	background-image: var(--ctb-fp-chevron) !important;
	border-color: rgb(255 255 255 / 95%) !important;
	box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
}

.ctb-flatpickr-year-select:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
	outline: 2px solid #d53369;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgb(255 255 255 / 90%);
	background-image: var(--ctb-fp-chevron) !important;
}

span.flatpickr-weekday {
	color: #444;
	font-weight: 600;
}

.flatpickr-weekdaycontainer span.flatpickr-weekday:nth-child(1) {
	color: #dc3232;
}

.flatpickr-weekdaycontainer span.flatpickr-weekday:nth-child(7) {
	color: #2271b1;
}

.flatpickr-day {
	border-radius: 8px;
	color: #1e1e1e;
	font-weight: 700;
}

.flatpickr-day:hover {
	background: #d5336922;
	border-color: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: #9a9a9a;
	font-weight: 400;
}

.flatpickr-day.today {
	border-color: #d53369;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
	background: #d53369;
	border-color: #d53369;
	color: #fff;
	font-weight: 700;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	background: #b82a56;
	border-color: #b82a56;
	color: #fff;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: #ccc;
	font-weight: 400;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	flex: 0 0 auto;
	align-self: center;
	margin: 0 !important;
	fill: #d53369 !important;
	padding: 0;
	width: var(--ctb-fp-header-control-h);
	min-width: var(--ctb-fp-header-control-h);
	height: var(--ctb-fp-header-control-h);
	min-height: var(--ctb-fp-header-control-h);
	line-height: 1;
	box-sizing: border-box;
	border-radius: 10px;
	border: 2px solid #fff;
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: #fff7fa;
	border-color: #fff;
	box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: #b82a56 !important;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled:hover,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled:hover {
	background: #fff;
	border-color: #fff;
	box-shadow: none;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled:hover svg,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled:hover svg {
	fill: #d53369 !important;
}

/* 表示用入力（altInput）— テキスト入力と同系 */
.ctb-review-hub-form .ctb-review-hub-form__flatpickr-alt,
.ctb-review-hub-form-page-form .ctb-review-hub-form__flatpickr-alt {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 50px;
	padding: 0 12px;
	background: #fff;
	color: #1e1e1e;
	font-size: 16px;
	border: 2px solid #fff;
	letter-spacing: 1px;
	border-radius: 10px;
	font-family: 'Noto Sans JP', sans-serif !important;
	transition: 0.3s;
	cursor: pointer;
}

.ctb-review-hub-form .ctb-review-hub-form__flatpickr-alt:focus,
.ctb-review-hub-form-page-form .ctb-review-hub-form__flatpickr-alt:focus {
	border-color: #f60;
	box-shadow: 0 6px 18px rgb(0 0 0 / 15%);
	outline: none;
}

.ctb-review-hub-form--page .ctb-review-hub-form__flatpickr-alt:focus,
.ctb-review-hub-form-page-form .ctb-review-hub-form__flatpickr-alt:focus {
	border-color: #d53369;
}

.ctb-review-hub-form .ctb-review-hub-form__flatpickr-alt::placeholder,
.ctb-review-hub-form-page-form .ctb-review-hub-form__flatpickr-alt::placeholder {
	color: #6b6b6b;
	opacity: 1;
}
