.slm-form,
.slm-panel,
.slm-event-heading {
    box-sizing: border-box;
    border: 1px solid #d9e0e3;
    border-radius: 8px;
    padding: 20px;
    margin: 0 0 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(21, 32, 38, .04);
}

.slm-form *,
.slm-panel *,
.slm-event-heading * {
    box-sizing: border-box;
}

.slm-event-heading h2,
.slm-panel h2,
.slm-fieldset legend {
    letter-spacing: 0;
}

.slm-grid,
.slm-summary-grid,
.slm-reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.slm-auth-form {
    max-width: 780px;
    margin: 0 auto 24px;
}

.slm-login-form {
    max-width: 520px;
    margin: 0 auto 24px;
}

.slm-auth-heading h2 {
    margin: 0 0 12px;
    letter-spacing: 0;
}

.slm-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid #e3e9ec;
}

.slm-auth-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid #cbd6db;
    border-radius: 999px;
    padding: 0 13px;
    color: #1e73be;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.slm-auth-actions a:hover,
.slm-auth-actions a:focus {
    border-color: #1e73be;
    background: #eaf2fa;
    color: #155a8f;
}

.slm-signup-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e3e9ec;
}

.slm-signup-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.slm-signup-section h3 {
    margin: 0 0 14px;
    color: #24383f;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: 0;
}

.slm-signup-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.slm-signup-row:last-child {
    margin-bottom: 0;
}

.slm-signup-row-account {
    grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr);
}

.slm-signup-row-name {
    grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr);
}

.slm-signup-row-profile,
.slm-signup-row-contact,
.slm-signup-row-password {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slm-nationality-field {
    position: relative;
    display: block;
}

.slm-nationality-flag {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

.slm-nationality-field input[name="nationality"] {
    padding-left: 36px;
}

.slm-signup-form > .slm-button {
    margin-top: 20px;
}

.slm-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    color: #1f2a2e;
}

.slm-form input,
.slm-form select,
.slm-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #b9c4c9;
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
}

.slm-form textarea {
    min-height: 100px;
}

.slm-form input:focus,
.slm-form select:focus,
.slm-form textarea:focus {
    border-color: #1e73be;
    box-shadow: 0 0 0 1px #1e73be;
    outline: none;
}

.slm-fieldset {
    border: 1px solid #dce5e8;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 18px;
}

.slm-fieldset legend {
    padding: 0 8px;
    font-weight: 700;
}

.slm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    padding: 9px 18px;
    background: #1e73be;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

a.slm-button,
a.slm-button:visited {
    color: #fff !important;
}

.slm-form > .slm-button {
    margin-top: 4px;
}

.slm-button:hover,
.slm-button:focus {
    background: #155a8f;
    color: #fff;
}

.slm-button-secondary {
    border: 1px solid #cbd6db;
    background: #fff;
    color: #1e73be;
}

a.slm-button-secondary,
a.slm-button-secondary:visited {
    color: #1e73be !important;
}

.slm-button-secondary:hover,
.slm-button-secondary:focus {
    border-color: #1e73be;
    background: #eaf2fa;
    color: #155a8f;
}

.slm-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.slm-help {
    font-size: 13px;
    color: #5e7077;
    font-weight: 400;
}

.slm-notice {
    border-left: 4px solid #7a8b92;
    background: #f4f7f8;
    padding: 12px 14px;
    margin: 0 0 18px;
}

.slm-notice-success {
    border-left-color: #1f8a51;
    background: #effaf3;
}

.slm-notice-error {
    border-left-color: #c43d31;
    background: #fff2f0;
}

.slm-summary-grid > div {
    border: 1px solid #e0e6e8;
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfd;
}

.slm-summary-grid strong,
.slm-summary-grid span {
    display: block;
}

.slm-summary-grid strong {
    color: #50636b;
    font-size: 13px;
}

.slm-summary-grid span {
    margin-top: 6px;
    color: #142326;
    font-size: 18px;
}

.slm-registration-list {
    display: grid;
    gap: 14px;
}

.slm-registration-list-heading h2 {
    margin: 0 0 4px;
    letter-spacing: 0;
}

.slm-event-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border: 1px solid #d9e0e3;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(21, 32, 38, .04);
}

