/* ==================== 全域變數與重置 ==================== */
:root {
    --primary-red: #c41230;
    --navy-blue: #3a5774;
    --text-main: #333333;
    --text-gray: #777777;
    --bg-gray: #f5f5f5;
    --border-color: #dddddd;
    --link-blue: #3a5774;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #eaedf2;
    color: var(--text-main);
    font-weight: 500;
    font-style: normal;
    font-family: interstate, 'Noto Sans TC', sans-serif;
}

/* ==================== RWD 容器與頁面切換 ==================== */
.app-container {
    max-width: 480px;
    margin: 0 auto;
    background-color: #ffffff;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    overflow-x: hidden;
}

.page-view {
    display: none;
}
.page-view.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

#view-step1 { padding-bottom: 160px; }
#view-step2 { padding-bottom: 0px; }
#view-step3 { padding-bottom: 30px; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 畫面零：Landing Page ==================== */
.home-kv {
    width: 100%;
    aspect-ratio: 1 / 1.25;
    background-color: #111;
    background-image: url('images/KV.webp');
    background-size: cover;
    background-position: center;
}

.home-content {
    padding: 30px 20px 40px;
    text-align: center;
    background-color: #fff;
}

.home-title {
    width: 82%;
    aspect-ratio: 4.45 / 1;
    margin: 0 auto 25px auto;
    display: block;
}

