/* ==============================
  AIRMAX — LINE依頼フォーム
  style.css → style-v2.css → style-v3.css → style-base.css のあとに読み込む。

  ・料金シミュレーションの結果パネル内に置く依頼フォーム。
  ・送信先はLINE公式アカウント。入力内容はサーバーを経由せず、
    利用者の端末からLINEへ直接渡る（js/simulation.js の LINE_OA_ID 参照）。
============================== */

/* ==============================
  配達先の入力欄（住所／番地／建物名）
  GPS取得後も隠さないため、3つ並ぶ前提の余白を持たせる。
============================== */
.sim-manual-addr .sim-input + .sim-input {
  margin-top: 8px;
}

.sim-addr-hint {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--color-text-light);
}


/* ==============================
  依頼フォーム本体
============================== */
.order {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  text-align: left;
}

.order-heading {
  font-family: var(--font-round, inherit);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}

.order-desc {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0 0 18px;
}

.order-field {
  margin-bottom: 14px;
}

.order-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.order-req,
.order-opt {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.order-req {
  background: #fdecec;
  color: var(--color-ng);
}

.order-opt {
  background: var(--color-bg-alt);
  color: var(--color-text-light);
}

.order-textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.7;
}

.order-count {
  margin: 5px 0 0;
  font-size: 0.74rem;
  color: var(--color-text-light);
  text-align: right;
}

.order-count.is-over {
  color: var(--color-ng);
  font-weight: 700;
}


/* ==============================
  お届け先の確認表示
  STEP1の入力をそのまま映す。ここが依頼として送られる住所になる。
============================== */
.order-addr {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-accent-tint);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-text);
  word-break: break-all;
}

.order-addr.is-incomplete {
  border-color: var(--color-ng);
  background: #fdecec;
  color: var(--color-ng);
  font-weight: 700;
}


/* ==============================
  エラー
============================== */
.order-error {
  display: none;
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: #fdecec;
  color: var(--color-ng);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.7;
}

.order-error.is-visible {
  display: block;
}


/* ==============================
  送信ボタン
  LINEのブランド色（#06C755）を使う。押す先がLINEだと一目で分かるようにする。
============================== */
.order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  background: #06c755;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.order-btn:hover,
.order-btn:active {
  background: #05a948;
}

.order-btn:disabled {
  background: var(--color-border-strong);
  cursor: default;
}

.order-btn-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.order-copy-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.86rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.order-copy-btn:hover,
.order-copy-btn:active {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
}

.order-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  line-height: 1.75;
  color: var(--color-text-light);
}


/* ==============================
  固定CTA：電話とLINEの2分割
  既存の1本ボタン（style.css / style-v3.css）を上書きする。
============================== */
.sticky-cta {
  gap: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.sticky-cta-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 11px 10px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0, 60, 140, 0.30);
  transition: background 0.15s, scale 0.15s;
}

.sticky-cta-tel {
  background: var(--color-accent);
}

.sticky-cta-tel:hover,
.sticky-cta-tel:active {
  background: var(--color-accent-dark);
}

.sticky-cta-line {
  background: #06c755;
  box-shadow: 0 8px 26px rgba(6, 140, 60, 0.30);
}

.sticky-cta-line:hover,
.sticky-cta-line:active {
  background: #05a948;
}

.sticky-cta-item:active {
  scale: 0.985;
}

.sticky-cta .sticky-cta-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.92;
  line-height: 1.4;
}

.sticky-cta .sticky-cta-number {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .sticky-cta .sticky-cta-number {
    font-size: 0.92rem;
  }
}


/* ==============================
  お届け目安（所要時間）
  Routes API から所要時間が取れたときだけ表示する行。
  距離の行と同じ体裁にそろえる（.sim-result-distance / style-v3.css）。
============================== */
.sim-result-time {
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.sim-result-time strong {
  color: var(--color-text);
}

/* 既存CSSが p に display を与えていても隠れるようにしておく */
.sim-result-time[hidden] {
  display: none;
}


/* ==============================
  送信待ちバナー（画面上部に固定）

  LINEへ遷移する直前に sessionStorage へ記録し、サイトへ戻ってきた
  ときに表示する。ページを戻る・再読み込みしても残る。
  「届いていません」を強調するのが要点で、ここが弱いと気づかれない。
============================== */
.order-pending {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding: 12px 14px 13px;
  background: #fff8e6;
  border-bottom: 2px solid #e8a300;
  box-shadow: 0 4px 18px rgba(30, 45, 75, 0.14);
}

.order-pending[hidden] {
  display: none;
}

.order-pending-inner {
  max-width: 520px;
  margin: 0 auto;
}

.order-pending-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.order-pending-desc {
  margin: 0 0 11px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--color-text);
}

.order-pending-desc strong {
  color: var(--color-ng);
}

.order-pending-actions {
  display: flex;
  gap: 7px;
}

.order-pending-btn {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 11px 6px;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.order-pending-btn--line { background: #06c755; color: #fff; }
.order-pending-btn--line:active { background: #05a948; }

.order-pending-btn--tel  { background: var(--color-accent); color: #fff; }
.order-pending-btn--tel:active { background: var(--color-accent-dark); }

.order-pending-btn--done {
  background: var(--color-bg);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-strong);
}
.order-pending-btn--done:active { background: var(--color-bg-alt); }


/* ==============================
  送信前の注意書き
  小さなグレーの注記では読み飛ばされるため、ボタンの直前に置いて強調する。
============================== */
.order-warn {
  margin: 0 0 10px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: #fff8e6;
  border: 1px solid #f0cf8a;
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--color-text);
}

.order-warn strong {
  color: #a35c00;
}