/* ===================================================================
 * SAITOWORKS /contact page styles
 * Path: assets/css/pages/contact.css
 * Scope: .swx-contact
 * Spec:
 *  - Calendar: this month, Mon-first, past/blocked/full = gray (unclickable)
 *  - Empty = white, click → modal (times + form)
 *  - Success/Fail = center top toast (auto fade)
 *  - Colors: follow base.css tokens (fallbacks included)
 * =================================================================== */

.swx-contact{
  /* Fallbacks in case tokens are missing */
  --brand: var(--brand, #FFD400);
  --text: var(--text, #1E2438);
  --muted: var(--muted, #9aa0ac);
  --surface: var(--surface, #10162b);
  --surface-soft: var(--surface-soft, #f8f9fb);
  --surface-muted: var(--surface-muted, #f1f3f7);
  --border: var(--border, #E3E5EA);
  --danger: var(--danger, #E74C3C);
}

/* ---------- Header text ---------- */
.swx-contact .kicker{
  margin:.25rem 0 1rem;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------- Calendar ---------- */
.swx-contact .cal{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(7, minmax(0,1fr));
  margin: 12px 0 28px;
  user-select:none;
}

/* Week headers */
.swx-contact .cal .head{
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
  padding:.4rem 0;
  pointer-events:none;
}

/* Empty padders before day 1 */
.swx-contact .cal .pad{
  height:0; /* keeps grid structure */
}

/* Day cell (button) */
.swx-contact .cal .day{
  position: relative;       /* for badge */
  aspect-ratio: 1;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-size:clamp(.95rem, 2.2vw, 1.05rem);
  transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.swx-contact .cal .day:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* Disabled states: past / blocked / full */
.swx-contact .cal .day.muted{
  background:var(--surface-muted);
  color:#9aa0ac;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
  opacity:.9;
}

/* "満" badge when full */
.swx-contact .cal .day.badge::after{
  content:"満";
  position:absolute;
  top:6px; right:6px;
  font-size:12px;
  background:#999;
  color:#fff;
  padding:2px 6px;
  border-radius:999px;
  line-height:1;
  letter-spacing:.06em;
}

/* Keyboard a11y focus */
.swx-contact .cal .day:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand) 60%, white);
  outline-offset: 2px;
}

/* ---------- Dialog (modal) ---------- */
.swx-contact .swx-dialog{
  border:0;
  border-radius:16px;
  padding:18px;
  max-width:780px;
  width:clamp(320px, 92vw, 780px);
  background:#fff;
  color:var(--text);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.swx-contact .swx-dialog::backdrop{
  background: rgba(10,14,24,.45);
  backdrop-filter: blur(2px);
}

.swx-contact .dialog-title{
  margin: 2px 0 10px;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  font-weight: 700;
  display:flex; align-items:center; gap:.5rem;
}

/* Time buttons group */
.swx-contact .slot-times{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 16px;
}

.swx-contact .slot-times button{
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-size:.95rem;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.swx-contact .slot-times button:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
}

.swx-contact .slot-times button.sel{
  background:var(--brand);
  border-color:transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.swx-contact .slot-times button[disabled]{
  background:var(--surface-muted);
  color:#9aa0ac;
  cursor:not-allowed;
  border-color:var(--surface-muted);
}

/* ---------- Form fields ---------- */
.swx-contact .fields{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 16px;
  margin: 8px 0 12px;
}

.swx-contact .fields label{
  display:block;
  font-size:.92rem;
  color:var(--text);
}

.swx-contact .fields input,
.swx-contact .fields textarea{
  width:100%;
  margin-top:6px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  color:var(--text);
  font-size:.98rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.swx-contact .fields input:focus,
.swx-contact .fields textarea:focus{
  outline:none;
  border-color: color-mix(in oklab, var(--brand) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
}

/* Full-width row for textarea */
.swx-contact .fields textarea{
  grid-column: 1 / -1;
  min-height: 120px;
  resize: vertical;
}

/* ---------- Actions (buttons) ---------- */
.swx-contact .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 6px;
}

.swx-contact .btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:12px 18px;
  font-size:.98rem;
  cursor:pointer;
  transition: box-shadow .12s ease, transform .06s ease, background .12s ease;
}

.swx-contact .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

.swx-contact .btn.primary{
  background:var(--brand);
  border-color:transparent;
  color:#222;
}

.swx-contact .btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

/* ---------- Toast (success / error) ---------- */
.swx-contact .toast{
  position:fixed;
  left:50%;
  top:24px;
  transform:translateX(-50%) translateY(-10px);
  padding:12px 18px;
  border-radius:999px;
  background:var(--brand);
  color:#222;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  z-index: 9999;
  animation: swx-toast-in .18s ease-out forwards;
}

.swx-contact .toast.error{
  background:var(--danger);
  color:#fff;
}

@keyframes swx-toast-in{
  from{ opacity:0; transform:translateX(-50%) translateY(-10px);}
  to  { opacity:1; transform:translateX(-50%) translateY(0);}
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .swx-contact .fields{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .swx-contact .cal{
    gap:6px;
  }
  .swx-contact .cal .day{
    border-radius:8px;
    font-size:clamp(.9rem, 3.2vw, 1rem);
  }
  .swx-contact .slot-times{
    gap:8px;
  }
  .swx-contact .slot-times button{
    padding:9px 12px;
    border-radius:9px;
  }
  .swx-contact .swx-dialog{
    padding:16px;
    width:clamp(320px, 94vw, 720px);
  }
}
/* ==== Calendar framed grid (add this to the end) ==== */
.swx-contact .cal{
  /* 調整用カスタムプロパティ */
  --cal-gap: 1px;                                      /* マス間の線の太さ */
  --cal-border: var(--border, #E3E5EA);                /* 線の色 */

  background: var(--cal-border);                       /* gap を線として見せる */
  padding: var(--cal-gap);
  gap: var(--cal-gap);
  border: 1px solid var(--cal-border);                 /* 外枠 */
  box-shadow: 0 6px 20px rgba(0,0,0,.06);              /* お好みで */
}

/* ヘッダー/空白/日セルを白で塗ってグリッドを際立たせる */
.swx-contact .cal .head,
.swx-contact .cal .pad,
.swx-contact .cal .day{
  background: #fff;
}

/* ヘッダー行（曜日）も箱っぽく */
.swx-contact .cal .head{
  padding: .55rem 0;
  font-weight: 600;
  color: var(--muted, #9aa0ac);
}

/* 先頭週のパディングもマス表示にして枠を切らさない */
.swx-contact .cal .pad{
  aspect-ratio: 1;
}

/* 既存の1pxボーダーを無効化 → 親の gap を“線”として使う */
.swx-contact .cal .day{
  border: 0 !important;
}

/* クリック不可の見た目（線は維持） */
.swx-contact .cal .day.muted{
  background: var(--surface-muted, #f1f3f7);
  color:#9aa0ac;
}

/* バッジ位置はそのまま */
.swx-contact .cal .day.badge::after{
  top:6px; right:6px;
}

/* ===== Fancy Title for /contact ===== */
.swx-contact .swx-sec-title{
  --accent: var(--brand, #FFD400);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35em .75em .3em 1.2em;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .01em;

  /* 下部だけ色が差す“マーカー風”ハイライト（fallback→上書き） */
  background: linear-gradient(transparent 62%, rgba(255,212,0,.26) 0) no-repeat;
  background: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 36%, #fff) 0) no-repeat;

  border-radius: 12px;
  animation: swx-title-pop .32s ease-out both;
}

/* 左に小さな“菱形ピース”でアクセント */
.swx-contact .swx-sec-title::before{
  content:"";
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--accent);
  transform: rotate(18deg);
  box-shadow:
    0 0 0 3px #fff inset,                  /* 白い細縁 */
    0 6px 16px rgba(0,0,0,.10);            /* ほんのり影 */
  position: absolute; left: .5rem; top: 50%;
  transform: translateY(-50%) rotate(18deg);
}

/* タイトル入場アニメ（控えめ） */
@keyframes swx-title-pop{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* お好みで：kicker を“ラベル風”に（任意） */
.swx-contact .kicker{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .6rem;
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent) 14%, #fff));
  border-radius: 999px;
  font-weight: 700;
  color:#2a2a2a;
  letter-spacing:.04em;
  margin:.25rem 0 1rem;
}

/* =========================
 * フォーム枠の明確化＋横スクロール防止
 * ========================= */

/* 入力欄をくっきり表示（枠色を少し濃く、フォーカス時も見やすく） */
.swx-contact .fields input,
.swx-contact .fields textarea{
  box-sizing: border-box;
  border: 1.6px solid var(--border-strong, #c8cfdd) !important;
  background: #fff;
  color: var(--text, #1E2438);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.swx-contact .fields input:focus,
.swx-contact .fields textarea:focus{
  border-color: color-mix(in oklab, var(--brand, #FFD400) 55%, var(--border-strong, #c8cfdd));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #FFD400) 28%, transparent);
}

/* ラベルやボタンが幅を押し広げて横スクロールを発生させない */
.swx-contact .swx-dialog{
  box-sizing: border-box;
  width: min(780px, 92vw);
  max-width: min(780px, calc(100vw - 24px)); /* 余白ぶんも考慮 */
  max-height: min(90vh, 720px);
  overflow-x: hidden;   /* 横スクロール抑止 */
  overflow-y: auto;     /* 高さ超過は縦スクロールのみ */
}

/* Grid子要素のデフォルトmin-width:auto→0にして横はみ出し防止 */
.swx-contact .fields > *{ min-width: 0; }

/* アクションボタンがはみ出す場合の折返し */
.swx-contact .actions{
  flex-wrap: wrap;
  gap: 10px;
}

/* スロットボタン群も横はみ出ししないよう保険 */
.swx-contact .slot-times{ flex-wrap: wrap; }
.swx-contact .slot-times button{ max-width: 100%; }

/* 小画面時の見やすさ（既存@mediaに上書き追加） */
@media (max-width: 720px){
  .swx-contact .fields input,
  .swx-contact .fields textarea{
    font-size: 1rem;
  }
}
/* === Time buttons: はっきりした枠＆選択状態 === */
.swx-contact .slot-times button{
  border: 2px solid var(--border-strong, #c8cfdd);
  background:#fff;
  color: var(--text, #1E2438);
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.swx-contact .slot-times button:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand, #FFD400) 45%, var(--border-strong, #c8cfdd));
}
.swx-contact .slot-times button.sel{
  background:#fff; /* 背景は白のまま、枠で強調 */
  border-color: var(--brand, #FFD400);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand, #FFD400) 28%, transparent);
}
.swx-contact .slot-times button[disabled]{
  background: var(--surface-muted, #f1f3f7);
  color:#9aa0ac;
  border-color: var(--surface-muted, #f1f3f7);
  cursor:not-allowed;
  transform: none;
}

/* === Actions: キャンセル/送信 を色付きに === */
.swx-contact #btnCancel{
  background: var(--surface-muted, #f1f3f7);
  border-color: var(--surface-muted, #f1f3f7);
  color:#222;
}
.swx-contact #btnCancel:hover{
  filter: brightness(.98);
}
.swx-contact #btnSubmit{
  background: var(--brand, #FFD400);
  border-color: transparent;
  color:#222;
}
.swx-contact #btnSubmit:hover{
  filter: brightness(1.03);
}
/* ======= Center-wide notification band (success/error) ======= */
/* 既存の .swx-contact .toast スタイルは残っていてもOK。下記が優先されます */
#swxToast{
  position: fixed;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 14px 24px;
  text-align: center;
  background: var(--brand, #FFD400);
  color: #222;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;     /* クリックを邪魔しない */
  border-radius: 0;         /* 端から端までの帯 */
}
#swxToast.error{
  background: var(--danger, #E74C3C);
  color: #fff;
}
#swxToast.show{ animation: swx-toast-in .22s ease-out forwards; }
#swxToast.hide{ animation: swx-toast-out .24s ease-in forwards; }

@keyframes swx-toast-in{
  from{ opacity: 0; transform: translateY(calc(-50% - 8px)); }
  to  { opacity: 1; transform: translateY(-50%); }
}
@keyframes swx-toast-out{
  from{ opacity: 1; transform: translateY(-50%); }
  to  { opacity: 0; transform: translateY(calc(-50% + 8px)); }
}

/* ======= Field-level validation ======= */
.swx-contact .fields .field-error{
  display:block;
  margin-top:6px;
  font-size:.85rem;
  color: var(--danger, #E74C3C);
}
.swx-contact .fields input.invalid,
.swx-contact .fields textarea.invalid{
  border-color: var(--danger, #E74C3C) !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger, #E74C3C) 25%, transparent);
}
.swx-contact .notice-pref{
  margin:.5rem 0 1rem;
  padding:.5rem .75rem;
  background: linear-gradient(180deg,#fff, color-mix(in oklab, var(--brand,#FFD400) 14%, #fff));
  border-radius: 10px;
  font-size:.95rem;
}
.swx-contact .notice-pref strong{ font-weight:800; }
.swx-contact .no-slots{
  width:100%; text-align:center; padding:12px 8px; color:#666;
  background: var(--surface-muted, #f1f3f7); border-radius:10px; margin:6px 0 4px;
}
/* === Calendar month nav === */
.swx-contact .cal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:.25rem 0 .75rem;
}
.swx-contact #calLabel{
  font-weight:800; letter-spacing:.02em; font-size:1.1rem;
}

.swx-contact .cal-nav{
  min-width:44px; height:36px; padding:0 14px;
  border-radius:999px;
  border:1px solid transparent !important;
  background: var(--brand, #FFD400) !important;
  color:#222 !important;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.swx-contact .cal-nav:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.swx-contact .cal-nav:focus-visible{
  outline:2px solid color-mix(in oklab, var(--brand,#FFD400), #000 20%);
  outline-offset:2px;
}
.swx-contact .cal-nav:disabled{
  background:#edf1f6 !important;
  color:#98a2b3 !important;
  border-color:#e5e9f0 !important;
  cursor:not-allowed;
  box-shadow:none; filter:grayscale(.15);
}