/* ============================================================
   SNACK PAPER — Track Order (page-track-order.php)
   ============================================================ */

/* Mobile: drop the small "Track Order" eyebrow tag and shrink the hero so the big wordmark
   and the actual form sit much closer to the top instead of floating mid-screen. Now that the
   "Track with your phone or email" tagline is also hidden on mobile, the hero has even less
   content — cut the min-height and top/bottom padding further so the black hero doesn't leave
   a big empty gap above the form, and the whole card (through the Send OTP button) fits in the
   first screen on load without scrolling. Desktop keeps the original taller hero with the
   eyebrow and tagline, since that was already fine there. */
.tr-hero{min-height:16vh;padding:16px 20px 12px}
.tr-hero .ap-hero-top{display:none}
/* Wordmark sized down specifically here (vs. the shared 20vw/108px cap) so "TRACK ORDER"'s two
   lines don't dictate the hero's height now that it's meant to be short. */
.tr-hero .ap-wordmark{font-size:clamp(46px,15vw,88px)}
@media (min-width:1024px){
  .tr-hero{min-height:20vh;padding:24px 20px 16px}
  .tr-hero .ap-hero-top{display:none}
  .tr-hero .ap-wordmark{font-size:clamp(60px,7vw,100px)}
  .tr-hero .ap-hero-mid{justify-content:center;text-align:center}
}

.tr-eyebrow{font-size:9px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gr);font-family:var(--sans)}
/* .tr-wrap no longer forces a min-height on mobile — that was adding blank space below a form
   that's already short, pushing the Send OTP button further down than it needed to be. Kept
   only from desktop up, where the taller hero means the form benefits from some breathing room. */