.slm-event-datebox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
    border-left: 4px solid #1e73be;
    padding-left: 13px;
    background: #eff5fb;
}

.slm-event-datebox span,
.slm-event-datebox strong {
    display: block;
}

.slm-event-datebox span {
    color: #63777d;
    font-size: 13px;
    font-weight: 700;
}

.slm-event-datebox strong {
    color: #142326;
    font-size: 22px;
    line-height: 1.2;
}

.slm-event-card-main h3 {
    margin: 0 0 10px;
    color: #142326;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 0;
}

.slm-event-card-main dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
}

.slm-event-card-main div {
    min-width: 0;
}

.slm-event-card-main dt {
    color: #6c7d83;
    font-size: 12px;
    font-weight: 700;
}

.slm-event-card-main dd {
    margin: 3px 0 0;
    color: #26383f;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.slm-event-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.slm-text-link,
.slm-back-link {
    color: #1e73be;
    font-weight: 700;
    text-decoration: none;
}

.slm-text-link:hover,
.slm-text-link:focus,
.slm-back-link:hover,
.slm-back-link:focus {
    color: #155a8f;
    text-decoration: underline;
}

.slm-back-link {
    display: inline-flex;
    margin-bottom: 10px;
    font-size: 13px;
}

.slm-registration-auth h2 {
    margin-top: 0;
}

.slm-registration-auth p {
    max-width: 620px;
}

.slm-registration-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.slm-dashboard .slm-panel {
    padding: 24px;
}

.slm-profile-summary {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(0, 2.4fr);
    gap: 24px;
    align-items: center;
}

.slm-profile-main {
    padding-right: 24px;
    border-right: 1px solid #e0e6e8;
}

.slm-profile-main span {
    display: block;
    margin-bottom: 7px;
    color: #65757b;
    font-size: 13px;
    font-weight: 700;
}

.slm-profile-main strong {
    display: block;
    color: #142326;
    font-size: 28px;
    line-height: 1.25;
}

.slm-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.slm-profile-stats div {
    min-width: 0;
}

.slm-profile-stats dt {
    color: #65757b;
    font-size: 12px;
    font-weight: 700;
}

.slm-profile-stats dd {
    margin: 5px 0 0;
    color: #18282e;
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.slm-sports-panel h2 {
    margin-bottom: 14px;
}

.slm-sport-grid {
    display: block;
    column-count: 3;
    column-gap: 30px;
}

.slm-sport-tag {
    display: grid;
    break-inside: avoid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-height: 58px;
    border: 0;
    border-bottom: 1px solid #e4eaed;
    border-radius: 0;
    padding: 10px 0;
    background: transparent;
}

.slm-sport-tag.is-active {
    border-color: #bfe2da;
    background: linear-gradient(90deg, #eaf2fa 0, rgba(238, 248, 245, 0) 78%);
}

.slm-sport-icon {
    display: inline-flex;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 0 7px;
}

.slm-sport-tag:not(.is-active) .slm-sport-icon {
    opacity: .78;
    filter: saturate(.72);
}

.slm-sport-tag.is-active strong {
    color: #0d5f58;
}

.slm-sport-tag strong,
.slm-sport-tag small {
    display: block;
    margin-top: 0;
    line-height: 1.25;
}

.slm-sport-tag small {
    color: #5c6e75;
    font-size: 12px;
}

.slm-table {
    width: 100%;
    border: 1px solid #d9e0e3;
    border-collapse: separate;
    border-radius: 8px;
    border-spacing: 0;
    margin: 12px 0;
    overflow: hidden;
    background: #fff;
}

.slm-table th,
.slm-table td {
    border-bottom: 1px solid #e0e6e8;
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
}

.slm-table th {
    background: #eef3f4;
    color: #24383f;
    font-weight: 700;
}

.slm-table tbody tr:last-child td {
    border-bottom: 0;
}

.slm-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #edf1f2;
    color: #24383f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.slm-status-open,
.slm-status-confirmed,
.slm-status-approved,
.slm-status-active {
    background: #e2f5ef;
    color: #17624f;
}

.slm-status-completed,
.slm-status-fulfilled,
.slm-status-paid {
    background: #e6f0ff;
    color: #2357a5;
}

.slm-status-submitted,
.slm-status-requested,
.slm-status-waitlisted,
.slm-status-pending_payment,
.slm-status-cancel_requested {
    background: #fff3d8;
    color: #7a4a00;
}

.slm-cancel-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e0e0e0;
}
.slm-cancel-reason-label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    color: #555;
}
.slm-cancel-reason-label textarea {
    display: block;
    width: 100%;
    max-width: 480px;
    margin-top: 6px;
    box-sizing: border-box;
}
.slm-cancel-btn {
    background: #fff;
    border: 1px solid #b32d2e;
    color: #b32d2e;
}
.slm-cancel-btn:hover {
    background: #fdecea;
}
/*
 * issue #169：取消按鈕右側補上提醒文字（海外賽事已繳費恕無法取消）。
 * .slm-button 預設是 inline-flex 但在 .slm-cancel-form 這個區塊裡
 * 實測仍會撐滿容器寬度，所以這裡明確用 flex 排列，把按鈕鎖成
 * flex:0 0 auto（不被撐開、不被壓縮），提醒文字則能自然換行；
 * 容器寬度不夠時（手機版）自動換行，文字掉到按鈕下方，不會裁切。
 */
.slm-cancel-btn-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 4px;
}
.slm-cancel-btn-row .slm-cancel-btn {
    flex: 0 0 auto;
    width: auto;
}
.slm-cancel-note {
    color: #7a5a2a;
    font-size: 13px;
    line-height: 1.5;
}
.slm-cancel-pending {
    margin-top: 16px;
    padding: 12px 16px;
    background: #fff8e6;
    border: 1px solid #ffe0a3;
    border-radius: 8px;
    color: #7a5a2a;
    font-size: 14px;
}

