/**
 * フロント共通: jQuery UI Datepicker（日付選択フォーム）
 * ブランドカラー（--pc-primary）に合わせたカレンダー UI
 */

/* 日付入力フィールド（アイコンはラッパーの ::after で表示し、background 競合を避ける） */
.front-date-input-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

.orderHistory .oh-search-detail-form__value > .front-date-input-wrap,
.orderHistory .flex.flex-col.md\:flex-row > .w-full > .front-date-input-wrap {
  display: block;
  width: 100%;
}

.personal-schedule-modal__date-range > .front-date-input-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

.personal-schedule-modal__date-range .front-date-input-wrap .personal-schedule-modal__control--date {
  flex: none;
  width: 100%;
}

td > .front-date-input-wrap:has(.oh-form-control) {
  display: block;
  width: 100%;
}

.cart-list .cart-delivery-section .order-final__option-date-input .front-date-input-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.front-date-input-wrap .js-front-date-input,
.front-date-input-wrap .has-front-datepicker,
.front-date-input-wrap input[type="text"] {
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.25rem !important;
}

.ppkg-admin .front-date-input-wrap {
  vertical-align: middle;
}

.front-date-input-wrap::after {
  content: "";
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23898989' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.front-date-input-wrap:focus-within::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c94d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.orderHistory .oh-order-date-group .front-date-input-wrap::after {
  right: 0.5rem;
}

/* 簡易検索のフローティングラベル内日付（ラッパーを使わず親にアイコン表示） */
.orderHistory .oh-floating-field:has(.js-front-date-input) .js-front-date-input,
.orderHistory .oh-floating-field:has(.has-front-datepicker) .has-front-datepicker {
  cursor: pointer;
  padding-right: 2.25rem !important;
}

.orderHistory .oh-floating-field:has(.js-front-date-input)::after,
.orderHistory .oh-floating-field:has(.has-front-datepicker)::after {
  content: "";
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23898989' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.orderHistory .oh-floating-field:has(.js-front-date-input:focus-within)::after,
.orderHistory .oh-floating-field:has(.js-front-date-input:focus)::after,
.orderHistory .oh-floating-field:has(.has-front-datepicker:focus-within)::after,
.orderHistory .oh-floating-field:has(.has-front-datepicker:focus)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c94d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.orderHistory .oh-order-date-group .oh-floating-field:has(.js-front-date-input)::after,
.orderHistory .oh-order-date-group .oh-floating-field:has(.has-front-datepicker)::after {
  right: 0.5rem;
}

/* jQuery UI が初回 datepicker 初期化時に body 末尾へ追加するポップアップ用コンテナ（非表示時は見えないようにする） */
#ui-datepicker-div {
  display: none;
}

/* ポップアップ本体（表示時は jQuery UI が inline で display を上書き） */
#ui-datepicker-div,
.ui-datepicker {
  z-index: 1070 !important;
  width: 18.5rem;
  padding: 0.75rem;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 0.875rem;
  color: var(--pc-gray-800, #595757);
  background: #fff;
  border: 1px solid var(--pc-border-color, #c9caca);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 2rem;
  background: transparent;
  border: 0;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pc-gray-800, #595757);
}

.ui-datepicker .ui-datepicker-title select {
  margin: 0 0.15rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.8125rem;
  border: 1px solid var(--pc-border-color, #c9caca);
  border-radius: 0.25rem;
  background: #fff;
  color: var(--pc-gray-800, #595757);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 50%;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.875rem;
  border: 1px solid var(--pc-border-color, #c9caca);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--pc-gray-600, #898989);
  cursor: pointer;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-prev {
  left: 0;
}

.ui-datepicker .ui-datepicker-next {
  right: 0;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  border-color: var(--pc-primary, #5c94d5);
  color: var(--pc-primary, #5c94d5);
  background: #f0f6fc;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
}

.ui-datepicker .ui-datepicker-prev::before {
  content: "‹";
}

.ui-datepicker .ui-datepicker-next::before {
  content: "›";
}

.ui-datepicker table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ui-datepicker th {
  padding: 0.35rem 0;
  font-weight: 500;
  color: var(--pc-gray-600, #898989);
  text-align: center;
  border: 0;
}

/* 月曜始まり: 6列目=土、7列目=日 */
.ui-datepicker th:nth-child(6) {
  color: #337ab7;
}

.ui-datepicker th:nth-child(7) {
  color: #d9534f;
}

.ui-datepicker td {
  padding: 0.125rem;
  border: 0;
  text-align: center;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.4rem 0.25rem;
  text-align: center;
  text-decoration: none;
  border-radius: 0.375rem;
  color: var(--pc-gray-800, #595757);
  border: 0;
  background: transparent;
}

.ui-datepicker td a:hover,
.ui-datepicker td a.ui-state-hover {
  background: #f0f6fc;
  color: var(--pc-primary, #5c94d5);
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-active:hover {
  background: var(--pc-primary, #5c94d5);
  color: #fff;
  font-weight: 700;
}

.ui-datepicker td a.ui-state-highlight {
  background: #e8f1fa;
  color: var(--pc-primary, #5c94d5);
}

.ui-datepicker td.ui-datepicker-today a.ui-state-highlight {
  border: 1px solid var(--pc-primary, #5c94d5);
  background: #fff;
}

.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-datepicker-other-month a {
  color: #c9caca;
}

.ui-datepicker td:nth-child(6) a,
.ui-datepicker td:nth-child(6) span {
  color: #337ab7;
}

.ui-datepicker td:nth-child(7) a,
.ui-datepicker td:nth-child(7) span {
  color: #d9534f;
}

.ui-datepicker .ui-datepicker-buttonpane {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--pc-border-color, #c9caca);
  background: transparent;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pc-primary, #5c94d5);
  background: #fff;
  border: 1px solid var(--pc-primary, #5c94d5);
  border-radius: 0.375rem;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: #f0f6fc;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  color: var(--pc-gray-800, #595757);
  border-color: var(--pc-border-color, #c9caca);
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover {
  background: #f5f5f5;
}

.ui-datepicker .ui-state-disabled,
.ui-datepicker .ui-state-disabled span,
.ui-datepicker .ui-state-disabled a {
  opacity: 0.35;
  cursor: default;
}