/*
 * 参加申込のスケジュール（順番待ち登録の案内）
 * 使用箇所: フォーム12282（Spirits発表会 OPナンバー 申込順番待ち登録）の HTML フィールドと、フォームロック時のメッセージ
 * 読み込み: custom-func/wpforms-spirits-op-2026.php（固定ページ spirits-openingnumber-2026 のみ。更新日時をバージョンに付ける）
 * 既存の WPForms 用 CSS と重ならないよう、クラスはすべて al4-wl で始める。
 * WPForms（クラシック表示）は div.wpforms-container-full .wpforms-form * で全要素の背景・枠線・余白・文字サイズ・高さを
 * 打ち消しているため、フォーム内は .wpforms-container .wpforms-form を前に付けてそれより強くしている。
 * フォームロック中は <form> が無く .form-locked-message の中に出るので、:is() で両方に効かせる。
 */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl {
  --al4-wl-ink: #333333;
  --al4-wl-muted: #666666;
  --al4-wl-orange: #e8912d;
  --al4-wl-orange-dark: #c46f10;
  --al4-wl-orange-soft: #fdf3e7;
  --al4-wl-gray: #f0f0f0;
  --al4-wl-line: #d9d9d9;
  color-scheme: light;
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  color: var(--al4-wl-ink);
  /* 元デザインの先頭にある Lato は外している（サイトでは細字のみ読み込まれており、英数字の太さが元デザインと変わるため） */
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl * {
  box-sizing: border-box;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl p,
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl ul {
  margin: 0;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-banner {
  background: var(--al4-wl-orange);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  padding: 10px 16px;
  border-radius: 2px;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-notice {
  background: var(--al4-wl-orange-soft);
  border: 1px solid var(--al4-wl-orange);
  padding: 12px 16px;
  border-radius: 2px;
  font-weight: 700;
  color: var(--al4-wl-orange-dark);
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-steps {
  display: grid;
  gap: 0;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 2px solid var(--al4-wl-line);
  border-radius: 6px;
  background: #fff;
  min-width: 0;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--al4-wl-gray);
  color: var(--al4-wl-muted);
  text-align: center;
  line-height: 1;
}

/* テーマの small の文字色を受けないよう、丸の色を引き継ぐ */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-num small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: inherit;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-num b {
  display: block;
  font-size: 24px;
  font-weight: 900;
  margin-top: 2px;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-date {
  font-size: 20px;
  font-weight: 900;
  color: var(--al4-wl-ink);
  line-height: 1.3;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-date small {
  font-size: 13px;
  font-weight: 700;
  color: var(--al4-wl-muted);
  margin-left: 6px;
}

/* form[id*="wpforms-form-"] div p { color: #000 } を受けないよう、カードの文字色を引き継ぐ */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-badge {
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--al4-wl-gray);
  color: var(--al4-wl-muted);
}

/* 矢印 */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-arrow {
  display: grid;
  place-items: center;
  height: 30px;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-arrow::before {
  content: "";
  box-sizing: content-box;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 16px solid #bbb;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-arrow.al4-wl-go::before {
  border-top-color: var(--al4-wl-orange);
}

/* STEP1: 開始 */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-start {
  border-color: var(--al4-wl-orange);
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-start .al4-wl-num {
  background: var(--al4-wl-orange-soft);
  color: var(--al4-wl-orange-dark);
}

/* STEP3: 本エントリー */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-main {
  background: var(--al4-wl-orange);
  border-color: var(--al4-wl-orange);
  color: #fff;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-main .al4-wl-num {
  background: #fff;
  color: var(--al4-wl-orange-dark);
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-main .al4-wl-date,
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-main .al4-wl-date small {
  color: #fff;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-card.al4-wl-main .al4-wl-badge {
  background: #fff;
  color: var(--al4-wl-orange-dark);
}

/* WPForms は HTML フィールド内の ul/li に !important で黒丸・余白・枠線なしを指定しているため、ul/li だけ !important で打ち消す */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-note {
  grid-column: 1 / -1;
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .55) !important;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.6;
}

/* テーマの li の文字色・太さを受けないよう、カードの値を引き継ぐ */
:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-note li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 1.2em !important;
  text-indent: -1.2em;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-note li::before {
  content: "※";
  box-sizing: content-box;
  display: inline-block;
  width: 1.2em;
  text-indent: 0;
}

:is(.wpforms-container .wpforms-form, .form-locked-message) .al4-wl .al4-wl-foot {
  font-size: 14px;
  font-weight: 400;
  color: var(--al4-wl-muted);
  border-left: 4px solid var(--al4-wl-orange);
  background: var(--al4-wl-gray);
  padding: 10px 14px;
}