.slm-status-draft,
.slm-status-closed,
.slm-status-inactive {
    background: #eef1f3;
    color: #53656d;
}

.slm-status-canceled,
.slm-status-refunded {
    background: #fde8e8;
    color: #a33131;
}

.slm-payment-instructions {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid #ffd8a8;
    background: #fff9f0;
    border-radius: 10px;
}
.slm-payment-instructions h4 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #b26a00;
}
.slm-payment-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}
.slm-payment-table th,
.slm-payment-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #f0e2cf;
    font-size: 15px;
}
.slm-payment-table th {
    width: 110px;
    color: #7a5a2a;
    font-weight: 600;
    white-space: nowrap;
}
.slm-payment-note {
    font-size: 13px;
    color: #7a5a2a;
    margin: 8px 0 0;
    line-height: 1.6;
}

.slm-reward {
    border: 1px solid #dce5e8;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.slm-reward form {
    display: grid;
    gap: 12px;
}

.slm-reward label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
}

.slm-reward input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #b9c4c9;
    border-radius: 6px;
    padding: 8px 10px;
}

.slm-reward h3 {
    margin-top: 0;
}

@media (max-width: 720px) {
    .slm-form,
    .slm-panel,
    .slm-event-heading {
        padding: 14px;
    }

    .slm-grid,
    .slm-summary-grid,
    .slm-reward-grid {
        grid-template-columns: 1fr;
    }

    .slm-event-card,
    .slm-event-card-main dl {
        grid-template-columns: 1fr;
    }

    .slm-event-card {
        gap: 14px;
    }

    .slm-event-datebox {
        min-height: 0;
    }

    .slm-event-card-actions,
    .slm-registration-auth-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .slm-event-card-actions .slm-button,
    .slm-registration-auth-actions .slm-button {
        width: 100%;
    }

    .slm-auth-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .slm-auth-actions a {
        justify-content: center;
        width: 100%;
    }

    .slm-signup-section {
        margin-top: 18px;
        padding-top: 16px;
    }

    .slm-signup-row,
    .slm-signup-row-account,
    .slm-signup-row-name,
    .slm-signup-row-profile,
    .slm-signup-row-contact,
    .slm-signup-row-password {
        grid-template-columns: 1fr;
    }

    .slm-dashboard .slm-panel {
        padding: 14px;
    }

    .slm-profile-summary,
    .slm-profile-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .slm-profile-main {
        padding-right: 0;
        padding-bottom: 12px;
        border-right: 0;
        border-bottom: 1px solid #e0e6e8;
    }

    .slm-profile-main strong {
        font-size: 22px;
    }

    .slm-sport-grid {
        column-count: auto;
        column-gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        display: grid;
    }

    .slm-sport-tag {
        display: block;
        border: 1px solid #dce5e8;
        border-radius: 8px;
        min-height: 112px;
        padding: 12px;
        background: #f8fafb;
    }

    .slm-sport-tag.is-active {
        border-color: #7ec5b7;
        background: #eaf2fa;
    }

    .slm-sport-tag strong,
    .slm-sport-tag small {
        margin-top: 8px;
    }

    .slm-table {
        display: block;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .slm-table thead {
        display: none;
    }

    .slm-table tbody,
    .slm-table tr,
    .slm-table td {
        display: block;
        width: 100%;
    }

    .slm-table tr {
        border: 1px solid #d9e0e3;
        border-radius: 8px;
        padding: 10px 12px;
        margin: 0 0 12px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(21, 32, 38, .04);
    }

    .slm-table td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        border-bottom: 1px solid #edf1f2;
        padding: 9px 0;
        text-align: right;
    }

    .slm-table td:last-child {
        border-bottom: 0;
    }

    .slm-table td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: #53656d;
        font-weight: 700;
        text-align: left;
    }

    .slm-button {
        width: 100%;
    }

    /* 訂單明細的 th/td 兩欄表格：手機版維持「左標籤右值」單列，不拆成上下兩塊，
       避免每個欄位佔掉過高、資訊密度太低 */
    .slm-order-summary,
    .slm-order-answers {
        display: table;
        width: 100%;
    }
    .slm-order-summary tbody,
    .slm-order-answers tbody {
        display: table-row-group;
    }
    .slm-order-summary tr,
    .slm-order-answers tr {
        display: table-row;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background: transparent;
        box-shadow: none;
    }
    .slm-order-summary th,
    .slm-order-summary td,
    .slm-order-answers th,
    .slm-order-answers td {
        display: table-cell;
        width: auto;
        padding: 8px 10px;
        border-bottom: 1px solid #edf1f2;
        text-align: left;
    }
    .slm-order-summary th,
    .slm-order-answers th {
        width: 96px;
        color: #53656d;
        font-weight: 600;
        white-space: nowrap;
        vertical-align: top;
    }
    /* 取消原因輸入框在手機版佔滿寬 */
    .slm-cancel-reason-label textarea {
        max-width: 100%;
    }
}

