:root{
  --smf-bd-col:#A47864;
  --smf-back-col:#f9f5ec12;
}

.gray{
  color:gray;
}

/*******************************************
**  デモ５　プルダウン　装飾
********************************************/
#demo-time2{


  background:var(--smf-back-col);

  box-shadow:0 0 0 1px var(--smf-bd-col);

  border:none;
}

/***************************************
** デモ6　確認画面の時のプルダウンを隠す
***************************************/

#demo-time3-confirm {
    display: none;
}

[data-screen="confirm"] #demo-time3 {
    display: none;
}

[data-screen="confirm"] #demo-time3-confirm {
    display: inline;
}


/******************************************************************************
  時間select
******************************************************************************/
/*
#time-wrap[hidden]{
  display:none !important;
}
*/
#demo-time3{

  width:100%;
  height:41px;

  appearance:base-select;

  background:var(--smf-back-col);

  box-shadow:0 0 0 1px var(--smf-bd-col);

  border:none;

  border-radius:4px;

  padding:7px 8px 8px 12px;

  font-size:16px; /* iPhoneズーム防止 */

}

#demo-time3:hover{
  cursor:pointer;
}



/* エラー */
#demo-time3.is-error{
  border-color:red;
}

select#demo-time3::picker-icon{
  margin-right:10px;
}

/******************************************************************************
  option装飾
******************************************************************************/
/*
#demo-time2 select,
::picker(select){

  appearance:base-select;

}


#demo-time2 > option{

  padding:5px 12px;

  background:#ead2d229;

}


#demo-time2 > option:not(:last-child){

  border-bottom:1px solid #aaa;

}


#demo-time2 > option:hover,
#demo-time2 > option:focus-visible{

  background:#f5f6f7;

  outline:none;

  cursor:pointer;

}


#demo-time2 option::checkmark{

  display:none;

}
*/
/*********************************
** 未選択の時の色
*********************************/
#snow-monkey-form-337 #demo-time2{
  color:gray;
}

/**********************************
** 送信ボタンを隠す
***********************************/
:is(.page-id-210, .page-id-247)
button.smf-button-control__control[data-action="complete"] {
    display: none !important;
}

/**********************************
** デモページ２　selectの幅
**********************************/
#calendar-mode, #date-mode{
  width:155px;
}

/*********************************
** デモページ２　selectのサイズ
*********************************/
#js-theme, #calendar-mode, #date-mode{
  font-size:14px;
  padding:6px;
}

/**********************************************
** デモページ２　selectとinputの隙間調整
**********************************************/
:is(#snow-monkey-form-241, #snow-monkey-form-242, #snow-monkey-form-244)
 .wp-block-columns{
  margin-bottom:7px;
}


/******************************************************************************
  flatpickr カレンダー関連
******************************************************************************/

/* ===== 日曜日（赤） ===== */
:is(.smf383-calendar, .smf384-calendar, .smf385-calendar) .flatpickr-weekday:nth-child(7n + 1),
:is(.smf383-calendar, .smf384-calendar, .smf385-calendar) .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1)
 {
    color: #f00;
}

.smf385-calendar .flatpickr-day.flatpickr-disabled:nth-child(7n + 1) {
    color:#f00;
    opacity:0.4;
}

/* ===== 土曜日（青） ===== */
:is(.smf383-calendar, .smf384-calendar, .smf385-calendar) .flatpickr-weekday:nth-child(7n),
:is(.smf383-calendar, .smf384-calendar, .smf385-calendar) .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
    color: #00f;
}

/* ===== 今日 ===== */
:is(.smf383-calendar, .smf384-calendar, .smf385-calendar) .flatpickr-day.today,
:is(.smf383-calendar, .smf384-calendar, .smf385-calendar) .flatpickr-day.today:hover{
    border-color:#0fb6bc;
    color:#25bdcf;
}

/* 今日（選択不可の場合） */
.smf384-calendar .flatpickr-day.today.flatpickr-disabled {
    border-color: #0fb6bc;
    color: #25bdcf !important;
    opacity: 1;              /* グレー表示を解除 */
}

/* ===== 祝日 ===== */
.smf385-calendar .flatpickr-day.is-holiday,
.smf385-calendar .flatpickr-day.is-holiday:hover {
  background:rgba(237,33,43,.2);
  color:#f00;
  opacity:0.4;
}



/* 今日が祝日の場合 */
.smf385-calendar .flatpickr-day.today.is-holiday,
.smf385-calendar .flatpickr-day.today.is-holiday:hover{
    border-color:#e20000;
    background:rgba(237,33,43,.2);
    color:#e20000;
}


/******************************************************************************
  カレンダー下部ボタン
******************************************************************************/

.flatpickr-footer{

  display:flex;
  justify-content:flex-end;
  gap:8px;

  padding:10px;

  background:#fff;
  border-top:1px solid #ddd;

}


.flatpickr-reset{

  padding:6px 12px;

  cursor:pointer;

  border:1px solid #aaa;
  border-radius:3px;

  background:#eee;

}


.flatpickr-reset:hover{

  background:#ddd;

}

.flatpickr-reset {
  width: calc(100% - 10px);
}