
.section-help {
    position: absolute;
    z-index: 30;
    top: 4px;
    right: 5px;
    min-width: 0;
    height: 18px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #003b70;
    font: bold 11px/18px "Microsoft JhengHei", Arial, sans-serif;
    text-align: center;
    cursor: pointer;
}
.section-help:hover,
.section-help:focus-visible {
    background: transparent;
    color: #001f4d;
    text-decoration: underline;
    outline: 1px dotted #003b70;
}
.section-help.inline {
    position: static;
    flex: 0 0 auto;
    margin-left: 6px;
}
.section-help-backdrop[hidden] { display: none; }
.section-help-backdrop {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .36);
}
.section-help-dialog {
    width: min(520px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 2px solid #003b70;
    border-radius: 5px;
    background: #fffff2;
    box-shadow: 0 7px 24px rgba(0, 0, 0, .30);
    color: #222;
    font: 14px/1.7 "Microsoft JhengHei", Arial, sans-serif;
}
.section-help-head {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 5px 8px 5px 14px;
    background: #003b70;
    color: #fff;
}
.section-help-title { flex: 1; font-size: 17px; font-weight: bold; }
.section-help-body { padding: 12px 18px 15px; }
.section-help-body p { margin: 0 0 7px; }
.section-help-body ol,
.section-help-body ul { margin: 4px 0 0; padding-left: 24px; }
.section-help-body li { margin: 3px 0; }
.section-help-body .help-note {
    margin-top: 9px;
    padding: 6px 9px;
    border-left: 4px solid #c00020;
    background: #fff0f0;
    color: #7c1426;
}
body.section-help-open { overflow: hidden; }


.owner-checkout, .owner-checkout * { box-sizing: border-box; }
.owner-checkout {
    position: absolute; left: 13px; top: 663px; bottom: 13px; width: 487px;
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    border: 1px solid #aec9bc; border-radius: 10px; background: #f5faf7; color: #254639;
    box-shadow: 0 2px 6px rgba(38,72,53,.07);
}
.owner-checkout-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 5px; }
.owner-checkout-heading-actions { display: flex; align-items: center; gap: 6px; }
.owner-checkout-heading-actions button { height: 23px; padding: 0 7px; font-size: 11px; }
.owner-checkout-heading h2 { display: inline; margin: 0 9px 0 0; font-size: 15px; color: #185c47; }
.owner-checkout-heading div > span { font-size: 11px; color: #668274; }
.owner-checkout-count { flex: 0 0 auto; padding: 3px 8px; border-radius: 20px; background: #e0efe6; color: #38644e; font-size: 11px; }
.owner-checkout-toolbar { display: flex; align-items: center; gap: 6px; padding: 3px 12px 7px; flex: 0 0 auto; }
.owner-checkout-toolbar label { color: #597569; font-size: 11px; }
.owner-checkout-toolbar input { width: 126px; height: 27px; border: 1px solid #bad0c4; border-radius: 5px; padding: 2px 5px; background: #fff; color: #294d3d; font-size: 12px; }
.owner-checkout button { border: 1px solid #b8cdc1; border-radius: 5px; height: 27px; padding: 0 9px; background: #fff; color: #345d49; font-size: 12px; cursor: pointer; }
.owner-checkout button:hover { background: #e8f4ed; }
.owner-checkout button:disabled { opacity: .55; cursor: default; }
.owner-checkout :focus-visible { outline: 2px solid #23765a; outline-offset: 2px; }
.owner-checkout-refresh { margin-left: auto; }
.owner-checkout-visits { flex: 1 1 0; min-height: 0; overflow: auto; list-style: none; margin: 0; padding: 0 10px 4px; scrollbar-gutter: stable; }
.owner-checkout-card { display: flex; align-items: center; gap: 10px; min-height: 59px; padding: 7px 9px; margin: 0 0 6px; border: 1px solid #d8e5dd; border-left: 3px solid #b7d4c5; border-radius: 7px; background: #fff; }
.owner-checkout-card:last-child { margin-bottom: 0; }
.owner-checkout-card.is-selected { border-color: #4b9171; border-left-color: #207356; background: #ecf7f0; }
.owner-checkout-date { flex: 0 0 99px; display: flex; flex-direction: column; gap: 2px; color: #527365; font-variant-numeric: tabular-nums; line-height: 17px; }
.owner-checkout-date small { color: #82988c; font-size: 11px; }
.owner-checkout-pet { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.owner-checkout-pet strong { font-size: 14px; color: #294a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-checkout-pet span { color: #74887d; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-checkout-pet .owner-checkout-kind { align-self: flex-start; padding: 1px 7px; border-radius: 9px; background: #e8f0eb; color: #416b58; font-weight: 700; line-height: 16px; }
.owner-checkout-pet .owner-checkout-kind.is-discharge { background: #fff0d5; color: #9a4f00; border: 1px solid #e6b564; }
.owner-checkout .owner-checkout-select { flex: 0 0 65px; height: 32px; border-radius: 16px; border-color: #217358; background: #217358; color: #fff; }
.owner-checkout .owner-checkout-select:hover { background: #175c45; }
.owner-checkout .owner-checkout-select[aria-pressed=true] { background: #fff; color: #217358; }
.owner-checkout-empty { padding: 16px 8px; text-align: center; line-height: 20px; color: #728477; }
.owner-checkout-empty.is-error { color: #a1363e; }
.owner-checkout-footer { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 30px; padding: 5px 12px; border-top: 1px solid #dce9e1; background: #eef7f1; }
.owner-checkout-footer span { flex: 1; min-width: 0; line-height: 17px; font-size: 11px; overflow-wrap: anywhere; }
.owner-checkout-footer button { flex: 0 0 auto; height: 22px; font-size: 11px; }
.owner-checkout [hidden] { display: none !important; }
/* r3: base height is twice the original 224px, including after collapse. */
.owner-window { height: 1124px; }
.owner-window .owner-checkout,
.owner-window .checkout-details { top: 663px; bottom: auto; height: 448px; }
.owner-window.checkout-expanded,
.owner-window.checkout-list-expanded { height: 1564px; }
.owner-window.checkout-expanded .owner-checkout,
.owner-window.checkout-expanded .checkout-details,
.owner-window.checkout-list-expanded .owner-checkout,
.owner-window.checkout-list-expanded .checkout-details { height: 888px; }


.checkout-details, .checkout-details * { box-sizing: border-box; }
.checkout-details { position: absolute; left: 513px; right: 13px; top: 663px; bottom: 13px; display: flex; flex-direction: column; min-height: 0; border: 1px solid #aec9bc; border-radius: 10px; background: #f7faf8; color: #294b3c; overflow: hidden; box-shadow: 0 2px 6px #26483512; }
.checkout-details[hidden] { display: none !important; }
.checkout-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; flex: 0 0 auto; background: #eaf4ed; }
.checkout-details-heading h2 { display: inline; margin: 0 12px 0 0; font-size: 15px; color: #185c47; }
#checkoutPatient { font-size: 12px; }
.checkout-details button { border: 1px solid #b8cdc1; border-radius: 5px; padding: 3px 8px; background: #fff; color: #345d49; cursor: pointer; font-size: 12px; }
.checkout-details button:hover { background: #e4f1e9; }
.checkout-details button:disabled { opacity: .5; cursor: default; }
.checkout-details-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.checkout-details :focus-visible { outline: 2px solid #23765a; outline-offset: 2px; }
.checkout-details-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 230px; flex: 1 1 0; min-height: 0; gap: 10px; padding: 0 10px; }
.checkout-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.checkout-column h3 { margin: 0; padding: 5px 0; font-size: 12px; display: flex; justify-content: space-between; align-items: center; min-height: 31px; flex: 0 0 auto; }
.checkout-column h3 small { font-weight: normal; color: #738a7a; font-size: 11px; }
.checkout-column h3 button { padding: 2px 6px; }
.checkout-lines { flex: 1; min-height: 0; overflow: auto; padding: 0 4px 5px 0; scrollbar-gutter: stable; }
.checkout-line { background: #fff; border: 1px solid #d7e4dc; border-left: 3px solid #aacdb9; border-radius: 7px; margin-bottom: 6px; padding: 6px 8px; }
.checkout-line.is-pending { border-left-color: #d29c36; background: #fffdf6; }
.checkout-line.is-excluded { background: #f0f2f0; border-left-color: #c1c8c1; }
.checkout-line.has-error { border-color: #c06a50; }
.checkout-line-top { display: flex; align-items: center; gap: 6px; min-height: 21px; }
.checkout-line-title { flex: 1; min-width: 0; font-weight: bold; overflow-wrap: anywhere; }
.checkout-line-amount { color: #285e45; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.checkout-line-note { font-size: 11px; color: #778b7c; line-height: 17px; margin-top: 3px; overflow-wrap: anywhere; }
.checkout-line-details { font-size: 11px; color: #506c5b; margin-top: 3px; }
.checkout-line-details summary { cursor: pointer; }
.checkout-line-details p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.checkout-line-fields { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.checkout-line-fields label { font-size: 11px; color: #61786a; display: flex; align-items: center; gap: 4px; }
.checkout-line-fields input, .checkout-manual-name { border: 1px solid #bed0c4; border-radius: 4px; height: 25px; padding: 2px 5px; font-size: 12px; min-width: 0; }
.checkout-line-fields .checkout-quantity { width: 61px; }
.checkout-line-fields .checkout-price { width: 105px; }
.checkout-manual-name { width: 100%; }
.checkout-line-fields button { margin-left: auto; }
.checkout-confirm-choice { display: flex; gap: 5px; flex: 0 0 auto; }
.checkout-confirm-choice button { padding: 2px 5px; font-size: 11px; }
.checkout-summary { border-left: 1px solid #dce6df; padding: 8px 0 0 12px; display: flex; flex-direction: column; overflow: auto; min-height: 0; }
.checkout-summary dl { margin: 0; font-size: 11px; line-height: 19px; }
.checkout-summary dl div { display: flex; justify-content: space-between; }
.checkout-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.checkout-summary dl div[hidden] { display: none; }
#checkoutChargesRow { border-top:1px solid #dce6df; margin-top:5px; padding-top:5px; }
#checkoutDepositRow, #checkoutAppliedRow { color:#285e45; }
#checkoutRefundRow { color:#9a4f00; font-weight:bold; }
.checkout-grand-total { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin: 5px 0; color: #155b42; }
.checkout-grand-total span { font-size: 11px; }
.checkout-grand-total strong { font-size: 21px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.checkout-details .checkout-calculate { background: #247556; color: #fff; border-color: #247556; min-height: 27px; font-weight: bold; }
.checkout-preview-label { text-align: center; color: #829285; font-size: 10px; margin: 4px 0; }
.checkout-details-status { flex: 0 0 auto; min-height: 25px; padding: 4px 12px; font-size: 11px; border-top: 1px solid #dce6df; color: #607967; line-height: 17px; }
.checkout-details-status.is-error { color: #a04235; }
.checkout-empty { padding: 12px 5px; color: #7c8f81; font-size: 12px; }
.owner-window.checkout-expanded { height: 1564px; }

.checkout-pdf { display: inline-block; color: #185c47; font-size: 12px; padding: 4px 7px; text-align: center; text-decoration: underline; }
.checkout-pdf[hidden], .checkout-history[hidden] { display: none !important; }
.checkout-details.is-history .checkout-details-body { display: none; }
.checkout-history { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.checkout-history-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 8px; margin: 9px 0; }
.checkout-history-card { display: grid; grid-template-columns: 1fr auto; gap: 5px; border: 1px solid #c5d9cc; border-radius: 7px; padding: 9px; background: white; }
.checkout-history-card small { grid-column: 1 / -1; font-size: 10px; color: #607967; overflow-wrap: anywhere; }
.checkout-history-card a { grid-column: 1 / -1; text-align: left; }
.checkout-line input:disabled { background: #f5f7f5; color: #294b3c; }

.checkout-preview-dialog, .checkout-preview-dialog * { box-sizing: border-box; }
.checkout-preview-dialog { width: min(1060px, calc(100vw - 40px)); max-width: none; height: min(900px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #99b9a9; border-radius: 12px; background: #fff; color: #294b3c; font: 14px/1.55 "Microsoft JhengHei", sans-serif; box-shadow: 0 18px 70px #183c3859; overflow: hidden; }
.checkout-preview-dialog[open] { display: flex; flex-direction: column; }
.checkout-preview-dialog::backdrop { background: #18372f88; }
.checkout-preview-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid #d9e6de; background: #f0f7f2; flex: 0 0 auto; }
.checkout-preview-heading h2 { margin: 5px 0 0; font-size: 22px; color: #185c47; }
.checkout-draft-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; background: #fff1cf; color: #795012; font-size: 12px; }
.checkout-preview-dialog button { padding: 9px 18px; border: 1px solid #adc8b9; border-radius: 6px; background: #fff; color: #285640; font: inherit; cursor: pointer; }
.checkout-preview-dialog button:hover { background: #eaf4ed; }
.checkout-preview-dialog button:disabled { opacity: .5; cursor: default; }
.checkout-preview-dialog :focus-visible { outline: 2px solid #23765a; outline-offset: 2px; }
.checkout-preview-heading button { padding: 0 10px; font-size: 28px; line-height: 36px; }
.checkout-preview-body { flex: 1 1 auto; min-height: 0; padding: 20px 24px; overflow: auto; overscroll-behavior: contain; }
.checkout-preview-meta { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.checkout-preview-note { margin: 5px 0; color: #687d70; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.checkout-preview-table { width: 100%; border-collapse: collapse; margin: 18px 0; table-layout: fixed; }
.checkout-preview-table caption { text-align: left; font-weight: bold; margin-bottom: 8px; }
.checkout-preview-table th { background: #eaf4ed; padding: 10px 12px; text-align: left; }
.checkout-preview-table th:last-child { width: 180px; text-align: right; }
.checkout-preview-table td { padding: 12px; border-bottom: 1px solid #dce7df; vertical-align: top; overflow-wrap: anywhere; }
.checkout-preview-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.checkout-preview-table .is-reference { background: #f8faf9; color: #617769; }
.checkout-preview-table .has-error { background: #fff7eb; }
.checkout-preview-table .checkout-preview-note { font-size: 12px; }
.checkout-preview-error { color: #a24226; }
.checkout-preview-total { padding: 15px 18px; background: #eaf4ed; border-radius: 8px; }
.checkout-preview-total dl { margin: 0 0 8px; }
.checkout-preview-total dl div { display: flex; justify-content: space-between; gap: 16px; }
.checkout-preview-total dd { margin: 0; }
.checkout-preview-total strong { display: block; text-align: right; font-size: 22px; }
.checkout-preview-footer { flex: 0 0 auto; padding: 12px 24px 16px; border-top: 1px solid #d9e6de; background: #f7faf8; }
.checkout-preview-footer p { margin: 0 0 10px; font-size: 12px; }
.checkout-preview-footer > div { display: flex; justify-content: flex-end; gap: 10px; }
.checkout-preview-dialog .checkout-preview-confirm { background: #247556; border-color: #247556; color: #fff; font-weight: bold; }
@media (max-width: 600px) {
    .checkout-preview-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
    .checkout-preview-heading, .checkout-preview-body, .checkout-preview-footer { padding: 12px; }
    .checkout-preview-table th:last-child { width: 110px; }
    .checkout-preview-footer > div { flex-wrap: wrap; }
}


 .shopping-panel{box-sizing:border-box;width:1880px;max-width:100%;background:#f5faf7;border:1px solid #86b6a1;border-radius:9px;padding:13px;margin:12px auto;color:#173e30;scroll-margin-top:12px}
.shopping-panel header{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap}
.shopping-panel h2{font-size:19px;margin:0 0 8px}
.shopping-toolbar,.shopping-controls,.shopping-summary{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:8px 0}
.shopping-panel input,.shopping-panel select{min-height:29px;box-sizing:border-box}
#shoppingProduct{max-width:440px;min-width:240px}
#shoppingQuantity{width:68px}
#shoppingPet{width:100px}
.shopping-panel button{cursor:pointer;min-height:30px}
.shopping-panel button:disabled{cursor:default;opacity:.5}
.shopping-orders{max-height:145px;overflow-y:auto;border:1px solid #c2d8cb;background:white;padding:6px}
.shopping-orders button{margin:2px 6px 2px 0}
.shopping-editor{border-top:1px solid #c2d8cb;margin-top:10px;padding-top:9px}
.shopping-detail-title{font-size:16px;margin:12px 0 4px}
.shopping-panel .shopping-instruction{color:#285f45;font-size:14px;margin:4px 0 8px}
.shopping-lines{max-height:230px;overflow-y:auto;background:white;border:1px solid #c2d8cb;padding:8px}
.shopping-line{border-bottom:1px solid #dde9e0;display:flex;gap:9px;align-items:center;padding:6px 1px;flex-wrap:wrap}
.shopping-line span{flex:1;min-width:180px}
.shopping-line input{width:72px}
.shopping-discount{display:flex;align-items:center;gap:9px;margin-top:8px}
.shopping-summary{justify-content:flex-end;font-weight:bold}
.shopping-more{margin-top:12px;border-top:1px solid #c2d8cb;padding-top:8px}
.shopping-more summary{cursor:pointer;font-weight:bold;color:#285f45}
.shopping-more[hidden]{display:none}
#shoppingMessage{min-height:22px;color:#315f49}
#shoppingMessage.error{color:#a32d24}
.shopping-panel p{font-size:13px;color:#54675d;margin:5px 0}