.slm-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.slm-view-tab {
    width: auto;
    padding: 6px 18px;
    background: #e8eef0;
    color: #2c4047;
    border: 1px solid #cdd9dd;
}

.slm-view-tab.is-active {
    background: #1b7f79;
    color: #fff;
    border-color: #1b7f79;
}

.slm-map {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
}

/* 多人報名各參加者的區隔標題（issue #120） */
.slm-participant-heading {
    margin: 28px 0 10px;
    padding: 10px 14px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
}
.slm-participant-heading:first-of-type {
    margin-top: 8px;
}

/* ---- 訂金摘要（issue #146）----
   顯示於報名表單最上方，讓報名者送出前就知道本次只需付訂金。
   配色沿用付款說明區塊的暖色系，維持視覺一致。 */
.slm-deposit-summary {
    margin: 0 0 20px;
    padding: 16px 20px;
    border: 1px solid #ffd8a8;
    background: #fff9f0;
    border-radius: 10px;
}
.slm-deposit-title {
    font-size: 16px;
    font-weight: 700;
    color: #b26a00;
    margin-bottom: 8px;
}
.slm-deposit-table {
    width: 100%;
    border-collapse: collapse;
}
.slm-deposit-table th,
.slm-deposit-table td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid #f0e2cf;
    font-size: 15px;
}
.slm-deposit-table tr:last-child th,
.slm-deposit-table tr:last-child td {
    border-bottom: 0;
}
.slm-deposit-table th {
    width: 130px;
    color: #7a5a2a;
    font-weight: 600;
    white-space: nowrap;
}
.slm-deposit-table td strong {
    color: #b26a00;
    font-size: 17px;
}
/* issue #161：優惠折扣金額右邊的「指定優惠時間」小徽章，
   跟折扣金額同一列但用較淡的色調區隔，不搶走金額本身的視覺重點。 */
