.orders-button{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font-size:10px;font-weight:700;white-space:nowrap}
.orders-button>span:first-child{font-size:16px;color:#987543}
.orders-button:hover{border-color:var(--gold);background:#fbf3e4}
.history-modal{width:min(520px,calc(100% - 28px));max-height:min(88dvh,780px);display:none;flex-direction:column}
.history-modal[open]{display:flex}
.history-modal h2{margin-bottom:15px}
.history-date{display:grid;gap:7px;margin-bottom:12px;font-size:10px;font-weight:700}
.history-date input{width:100%;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:500 13px 'DM Sans',sans-serif}
.history-summary{padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px;font-weight:700;color:#6f5a3a}
.history-list{min-height:70px;max-height:46dvh;overflow:auto;overscroll-behavior:contain}
.history-order{padding:13px 0;border-bottom:1px solid #eee8df}
.history-order-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.history-order-head>div{display:grid;gap:4px}
.history-order-head strong{font-size:12px;color:var(--ink)}
.history-order-head small{font-size:9px;color:var(--muted)}
.history-order p{margin:8px 0;font-size:10px;line-height:1.5;color:#635b67}
.history-payment{display:inline-flex;padding:4px 7px;border-radius:12px;background:#f4ecdc;color:#7b6138;font-size:8px;font-weight:700;letter-spacing:.08em}
.history-empty{min-height:140px;display:grid;align-content:center;justify-items:center;gap:7px;color:var(--muted)}
.history-empty>span{font-size:23px;color:#ab8a55}
.history-empty strong{font:500 16px 'Playfair Display',serif;color:var(--ink)}
.history-empty small,.history-error{font-size:10px;color:var(--muted)}
.history-order-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.history-print-button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:#fffdf9;color:var(--ink);font-size:10px;font-weight:700;white-space:nowrap}
.history-print-button:hover{border-color:var(--gold);background:#fbf3e4}
.history-print-button svg{width:15px;height:15px;fill:none;stroke:#987543;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .top-actions{gap:5px}
  .orders-button{height:36px;padding:0 8px;gap:4px;font-size:9px;border-radius:8px}
  .history-modal{width:calc(100% - 20px);max-width:500px;max-height:88dvh;padding:21px;border-radius:14px}
  .history-list{max-height:42dvh}
}
@media(max-width:360px){
  .orders-button{width:38px;padding:0}
  .orders-button>span:last-child{display:none}
}

/* Keep the history controls visible while the orders themselves scroll. */
.history-modal{overflow:hidden;min-height:0}
.history-list{display:block;flex:1 1 auto;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.history-modal>.modal-close-row,
.history-modal>.modal-kicker,
.history-modal>#historyTitle,
.history-modal>.history-date,
.history-modal>.history-summary{flex:none}
.history-order-head>div{min-width:0}
.history-order-head small{overflow-wrap:anywhere}
@media(max-width:760px){
  .history-date{align-self:stretch;width:auto;min-width:0;grid-template-columns:minmax(0,1fr)}
  .history-date>span{line-height:1.35}
  .history-date input[type="date"]{display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box!important;-webkit-box-sizing:border-box;padding-inline:10px;text-align:center;touch-action:manipulation}
  .history-date input[type="date"]::-webkit-date-and-time-value{display:flex;align-items:center;justify-content:center;width:100%;min-height:100%;text-align:center}
  .history-date input[type="date"]::-webkit-calendar-picker-indicator{margin:0 0 0 8px}
}
@media(max-width:760px){
  .history-modal{width:calc(100% - 16px);max-width:520px;height:min(88dvh,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);padding:18px 17px calc(16px + env(safe-area-inset-bottom));border-radius:14px;overscroll-behavior:contain}
  .history-modal h2{font-size:25px;margin:5px 0 13px}
  .history-modal .modal-close-row{margin:-7px -6px 8px}
  .history-date{margin-bottom:10px}
  .history-date input{height:46px;min-width:0;font-size:16px}
  .history-summary{padding:9px 0}
  .history-list{max-height:none}
  .history-order{padding:12px 0}
  .history-order-head{gap:8px}
  .history-order-head>strong{flex:none;white-space:nowrap}
  .history-order p{overflow-wrap:anywhere}
}
@media(max-width:360px){
  .history-modal{width:100%;height:calc(100dvh - env(safe-area-inset-top));max-height:calc(100dvh - env(safe-area-inset-top));padding:calc(16px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));border-radius:14px 14px 0 0;margin:auto auto 0}
  .history-modal h2{font-size:23px}
  .history-order-head strong{font-size:11px}
}

/* iOS Safari zooms the page when a focused text control uses less than 16px. */
@media screen and (max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    font-size:16px!important;
  }
}