.tr-wrap{background:var(--cr);position:relative;overflow:hidden;padding:18px 18px 30px}
.tr-card{background:var(--wh);border:1px solid var(--bd);border-radius:14px;padding:18px 18px;max-width:440px;margin:0 auto}
.tr-h{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--k);line-height:1.12;margin:5px 0 3px}
.tr-sub{font-size:11.5px;color:var(--gr);line-height:1.5;font-family:var(--sans);margin-bottom:14px}
.tr-seg{display:flex;gap:6px;background:var(--cr);border:1px solid var(--bd);border-radius:10px;padding:4px;margin-bottom:12px}
.tr-seg-btn{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--gr);padding:9px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.tr-seg-btn svg{width:15px;height:15px;fill:currentColor}
.tr-seg-btn.on{background:var(--k);color:#fff}
.tr-label{display:block;font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gr);font-family:var(--sans);margin-bottom:6px}
.tr-input{width:100%;background:var(--cr);border:1px solid var(--bd);border-radius:9px;padding:12px 14px;color:var(--k);font-size:14px;font-family:var(--sans);outline:none;box-sizing:border-box}
.tr-input:focus{border-color:var(--k)}
.tr-input::placeholder{color:#a9a39a}
@media (min-width:1024px){
  .tr-wrap{min-height:0;padding:14px 18px 24px}
  .tr-card{padding:18px 20px;max-width:400px}
  .tr-h{font-size:20px;margin:5px 0 3px}
  .tr-sub{font-size:11.5px;line-height:1.5;margin-bottom:14px}
  .tr-seg{margin-bottom:12px}
  .tr-seg-btn{padding:9px}
  .tr-label{margin-bottom:6px}
  .tr-input{padding:12px 14px}
}
.tr-btn{width:100%;background:var(--k);color:var(--cr);border:none;font-family:var(--sans);font-size:12px;font-weight:800;padding:13px;letter-spacing:.1em;text-transform:uppercase;border-radius:9px;cursor:pointer;margin-top:12px}
.tr-btn:disabled{opacity:.45;cursor:default}
@media (min-width:1024px){
  .tr-btn{padding:14px;margin-top:12px}
}
.tr-err{font-size:11px;color:#C0392B;font-weight:600;margin-top:9px;font-family:var(--sans);display:none}
.tr-meta{font-size:11px;color:var(--gr);line-height:1.6;font-family:var(--sans);margin-top:13px;text-align:center}
.tr-link{color:var(--k);font-weight:700;text-decoration:underline;cursor:pointer}
.tr-link.dim{color:var(--gr)}
.tr-otp{display:flex;gap:8px;justify-content:space-between;margin-top:4px}
.tr-otp-box{width:100%;aspect-ratio:1 / 1.15;text-align:center;background:var(--cr);border:1px solid var(--bd);border-radius:9px;color:var(--k);font-size:20px;font-weight:700;font-family:var(--serif);outline:none;min-width:0}
.tr-otp-box:focus{border-color:var(--k)}
.tr-sent{font-size:12.5px;color:var(--k);font-weight:600;margin-bottom:16px;line-height:1.5;font-family:var(--sans)}
.tr-sent b{font-weight:800}
.tr-spin{width:34px;height:34px;border:3px solid var(--bd);border-top-color:var(--k);border-radius:50%;margin:2px auto 16px;animation:trSpin .8s linear infinite}

/* Order results list */
.tr-orders{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.tr-order{border:1px solid var(--bd);border-radius:8px;padding:14px 16px;display:block;text-decoration:none;color:inherit;transition:border-color .15s}
.tr-order:hover{border-color:var(--k)}
.tr-order-photos{display:flex;gap:6px;margin-bottom:10px}
.tr-order-thumb{width:38px;height:38px;border-radius:5px;object-fit:cover;border:1px solid var(--bd)}
.tr-order-view{font-size:10.5px;font-weight:700;color:var(--k);margin-top:10px;text-align:right}

/* Order card — now a clickable expand trigger instead of a link, so "View order details"
   opens details inline right there rather than navigating anywhere. Shared by Track Order's
   guest results and My Account's Orders tab (both load this stylesheet). */
.tr-order{cursor:pointer}
.tr-order.expanded .tr-order-view{display:none}
.tr-order-details{margin-top:14px;padding-top:14px;border-top:1px dashed var(--bd)}
.tr-order-details .tr-od-close{margin-top:4px}
.tr-od-loading{font-size:11.5px;color:var(--gr);padding:6px 0}
.tr-od-sec{margin-bottom:14px}
.tr-od-hd{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gr);margin-bottom:8px;font-family:var(--sans)}
.tr-od-item{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tr-od-item img{width:34px;height:34px;border-radius:5px;object-fit:cover;border:1px solid var(--bd);flex-shrink:0}
.tr-od-item-info{flex:1;min-width:0}
.tr-od-item-name{font-size:11.5px;color:var(--k);font-weight:600}
.tr-od-item-qty{font-size:10px;color:var(--gr)}
.tr-od-item-price{font-size:11.5px;font-weight:700;color:var(--k)}
.tr-od-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--k);padding:4px 0}
.tr-od-row.total{font-weight:800;border-top:1px solid var(--bd);margin-top:4px;padding-top:8px}
.tr-od-addr{font-size:11.5px;color:var(--k);line-height:1.6}
.tr-od-note{font-size:11px;color:var(--k);line-height:1.6;margin-bottom:6px}
.tr-order-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tr-order-num{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--k)}
.tr-order-status{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--cr);color:var(--gr)}
.tr-status-completed,.tr-status-processing,.tr-status-delivered{background:#e4f3e6;color:#1e7a34}
.tr-status-pending,.tr-status-on-hold,.tr-status-packed{background:#fdf1d6;color:#8a6100}
.tr-status-shipped{background:#dde9fb;color:#1e4f9c}
.tr-status-cancelled,.tr-status-failed,.tr-status-refunded,.tr-status-returned-seller{background:#fbe4e4;color:#a32424}
.tr-order-items{font-size:11.5px;color:var(--gr);line-height:1.5;margin-bottom:10px}
.tr-order-bottom{display:flex;align-items:center;justify-content:space-between;font-size:11.5px}
.tr-order-date{color:var(--gr)}
.tr-order-total{font-weight:700;color:var(--k)}
@keyframes trSpin{to{transform:rotate(360deg)}}