/* ============================================================
   LIV International — PV Progress Banner
   File: livmkt-pv-banner.css
   Prefix: livmkt-pv-  (no collision with liv-cart-modern.css)
   Rules: no font-size declarations, self-contained
   ============================================================ */

:root {
  --livmkt-green:      #00ab54;
  --livmkt-green-dark: #008a44;
  --livmkt-green-pale: #e8f7ef;
  --livmkt-blue:       #1a4fa0;
  --livmkt-blue-pale:  #e8eef8;
  --livmkt-gold:       #c8a04a;
  --livmkt-gold-pale:  #faf3e0;
  --livmkt-sage:       #6ba686;
  --livmkt-charcoal:   #3a3a3a;
  --livmkt-gray:       #e4e8e4;
  --livmkt-gray-mid:   #a0aba0;
  --livmkt-radius:     12px;
  --livmkt-track-h:    10px;
}

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes livmkt-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes livmkt-pulse-pin {
  0%, 100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(0,171,84,0.5); }
  50%       { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 0 8px rgba(0,171,84,0); }
}

@keyframes livmkt-pulse-blue {
  0%, 100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(26,79,160,0.5); }
  50%       { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 0 8px rgba(26,79,160,0); }
}

@keyframes livmkt-pulse-gold {
  0%, 100% { transform: translateX(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(200,160,74,0.5); }
  50%       { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 0 8px rgba(200,160,74,0); }
}

@keyframes livmkt-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes livmkt-badge-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Banner Wrapper ─────────────────────────────────────────── */

.livmkt-pv-banner {
  background: #fff;
  border-left: 5px solid var(--livmkt-green);
  border-radius: var(--livmkt-radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 18px 24px 16px;
  margin: 0 0 20px;
  animation: livmkt-fade-in 0.4s ease both;
  transition: border-color 0.4s ease, background 0.4s ease;
}

/* State: membership unlocked */
.livmkt-pv-banner.livmkt-membership-unlocked {
  border-left-color: var(--livmkt-blue);
  background: linear-gradient(135deg, var(--livmkt-blue-pale) 0%, #fff 60%);
}

/* State: shipping unlocked */
.livmkt-pv-banner.livmkt-shipping-unlocked {
  border-left-color: var(--livmkt-green);
  background: linear-gradient(135deg, var(--livmkt-green-pale) 0%, #fff 60%);
}

/* State: MSP unlocked — gold celebration overrides all */
.livmkt-pv-banner.livmkt-msp-unlocked {
  border-left-color: var(--livmkt-gold);
  background: linear-gradient(135deg, var(--livmkt-gold-pale) 0%, #fff 60%);
}

/* ── PV Row (count + message) ───────────────────────────────── */

.livmkt-pv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.livmkt-pv-current {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.livmkt-pv-icon {
  line-height: 1;
}

.livmkt-pv-count {
  color: var(--livmkt-charcoal);
  letter-spacing: -0.01em;
}

.livmkt-pv-count strong {
  color: var(--livmkt-green);
  transition: color 0.3s ease;
}

.livmkt-membership-unlocked .livmkt-pv-count strong { color: var(--livmkt-blue); }
.livmkt-msp-unlocked        .livmkt-pv-count strong { color: var(--livmkt-gold); }

.livmkt-pv-message {
  color: var(--livmkt-charcoal);
  opacity: 0.85;
  flex: 1;
  min-width: 180px;
  transition: opacity 0.25s ease;
}

/* ── Progress Track ─────────────────────────────────────────── */

.livmkt-pv-track {
  position: relative;
  height: var(--livmkt-track-h);
  background: var(--livmkt-gray);
  border-radius: 999px;
  margin: 28px 0 36px;
}

/* Fill bar */
.livmkt-pv-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--livmkt-green-dark) 0%,
    var(--livmkt-green)      40%,
    #4dd68c                  70%,
    var(--livmkt-green)      100%
  );
  background-size: 200% auto;
  animation: livmkt-shimmer 2.5s linear infinite;
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  min-width: 0;
}

.livmkt-msp-unlocked .livmkt-pv-fill {
  background: linear-gradient(
    90deg,
    #9a7020 0%,
    var(--livmkt-gold) 40%,
    #e8c86a            70%,
    var(--livmkt-gold) 100%
  );
  background-size: 200% auto;
  animation: livmkt-shimmer 2.5s linear infinite;
}

/* ── Milestone Pins ─────────────────────────────────────────── */

.livmkt-pv-milestone {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pin dot */
.livmkt-pv-milestone::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--livmkt-gray-mid);
  transition: background 0.3s ease, transform 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Reached state — pin goes solid */
.livmkt-pv-milestone.livmkt-reached::before {
  background: var(--livmkt-green);
}

.livmkt-pv-milestone[data-pv="50"].livmkt-reached::before  { background: var(--livmkt-blue); }
.livmkt-pv-milestone[data-pv="115"].livmkt-reached::before { background: var(--livmkt-green); }
.livmkt-pv-milestone[data-pv="150"].livmkt-reached::before { background: var(--livmkt-gold); }

/* Pin positions on 200 PV track */
.livmkt-pv-milestone[data-pv="50"]  { left: 25%; }
.livmkt-pv-milestone[data-pv="115"] { left: 57.5%; }
.livmkt-pv-milestone[data-pv="150"] { left: 75%; }

/* Tooltip ribbon above pin */
.livmkt-pv-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--livmkt-charcoal);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.livmkt-pv-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--livmkt-charcoal);
}

