/* ▼ Datepicker 全体のマージンを0 */
#fbuilder_1 .ui-datepicker,
#fbuilder_1 .ui-datepicker-inline,
#fbuilder_1 .ui-datepicker-header,
#fbuilder_1 .ui-datepicker table,
#fbuilder_1 .ui-datepicker th,
#fbuilder_1 .ui-datepicker td,
#fbuilder_1 .ui-datepicker-title {
    margin: 0 !important;
    padding: 0 !important;
}

/* AHB再描画中の一瞬を見せない（チラつき対策） */
#fbuilder_1 .slotsCalendar.ahb-hold-ui .slots {
  pointer-events: none !important;
}

/* ▼ Datepicker 内部セルの padding もリセット（必要に応じて調整） */
#fbuilder_1 .ui-datepicker td a,
#fbuilder_1 .ui-datepicker td span {
    margin: 0 !important;
}

/* ▼ タイムスロット全体のマージンを0 */
#fbuilder_1 .slots,
#fbuilder_1 .slots > div {
    margin: 0 !important;
}

/* cap-date / cap-minutes / cap-hour の margin も全て0 */
#fbuilder_1 .slots .cap-date,
#fbuilder_1 .slots .cap-minutes,
#fbuilder_1 .slots .cap-minutes p,
#fbuilder_1 .slots .cap-hour,
#fbuilder_1 .slots .cap-hour p {
    margin: 0 !important;
}

/* 個別スロットの margin/padding を0 */
#fbuilder_1 .slots .availableslot,
#fbuilder_1 .slots .unavailableslot,
#fbuilder_1 .slots .htmlUsed {
    margin: 0 !important;
}

/* ○／✖ の a タグも完全リセット */
#fbuilder_1 .slots a {
    margin: 0 !important;
    display: block;
    line-height: 1; /* 必要なら調整 */
    text-align: center;
}

#fbuilder_1 .ahb_list {
    display: none !important;
}
/* fbuilder_1 の最大幅を480pxに指定 */
#fbuilder_1 {
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
}

#fbuilder_1 select.ahbfield_service {
    display: none !important;
    visibility: hidden !important;
}


/* slotsCalendar の幅を常に100%に */
#fbuilder_1 .slotsCalendar.slotsCalendarfieldname1_1 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* fieldCalendar の幅を100%にする */
#fbuilder_1 .fieldCalendar.fieldCalendarfieldname1_1.notranslate.hasDatepicker {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Datepicker の本体幅を100%に */
#fbuilder_1 .ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ▼ slots 全体を 1 + 4 列のグリッドにする */
#fbuilder_1 .slots {
    display: grid;
    grid-template-columns: 50px repeat(4, calc((100% - 50px) / 4));
    box-sizing: border-box;
}

/* ▼ 日付行は全幅 */
#fbuilder_1 .slots .cap-date {
    grid-column: 1 / -1;
    font-weight: bold;
    margin-bottom: 6px;
}

/* ▼ 分ラベル（0分〜 / 15分〜 / 30分〜 / 45分〜）は contents で展開 */
#fbuilder_1 .slots .cap-minutes {
    display: contents;
}

#fbuilder_1 .slots .cap-minutes p {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

/* 左上セル（cap-clock）は時計アイコンを表示する */
#fbuilder_1 .slots .cap-minutes .cap-clock {
    text-align: left;
    position: relative;
    padding-left: 0; /* 必要に応じて調整 */
}

/* 既存の <i class="fal fa-clock"> は非表示（ダブル表示を避ける） */
#fbuilder_1 .slots .cap-minutes .cap-clock i {
    display: none;
}

/* 時計アイコンを Font Awesome で表示 */
#fbuilder_1 .slots .cap-minutes .cap-clock::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";  /* どれかが適合 */
    font-weight: 400; /* fal → light、solid は 900 */
    content: "\f017"; /* clock アイコン */
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}


/* ▼ cap-hour（10時・11時）セルは 50px 幅のまま */
#fbuilder_1 .slots .cap-hour {
    display: flex;
    align-items: center;
}

