/* Order and track pages. Fills utilities missing from styles-*.css.
   Breakpoints match it: sm 40rem, md 48rem, lg 64rem. */

.order-1{order:1}.order-2{order:2}
.p-5{padding:calc(var(--spacing) * 5)}
.mt-9{margin-top:calc(var(--spacing) * 9)}
.w-16{width:calc(var(--spacing) * 16)}
.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}
.tracking-wider{letter-spacing:.05em}
.bg-brand-blue-soft{background-color:var(--brand-blue-soft)}
@media (width>=40rem){
  .sm\:col-span-2{grid-column:span 2/span 2}
  .sm\:col-span-3{grid-column:span 3/span 3}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (width>=48rem){
  .md\:p-9{padding:calc(var(--spacing) * 9)}
  .md\:py-16{padding-block:calc(var(--spacing) * 16)}
}
@media (width>=64rem){
  .lg\:grid-cols-\[1fr_380px\]{grid-template-columns:1fr 380px}
  .lg\:order-1{order:1}
  .lg\:order-2{order:2}
}

/* Form fields */
.order-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
.order-input{margin-top:.375rem;width:100%;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--background);padding:.625rem .875rem;font-size:.875rem;color:var(--foreground);outline:none;transition:border-color .15s,box-shadow .15s}
.order-input::placeholder{color:color-mix(in oklab, var(--muted-foreground) 70%, transparent)}
.order-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent)}
.order-hint{margin-top:.25rem;font-size:11px;color:var(--muted-foreground)}
.order-error{border:1px solid color-mix(in oklab, var(--destructive) 30%, transparent);background:color-mix(in oklab, var(--destructive) 5%, transparent);border-radius:calc(var(--radius) - 2px);padding:.75rem 1rem;font-size:.875rem;font-weight:500;color:var(--destructive)}

/* Buttons */
.order-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:calc(var(--radius) - 2px);background:var(--primary);padding:.875rem 2rem;font-size:.875rem;font-weight:600;color:var(--primary-foreground);transition:background-color .15s,opacity .15s}
.order-btn:hover{background:var(--primary-deep)}
.order-btn:disabled{opacity:.6;cursor:not-allowed}
.order-btn-sm{padding:.625rem 1.5rem}
.order-btn.is-busy::before{content:"";width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:order-spin .7s linear infinite}
@keyframes order-spin{to{transform:rotate(360deg)}}
.order-stepper{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);transition:border-color .15s,color .15s}
.order-stepper:hover,.order-pack:hover{border-color:var(--primary);color:var(--primary)}

/* Pack choice cards */
.order-pack{border:2px solid var(--border);border-radius:var(--radius);background:var(--card);padding:1rem;text-align:left;transition:border-color .15s,background-color .15s,box-shadow .15s}
.order-pack[aria-pressed="true"]{border-color:var(--primary);background:var(--brand-blue-soft);box-shadow:var(--shadow-card)}

/* Summary sidebar */
@media (width>=64rem){.order-summary{position:sticky;top:6rem}}
.order-divider{border-top:1px solid var(--border);padding-top:1.25rem}
dl .order-divider{padding-top:.625rem}

/* Payment instructions */
.order-pay{border:1px solid color-mix(in oklab, var(--brand-gold) 40%, transparent);background:var(--brand-gold-soft)}
.order-pay-field{min-width:200px}

/* Order progress */
.order-progress{display:flex;flex-direction:column;gap:.875rem;font-size:.875rem;color:var(--muted-foreground)}
.order-progress li{display:flex;align-items:flex-start;gap:.75rem}
.order-progress-label{display:block;line-height:1.75rem}
.order-progress-text{display:block;font-size:.75rem;font-weight:400;color:var(--muted-foreground)}
.order-message{border-left:3px solid var(--primary);background:var(--brand-blue-soft);border-radius:calc(var(--radius) - 2px);padding:.875rem 1rem}
.order-progress-dot{display:grid;place-items:center;flex-shrink:0;width:1.75rem;height:1.75rem;border:2px solid var(--border);border-radius:50%;background:var(--background);font-size:.75rem;font-weight:700}
.order-progress .is-done{color:var(--foreground)}
.order-progress .is-done .order-progress-dot{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.order-progress .is-current{color:var(--primary-deep);font-weight:600}
.order-progress .is-current .order-progress-dot{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent)}

