/*
 * guest.css
 *   1. 宿泊者向けの確認ページ（guest.php・ログイン不要）… 接頭辞 .guest-
 *   2. 予約詳細の「宿泊者への確認ページ」「支払状況」の追加部分 … 接頭辞 .rsv-guest- / .rsv-pay-
 *
 *   base.css の部品（.card .btn .field .input …）はそのまま使い、上書きしない。
 *   宿泊者はスマホで1回だけ開く画面なので、本文は 18px・行間は広め・ボタンは大きくする。
 */

/* ================= 1. 宿泊者向けの確認ページ ================= */

/* layout_guest の .guest-main（中央ぞろえ）の中に置く1本の列 */
.guest-page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: min(100%, 560px);
  font-size: var(--fs-md);
  line-height: 1.8;
}

.guest-head { text-align: center; }
.guest-facility {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text-sub);
}
.guest-title {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--fs-xl);
  line-height: 1.35;
  color: var(--c-brown);
}
.guest-lead {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-base);
  line-height: 1.7;
  text-align: left;
}

.guest-card { padding: var(--sp-5); }
.guest-h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-round);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-brown);
}

/* ご予約の内容（ラベルは小さく、値は大きく） */
.guest-info { margin: 0; }
.guest-info-row { padding: var(--sp-3) 0; }
.guest-info-row:first-child { padding-top: 0; }
.guest-info-row:last-child { padding-bottom: 0; }
.guest-info-row + .guest-info-row { border-top: 1px solid var(--c-line); }
.guest-info dt {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-sub);
}
.guest-info dd {
  margin: 0;
  font-weight: 600;
}

/* 注意事項（改行をそのまま残す） */
.guest-rules { margin: 0; line-height: 1.9; }

/* 確認のフォーム */
.guest-form .field:last-of-type { margin-bottom: var(--sp-4); }
.guest-check {
  min-height: 56px;
  font-weight: 600;
}
.guest-check input[type="checkbox"] { width: 26px; height: 26px; }

.guest-sign {
  padding: 4px;
  background: var(--c-surface);
  border: 1.5px dashed var(--c-line-strong);
  border-radius: var(--r-md);
}
.guest-sign-canvas {
  display: block;
  width: 100%;
  height: 160px;
  color: var(--c-text);   /* 署名の線の色（signature.js がこの色を使う） */
  touch-action: none;     /* 指で書いている間、画面が動かないようにする */
  cursor: crosshair;
}
.guest-sign-clear { margin-top: var(--sp-2); }

/* 確認が終わったあとの画面 */
.guest-done { text-align: center; }
.guest-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-green-soft);
  color: var(--c-green-text);
}
.guest-done-icon .icon { width: 32px; height: 32px; }
.guest-done-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-round);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--fs-xl);
  line-height: 1.35;
  color: var(--c-brown);
}
.guest-done-text { margin: 0 0 var(--sp-5); line-height: 1.7; }
.guest-done .guest-info { text-align: left; }

.guest-foot {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--c-text-sub);
}

@media (min-width: 600px) {
  .guest-card { padding: var(--sp-6); }
}

/* ================= 2. 予約詳細の追加部分（管理者が見る画面） ================= */

.rsv-guest-help {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.rsv-guest-url { margin-bottom: var(--sp-2); }
.rsv-guest-done {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  font-weight: 600;
}
.rsv-guest-done .icon { flex: none; margin-top: 2px; color: var(--c-green-text); }
.rsv-guest-sign {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-top: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.rsv-guest-nosign {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.rsv-guest-revoke { margin-top: var(--sp-3); }
.rsv-guest-revoke .btn { margin-left: calc(var(--sp-3) * -1); }

/* 支払状況（料金・入金管理が ON の施設だけ） */
.rsv-pay { margin-top: var(--sp-3); }