/* ═══════════════════════════════════════════════════════════
   RECENT PURCHASE POPUP  v1.1 — Social Proof Notification
   Desktop : fixed bottom-left card
   Mobile  : fixed top-banner (full width)
═══════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────── */
#tl-purchase-popup {
  position: fixed;
  z-index: 99999;
  pointer-events: none;

  /* Desktop — bottom-left */
  bottom: 28px;
  left:   28px;
  width:  340px;
  max-width: calc(100vw - 56px);

  /* Slide-up entrance / slide-down exit */
  opacity:   0;
  transform: translateY(18px);
  transition:
    opacity   380ms cubic-bezier(.4, 0, .2, 1),
    transform 380ms cubic-bezier(.4, 0, .2, 1);
}

.tlpp-tag {
  font-family: var(--fn-l, 'Space Grotesk', sans-serif);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--tk-mid, #888);
  margin: 0 0 4px;
  line-height: 1;
}

#tl-purchase-popup.tlpp--visible {
  opacity:   1;
  transform: translateY(0);
  pointer-events: auto;
}

#tl-purchase-popup.tlpp--hidden {
  opacity:   0;
  transform: translateY(18px);
  pointer-events: none;
}

/* ── Card shell ──────────────────────────────────────────── */
.tlpp-inner {
  position: relative;
  display:  flex;
  align-items: center;           /* vertically centre image + text */
  gap: 12px;
  padding: 12px 36px 12px 12px; /* right padding = room for close btn */
  background:    var(--tk-white, #fff);
  border:        1px solid var(--tk-border, #e8e8e8);
  border-radius: var(--rl, 14px);
  box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07);
  overflow: hidden;
}

/* Black left accent stripe */
.tlpp-inner::before {
  content:  '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background:    var(--tk-black, #0a0a0a);
  border-radius: var(--rl, 14px) 0 0 var(--rl, 14px);
}

/* ── Product image ───────────────────────────────────────── */
.tlpp-img-link {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
}

.tlpp-img-wrap {
  position:      relative;
  width:         60px;
  height:        60px;
  border-radius: var(--r, 8px);
  overflow:      hidden;
  background:    var(--tk-border, #e8e8e8);
  border:        1px solid var(--tk-border, #e8e8e8);
}

.tlpp-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 300ms ease;
}

.tlpp-img-link:hover .tlpp-img {
  transform: scale(1.06);
}

/* Green "purchased" badge on the image */
.tlpp-img-badge {
  position:      absolute;
  bottom:        4px;
  right:         4px;
  width:         18px;
  height:        18px;
  background:    #276749;        /* --tk-green */
  border-radius: 50%;
  border:        2px solid #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ── Text body ───────────────────────────────────────────── */
.tlpp-body {
  flex:      1;
  min-width: 0;
}

.tlpp-headline {
  font-family: var(--fn-b, 'Plus Jakarta Sans', sans-serif);
  font-size:   12px;
  font-weight: 500;
  color:       var(--tk-mid, #888);
  margin:      0 0 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.tlpp-customer {
  font-weight: 700;
  color:       var(--tk-black, #0a0a0a);
}

.tlpp-from,
.tlpp-location {
  color: var(--tk-mid, #888);
}

.tlpp-location {
  font-weight: 600;
}

.tlpp-product-link {
  text-decoration: none;
  display: block;
}

.tlpp-product {
  font-family:   var(--fn-b, 'Plus Jakarta Sans', sans-serif);
  font-size:     13px;
  font-weight:   700;
  color:         var(--tk-black, #0a0a0a);
  margin:        0 0 4px;
  line-height:   1.35;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  transition: color 150ms;
}

.tlpp-product-link:hover .tlpp-product {
  color: var(--tk-mid, #888);
}

.tlpp-meta {
  font-family:  var(--fn-l, 'Space Grotesk', sans-serif);
  font-size:    11px;
  font-weight:  500;
  color:        var(--tk-mid, #888);
  margin:       0;
  letter-spacing: .2px;
  display:      flex;
  align-items:  center;
  gap:          4px;
}

.tlpp-clock {
  flex-shrink: 0;
  opacity: .65;
}

/* ── Close button ────────────────────────────────────────── */
.tlpp-close {
  position:   absolute;
  top:        9px;
  right:      9px;
  width:      22px;
  height:     22px;
  border:     none;
  background: transparent;
  cursor:     pointer;
  color:      var(--tk-mid, #888);
  display:    flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  padding:    0;
  transition: background 150ms, color 150ms;
  line-height: 1;
}
.tlpp-close:hover {
  background: var(--tk-border, #e8e8e8);
  color:      var(--tk-black, #0a0a0a);
}

/* ── Progress bar ────────────────────────────────────────── */
.tlpp-progress {
  position:      absolute;
  bottom:  0; left: 0; right: 0;
  height:        3px;
  background:    var(--tk-border, #e8e8e8);
  border-radius: 0 0 var(--rl, 14px) var(--rl, 14px);
  overflow:      hidden;
}

.tlpp-progress-bar {
  height:           100%;
  width:            100%;
  background:       var(--tk-black, #0a0a0a);
  transform-origin: left;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — Full-width top-banner (≤ 767px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #tl-purchase-popup {
    bottom:     auto;
    left:       0;
    right:      0;
    top:        0;
    width:      100%;
    max-width:  100%;

    /* Slide down from top instead of up from bottom */
    transform:     translateY(-100%);
    opacity:       1;          /* opacity stays 1; slide handles reveal */
    border-radius: 0;
  }

  #tl-purchase-popup.tlpp--visible {
    transform: translateY(0);
    opacity:   1;
  }

  #tl-purchase-popup.tlpp--hidden {
    transform: translateY(-100%);
    opacity:   1;
  }

  .tlpp-inner {
    border-radius: 0;
    border-left:   none;
    border-right:  none;
    border-top:    none;
    border-bottom: 2px solid var(--tk-border, #e8e8e8);
    padding:       10px 40px 10px 12px;
    gap:           10px;
    box-shadow:    0 4px 16px rgba(0,0,0,.1);
  }

  /* No left stripe on mobile — the top-slide entry is accent enough */
  .tlpp-inner::before {
    display: none;
  }

  .tlpp-img-wrap {
    width:  48px;
    height: 48px;
  }

  .tlpp-product {
    font-size: 12.5px;
  }

  .tlpp-progress {
    border-radius: 0;
  }
}

/* ── Respect reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #tl-purchase-popup,
  .tlpp-img,
  .tlpp-progress-bar {
    transition: opacity 150ms !important;
    transform: none !important;
  }
}