/* Tracking lookup form */
.track-form{display:grid;gap:1rem}
@media (width>=40rem){.track-form{grid-template-columns:1fr 1fr auto;align-items:end}}
.order-pay-amount{width:10rem}

/* Payment notice banner */
.order-notice{display:flex;gap:.875rem;align-items:flex-start;border:1px solid color-mix(in oklab, var(--brand-gold) 45%, transparent);border-left:4px solid var(--brand-gold);background:var(--brand-gold-soft);border-radius:calc(var(--radius) - 2px);padding:1rem 1.25rem;margin-bottom:2rem}
.order-notice-icon{flex-shrink:0;width:1.375rem;height:1.375rem;margin-top:.0625rem;color:var(--brand-gold)}
.order-notice-title{font-size:.9375rem;font-weight:700;color:var(--primary-deep)}
.order-notice-text{margin-top:.25rem;font-size:.875rem;line-height:1.5;color:var(--foreground)}
.order-notice-text strong{font-weight:700;color:var(--primary-deep)}

/* Cart */
.order-pack-action{display:block;margin-top:.75rem;font-size:.75rem;font-weight:700;color:var(--primary)}
.cart-lines{display:flex;flex-direction:column;gap:.875rem}
.cart-line-head{display:flex;justify-content:space-between;gap:1rem}
.cart-line-controls{display:flex;align-items:center;gap:.5rem;margin-top:.375rem}
.cart-stepper{width:1.875rem;height:1.875rem;font-size:1rem;line-height:1}
.cart-qty{min-width:1.5rem;text-align:center;font-weight:700}
.cart-remove{margin-left:auto;font-size:.75rem;font-weight:600;color:var(--muted-foreground)}
.cart-remove:hover{color:var(--destructive)}

/* Rider details on the order card */
.order-delivery{border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);background:var(--brand-blue-soft)}

/* My orders */
.account-orders{display:flex;flex-direction:column;gap:.75rem}
.account-order{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-card)}
.account-order-head{display:flex;width:100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.25rem;text-align:left}
.account-order-head:hover .account-order-main span:first-child{color:var(--primary)}
.account-order-main,.account-order-side{display:flex;flex-direction:column;gap:.25rem}
.account-order-side{align-items:flex-end}
.account-order-body{padding:0 .75rem .75rem}
.account-status{display:inline-block;border-radius:999px;padding:.125rem .625rem;font-size:.6875rem;font-weight:700;background:var(--surface);color:var(--primary-deep)}
.account-status--delivered{background:color-mix(in oklab, var(--primary) 14%, transparent)}
.account-status--out_for_delivery,.account-status--preparing{background:var(--brand-gold-soft)}
.account-status--cancelled{background:color-mix(in oklab, var(--destructive) 10%, transparent);color:var(--destructive)}

/* Passwords */
.password-field{position:relative}
.password-field .order-input{padding-right:2.75rem}
.password-toggle{position:absolute;right:.375rem;bottom:.3125rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:calc(var(--radius) - 4px);color:var(--muted-foreground)}
.password-toggle:hover,.password-toggle[aria-pressed="true"]{color:var(--primary)}
.order-account-offer{border:1px solid color-mix(in oklab, var(--primary) 30%, transparent);background:var(--brand-blue-soft)}
.order-offer-row{display:grid;gap:.75rem}
@media (min-width:40rem){.order-offer-row{grid-template-columns:1fr auto;align-items:end}}