/* ====================================
   display-loading-overlay-1.css  ローディングオーバーレイ
==================================== */

/* hidden 属性に display: none を強制（flex/grid に上書きされるのを防ぐ）*/
[hidden] { display: none !important; }

/* ===== デモコンテナ（2パターン縦並び）===== */
.demo-container {
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  gap: 24px;
}

/* ===== パターンブロック ===== */
.ov-pattern {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  max-width: 540px;
  width: 100%;
}

.ov-pattern-label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.04em;
}

/* ===== フォーム（Pattern 1）===== */
.ov-form { margin-bottom: 16px; }
.ov-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ov-form-row label { font-size: 13px; font-weight: 600; color: #374151; }
.ov-form-row input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  outline: none;
  font-family: sans-serif;
}
.ov-form-row input:focus { border-color: #2B7FE8; }
.ov-success-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #16A34A;
}

/* ===== テーブル（Pattern 2）===== */
/* position: relative と overflow: hidden の両方が必要 */
.ov-table-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ov-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ov-table th {
  background: #F4F6F9;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  color: #5A6A7A;
  border-bottom: 1px solid #E2E8F0;
}
.ov-table td { padding: 10px 12px; border-bottom: 1px solid #F0F2F5; }
.ov-table tr:last-child td { border-bottom: none; }

/* ===== 全画面オーバーレイ ===== */
.ov-full {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== 要素内オーバーレイ ===== */
.ov-inner {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===== スピナー：くるくる回る円形（デフォルト）===== */
@keyframes ov-spin {
  to { transform: rotate(360deg); }
}
.ov-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ov-spin 0.8s linear infinite;
}
.ov-spinner--dark {
  border-color: rgba(37, 99, 235, 0.2);
  border-top-color: #2563EB;
}
.ov-spinner span { display: none; }

/* ===== オーバーレイテキスト ===== */
.ov-label { margin-top: 12px; font-size: 14px; color: #fff; }
.ov-label--dark { color: #2563EB; }

/* ===== 送信ボタン ===== */
.ov-submit-btn {
  padding: 6px 20px;
  font-size: 13px;
  color: #fff;
  background: #2B7FE8;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s;
}
.ov-submit-btn:hover    { background: #1a6fd4; }
.ov-submit-btn:disabled { background: #9AB8E8; cursor: not-allowed; }

/* ===== リセットボタン ===== */
.reset-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, border-color 0.15s;
}
.reset-btn:hover {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

/* ===== コントロール（ボタン配置）===== */
.demo-controls { display: flex; gap: 8px; justify-content: flex-end; }

/* ===== プロンプトブロック ===== */
.prompt-block { margin-bottom: 20px; }
.prompt-block:last-child { margin-bottom: 0; }
.prompt-block-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  letter-spacing: 0.04em;
}

/* ===== レスポンシブ ===== */
@media (max-width: 540px) {
  .ov-pattern { padding: 16px; }
  .ov-table th, .ov-table td { padding: 8px; }
}