/* ==========================================================================
   学校マイページ - 予約詳細
   .reserveAction 配下に完結する新規スタイル。このファイル単体で表示を再現できる。

   【目次】
   1. ページ全体・GREEN SPRINGS 用の色切り替え
   2. 大ボタン（予約変更／行程確認書／キャンセル）
   3. 書類ダウンロード
   4. 予約一覧に戻る
   5. スマートフォン用（736px 以下）
   ========================================================================== */

/* ---------- 1. ページ全体 ---------- */
.reserveAction { max-width:660px; margin:0 auto; padding:80px 0; color:var(--color-text); font-family:"Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size:100%; line-height:1; font-feature-settings:'palt' 1; -webkit-text-size-adjust:100%; }

/* GREEN SPRINGS 用:.-greensprings クラスを付けると青系→緑系に切り替わる(色は tokens.css で定義) */
.reserveAction.-greensprings {
	--action-primary: var(--action-primary-green);
	--action-primary-dark: var(--action-primary-dark-green);
	--action-divider-text: var(--action-divider-text-green);
	--action-divider-line: var(--action-divider-line-green);
	--action-dl-border: var(--action-dl-border-green);
	--action-dl-bg: var(--action-dl-bg-green);
	--action-dl-icon-bg: var(--action-dl-icon-bg-green);
}

/* ==========================================================================
   2. 大ボタン（予約変更／行程確認書／キャンセル）
   共通の形をまず定義し、色ちがいは .-primary / .-outline / .-cancel で分ける
   ========================================================================== */
.reserveAction__btn { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; width:100%; height:80px; margin-bottom:24px; border-radius:8px; box-sizing:border-box; font-size:30px; font-weight:600; text-decoration:none; }
/* 右端の矢印（＞） */
.reserveAction__btn::after { content:""; position:absolute; right:40px; top:50%; width:11px; height:11px; border-top:3px solid currentColor; border-right:3px solid currentColor; transform:rotate(45deg) translateY(-50%); margin-top:-2px; }
.reserveAction__btn:hover { opacity:.85; }
.reserveAction__btnIcon { flex-shrink:0; display:flex; align-items:center; width:36px; height:36px; }
.reserveAction__btnIcon svg { width:100%; height:100%; fill:currentColor; }
.reserveAction__btnIcon img { width:100%; height:auto; }

/* 青塗り（予約変更） */
.reserveAction__btn.-primary { background:var(--action-primary); box-shadow:inset 0px -4px 0px 0px var(--shadow-50), 0px 4px 8px 0px var(--shadow-20); color:var(--color-white) !important; padding-bottom:4px; }
/* 白抜き（行程確認書の入力へ） */
.reserveAction__btn.-outline { border:2px solid var(--action-primary); background:var(--color-white); box-shadow:inset 0px -2px 0px 0px var(--action-primary-dark), 0px 4px 8px 0px var(--shadow-20); color:var(--action-primary) !important; padding-bottom:4px; }
/* 赤白抜き（予約をキャンセルする） */
.reserveAction__btn.-cancel { height:60px; border:2px solid #C70106; background:var(--color-white); box-shadow:0px 2px 0px 0px #C70106 ,0px 4px 8px 0px var(--shadow-20); color:#C70106 !important; font-size:20px; }
.reserveAction__btn.-cancel .reserveAction__btnIcon { width:30px; height:30px; }

.-disabled { opacity:.25; pointer-events:none; }

.cannot_edit { color:#C70106; font-size:14px; margin-top:-10px; text-align:center;margin-bottom:10px; }


/* ==========================================================================
   3. 書類ダウンロード
   ========================================================================== */
/* 左右にラインが伸びる中央見出し */
.reserveAction__divider { display:flex; align-items:center; gap:18px; margin:36px 0 22px; font-size:16px; font-weight:600; color:var(--action-divider-text); }
.reserveAction__divider::before,
.reserveAction__divider::after { content:""; flex:1; height:1px; background:var(--action-divider-line); }

.reserveAction__dl { display:flex; gap:20px; margin:0 0 40px; padding:0; list-style:none; }
.reserveAction__dl > li { flex:1; min-width:0; }
.reserveAction__dlBtn { display:flex; align-items:center; gap:10px; height:60px; padding:0 10px; border:1px solid var(--action-dl-border); border-radius:8px; background:var(--action-dl-bg); box-shadow:0px 3px 0px 0px var(--action-dl-border), 0px 4px 8px 0px var(--shadow-20); box-sizing:border-box; color:var(--color-text) !important; font-size:14px; font-weight:600; text-decoration:none; }
.reserveAction__dlBtn:hover { opacity:.85; }
.reserveAction__dlIcon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--action-dl-icon-bg); color:var(--action-primary); }
.reserveAction__dlIcon img { width:24px; height:auto; }
.reserveAction__dlArrow { flex-shrink:0; display:flex; align-items:center; width:24px; height:24px; margin-left:auto; color:var(--action-primary); }
.reserveAction__dlArrow img { width:100%; height:auto; }

/* ==========================================================================
   4. 予約一覧に戻る（ページ下部のテキストリンク）
   ========================================================================== */
.reserveAction__backLink { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:44px; color:#596176 !important; font-size:20px; font-weight:600; text-decoration:none; }
.reserveAction__backLink:hover { opacity:.75; }
.reserveAction__backIcon { flex-shrink:0; display:flex; width:26px; height:26px; }
.reserveAction__backIcon svg { width:100%; height:100%; fill:currentColor; }


/* ==========================================================================
   5. スマートフォン用（サイト共通のブレイクポイント 736px に合わせる。320px 幅まで対応）
   PC 用の値をスマホ向けに上書きしているだけ（項目の並びは上と同じ）
   ========================================================================== */
@media only screen and (max-width:736px) {

	.reserveAction { padding:30px 0; }

	/* ---------- 大ボタン（スマホでは左寄せ） ---------- */
	.reserveAction__btn { justify-content:flex-start; gap:12px; height:60px; margin-bottom:15px; padding-left:14px; padding-right:36px; font-size:18px; }
	.reserveAction__btn::after { right:24px; width:9px; height:9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
	.reserveAction__btnIcon { width:26px; height:26px; }
	.reserveAction__btn.-primary { padding-bottom:2px; box-shadow:inset 0px -3px 0px 0px var(--shadow-50), 0px 3px 6px 0px var(--shadow-20); }
	.reserveAction__btn.-outline { padding-bottom:3px; box-shadow:inset 0px -2px 0px 0px var(--action-primary-dark), 0px 3px 6px 0px var(--shadow-20); }
	.reserveAction__btn.-cancel { height:50px; font-size:15px; box-shadow:0px 2px 0px 0px #C70106, 0px 3px 6px 0px var(--shadow-20); }
	.reserveAction__btn.-cancel .reserveAction__btnIcon { width:22px; height:22px; }

	/* ---------- 書類ダウンロード ---------- */
	.reserveAction__divider { gap:14px; margin:26px 0 16px; font-size:14px; }
	.reserveAction__dl { flex-direction:column; gap:12px; margin-bottom:30px; }
	.reserveAction__dlBtn { gap:10px; height:52px; padding:0 12px; box-shadow:0px 2px 0px 0px var(--action-dl-border), 0px 3px 6px 0px var(--shadow-20); }
	.reserveAction__dlIcon { width:28px; height:28px; }
	.reserveAction__dlIcon img { width:22px; }
	.reserveAction__dlArrow { width:22px; height:22px; }

	/* ---------- 予約一覧に戻る ---------- */
	.reserveAction__backLink { gap:10px; margin-top:36px; font-size:16px; }
	.reserveAction__backIcon { width:20px; height:20px; }

}