/* ==========================================================
   STILLIFES LP  apply.css（申し込みページ専用）
   ----------------------------------------------------------
   色や文字の変数は style.css の :root を使っています。
   上部バー・タイトルは faq.css と共通です。
   ========================================================== */

.apply { padding: 0 16px 72px; }

.apply-form,
.apply-done {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px 20px;
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  background: var(--color-white);
}

/* ---------- 入力欄 ---------- */
.apply-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.apply-field > label,
.apply-field > legend { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.apply-field > label { margin-bottom: 0; }

.req, .opt { padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.req { background: var(--color-accent); color: var(--color-ink); }
.opt { background: var(--color-paper-2); color: var(--color-text-muted); }

.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form select,
.apply-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-paper);
  font: inherit;
  font-size: 16px; /* 16px未満だと iPhone で入力時に画面が拡大されるため */
  color: var(--color-ink);
  appearance: none;
}
.apply-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.apply-form textarea { resize: vertical; line-height: 1.7; }
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent; }
.apply-form ::placeholder { color: #A29E96; }

.input-prefix { display: flex; align-items: center; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-paper); }
.input-prefix span { padding-left: 14px; font-family: var(--font-en); font-size: 16px; color: var(--color-text-muted); }
.apply-form .input-prefix input { border: 0; background: transparent; padding-left: 4px; }
.input-prefix:focus-within { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.apply-form .input-prefix input:focus { outline: none; }

.apply-help { font-size: 12px; line-height: 1.7; color: var(--color-text-muted); }
.apply-help--center { text-align: center; }
.apply-note { padding: 16px; border-radius: 10px; background: var(--color-paper); font-size: 13px; line-height: 1.8; color: var(--color-text-sub); }

/* ---------- 日程の選択肢 ---------- */
.event-options { display: flex; flex-direction: column; gap: 10px; }
.event-option { position: relative; display: block; cursor: pointer; }
.event-option input { position: absolute; opacity: 0; pointer-events: none; }
.event-option__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-paper);
  transition: border-color .15s, background .15s;
}
.event-option__body::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 20px;
  height: 20px;
  border: 2px solid #A29E96;
  border-radius: 50%;
  background: var(--color-white);
}
.event-option input:checked + .event-option__body { border: 2px solid var(--color-accent); padding: 13px 15px 13px 47px; background: #FDF4EA; }
.event-option input:checked + .event-option__body::before { border-color: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-white); background: var(--color-accent); }
.event-option input:focus-visible + .event-option__body { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.event-option__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.event-option__date { font-size: 15px; font-weight: 700; }
.event-option__time { font-family: var(--font-en); font-size: 15px; font-weight: 500; }
.event-option__place { font-size: 12px; line-height: 1.6; color: var(--color-text-sub); }
.event-option.is-disabled { cursor: not-allowed; opacity: .5; }

/* ---------- 同意・エラー ---------- */
.apply-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; color: var(--color-text-sub); cursor: pointer; }
.apply-agree input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-accent); }
.apply-error:empty { display: none; }
.apply-error { padding: 12px 14px; border-radius: 10px; background: #FBE7E2; color: #9E2B17; font-size: 13px; line-height: 1.7; }
.apply-form button:disabled { opacity: .5; cursor: not-allowed; }

/* 迷惑投稿よけの欄（画面外に隠す） */
.apply-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 完了画面 ---------- */
.apply-done { align-items: center; text-align: center; }
.apply-form[hidden],
.apply-done[hidden] { display: none; }
.apply-done h2 { font-size: 22px; font-weight: 700; line-height: 1.5; }
.apply-done p { font-size: 14px; line-height: 1.9; color: var(--color-text-sub); }
.apply-done .apply-help { font-size: 12px; color: var(--color-text-muted); }