:root { color-scheme: light; font: 16px/1.6 system-ui, sans-serif; color: #222; background: #f6f7f9; }
.order-summary { width:100%; border-collapse:collapse; font-size:14px; background:#fff; margin-top:16px; table-layout:fixed; }
.order-summary th,.order-summary td { padding:12px 10px; border-bottom:1px solid #dde2e8; text-align:left; vertical-align:top; overflow-wrap:anywhere; white-space:pre-line; }
.order-summary th { background:#edf1f5; }
.order-summary th:nth-child(1) { width:18%; }
.order-summary th:nth-child(3) { width:10%; }
.order-summary th:nth-child(5) { width:27%; }
#orders-pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
@media(max-width:640px){
 .order-summary,.order-summary tbody,.order-summary tr,.order-summary td { display:block; width:100%; }
 .order-summary thead { display:none; }
 .order-summary tr { border:1px solid #dde2e8; border-radius:6px; margin-bottom:12px; padding:8px; }
 .order-summary td { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px; padding:6px; border:0; }
 .order-summary td::before { content:attr(data-label); color:#657184; }
}
#delivery-dialog { width:min(760px,calc(100vw - 32px)); text-align:center; padding:22px; background:#1e293b; color:#f8fafc; border:1px solid #475569; border-radius:16px; position:relative; }
#delivery-dialog::backdrop { background:rgba(15,23,42,.7); backdrop-filter:blur(5px); }
#close-delivery { position:absolute; top:10px; right:12px; padding:0 8px; background:transparent; border:0; color:#cbd5e1; font-size:24px; }
#delivery-dialog h2 { margin:0 26px 8px; }
#delivery-qr { display:block; width:min(240px,100%); height:auto; margin:0 auto; padding:10px; background:white; border-radius:12px; }
#delivery-dialog .delivery-columns { display:grid; grid-template-columns:240px minmax(0,1fr); gap:22px; align-items:center; margin-top:16px; }
#delivery-dialog .delivery-details { min-width:0; text-align:left; }
#delivery-dialog pre { margin:0 0 12px; }
#delivery-name { margin:8px 0 0; }
#delivery-dialog p { overflow-wrap:anywhere; }
@media(max-width:600px) {
  #delivery-dialog { padding:18px; }
  #delivery-dialog .delivery-columns { grid-template-columns:minmax(0,1fr); gap:12px; }
  #delivery-qr { width:180px; }
}
#delivery-purchase-info { text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; padding:12px; background:#334155; border-radius:8px; }
#delivery-hours,#delivery-instructions,#delivery-message { font-size:14px; color:#cbd5e1; white-space:pre-line; }
#purchase-steps { text-align:center; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
.required-mark { color: #b42318; margin-left: 4px; font-weight: 700; }
header { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 20px max(20px, calc((100% - 1080px)/2)); border-bottom: 1px solid #ddd; background: #fff; }
h1 { font-size: 24px; margin: 0; } h2 { font-size: 21px; } h3 { font-size: 18px; }
a { color: #14624e; } main { max-width: 1080px; margin: 32px auto; padding: 0 20px; }
form { display: grid; gap: 16px; max-width: 460px; } label { display: grid; gap: 5px; }
input,select,textarea,button { font: inherit; border-radius: 5px; padding: 10px 12px; border: 1px solid #c7cbd0; min-width: 0; }
input,select,textarea { width: 100%; background: #fff; } button { background: #16614d; color: white; cursor: pointer; white-space: nowrap; }
button:disabled { opacity: .5; cursor: default; } nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
nav button { background: #fff; color: #222; } nav button[aria-current="page"] { background:#16614d; color:#fff; }
#plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:20px; margin-top:24px; }
article { border: 1px solid #d6d9dd; border-radius: 6px; padding: 20px; background:#fff; margin-bottom:16px; overflow-wrap:anywhere; }
article h3 { margin-top:0; } article button { margin-top:12px; } article input { max-width:100px; }
dialog { border:1px solid #ccd0d5; border-radius:8px; padding:24px; width:min(640px,calc(100vw - 32px)); max-height:90vh; overflow:auto; }
dialog::backdrop { background:#0006; } #payment-qr { width:220px; height:220px; object-fit:contain; display:block; margin:20px auto; }
[hidden],#payment-qr[hidden] { display:none !important; } #message,#payment-message { color:#8d3434; overflow-wrap:anywhere; }
section#order-dialog { max-width:760px; margin:0 auto; overflow-wrap:anywhere; }
section#order-dialog form { max-width:none; }
#cancel-order-actions { margin-top:28px; padding-top:20px; border-top:1px solid #ddd; }
#cancel-order-actions button,#return-plans,#auth-return-plans { background:#fff; color:#16614d; white-space:normal; }
#auth-return-plans { margin-bottom:16px; }
.payment-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.payment-heading h2 { margin:0; font-size:20px; }
#payment-identity { flex:1; min-width:0; text-align:center; overflow-wrap:anywhere; }
.payment-contact { margin:0; font-size:14px; }
.payment-product-name { color:#b42318; }
#payment-form input[name="paidAmount"][readonly] { background:#e9ecef; color:#222; opacity:1; }
body:has(section#order-dialog:not([hidden])) { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body:has(section#order-dialog:not([hidden])) > main { width:100%; max-width:860px; margin:auto; padding:20px; flex:none; }
body:has(section#order-dialog:not([hidden])) #message:empty { display:none; }
section#order-dialog { display:grid; grid-template-columns:220px minmax(0,1fr); gap:12px 24px; max-width:none; }
section#order-dialog .payment-heading,section#order-dialog #order-info,section#order-dialog .payment-contact,
section#order-dialog #payment-message,section#order-dialog #cancel-order-actions { grid-column:1 / -1; }
section#order-dialog #order-info p { margin:0; }
section#order-dialog #payment-qr { margin:8px auto; max-width:100%; }
section#order-dialog #payment-form { grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; align-content:start; }
section#order-dialog #payment-form label { gap:3px; font-size:14px; }
section#order-dialog #payment-form input,section#order-dialog #payment-form textarea { padding:6px 8px; min-height:36px; }
section#order-dialog .payment-wide,section#order-dialog #payment-form > button { grid-column:1 / -1; }
section#order-dialog #payment-form textarea { resize:vertical; }
section#order-dialog #payment-message { margin:0; }
section#order-dialog #payment-message:empty { display:none; }
section#order-dialog #cancel-order-actions { margin:0; padding-top:12px; text-align:center; }
section#order-dialog #cancel-order-actions:empty { display:none; }
@media(max-width:699px) {
  section#order-dialog { grid-template-columns:minmax(0,1fr); gap:12px; }
  section#order-dialog #payment-form { grid-column:1; }
  .payment-heading h2 { font-size:18px; }
  .payment-heading #return-plans { padding:6px 8px; font-size:14px; }
}
@media(max-width:379px) {
  section#order-dialog #payment-form { grid-template-columns:minmax(0,1fr); }
}
.code-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-top:5px; }
select:disabled { opacity:1; color:#444; background:#e9edf1; }
#captcha-dialog { width:min(440px,calc(100vw - 24px)); padding:20px; }
#captcha-dialog h2 { margin:0 0 16px; }
.captcha-picture { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#captcha-image { max-width:100%; object-fit:contain; border:1px solid #c7cbd0; }
#captcha-message { color:#8d3434; margin:0; overflow-wrap:anywhere; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
#cancel-captcha,#refresh-captcha { background:#fff; color:#222; }
body[data-client-account="true"] main { max-width:540px; }
body[data-client-account="true"] form { max-width:none; }
body[data-client-account="true"] main { margin:8px auto; }
body[data-client-account="true"] #auth-mode { display:none; }
body[data-client-account="true"] #auth h2 { margin:0 0 8px; }
body[data-client-account="true"] #auth-form { gap:8px; line-height:1.4; }
body[data-client-account="true"] #auth-form label { gap:4px; }
body[data-client-account="true"] #auth-form input,
body[data-client-account="true"] #auth-form button { min-height:40px; padding:8px 12px; line-height:1.4; }
body[data-client-account="true"] #auth-form .code-row { margin-top:4px; }
body[data-client-account="true"] #message { margin:4px 0 0; }
body[data-client-account="true"] #message:empty { display:none; }
/* Auto margins center short forms without clipping tall forms above the viewport. */
body:has(#auth:not([hidden])) { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body:has(#auth:not([hidden])) > main { width:100%; max-width:540px; margin:auto; padding:8px 20px; flex:none; }
body:has(#auth:not([hidden])) #auth-form { max-width:none; }
body:has(#auth:not([hidden])) #auth h2 { margin:0 0 8px; }
body:has(#auth:not([hidden])) #message { margin:4px 0 0; }
body:has(#auth:not([hidden])) #message:empty { display:none; }