/* =================================================================
   mpcal.css
   カレンダー期間選択モーダル / カート追加モーダル 共通スタイル
   対象: /test/assets/css/mpcal.css
   ================================================================= */


/* -----------------------------------------------------------------
   カレンダーモーダル共通
   ----------------------------------------------------------------- */
.mpcal-modal .modal-dialog { max-width: 740px; }

@media (max-width: 767px) {
  .mpcal-modal .modal-dialog  { margin: 0; padding-top: 52px; max-width: 100%; height: calc(100% - 52px); }
  .mpcal-modal .modal-content { height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .mpcal-modal .modal-body    { flex: 1; overflow-y: auto; }
}

.mpcal-modal .modal-header { padding: 20px; border-bottom: 1px solid #eee; align-items: initial; }
.mpcal-modal .modal-title  { font-size: 16px; font-weight: 700; color: #111; }
.mpcal-modal .modal-title small {
  display: block; font-size: 13px; font-weight: 400; color: #222; margin-top: 5px;
}
.mpcal-modal .modal-body   { padding: 14px 16px 20px; }
.mpcal-modal .modal-footer { padding: 10px 16px; border-top: 1px solid #eee; }


/* -----------------------------------------------------------------
   デバッグバナー
   ----------------------------------------------------------------- */
#mpcal-debug-banner-del {
  display: none;
  margin: 0 0 10px;
  padding: 5px 10px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  font-size: 11px;
  color: #856404;
}


/* -----------------------------------------------------------------
   年月ピッカー
   ----------------------------------------------------------------- */
.mpcal-ympick {
  display: none;
  margin-bottom: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
.mpcal-ympick-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #f5f5f5; border-bottom: 1px solid #eee;
}
.mpcal-ympick-hd span { font-size: 12px; font-weight: 700; color: #555; letter-spacing: .05em; }
.mpcal-ympick-close {
  background: none; border: none; font-size: 18px; color: #aaa;
  cursor: pointer; padding: 0 4px; line-height: 1; transition: color .15s;
}
.mpcal-ympick-close:hover { color: #333; }
.mpcal-ympick-body { padding: 12px 14px; max-height: 240px; overflow-y: auto; }

.mpcal-ym-yr-lbl { font-size: 13px; font-weight: 700; color: #222; margin: 0 0 6px; }
.mpcal-ym-grid   { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 14px; }

@media (max-width: 480px) { .mpcal-ym-grid { grid-template-columns: repeat(4, 1fr); } }

.mpcal-ym-btn {
  padding: 6px 3px; font-size: 12px;
  border: 1px solid #e8e8e8; border-radius: 6px;
  background: #fff; cursor: pointer; text-align: center; color: #333;
  transition: background .12s, border-color .12s, color .12s;
}
.mpcal-ym-btn:hover:not([disabled]) { background: #f0f7ff; border-color: #0d6efd; color: #0d6efd; }
.mpcal-ym-btn.is-cur    { background: #0d6efd; color: #fff; border-color: #0d6efd; font-weight: 700; }
.mpcal-ym-btn[disabled] { color: #ccc; cursor: default; background: #fafafa; }


/* -----------------------------------------------------------------
   2カラムカレンダー
   ----------------------------------------------------------------- */
.mpcal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 580px) { .mpcal-wrap { grid-template-columns: 1fr; gap: 32px; } }

/* 月ヘッダー */
.mpcal-mhd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }

.mpcal-nav {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  border-radius: 50%; font-size: 22px; color: #555;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1; transition: background .12s; flex-shrink: 0;
}
.mpcal-nav:hover:not([disabled]) { background: #f0f0f0; }
.mpcal-nav[disabled] { color: #d0d0d0; cursor: default; }

/* 年月タイトル */
.mpcal-mtitle {
  background: none; border: none; border-bottom: 1.5px solid #bbb;
  font-size: 15px; font-weight: 700; color: #111; cursor: pointer;
  padding: 2px 2px 3px;
  display: inline-flex; align-items: center; gap: 4px;
  transition: border-color .15s, color .15s; line-height: 1.4;
}
.mpcal-mtitle:hover { border-color: #0d6efd; color: #0d6efd; }
.mpcal-mtitle-icon { font-size: 11px; color: #888; transition: color .15s; line-height: 1; }
.mpcal-mtitle:hover .mpcal-mtitle-icon { color: #0d6efd; }

/* 曜日ヘッダー */
.mpcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.mpcal-dow  { font-size: 10px; color: #bbb; padding: 2px 0 7px; font-weight: 600; }
.mpcal-dow.sun { color: #f87171; }
.mpcal-dow.sat { color: #60a5fa; }

/* 日付セル */
.mpcal-cell {
  position: relative; padding: 2px 1px;
  cursor: pointer; user-select: none; text-align: center;
}
.mpcal-cell.is-empty    { cursor: default; pointer-events: none; }
.mpcal-cell.is-disabled { cursor: default; pointer-events: none; }

.mpcal-ci {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 13px; line-height: 1; color: #333;
  transition: background .1s; position: relative;
}
@media (max-width: 380px) { .mpcal-ci { width: 28px; height: 28px; font-size: 12px; } }

.mpcal-cell.is-sun:not(.is-disabled) .mpcal-ci { color: #f87171; }
.mpcal-cell.is-sat:not(.is-disabled) .mpcal-ci { color: #60a5fa; }
.mpcal-cell.is-disabled .mpcal-ci { color: #ccc; }

.mpcal-cell:not(.is-disabled):not(.is-empty):not(.is-selected):hover .mpcal-ci { background: #eef5ff; }

.mpcal-cell.is-selected .mpcal-ci {
  background: #0d6efd; color: #fff !important; font-weight: 700;
}
.mpcal-cell.is-today .mpcal-ci::after {
  content: ''; position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: #0d6efd;
}
.mpcal-cell.is-today.is-selected .mpcal-ci::after { background: rgba(255,255,255,.6); }


/* -----------------------------------------------------------------
   フッターボタン
   ----------------------------------------------------------------- */
.mpcal-btn-cancel {
  background: #efefef; border: none; border-radius: 100px;
  padding: 9px 22px; font-size: 14px; cursor: pointer;
  transition: background .15s; color: #444;
}
.mpcal-btn-cancel:hover { background: #e0e0e0; }


/* -----------------------------------------------------------------
   在庫なし状態
   ----------------------------------------------------------------- */
.is-soldout-disabled {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}


/* -----------------------------------------------------------------
   カート追加モーダル
   ----------------------------------------------------------------- */
.modal-cart-added .modal-content {
  border-radius: 16px;
  overflow: hidden;
}
.modal-cart-added .modal-body {
  padding: 32px 24px 16px;
}
.modal-cart-added .cart-added-icon {
  font-size: 3rem;
  color: #198754;
  color: #ccc;
  margin-bottom: 12px;
}
.modal-cart-added .cart-added-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.modal-cart-added .cart-added-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 0;
}
.modal-cart-added .modal-footer {
  border-top: none;
  padding: 16px 24px 28px;
  gap: 10px;
  justify-content: center;
}
.modal-cart-added .btn-continue {
  min-width: 140px;
  border-radius: 100px;
  font-size: 14px;
}
.modal-cart-added .btn-go-cart {
  min-width: 140px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
}