/* terms-modal.css */

/* モーダル表示時の背景オーバーレイ */
.jtm-terms-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 10000000 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 20px !important;
  pointer-events: auto !important;
}

/* モーダルの本体 */
.jtm-terms-modal {
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 24px !important;
  width: 100% !important;
  max-width: 800px !important;
  /*margin-top: 40px !important;*/
  position: relative !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  pointer-events: auto !important;
  height: 100%;
}

/* モーダル内の要素のbox-sizingを統一 */
.jtm-terms-modal * {
  box-sizing: border-box !important;
}

/* 閉じるボタン */
.jtm-terms-modal__close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #666666 !important;
  padding: 8px !important;
  font-size: 16px !important;
  pointer-events: auto !important;
}

/* モーダルのタイトル */
.jtm-terms-modal__title {
  font-size: 20px !important;
  font-weight: bold !important;
  text-align: center !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  color: #333333 !important;
}

/* 規約内容を表示するエリア */
.jtm-terms-modal__content {
  /*max-height: 400px !important;*/
  max-height: calc(100% - 180px) !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  color: #333333 !important;
  pointer-events: auto !important;

}

/* 各セクションのスタイル */
.jtm-terms-modal__section {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* 最後のセクションの下マージンを消す */
.jtm-terms-modal__section:last-child {
  margin-bottom: 0 !important;
}

/* セクションのタイトル */
.jtm-terms-modal__section-title {
  font-weight: bold !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: #333333 !important;
}

/* チェックボックスエリア */
.jtm-terms-modal__checkbox-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

/* チェックボックスのスタイル */
.jtm-terms-modal__checkbox-wrapper input[type="checkbox"] {
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* チェックボックスのラベル */
.jtm-terms-modal__checkbox-wrapper label {
  font-size: 14px !important;
  color: #333333 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

/* 同意ボタン */
.jtm-terms-modal__submit {
  width: 100% !important;
  padding: 12px !important;
  background: #3B82F6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  font-size: 16px !important;
  font-weight: bold !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* 無効状態の同意ボタン */
.jtm-terms-modal__submit:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ホバー時の同意ボタン */
.jtm-terms-modal__submit:not(:disabled):hover {
  background: #2563EB !important;
}

/* AlpineJSのちらつき防止用 */
[x-cloak] {
  display: none !important;
}

/* スクロールバーのスタイル */
.jtm-terms-modal__content::-webkit-scrollbar {
  width: 8px !important;
}

.jtm-terms-modal__content::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.jtm-terms-modal__content::-webkit-scrollbar-thumb {
  background: #888 !important;
  border-radius: 4px !important;
}

.jtm-terms-modal__content::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

/* モーダル内のテキスト */
.jtm-terms-modal p {
  margin: 0 0 8px 0 !important;
  line-height: 1.5 !important;
  color: #333333 !important;
}