#fbuilder_1 .slots .cap-hour p {
    margin: 0;
    white-space: nowrap;
}

/* ▼ タイムスロット（○）セル */
#fbuilder_1 .slots .availableslot,
#fbuilder_1 .slots .unavailableslot,
#fbuilder_1 .slots .htmlUsed {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* a自体の中央寄せ */
#fbuilder_1 .slots a {
    text-align: center;
    display: block;
}

/* AHB 標準の使用ポイント表示（usedSlots 内）は隠す */
#fbuilder_1 .usedSlots .totalCost {
  display: none !important;
}

/* ついでに標準の ahb_list も全部隠しておく（要らなければ） */
#fbuilder_1 .usedSlots .ahb_list {
  display: none !important;
}
.ahb_m4 #fbuilder .ui-datepicker-next span, 
.ahb_m4 #fbuilder .ui-datepicker-prev span{
	background: #0d0a22 !important;
}
.ahb_m4 #fbuilder .ui-datepicker-next, 
.ahb_m4 #fbuilder .ui-datepicker-prev{
	transform: none !important;
	border-top: none !important;
	border-right: none !important;
	background: #0d0a22 !important;
	margin: 0 !important;
}

#booking-page form.cpp_form #fbuilder .fields.field-main .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
	margin: 0 auto !important;
	padding: 10px 0 !important;
}

.ahb_m4 #fbuilder .ui-datepicker-header {
	font-size: 0.85em !important;
	line-height: 1em !important;
	border-bottom: none !important;
}
.ahb_m4 #fbuilder .ui-datepicker table, 
.ahb_m4 #fbuilder .ui-datepicker td, 
.ahb_m4 #fbuilder .ui-datepicker th {
	border-top: none !important;
	border-left: none !important;
}

#fbuilder .ui-datepicker td span, .ui-datepicker td a {
	height: auto !important;
}

/* ガイドラベルは必ず1行（全幅）を使う */
#fbuilder_1 .slotsCalendar.slotsCalendarfieldname1_1 .ahb-slots-guide{
  display: block;
  width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: 0 0 8px 0; /* 必要なければ0でもOK */
}

/* slotsCalendar の子要素を必ず縦積みにする（横並び根絶） */
#fbuilder_1 .slotsCalendar.slotsCalendarfieldname1_1{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

/* ガイドは単独1行（全幅） */
#fbuilder_1 .slotsCalendar.slotsCalendarfieldname1_1 .ahb-slots-guide{
  display: block !important;
  width: 100% !important;
  flex: 0 0 auto !important; /* 親がcolumnなので 100%指定より安全 */
  margin: 20px 0 8px 0 !important;
}

/* .slots も必ず次行（全幅） */
#fbuilder_1 .slotsCalendar.slotsCalendarfieldname1_1 > .slots{
  width: 100% !important;
}

.ahb_m4 #fbuilder .slots {
	padding: 0 !important;
}

#fbuilder .slots div {
	padding: 0 !important;
	border: none !important;
}

#fbuilder .slotsCalendar .cap-date {
	border-bottom: 1px solid #fff !important;
}
#booking-page form.cpp_form #fbuilder .fields.field-main .slotsCalendar .slots .cap-date {
	height: 35px;
	font-size: 0.85em;
	display: grid;
	place-items: center;
}

.ahb_m4 #fbuilder .slots div a {
	border: none !important;
	border-bottom: 1px solid #fff !important;
	border-left: 1px solid #fff !important;
}

#booking-page form.cpp_form #fbuilder .fields.field-usercount select {
	width: 80px !important;
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select {
	padding-left: 0.5em !important;
}

#booking-page form.cpp_form #fbuilder .fields.field-main .ui-datepicker {
	z-index: 800 !important;
}

#fbuilder_1 .ahb-loading{
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.85;
}

#fbuilder_1 .ahb-spinner{
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: ahbSpin 0.8s linear infinite;
}

@keyframes ahbSpin{
  to{ transform: rotate(360deg); }
}

#booking-page form.cpp_form #fbuilder .fields.field-points input:read-only {
	width: 120px !important;
}