/* Leafy — an order, wherever it is shown.
 *
 * order/order-details.php is one template used twice: straight after paying,
 * and later under My Account → Orders. These rules used to live in checkout.css,
 * which only loads on /checkout/, so the second of those arrived with no styles
 * at all — the recap fell back to nested bullets and raw "For:/Base:" labels.
 * They live here now and load in both places (functions.php).
 *
 * Anything that belongs to the celebration rather than the order — the veggie
 * rain, the badge, the hero — stays in checkout.css, scoped to the
 * order-received body class.
 */

/* ---------------- the order header (My Account → view order) --------------- */

.lo-view-head{
  display:flex; align-items:center; gap:var(--s4, 14px); flex-wrap:wrap;
  margin:0 0 var(--s5, 18px);
}
.lo-view-when{ font:400 13.5px var(--font-b); color:var(--ink2); }
.lo-view-when b{ font-weight:600; color:var(--ink); }

/* Status as a pill rather than a word in a sentence: it is the one thing
   someone opens this page to check, so it should be findable at a glance. */
.lo-status{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 10px; border-radius:999px;
  font:600 12.5px var(--font-b); letter-spacing:.01em;
  border:1px solid transparent;
}
.lo-status-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* In progress — the usual state, so it reads calm rather than alarming. */
.lo-status--live{ background:var(--butter-c, #FBF0D8); color:var(--butter-d); border-color:#EBD9AC; }
/* Arrived. */
.lo-status--done{ background:var(--sage-c1, #EAF2E4); color:var(--sage-d, #3F5236); border-color:#CFE0C6; }
/* Went wrong — muted red, not a siren. */
.lo-status--stop{ background:#FBEDEC; color:#963B35; border-color:#F0D6D3; }

/* The live pill breathes, so "we have it" reads as something still happening. */
.lo-status--live .lo-status-dot{ animation:loStatusPulse 2.4s ease-in-out infinite; }
@keyframes loStatusPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){
  .lo-status--live .lo-status-dot{ animation:none; }
}

/* ---------------- "Your order" recap ---------------- */

.lo-recap-card{
  background:var(--white, #fff); border:1px solid var(--hair, #E7E3D8); border-radius:22px;
  padding:2px var(--s6, 22px) var(--s5, 18px);
  box-shadow:0 1px 2px rgba(63,82,54,.03), 0 22px 44px -34px rgba(63,82,54,.5);
}
/* The rise-in belongs to the moment of paying, not to a history page. */
body.woocommerce-order-received .lo-recap{ position:relative; z-index:2; max-width:560px; margin:24px auto 0; }
body.woocommerce-order-received .lo-recap-card{ animation:loRise .55s cubic-bezier(.2,.7,.2,1) .5s backwards; }

.lo-recap-head{ display:flex; align-items:center; gap:10px; padding:16px 0 12px; border-bottom:1px solid var(--hair, #E7E3D8); }
.lo-recap-ic{ flex:none; width:32px; height:32px; border-radius:10px; background:var(--sage-c1, #EAF2E4); color:var(--sage-d, #3F5236); display:flex; align-items:center; justify-content:center; }
.lo-recap-head h2{ font:600 16.5px var(--font-d); color:var(--ink); margin:0; letter-spacing:-.01em; }
.lo-recap-count{ margin-left:auto; font:600 11px var(--font-b); letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }

.lo-recap-items{ list-style:none; margin:0; padding:0; }
.lo-recap-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--hair, #E7E3D8);
}
.lo-recap-items .lo-recap-item:last-child{ border-bottom:0; }
.lo-recap-q{
  flex:none; min-width:32px; height:26px; padding:0 8px; border-radius:8px;
  background:var(--sage-c1, #EAF2E4); color:var(--sage-d, #3F5236);
  display:inline-flex; align-items:center; justify-content:center; font:700 13px var(--font-b);
}
.lo-recap-q small{ font-weight:600; opacity:.65; margin-left:1px; }
.lo-recap-body{ min-width:0; }
.lo-recap-body > b{ display:block; font:600 14.5px/1.35 var(--font-b); color:var(--ink); }
.lo-recap-price{ font:600 14px var(--font-b); color:var(--ink); white-space:nowrap; text-align:right; }
/* ---- the credit code ----
 *
 * leafy_gc_show_code() hangs this off woocommerce_order_item_meta_end, which
 * fires on EVERY view of an order — after paying, and again months later in My
 * Account when someone comes back to look up their Meal Card code. The rules
 * used to live in checkout.css, which only loads on /checkout/, so in My
 * Account the label, the code and the balance arrived as three unstyled spans
 * run together on one line: "Your credit codeLEAFY-XXXX-XXXX₹871 to spend".
 * Exactly the mistake the recap above was moved here to fix, one block later. */
.leafy-gc-code{
  display:flex; flex-direction:column; gap:3px;
  margin:var(--s3, 12px) 0 0; padding:var(--s3, 12px) var(--s4, 16px);
  background:var(--sage-c1); border:1px dashed var(--sage2); border-radius:12px;
}
.leafy-gc-code-label{
  font:600 10px var(--font-b); letter-spacing:.18em; text-transform:uppercase; color:var(--sage-d);
}
.leafy-gc-code b{
  font:700 19px/1.2 var(--font-b); letter-spacing:.09em; color:var(--ink);
}
.leafy-gc-code-note{ font:400 12px/1.5 var(--font-b); color:var(--ink2); }
.lo-recap-body .leafy-gc-code{ margin:9px 0 0; }

/* Item extras — the date, base and options a line carries.
 *
 * WooCommerce prints these as a <ul> of "Label: value" pairs, which is what the
 * bullets in the unstyled view were. As chips they read as facts about the dish
 * instead of a second list competing with the order itself. */
.lo-recap-xmeta{ display:block; margin-top:6px; font:400 12.5px/1.5 var(--font-b); color:var(--ink3); }
.lo-recap-xmeta .wc-item-meta{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.lo-recap-xmeta .wc-item-meta li{
  margin:0; display:inline-flex; align-items:baseline; gap:5px;
  background:var(--cream2, #F6F3EA); border:1px solid var(--hair, #E7E3D8);
  border-radius:8px; padding:3px 9px;
}
.lo-recap-xmeta .wc-item-meta p{ margin:0; display:inline; }
.lo-recap-xmeta .wc-item-meta strong{
  font:600 10.5px var(--font-b); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink3);
}
/* WooCommerce writes the colon into the label; a chip does not want it. */
.lo-recap-xmeta .wc-item-meta strong::after{ content:none; }
.lo-recap-xmeta .wc-item-meta .wc-item-meta-label + p,
.lo-recap-xmeta .wc-item-meta p{ color:var(--ink2); font-weight:500; }

.lo-recap-totals{ margin:14px 0 0; }
.lo-recap-trow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; font:400 13.5px var(--font-b); color:var(--ink2); }
.lo-recap-trow dt{ margin:0; }
.lo-recap-trow dd{ margin:0; color:var(--ink); }
.lo-recap-trow.is-grand{ margin-top:8px; padding-top:14px; border-top:1px solid var(--hair, #E7E3D8); }
.lo-recap-trow.is-grand dt{ font:600 14px var(--font-b); color:var(--ink); }
.lo-recap-trow.is-grand dd{ font:600 22px var(--font-d); color:var(--ink); letter-spacing:-.01em; }

.lo-recap-note{ display:flex; gap:8px; margin:14px 0 0; font:400 13px/1.5 var(--font-b); color:var(--ink2); }
.lo-recap-note span{ flex:none; font:600 10.5px var(--font-b); letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); padding-top:2px; }

/* ---------------- what to do next ---------------- */

.lo-actions{ display:flex; align-items:center; justify-content:center; gap:var(--s5, 18px); flex-wrap:wrap; margin-top:26px; }
.lo-btn{
  display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 26px; border-radius:999px;
  background:var(--sage, #5C7A50); color:var(--cream, #FBF8EF); font:700 14.5px var(--font-b); border:1.5px solid transparent;
  transition:background .18s ease, transform .18s ease;
}
.lo-btn:hover{ background:var(--sage-d, #3F5236); color:var(--cream, #FBF8EF); transform:translateY(-1px); }
.lo-link{ font:600 14px var(--font-b); color:var(--ink2); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line2); }
.lo-link:hover{ color:var(--sage-d, #3F5236); text-decoration-color:var(--sage, #5C7A50); }

.lo-sign{ font:500 17px var(--font-d); font-style:italic; color:var(--ink2); margin-top:28px; }
body.woocommerce-order-received .lo-outro{ position:relative; z-index:2; text-align:center; }
body.woocommerce-order-received .lo-outro .lo-sign{ margin-top:22px; }

/* On an account page the outro is a quiet footer, not a curtain call. */
body:not(.woocommerce-order-received) .lo-outro{ margin-top:var(--s5, 18px); }
body:not(.woocommerce-order-received) .lo-outro .lo-actions{ justify-content:flex-start; }
body:not(.woocommerce-order-received) .lo-sign{ display:none; }

@media (max-width:600px){
  .lo-recap-card{ padding:2px var(--s5, 18px) var(--s4, 14px); border-radius:18px; }
  .lo-recap-item{ gap:10px; }
  .lo-actions{ gap:var(--s4, 14px); }
  .lo-btn{ height:44px; padding:0 20px; }
}