/* Typekit 思源宋體設定 */
.serif-text {
    font-family: "source-han-serif-tc", serif;
    line-height: 1.8;
    margin-bottom: 35px;
}
.text-red { color: var(--primary-red); }
.text-bold { font-weight: 700; font-size: 18px; margin-bottom: 15px;}
.text-black { color: #000; }
.text-medium { font-weight: 500; font-size: 15px; }

/* ==================== 畫面一：選擇場次 ==================== */
.hero-image {
    width: 100%;
    aspect-ratio: 2 / 1;
    background-color: #111;
    background-image: url('images/header_01.webp');
    background-size: cover;
    background-position: center;
}

.tabs-container {
    display: flex;
    padding: 15px;
    gap: 10px;
}

.tab-btn {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    border: 1px solid var(--navy-blue);
    border-radius: 8px;
    background: #fff;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background-color: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.tab-btn span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
}
.tab-btn.active span { color: #fff; }

.session-list { padding: 0 15px; }

.session-card {
    border: 1px solid var(--navy-blue);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    transition: border-color 0.2s;
}

.session-card.disabled {
    background-color: #cccccc;
    border-color: #bbbbbb;
}

.session-info h3 { font-size: 18px; margin-bottom: 5px; }
.session-info p { color: var(--text-gray); font-size: 14px; }
.session-card.disabled .session-info p { color: var(--primary-red); font-weight: 500; }

/* +/- 按鈕樣式 */
.qty-controls { display: flex; align-items: center; justify-content: flex-end; }
.btn-plus-only {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--navy-blue); background: #fff;
    color: var(--primary-red); font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s ease;
}
.qty-pill {
    display: none; position: relative; background-color: var(--primary-red);
    border-radius: 20px; width: 86px; height: 40px; align-items: center;
}
.qty-pill .btn-minus {
    background: none; border: none; color: #fff;
    width: 40px; height: 40px; font-size: 24px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1;
}
.qty-pill .btn-plus-active {
    position: absolute; right: 0; top: 0;
    background-color: var(--primary-red); color: #fff; border: none;
    width: 40px; height: 40px; border-radius: 50%; font-size: 24px;
    cursor: pointer; box-shadow: -3px 0px 6px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center; z-index: 2;
}

/* Sticky Footer */
.sticky-footer {
    position: fixed; bottom: 0; width: 100%; max-width: 480px;
    background: #fff; padding: 10px 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); text-align: center; z-index: 10;
}
.sticky-footer .summary { font-size: 16px; margin-bottom: 10px; color: var(--text-main); }
.btn-submit {
    background-color: var(--primary-red); color: #fff; border: none; width: 100%;
    padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.btn-submit:disabled { background-color: #cccccc; cursor: not-allowed; }

/* ==================== 畫面二：填寫資料 ==================== */
.header-bar {
    display: flex; align-items: center;
    padding: clamp(10px, calc(12vh - 76px), 15px) 15px;
    border-bottom: 1px solid var(--border-color); cursor: pointer;
}
.back-icon { color: var(--primary-red); font-size: 22px; font-weight: 500; margin-right: 8px; line-height: 1; }
.form-container { padding: 15px; }
.form-container h2 { font-size: 20px; margin-bottom: 10px; }
.readonly-box {
    background-color: #bcbcbc; padding: 12px; border-radius: 6px; font-size: 16px;
    margin-bottom: clamp(5px, calc(12vh - 76px), 30px); display: flex; align-items: center;
}
.form-group { margin-bottom: clamp(5px, calc(12vh - 76px), 30px); }
.form-group label {
    display: block; margin-bottom: clamp(4px, calc(12vh - 90px), 15px);
    font-weight: 500; font-size: 16px;
}
.form-group input[type="text"], .form-group input[type="tel"],
.form-group input[type="date"], .form-group select {
    width: 100%; padding: 8px; border: 1px solid var(--border-color);
    border-radius: 8px; font-size: 16px; background-color: #fff;
}
input[type="date"] { position: relative; }
input[type="date"]::before {
    content: attr(data-placeholder); position: absolute; left: 12px;
    color: var(--text-gray); pointer-events: none;
}
input[type="date"]::-webkit-datetime-edit { color: transparent; }
input[type="date"]:focus::before, input[type="date"]:valid::before { display: none; }
input[type="date"]:focus::-webkit-datetime-edit, input[type="date"]:valid::-webkit-datetime-edit { color: var(--text-main); }

.input-group { display: flex; gap: 10px; }
.input-group input { flex: 1; }
.btn-verify {
    background-color: var(--primary-red); color: #fff; border: none;
    padding: 0 15px; border-radius: 8px; letter-spacing: 1.5px;
    font-size: 14px; white-space: nowrap;
}
.checkbox-group {
    display: flex; align-items: flex-start;
    margin-bottom: clamp(5px, calc(2.5vh - 12px), 10px);
}
.checkbox-group input[type="checkbox"] {
    width: 20px; height: 20px; margin-right: 10px; accent-color: var(--primary-red); margin-top: 2px;
}
.checkbox-group label { font-size: 14px; color: var(--text-main); line-height: 1.4; }
.link-blue { color: var(--link-blue); text-decoration: underline; cursor: pointer; }

/* Lightbox */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 100; justify-content: center; align-items: center;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }
.modal-box {
    background: #fff; width: 90%; max-width: 400px; border-radius: 12px;
    padding: 20px; position: relative; max-height: 80vh; display: flex; flex-direction: column;
}
.modal-close { position: absolute; top: 15px; right: 15px; font-size: 24px; color: var(--text-gray); cursor: pointer; line-height: 1; }
.modal-content { margin-top: 20px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: var(--text-gray); }

/* ==================== 畫面三(原)：預約成功與提醒 ==================== */
.reminder-box {
    background-color: #fff; border: 1px solid var(--navy-blue); border-radius: 8px;
    padding: 15px; margin-bottom: 10px; font-size: 14px; line-height: 1.6; color: var(--text-gray);
}
.reminder-box h3 { color: var(--text-main); font-size: 18px; font-weight: 700; }
.ticket-box {
    background-image: url('images/Reservation-back.webp'); background-size: cover; background-position: center;
    aspect-ratio: 1.734 / 1; border-radius: 8px; padding: 15px; color: #ffffff;
    font-size: 16px; line-height: 1.8; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; justify-content: center;
}
.ticket-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }

/* ==================== 畫面三(新)：獨立預約成功頁 ==================== */
.success-header {
    text-align: center; margin: 30px 0 20px;
}
.success-icon {
    background-color: var(--primary-red);
    width: 45px; height: 45px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.success-header h2 { font-size: 26px; color: var(--text-main); font-weight: 700;}

.success-ticket-box {
    background-image: url('images/Reservation-back.webp'); background-size: cover; background-position: center;
    border-radius: 12px; padding: 25px 20px; color: #ffffff;
    margin: 0 15px 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-align: left;
}
.success-ticket-box h3 {
    font-size: 22px; font-weight: 700; margin-bottom: 12px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6); letter-spacing: 1px;
}

.success-ticket-box p {
    font-size: 17px; margin-bottom: 6px; line-height: 1.6; font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    display: flex;
    align-items: flex-start;
}

.success-ticket-box p .label {
    flex-shrink: 0;
}

.success-ticket-box p .value {
    flex-grow: 1;
}

.success-reminder {
    padding: 0 20px; color: var(--text-gray);
    font-size: 14px; line-height: 1.6;
}
.success-reminder h3 {
    color: var(--text-main); font-size: 18px; margin-bottom: 10px; font-weight: 700;
}
.success-reminder ol {
    padding-left: 20px; margin: 0;
}
.success-reminder li { margin-bottom: 8px; padding-left: 5px; }

/* ==================== 全域標籤設定微調 ==================== */
sup {
    font-size: 0.65em; /* 把圈圈 R 縮小到主文字的 65% */
    vertical-align: super; /* 確保它乖乖待在上方 */
    line-height: 0; /* 避免它把整行的行高給撐開 */
}

/* ==================== 滿版 Loader ==================== */
#global-loader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: var(--primary-red); z-index: 999999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-text { display: flex; }
.loading-text span {
    color: #ffffff; font-size: 26px; font-weight: 700; letter-spacing: 2px;
    animation: bounceText 1.2s infinite;
}
.loading-text span:nth-child(1) { animation-delay: 0.0s; }
.loading-text span:nth-child(2) { animation-delay: 0.1s; }
.loading-text span:nth-child(3) { animation-delay: 0.2s; }
.loading-text span:nth-child(4) { animation-delay: 0.3s; }
.loading-text span:nth-child(5) { animation-delay: 0.4s; }
.loading-text span:nth-child(6) { animation-delay: 0.5s; }
.loading-text span:nth-child(7) { animation-delay: 0.6s; }
.loading-text span:nth-child(8) { animation-delay: 0.7s; }
.loading-text span:nth-child(9) { animation-delay: 0.8s; }
.loading-text span:nth-child(10){ animation-delay: 0.9s; }
@keyframes bounceText {
    0%, 40%, 100% { transform: translateY(0); }
    20% { transform: translateY(-15px); }
}