/* shipclothes 頁面樣式 — 自 templates/shipclothes.html 逐字抽離（P10）。 */

    .ship-wrapper {
        padding: 40px 20px;
        max-width: 1000px; /* 寬度足以容納流程圖 */
        margin: 0 auto;
        position: relative;
        font-family: var(--font-body);
    }
    .page-header { text-align: center; margin-bottom: 30px; }

    /* === 流程圖區塊 (Process Flow 原汁原味保留) === */
    .process-section { margin-bottom: 40px; text-align: center; }
    .process-title {
        font-size: 2rem; color: var(--gold); font-weight: bold; margin-bottom: 30px;
        font-family: var(--font-brand);
    }
    .process-container { display: flex; justify-content: space-between; gap: 20px; position: relative; }
    .step-card {
        flex: 1; background: var(--white); border: 2px solid var(--c-e6ba67); border-radius: var(--radius-15);
        padding: 20px 15px; position: relative; box-shadow: 0 5px 15px rgba(196, 137, 69, 0.1);
        display: flex; flex-direction: column; align-items: center; transition: transform 0.3s;
    }
    .step-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px var(--c-196-137-69-a20); }
    .step-number {
        background: var(--gold); color: var(--white); width: 40px; height: 40px; border-radius: var(--radius-full);
        font-size: 1.2rem; font-weight: bold; display: flex; justify-content: center;
        align-items: center; margin-bottom: 15px; box-shadow: 0 3px 6px var(--c-black-a20);
    }
    .step-title { font-size: 1.1rem; font-weight: bold; color: var(--c-333); margin-bottom: 10px; }
    .step-desc { font-size: 0.9rem; color: var(--c-666); line-height: 1.5; text-align: left; width: 100%; }
    .step-desc ul { padding-left: 20px; margin: 5px 0; }
    .step-desc li { margin-bottom: 4px; }
    @media (max-width: 768px) {
        .process-container { flex-direction: column; }
        .step-card { flex-direction: row; align-items: flex-start; text-align: left; padding: 15px; }
        .step-number { margin-right: 15px; margin-bottom: 0; flex-shrink: 0; }
        .step-content-wrapper { flex: 1; }
    }

    /* === 收驚規則（Wave 1-B 2026-07-16）===
       本頁永遠公開、且是信眾實際填預約單的地方 → 規則必須在按鈕之前就讀得到。
       文字來源＝config/shoujing_rules.py（三頁同一份）。色值全走既有 token
       （色 ratchet：本檔基線 10，不得新增硬編色）。 */
    .ship-rules {
        background: var(--c-fffcf5);
        border: 2px solid var(--c-e6ba67);
        border-radius: var(--radius-15);
        padding: 25px 30px;
        margin-bottom: 35px;
    }
    .ship-rules__title {
        color: var(--gold);
        font-size: 1.375rem;
        font-weight: bold;
        margin: 0 0 18px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--c-e6ba67);
    }
    .ship-rules__list {
        margin: 0;
        padding-left: 1.4em;
        color: var(--c-333);
        font-size: 1rem;
        line-height: 1.85;
    }
    .ship-rules__list li { margin-bottom: 8px; }
    .ship-rules__list li::marker { color: var(--gold); }
    .ship-rules__list li:last-child { margin-bottom: 0; }
    @media (max-width: 768px) {
        .ship-rules { padding: 20px 16px; }
        .ship-rules__list { padding-left: 1.2em; }
    }

    /* === 預約大按鈕 === */
    .reserve-action-area { text-align: center; margin-bottom: 50px; }
    /* 原模板 inline style="color:#666" → token（inline 色值繞過色 ratchet 的掃描） */
    .reserve-note { color: var(--c-666); margin-top: 15px; }
    .btn-large-reserve {
        display: inline-block; background: var(--gold); color: white; border: none; border-radius: var(--radius-50);
        padding: 15px 40px; font-size: 1.25rem; font-weight: bold; cursor: pointer;
        box-shadow: 0 5px 15px var(--c-196-137-69-a40); transition: transform 0.2s;
    }
    .btn-large-reserve:hover { transform: scale(1.05); }

    /* === 全新：現場準備進度看板 === */
    .board-section-title {
        color: var(--c-333); border-bottom: 2px solid var(--c-e6ba67); padding-bottom: 10px; margin-bottom: 25px;
        display: flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: bold;
    }
    .date-board {
        background: var(--c-fffcf5); border: 2px solid var(--c-e6ba67); border-radius: var(--radius-15);
        padding: 25px; margin-bottom: 30px; box-shadow: 0 4px 10px var(--c-black-a05);
    }
    .date-board-title { color: var(--gold); font-size: 1.5rem; margin-top: 0; margin-bottom: 20px; border-bottom: 1px dashed var(--c-e6ba67); padding-bottom: 10px;}
    .board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media(max-width: 768px) { .board-grid { grid-template-columns: 1fr; } }
    .pickup-col { background: var(--c-white-a70); border-radius: var(--radius-sm); padding: 15px; }
    .pickup-col h4 { margin-top: 0; display: flex; align-items: center; gap: 8px; color: var(--c-4b2c1c); }
    .cloth-item { 
        padding: 10px; border-bottom: 1px solid var(--c-eee); font-size: 1rem; color: var(--c-333); 
        display: flex; justify-content: space-between; align-items: center;
    }
    .cloth-item:last-child { border-bottom: none; }
    .cloth-id { background: var(--c-e6ba67); color: white; padding: 2px 8px; border-radius: var(--radius-6); font-size: 0.875rem; font-weight: bold;}

    /* === 教學區塊 (原汁原味保留) === */
    .instruction-box { background: var(--white); border: 2px solid var(--c-ddd); border-radius: var(--radius-15); padding: 25px; margin-top: 40px; }
    .btn-action {
        display: inline-block; padding: 15px 50px; font-size: 1.3rem; font-weight: bold;
        background: var(--gold); color: white; text-decoration: none; border-radius: var(--radius-50);
        box-shadow: 0 5px 15px var(--c-196-137-69-a40); transition: 0.3s; cursor: pointer;
    }
    .btn-action:hover { transform: scale(1.05); }

    /* === Modal 與 表單樣式 === */
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: var(--c-black-a60); justify-content: center; align-items: center; backdrop-filter: blur(3px); }
    .modal-overlay.is-visible { display: flex; }
    .modal-content { background: #F3F0EC; padding: 30px; border-radius: var(--radius-15); position: relative; max-height: 90vh; overflow-y: auto; width: 90%; max-width: 600px; border: 3px solid var(--c-e6ba67); }
    .modal-close-btn { position: absolute; top: 15px; right: 15px; background: var(--gold); border: none; border-radius: var(--radius-full); width: 35px; height: 35px; color: white; font-size: 1.25rem; cursor: pointer; }
    
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--c-333); }
    .form-group input[type="date"], .form-group input[type="text"], .form-group input[type="number"] { width: 100%; padding: 10px; border: 1px solid var(--c-ccc); border-radius: var(--radius-6); box-sizing: border-box; font-size: 1rem; }
    .radio-group { display: flex; gap: 20px; }
    .radio-group label { font-weight: normal; cursor: pointer; display: flex; align-items: center; gap: 5px;}
    
    .clothes-container { background: var(--white); border: 1px dashed var(--gold); padding: 15px; border-radius: var(--radius-8); margin-bottom: 15px; }
    .cloth-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
    .cloth-row input { flex: 1; box-sizing: border-box; }
    .btn-remove-cloth { background: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; padding: 10px; }
    .btn-add-cloth { background: #28a745; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 5px;}
    .btn-submit { background: var(--gold); color: white; border: none; padding: 12px; width: 100%; border-radius: var(--radius-25); font-size: 1.125rem; font-weight: bold; cursor: pointer; }
    .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    /* --- 打包訂單卡片樣式 --- */
    .order-card {
        background: var(--white); border: 1px dashed var(--gold); border-radius: var(--radius-8);
        margin-bottom: 15px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }
    .order-card-header {
        background: var(--c-fdf6e9); padding: 8px 15px; font-weight: bold; color: var(--gold);
        border-bottom: 1px dashed var(--c-eee); font-size: 0.875rem;
    }
    .order-card-body {
        padding: 12px 15px; display: flex; flex-wrap: wrap; gap: 8px;
    }
    .cloth-pill {
        display: inline-block; background: #f4f4f4; border: 1px solid var(--c-ddd); color: var(--c-333);
        padding: 4px 10px; border-radius: var(--radius-15); font-size: 0.8125rem;
    }
    /* === 手機版表單欄位適應 === */
    @media (max-width: 768px) {
        .cloth-row { 
            flex-direction: column; /* 改為直向排列 */
            align-items: stretch;
            background: #fafafa;
            padding: 10px;
            border-radius: var(--radius-8);
        }
        .cloth-row input, .cloth-row input[type="number"] { 
            width: 100% !important; /* 強制覆蓋寫死的 120px */
            box-sizing: border-box; /* 確保內距不會撐破寬度 */
            flex: none; 
            margin-bottom: 8px;
        }
        .btn-remove-cloth { 
            width: 100%; 
            padding: 12px;
        }
    }
/* === Refined page polish === */
.process-container,
.process-section,
#public-board-container {
    padding-top: 12px;
}

.step-card,
.date-board,
.instruction-box,
.modal-content,
.order-card {
    border-color: var(--gold-border);
    box-shadow: 0 14px 36px rgba(42, 26, 10, 0.07);
}

.step-card {
    border-width: 1px;
    border-radius: var(--radius-12);
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(42, 26, 10, 0.11);
}

.btn-large-reserve,
.btn-action,
.btn-submit {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 52%, var(--gold-rich) 100%);
    box-shadow: 0 10px 24px var(--c-143-97-40-a18);
}

.btn-large-reserve:hover,
.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px var(--c-143-97-40-a22);
}

.modal-content {
    border-width: 1px;
    background: rgba(247, 241, 231, 0.98);
}