.slm-promo-period-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #b26a00;
    background: #ffedd5;
    border-radius: 10px;
    white-space: nowrap;
    vertical-align: middle;
}
@media (max-width: 600px) {
    .slm-deposit-table th { width: 96px; font-size: 14px; }
    .slm-deposit-table td { font-size: 14px; }
    .slm-promo-period-badge { display: block; margin: 4px 0 0; }
}

/* ---- 需要刷卡勾選框（issue #146）----
   置於送出按鈕前，配色與付款/訂金區塊一致的暖色系。 */
.slm-card-request {
    margin: 0 0 18px;
}
.slm-card-request-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    cursor: pointer;
}
.slm-card-request-label input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    width: auto;
}
.slm-card-request-label span {
    font-size: 14px;
    line-height: 1.7;
    color: #7c2d12;
}

/* ---- 多選核取方塊與條件顯示欄位（issue #153）---- */
/*
 * issue #155 修復：.slm-field-wrap 原本預設 margin-bottom 的區塊層級樣式，
 * 但既有的報名表單（.slm-grid > label { display:grid; ... }）是針對
 * 「.slm-grid 底下直接的 label」設計的逐列版面。render_front_field() 幫每個
 * <label> 外面多包了一層 <div class="slm-field-wrap">，這層 div 一旦有自己的
 * display，就會變成 .slm-grid 的直接子元素、把原本的 <label> 擠成孫元素，
 * 讓「兩欄版面（左標題、右輸入框）」整組失效，欄位擠成又窄又高的畸形直欄
 * （業主回報「欄位跑掉了」）。
 *
 * 用 display:contents 讓這層 wrapper 在版面計算上「隱形」，讓內部的 <label>
 * 對 CSS 來說仍然等同於 .slm-grid 的直接子元素，原本的兩欄樣式才會生效。
 * JS 的顯示/隱藏（sl 條件欄位）改用 inline style 直接覆寫，inline style
 * 優先權高於這裡的 class 規則，不受影響。
 */
.slm-field-wrap {
    display: contents;
}
.slm-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 10px 0 0;
}
.slm-checkbox-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    font-weight: 400 !important;
    min-height: auto !important;
    cursor: pointer;
}
.slm-checkbox-option input[type="checkbox"] {
    width: auto;
    min-height: auto;
    flex: 0 0 auto;
}

/* ---- 追加加購方案（issue #156）---- */
.slm-addons-fieldset { border-color: #ffd8a8; }
.slm-addons-fieldset legend { color: #b26a00; }
/* issue #160：多人報名時，每位參加者各自一組加購清單，用標題區隔開來，
   並在非第一組前面加上分隔線，避免看起來像同一組清單重複出現。 */
.slm-addons-person-heading {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin: 16px 0 8px;
}
.slm-addons-grid + .slm-addons-person-heading {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #fed7aa;
}
.slm-addons-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.slm-addon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: #fff9f0;
    border: 1px solid #fed7aa;
    border-radius: 8px;
}
.slm-addon-item-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    min-height: auto !important;
    cursor: pointer;
    flex: 1 1 auto;
}
.slm-addon-item-label input[type="checkbox"] {
    width: auto;
    min-height: auto;
    flex: 0 0 auto;
}
.slm-addon-name { color: #1f2937; font-weight: 600; }
/* issue #159：加購金額改用紅色，與訂金/優惠折扣區塊的琥珀色系區隔，更顯眼 */
.slm-addon-price { color: #d33a2c; font-weight: 700; }
.slm-addon-option {
    width: auto !important;
    min-height: auto !important;
    padding: 6px 10px;
    font-size: 14px;
}
/* issue #159：只有一個「選項」時是附加說明文字而非可選規格，
   靠右顯示成純文字，不做成看起來能點選的下拉選單 */
.slm-addon-option-note {
    margin-left: auto;
    max-width: 340px;
    text-align: right;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}
.slm-addons-subtotal {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #fed7aa;
    text-align: right;
    font-size: 15px;
    color: #7a5a2a;
}
/* issue #159：加購小計金額改用紅色，跟單項價格用同一個紅，視覺一致 */
.slm-addons-subtotal strong { color: #d33a2c; font-size: 18px; }
@media (max-width: 600px) {
    .slm-addon-item { flex-direction: column; align-items: flex-start; }
}