/**
 * 営業日カレンダーのスタイル
 */

/* 日付ピッカーのスタイルをカスタマイズ */
.ui-datepicker-holiday,
.ui-datepicker-sunday,
.ui-datepicker-public-holiday {
  background-color: #ffdddd !important;
  color: #ff0000 !important;
}

.ui-datepicker-saturday {
  background-color: #e6f2ff !important;
}

/* Elementorとの互換性向上 */
.jet-form-builder__field.hasDatepicker {
  z-index: 99;
}

/* 日付ピッカーの全体的なスタイル調整 */
.ui-datepicker {
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 9999 !important; /* Elementorとの重なり順序調整 */
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 14px;
  width: 280px;
}

.ui-datepicker-header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer;
  text-decoration: none;
  color: #333;
  padding: 0 5px;
  font-weight: bold;
}

.ui-datepicker-title {
  font-weight: bold;
  text-align: center;
}

.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
}

.ui-datepicker-calendar th {
  padding: 5px;
  text-align: center;
  font-weight: normal;
  color: #666;
}

.ui-datepicker-calendar td {
  padding: 2px;
  text-align: center;
}

.ui-datepicker-calendar td a {
  padding: 5px;
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  color: #333;
}

.ui-datepicker-calendar td a:hover {
  background-color: #f5f5f5;
}

.ui-datepicker-calendar .ui-state-active {
  background-color: #0073aa;
  color: white !important;
}

/* 日付入力フィールドのカスタマイズ */
.jet-form-builder__field-wrap input[data-field-name="opening_date"],
.jet-form-builder__field-wrap input[data-field-name="closing_date"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 16px;
  padding-right: 30px;
  cursor: pointer;
}

/* ホバー時とフォーカス時のスタイル */
.jet-form-builder__field-wrap input[data-field-name="opening_date"]:hover,
.jet-form-builder__field-wrap input[data-field-name="closing_date"]:hover,
.jet-form-builder__field-wrap input[data-field-name="opening_date"]:focus,
.jet-form-builder__field-wrap input[data-field-name="closing_date"]:focus {
  border-color: #2271b1;
}

/* エラー表示のカスタマイズ */
.jet-form-builder-message--error {
  color: #d63638;
  padding: 10px;
  border-left: 4px solid #d63638;
  background-color: #fcf0f1;
  margin-bottom: 20px;
}

/* ネイティブの日付選択UIを非表示にする */
.jet-form-builder__field[data-field-name="opening_date"]::-webkit-calendar-picker-indicator,
.jet-form-builder__field[data-field-name="closing_date"]::-webkit-calendar-picker-indicator,
input[name="opening_date"]::-webkit-calendar-picker-indicator,
input[name="closing_date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* モバイルでの日付選択スタイルを統一 */
.jet-form-builder__field[data-field-name="opening_date"],
.jet-form-builder__field[data-field-name="closing_date"],
input[name="opening_date"],
input[name="closing_date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}