/* ════════════════════════════════════════════════════════════════════════════
   temu-sidebar.css  —  Temu-inspired global fixed cart sidebar (right edge)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar container ──────────────────────────────────────────────────── */
.temu-sb {
  display: none; /* hidden on mobile; shown via media query */
}

@media (min-width: 1024px) {
  :root {
    /* Wider now that the rail is collapsed by default: it is opened
       deliberately rather than being permanent furniture, so it can afford the
       room. At 255px product names truncated after two lines and variant
       strings wrapped onto a second line of their own. */
    --temu-sidebar-width: clamp(280px, 16vw, 320px);
    --temu-sidebar-top: 80px;
  }

  .temu-sb {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: var(--temu-sidebar-top);
    width: var(--temu-sidebar-width);
    /* Height follows the content instead of always filling the viewport. Pinned
       at 100dvh, a cart holding one item left ~700px of white between the item
       and the action buttons — and the same void appeared on an empty cart. The
       max-height still caps a long cart, and .temu-sb-items scrolls inside it. */
    height: auto;
    max-height: calc(100dvh - var(--temu-sidebar-top));
    /* The store header is z-index 400. Keep the cart beneath it so navigation
       and its menus are always fully usable. */
    z-index: 350;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
    font-family: 'Poppins', sans-serif;
    border-left: 1px solid #eee;
    transition:
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      bottom 0.1s ease-out,
      height 0.1s ease-out;
  }

  .temu-sb.temu-sb-collapsed,
  html.temu-sb-collapsed-init .temu-sb {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }

  /* layout_store.njk declares main at width: 100%. A margin alone therefore
     overflows rather than reserving space. Constrain storefront content and its
     footer to the remaining viewport width so neither can sit under the cart.
     When collapsed, main smoothly expands back to 100% width. */
  body:not(.hide-temu-sb):not(.temu-sb-collapsed) > main,
  body:not(.hide-temu-sb):not(.temu-sb-collapsed) .founding-member-banner {
    width: calc(100% - var(--temu-sidebar-width)) !important;
    margin-right: var(--temu-sidebar-width) !important;
    min-width: 0;
    transition:
      width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      margin-right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.temu-sb-collapsed-init body:not(.hide-temu-sb) > main,
  html.temu-sb-collapsed-init body:not(.hide-temu-sb) .founding-member-banner,
  body.temu-sb-collapsed > main,
  body.temu-sb-collapsed .founding-member-banner {
    width: 100% !important;
    margin-right: 0 !important;
    transition:
      width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      margin-right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ── Header (orange gradient) ───────────────────────────────────────────── */
.temu-sb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 12px;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  flex-shrink: 0;
}
.temu-sb-header i {
  font-size: 1rem;
}
.temu-sb-header .temu-sb-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Was 1.15rem/800 — the loudest element in a 255px-wide panel, which read badly
   when the figure it was shouting was $0.00. Still the emphasis in the header,
   just no longer competing with the Checkout button for the eye. */
.temu-sb-header .temu-sb-total {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Empty cart: there is no subtotal worth stating, so the header reads "Your
   cart" and the $0.00 is dropped rather than displayed as a zero. */
.temu-sb.is-empty .temu-sb-header .temu-sb-total {
  display: none;
}

/* Collapse Toggle Button in Header */
.temu-sb-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 6px;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.temu-sb-toggle:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

/* Floating Expand Pill when Collapsed */
.temu-sb-expand-pill {
  display: none;
}

@media (min-width: 1024px) {
  body.temu-sb-collapsed:not(.hide-temu-sb) .temu-sb-expand-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 0;
    top: 140px;
    z-index: 360;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    border: none;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 10px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: -4px 4px 16px rgba(249, 115, 22, 0.35);
    cursor: pointer;
    transition:
      transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.25s ease;
    animation: slideInTab 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.temu-sb-collapsed:not(.hide-temu-sb) .temu-sb-expand-pill:hover {
    transform: translateX(-4px);
    box-shadow: -6px 6px 20px rgba(249, 115, 22, 0.5);
  }
}

@keyframes slideInTab {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pillPulseAnimation {
  0% {
    transform: scale(1);
    box-shadow: -4px 4px 16px rgba(249, 115, 22, 0.35);
  }
  50% {
    transform: scale(1.15);
    box-shadow: -6px 6px 24px rgba(249, 115, 22, 0.7);
  }
  100% {
    transform: scale(1);
    box-shadow: -4px 4px 16px rgba(249, 115, 22, 0.35);
  }
}

.temu-sb-expand-pill.pulse {
  animation: pillPulseAnimation 0.5s ease-out;
}

/* ── Shipping note ──────────────────────────────────────────────────────── */
.temu-sb-ship {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f0fdf4;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.72rem;
  color: #166534;
  font-weight: 600;
  flex-shrink: 0;
}
.temu-sb-ship i {
  font-size: 0.82rem;
  color: #22c55e;
}

/* ── Item list (scrollable) ─────────────────────────────────────────────── */
.temu-sb-items {
  /* Not `flex: 1` — that shorthand sets flex-basis to 0, so with the panel now
     height:auto this would contribute nothing to the panel's height and then
     have no free space to grow into, collapsing the list to zero. `0 1 auto`
     sizes it to its items and lets it shrink (and scroll) at the max-height. */
  flex: 0 1 auto;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.temu-sb-items::-webkit-scrollbar {
  width: 5px;
}
.temu-sb-items::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.temu-sb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* This block now sets the panel's height when the cart is empty, rather than
     being centred inside a viewport-tall void — so it no longer needs the
     padding that was there to fill that space. */
  padding: 28px 20px;
  text-align: center;
  color: #94a3b8;
}
.temu-sb-empty i {
  font-size: 2rem;
  color: #cbd5e1;
}
.temu-sb-empty span {
  font-size: 0.82rem;
  font-weight: 500;
}

/* ── Item card ──────────────────────────────────────────────────────────── */
.temu-sb-card {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.temu-sb-card:hover {
  background: #fafafa;
}
.temu-sb-card-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.temu-sb-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.temu-sb-card-img .temu-sb-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.temu-sb-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.temu-sb-card-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.temu-sb-card-variant {
  font-size: 0.62rem;
  color: #94a3b8;
  font-weight: 500;
}
.temu-sb-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.temu-sb-card-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ea580c;
}
.temu-sb-card-qty {
  font-size: 0.65rem;
  color: #64748b;
  font-weight: 600;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Remove (bin) button ─────────────────────────────────────────────────
   A real third column of the card row, centred against the thumbnail, so it
   lines up with the product instead of floating over the title. It was
   absolutely positioned in the top-right corner with a transparent
   background and a mid-grey icon, which on the dark drawer left it sitting
   on top of the two-line product name and almost invisible. A destructive
   action still has to be found before it can be avoided. */
.temu-sb-card-remove {
  align-self: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.temu-sb-card-remove:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.temu-sb-card-remove:active {
  transform: scale(0.94);
}
.temu-sb-card-remove:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* The row leaves on the click and the request settles behind it. Collapsing
   the height as well as fading keeps the rows below from jumping. */
.temu-sb-card {
  max-height: 240px;
}
.temu-sb-card.is-removing {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  opacity: 0;
  transform: translateX(16px);
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.22s ease,
    padding 0.22s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .temu-sb-card.is-removing {
    transition: none;
  }
}

/* ── Select all / count header ──────────────────────────────────────────── */
.temu-sb-select-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}
.temu-sb-select-header i {
  color: #22c55e;
  font-size: 0.78rem;
}

/* ── Action buttons (sticky bottom) ─────────────────────────────────────── */
.temu-sb-actions {
  padding: 12px 14px 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
}
.temu-sb-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition:
    filter 0.15s,
    transform 0.1s;
  border: none;
  cursor: pointer;
}
.temu-sb-checkout:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.temu-sb-checkout:active {
  transform: translateY(0);
}
/* Empty cart: greyed out, and the hover lift/brighten suppressed so it does not
   still feel pressable. JS also strips the href, so this is appearance only. */
.temu-sb-checkout.is-disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  pointer-events: none;
}
.temu-sb-checkout.is-disabled:hover {
  filter: none;
  transform: none;
}
.temu-sb-gocart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  text-decoration: none;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;
  cursor: pointer;
}
.temu-sb-gocart:hover {
  border-color: #f97316;
  background: #fff7ed;
  color: #ea580c;
}

/* ── Pulse animation on add ─────────────────────────────────────────────── */
@keyframes temuSbPulse {
  0% {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      -4px 0 24px rgba(249, 115, 22, 0.35),
      0 0 0 4px rgba(249, 115, 22, 0.12);
  }
  100% {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  }
}
.temu-sb.pulse {
  animation: temuSbPulse 0.6s ease;
}

/* ── New-item highlight ─────────────────────────────────────────────────── */
@keyframes temuCardFlash {
  0% {
    background: #fff7ed;
  }
  100% {
    background: transparent;
  }
}
.temu-sb-card.just-added {
  animation: temuCardFlash 1.2s ease;
}

/* ── Dark Mode Overrides ────────────────────────────────────────────────── */
[data-theme='dark'] .temu-sb {
  background: var(--store-card-bg, #182238) !important;
  border-left-color: var(--store-border, #263350) !important;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.45) !important;
  color: var(--store-fg, #f8fafc) !important;
}
[data-theme='dark'] .temu-sb-ship {
  background: #0f291e !important;
  border-bottom-color: #164e37 !important;
  color: #6ee7b7 !important;
}
[data-theme='dark'] .temu-sb-ship i {
  color: #34d399 !important;
}
[data-theme='dark'] .temu-sb-select-header {
  border-bottom-color: #263350 !important;
  color: #cbd5e1 !important;
}
[data-theme='dark'] .temu-sb-select-header i {
  color: #34d399 !important;
}
[data-theme='dark'] .temu-sb-card {
  border-bottom-color: #263350 !important;
}
[data-theme='dark'] .temu-sb-card:hover {
  background: #1e293b !important;
}
[data-theme='dark'] .temu-sb-card-img {
  background: #0f172a !important;
  border-color: #334155 !important;
}
[data-theme='dark'] .temu-sb-card-name {
  color: #f8fafc !important;
}
[data-theme='dark'] .temu-sb-card-variant {
  color: #94a3b8 !important;
}
[data-theme='dark'] .temu-sb-card-price {
  color: #f97316 !important;
}
[data-theme='dark'] .temu-sb-card-qty {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}
[data-theme='dark'] .temu-sb-card-remove {
  background: #0f172a !important;
  border-color: #3b4a68 !important;
  color: #cbd5e1 !important;
}
[data-theme='dark'] .temu-sb-card-remove:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}
[data-theme='dark'] .temu-sb-empty {
  color: #94a3b8 !important;
}
[data-theme='dark'] .temu-sb-empty i {
  color: #475569 !important;
}
[data-theme='dark'] .temu-sb-actions {
  background: #182238 !important;
  border-top-color: #263350 !important;
}
[data-theme='dark'] .temu-sb-gocart {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
[data-theme='dark'] .temu-sb-gocart:hover {
  border-color: #f97316 !important;
  background: rgba(249, 115, 22, 0.15) !important;
  color: #f97316 !important;
}
[data-theme='dark'] .temu-sb-items {
  scrollbar-color: #334155 transparent;
}
[data-theme='dark'] .temu-sb-items::-webkit-scrollbar-thumb {
  background: #334155;
}