/* Maya'le - cart, checkout, order pages (tokens from app.css) */

.cart-link { position: relative; }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--rose); color: var(--white); font-size: .7rem; letter-spacing: 0; margin-left: 2px; }
.add-row { display: flex; gap: 12px; align-items: end; }
.add-row .btn { flex: 1; }
.qty-label { display: flex; flex-direction: column; font-size: .8rem; margin: 0; }
.qty-label input { width: 72px; padding: .55em .6em; }
.btn-sm { padding: .45em 1em; font-size: .85rem; }

dialog.modal { border: 0; border-radius: var(--radius); padding: 28px; width: min(560px, 94vw); max-height: 90vh;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
dialog.modal::backdrop { background: rgba(62, 74, 61, .55); }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.modal-actions .btn { flex: 1; }
.addon-list { display: grid; gap: 10px; margin-top: 12px; }
.addon-option { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); }
.addon-option img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 56px; }
.addon-text { flex: 1; min-width: 0; }
.addon-text input { margin-top: 6px; padding: .45em .6em; font-size: .9rem; }

.cart-page { padding-top: 28px; }
.narrow-wide { max-width: 1040px; }
.cart-layout, .checkout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.checkout { padding-top: 24px; grid-template-areas: "steps steps" "title title" "main side"; }
.checkout > .steps { grid-area: steps; }
.checkout > h1 { grid-area: title; margin-bottom: 0; }
.checkout > p.muted, .checkout > .notice, .checkout > .review, .checkout > .card.checkout-form { grid-column: 1; }
.checkout > .checkout-summary { grid-column: 2; grid-row: 3 / span 4; position: sticky; top: 90px; }
.order-page { display: block; max-width: 760px; }
.order-page .card { margin-bottom: 16px; }
.cart-line { margin-bottom: 16px; padding: 18px; }
.cart-line-main { display: flex; gap: 16px; align-items: flex-start; }
.cart-thumb img { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; background: var(--petal); }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-info h3 { font-size: 1.35rem; margin-bottom: .1em; }
.cart-line-info h3 a { color: var(--ink); text-decoration: none; }
.cart-line-price { font-weight: 500; white-space: nowrap; }
.qty-form { display: flex; gap: 12px; align-items: end; margin-top: 8px; flex-wrap: wrap; }
.cart-addon { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0 0 112px; }
.cart-addon > div:first-child { flex: 1; }
.addon-text-form { display: flex; gap: 8px; margin-top: 6px; }
.addon-text-form input { padding: .4em .6em; font-size: .88rem; }
.extras { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.extras summary { cursor: pointer; font-weight: 500; }
.summary h3 { margin-bottom: 12px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.sum-row.total { font-weight: 600; font-size: 1.1rem; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.summary hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; flex-wrap: wrap; font-size: .82rem; }
.steps li { padding: .35em .9em; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--sage); }
.steps li.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.steps li.done a { color: var(--ink); }
.checkout-form h3 { margin-top: 22px; }
.checkout-form h3:first-of-type { margin-top: 0; }
.checkout-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.address-field { position: relative; }
.suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.suggestions li { padding: .6em .8em; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.suggestions li:hover, .suggestions li:focus { background: var(--cream); outline: none; }
.delivery-options { display: grid; gap: 10px; }
.delivery-option { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; font-weight: 400; margin: 0; }
.delivery-option:has(input:checked) { border-color: var(--rose); background: #fffafa; box-shadow: 0 0 0 1px var(--rose); }
.delivery-option input[type=radio] { grid-row: 1 / span 3; margin-top: 4px; accent-color: var(--rose); width: 18px; height: 18px; }
.delivery-option > span { grid-column: 2; }
.opt-head { display: flex; justify-content: space-between; gap: 10px; }
.opt-price .free { color: var(--sage); font-weight: 600; }
.schedule { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.schedule select { width: auto; flex: 1; min-width: 140px; padding: .5em .6em; }
.review { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin-bottom: 16px; font-size: .95rem; }
.wallets { display: grid; gap: 10px; margin-bottom: 12px; }
#google-pay { min-height: 0; }
.card-container { min-height: 90px; }
.thanks { text-align: center; background: var(--petal); }
.order-status { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.timeline li { padding: 10px 0 0; border-top: 4px solid var(--line); display: flex; flex-direction: column; font-size: .88rem; }
.timeline li.done { border-top-color: var(--rose); }

@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .checkout { grid-template-columns: 1fr; grid-template-areas: none; }
  .checkout > * { grid-column: 1 !important; grid-row: auto !important; }
  .checkout > .checkout-summary { position: static; order: 10; }
  .cart-addon { padding-left: 0; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- admin: orders & delivery ---------- */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.type-grid .is-off { opacity: .65; }
.facts-list { padding-left: 18px; margin: 8px 0 14px; }
.facts-list li { margin: 3px 0; }
.inline-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.inline-row input { width: auto; padding: .45em .6em; }
.inline-row .err { flex-basis: 100%; }
.w-sm { max-width: 110px; }
.status-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; padding: 16px 20px; }
.status-bar form { margin: 0; }
.history { list-style: none; padding: 0; margin: 0; }
.history li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.status-paid { background: var(--blush); }
.status-preparing { background: #F3E4C8; }
.status-out_for_delivery { background: #D9E6F2; }
.status-delivered { background: var(--ok-bg); }
.status-delivery_failed, .status-cancelled { background: var(--err-bg); color: var(--danger); }
.status-pending_payment, .status-refunded { background: #e6e3de; }
.stat-link { color: var(--ink); text-decoration: none; }
.stat-link:hover { color: var(--ink); box-shadow: 0 0 0 2px var(--blush); }
.stat-link.warn .n { color: var(--danger); }

::placeholder { color: #A4ABA2; opacity: 1; }

/* Order status colours (back office → Order statuses) */
.tone-rose { background: var(--blush); }
.tone-sage { background: #DDE7D8; }
.tone-ink { background: #3E4A3D; color: #fff; }
.tone-gold { background: #F3E4C8; }
.tone-blue { background: #D9E6F2; }
.tone-red { background: var(--err-bg); color: var(--danger); }
.tone-grey { background: #e6e3de; }
.status-change { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.status-change select, .status-change input[type=text] { width: auto; min-width: 150px; padding: 6px 10px; }
.status-change .check { margin: 0; }

/* Card or Zelle (pay step), Zelle instructions (pay step + order page) */
.pay-methods { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .8rem; }
.zelle-box { background: #FCEFEC; border-left: 4px solid var(--rose); }
.zelle-box p { margin: .45em 0 0; }
.checkout > .zelle-box { grid-column: 1 / -1; }