/* Light Of Nature Feasts — Lake Charles delivery-quota notice, badge & popover.
   Palette matches styles.css tokens (--sage, --gold, --terracotta, --ink). */

/* ---------- Top-bar badge (left of the search) ---------- */
.lc-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--terracotta-dp);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 11px 7px 9px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(216, 148, 106, 0.4);
  line-height: 1;
}
.lc-badge .lc-badge-icon { font-size: 15px; }
.lc-badge .lc-badge-count {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lc-badge.is-reached {
  background: var(--sage-dark);
  box-shadow: 0 3px 8px rgba(116, 145, 92, 0.45);
}

/* Pop-in when the notice collapses into the badge (or on first reveal). */
@keyframes lcBadgePop {
  0%   { transform: scale(0);   opacity: 0; }
  60%  { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.lc-badge.lc-pop { animation: lcBadgePop .42s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ---------- Click popover under the badge ---------- */
.lc-pop-card {
  position: fixed;
  z-index: 60;
  width: min(280px, calc(100vw - 24px));
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(91, 83, 64, 0.26);
  padding: 16px 16px 15px;
  transform-origin: top left;
  animation: lcPopIn .18s ease both;
}
@keyframes lcPopIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.lc-pop-card::before {
  content: "";
  position: absolute; top: -7px; left: 22px;
  width: 14px; height: 14px; background: var(--white);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(91, 83, 64, 0.06);
}
.lc-pop-title { margin: 0 0 6px; font-size: 15px; font-weight: 900; color: var(--ink); }
.lc-pop-body { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); line-height: 1.45; }
.lc-pop-body strong { color: var(--terracotta-dp); }
.lc-pop-card.is-reached .lc-pop-body strong { color: var(--sage-dark); }

/* ---------- Notice modal (shown on login, once per kitchen session) ---------- */
.lc-modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(60, 54, 42, 0.5);
  opacity: 0;
  transition: opacity .32s ease;
}
.lc-modal-backdrop.show { opacity: 1; }

.lc-modal {
  width: 100%; max-width: 360px;
  background: var(--white);
  border-radius: 26px 30px 24px 28px;
  box-shadow: 0 24px 60px rgba(91, 83, 64, 0.34);
  padding: 26px 24px 24px;
  text-align: center;
  transform: translateY(16px) scale(.96);
  opacity: 0;
  transition: transform .34s cubic-bezier(.34, 1.3, .5, 1), opacity .34s ease;
}
.lc-modal-backdrop.show .lc-modal { transform: none; opacity: 1; }

/* Collapse-into-badge phase: a quick, eased shrink toward the badge. */
.lc-modal.lc-collapsing {
  transition: transform .6s cubic-bezier(.5, 0, .3, 1), opacity .55s ease .08s;
}

.lc-modal-emblem {
  width: 64px; height: 64px; margin: 0 auto 12px;
  display: grid; place-items: center;
  font-size: 32px;
  background: rgba(216, 148, 106, 0.16);
  border-radius: 50%;
}
.lc-modal-title {
  margin: 0 0 10px;
  font-size: 24px; font-weight: 900; letter-spacing: .3px;
  color: var(--terracotta-dp);
}
.lc-modal-body {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink);
}
.lc-modal-body strong { color: var(--terracotta-dp); }

/* Progress toward the quota, inside the modal. */
.lc-progress { margin: 0 0 20px; }
.lc-progress-track {
  height: 12px; border-radius: var(--radius-pill);
  background: rgba(143, 168, 117, 0.18);
  overflow: hidden;
}
.lc-progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--terracotta), var(--gold-dark));
  width: 0%;
  transition: width .5s ease;
}
.lc-progress-label {
  margin: 8px 0 0; font-size: 13.5px; font-weight: 800; color: var(--ink-soft);
}
.lc-progress-label strong { color: var(--ink); }
.lc-progress.is-reached .lc-progress-fill { background: linear-gradient(90deg, var(--sage), var(--sage-dark)); }
.lc-progress.is-reached .lc-progress-label strong { color: var(--sage-dark); }

.lc-modal-ok {
  width: 100%;
  background: var(--sage);
  color: var(--white);
  font-weight: 900; font-size: 16px;
  border: none; border-radius: var(--radius-pill);
  padding: 13px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(143, 168, 117, 0.4);
}
.lc-modal-ok:active { background: var(--sage-dark); }

@media (prefers-reduced-motion: reduce) {
  .lc-badge.lc-pop,
  .lc-modal, .lc-modal.lc-collapsing, .lc-modal-backdrop,
  .lc-pop-card, .lc-progress-fill { animation: none; transition: none; }
}