.livmkt-pv-milestone:hover .livmkt-pv-tip { opacity: 1; }

/* Tier-colored tooltips */
.livmkt-pv-milestone[data-pv="50"]  .livmkt-pv-tip { background: var(--livmkt-blue); }
.livmkt-pv-milestone[data-pv="50"]  .livmkt-pv-tip::after { border-top-color: var(--livmkt-blue); }
.livmkt-pv-milestone[data-pv="115"] .livmkt-pv-tip { background: var(--livmkt-green); }
.livmkt-pv-milestone[data-pv="115"] .livmkt-pv-tip::after { border-top-color: var(--livmkt-green); }
.livmkt-pv-milestone[data-pv="150"] .livmkt-pv-tip { background: var(--livmkt-gold); }
.livmkt-pv-milestone[data-pv="150"] .livmkt-pv-tip::after { border-top-color: var(--livmkt-gold); }

/* PV number label below pin */
.livmkt-pv-pin {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--livmkt-gray-mid);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.livmkt-pv-milestone[data-pv="50"].livmkt-reached  .livmkt-pv-pin { color: var(--livmkt-blue); }
.livmkt-pv-milestone[data-pv="115"].livmkt-reached .livmkt-pv-pin { color: var(--livmkt-green); }
.livmkt-pv-milestone[data-pv="150"].livmkt-reached .livmkt-pv-pin { color: var(--livmkt-gold); }

/* ── Pulse on milestone crossing ────────────────────────────── */

.livmkt-pv-milestone[data-pv="50"].livmkt-just-hit::before  { animation: livmkt-pulse-blue 0.6s ease 2; }
.livmkt-pv-milestone[data-pv="115"].livmkt-just-hit::before { animation: livmkt-pulse-pin  0.6s ease 2; }
.livmkt-pv-milestone[data-pv="150"].livmkt-just-hit::before { animation: livmkt-pulse-gold 0.6s ease 2; }

/* ── Legend ─────────────────────────────────────────────────── */

.livmkt-pv-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--livmkt-gray);
  padding-top: 12px;
  margin-top: 4px;
}

.livmkt-pv-legend-item {
  color: var(--livmkt-charcoal);
  opacity: 0.75;
  white-space: nowrap;
}

.livmkt-pv-legend-item strong { opacity: 1; }

/* ── Unlocked badge (JS injects inside message) ─────────────── */

.livmkt-pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  margin-right: 6px;
  animation: livmkt-badge-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

.livmkt-pv-badge--blue { background: var(--livmkt-blue); }
.livmkt-pv-badge--green { background: var(--livmkt-green); }
.livmkt-pv-badge--gold  { background: var(--livmkt-gold); }

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .livmkt-pv-banner {
    padding: 14px 16px 14px;
  }

  .livmkt-pv-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .livmkt-pv-message {
    min-width: 0;
    width: 100%;
  }

  .livmkt-pv-track {
    margin: 28px 0 38px;
  }

  .livmkt-pv-legend {
    flex-direction: column;
    gap: 6px;
  }

  .livmkt-pv-legend-item {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .livmkt-pv-tip {
    display: none; /* pins too close together on narrow screens */
  }
}