/* =========================================================
   Additions for: live product cards (out-of-stock state) and
   the delivery-boy order accept/reject card. Uses the same
   --card / --line / --radius / --green-dim / --danger / --yellow-deep
   variables already defined in style.css's :root, so it drops
   in without a separate design system.
========================================================= */

.prod-card.out-of-stock { opacity: .55; }
.prod-card.out-of-stock .prod-add { cursor: not-allowed; background: var(--card-hi); }
.oos-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 9.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 4px;
}
.prod-empty {
  grid-column: 1 / -1; text-align: center; padding: 30px 10px;
  color: var(--muted, #8a8578); font-size: 13.5px;
}

/* ---- Delivery boy: incoming order offer card ---- */
.order-offer-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  margin-bottom: 10px; box-shadow: 0 2px 10px rgba(43,36,16,.08);
  animation: offerSlideIn .25s ease-out;
}
@keyframes offerSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.offer-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.offer-card-badge {
  background: var(--yellow-deep); color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 4px;
}
.offer-card-code { font-weight: 700; font-size: 13px; }
.offer-card-address { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.offer-card-total { font-size: 12.5px; color: var(--muted, #8a8578); margin-bottom: 10px; }
.offer-card-actions { display: flex; gap: 8px; }
.offer-reject-btn, .offer-accept-btn {
  flex: 1; padding: 10px; border-radius: 6px; border: none;
  font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.offer-reject-btn { background: var(--card-hi); color: var(--danger); }
.offer-accept-btn { background: var(--green-dim); color: #fff; }
.offer-reject-btn:disabled, .offer-accept-btn:disabled { opacity: .6; cursor: not-allowed; }
.offer-card-status {
  text-align: center; font-weight: 700; font-size: 13px;
  padding: 8px; border-radius: 6px;
}
.offer-card-status.accepted { background: #e8f5ec; color: var(--green-dim); }
.offer-card-status.failed { background: #fdeceA; color: var(--danger); }

/* ---- Live GPS location map (inside the "Update delivery location" popup) ----
   Google Maps/Zomato-style live pin: shows the user's exact real-time
   position, appearing within 1-5s of opening the popup and refining live
   after that. Uses the same --card/--line/--green/--muted/--ink tokens as
   the rest of the app. */
.live-loc-map-wrap {
  position: relative; width: 100%; height: 150px;
  border-radius: 10px; overflow: hidden; margin: 12px 0;
  background: var(--card-hi); border: 1px solid var(--line);
}
.live-loc-map { width: 100%; height: 100%; }
.live-loc-map-overlay {
  position: absolute; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px; text-align: center;
  background: rgba(255,255,255,.92);
  transition: opacity .2s ease;
}
.live-loc-map-overlay.hidden { opacity: 0; pointer-events: none; }
.live-loc-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--green);
  animation: liveLocSpin .7s linear infinite;
}
@keyframes liveLocSpin { to { transform: rotate(360deg); } }
.live-loc-map-overlay span { font-size: 12px; color: var(--muted); font-weight: 600; max-width: 240px; }
.live-loc-enable-btn {
  margin-top: 2px; background: var(--green); color: #fff; border: none;
  font-weight: 800; font-size: 12.5px; padding: 8px 16px; border-radius: 20px;
  cursor: pointer;
}
.live-loc-enable-btn:active { transform: scale(.97); }
.live-loc-accuracy {
  position: absolute; top: 8px; right: 8px; z-index: 400;
  font-size: 10.5px; font-weight: 800;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.live-loc-accuracy.good { background: var(--green-light); color: var(--green-dim); }
.live-loc-accuracy.ok   { background: #fff6e0; color: #a67a00; }
.live-loc-accuracy.poor { background: #fdeceA; color: var(--danger); }

/* The exact GPS dot itself: a Google-Maps-style pulsing blue dot with a
   white ring, plus a translucent accuracy-radius circle drawn by Leaflet
   (see js/live-location.js) sized in real meters to the current GPS
   accuracy - shrinks live as the fix improves. */
.live-loc-dot-icon { position: relative; width: 18px; height: 18px; }
.live-loc-dot-icon .pulse {
  position: absolute; inset: -9px; border-radius: 50%;
  background: rgba(66,133,244,.35);
  animation: liveLocPulse 1.8s ease-out infinite;
}
.live-loc-dot-icon .core {
  position: absolute; inset: 3px; border-radius: 50%;
  background: #4285F4; border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.35);
}
@keyframes liveLocPulse {
  0%   { transform: scale(.4); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}