/* =========================================================
   Seed City — Cart Trigger Shortcode
   File: sc-cart-trigger.css

   Goals:
   - Match SCFC visual language (leaf tint, forest text, gold hover/active)
   - Premium micro-interactions: lift, sheen, badge pop
   - Pulse on add-to-cart (JS toggles .is-pulsing)
   - Hide badge when 0 (JS toggles .is-hidden)
   ========================================================= */

/* Site-level fallbacks (kept local to this component) */
:root{
  --sc-leaf:#AFEA80;
  --sc-forest:#1C3A2A;
  --sc-gold:#FFD600;
  --sc-ink:#111827;
  --sc-muted:#6B7280;
  --sc-card:#ffffff;

  --sc-radius:999px;
  --sc-shadow-sm:0 1px 0 rgba(0,0,0,.03);
  --sc-shadow-md:0 10px 18px rgba(0,0,0,.08);
}

/* Base button */
.sc-cart-trigger{
  appearance:none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:42px;
  padding:0 14px;
  border-radius: var(--sc-radius);

  border:1px solid color-mix(in srgb, var(--sc-leaf) 48%, #E5E7EB);
  background: color-mix(in srgb, var(--sc-leaf) 14%, #fff);
  color: var(--sc-forest);

  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2px;

  text-decoration:none !important;
  box-shadow: var(--sc-shadow-sm);
  cursor:pointer;

  position:relative;
  user-select:none;

  transition:
    transform .10s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease,
    filter .15s ease;
}

/* Subtle sheen overlay */
.sc-cart-trigger::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:.35;
}

/* Icon */
.sc-cart-trigger__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.sc-cart-trigger__icon svg{
  width:18px;
  height:18px;
  display:block;
}

/* Label (optional) */
.sc-cart-trigger__label{
  font-size:13px;
  font-weight:900;
  color: inherit;
}

/* Badge */
.sc-cart-trigger__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:20px;
  height:20px;
  padding:0 7px;

  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1;

  color: var(--sc-forest);
  background: color-mix(in srgb, var(--sc-gold) 28%, #fff);
  border:1px solid color-mix(in srgb, var(--sc-gold) 52%, #E5E7EB);

  box-shadow: 0 6px 12px rgba(0,0,0,.10);
  transform: translateY(-6px);

  transition: transform .10s ease, filter .15s ease, box-shadow .15s ease;
}
.sc-cart-trigger__badge.is-hidden{ display:none; }

/* Hover / focus */
.sc-cart-trigger:hover{
  background: color-mix(in srgb, var(--sc-gold) 18%, #fff);
  border-color: color-mix(in srgb, var(--sc-gold) 52%, #E5E7EB);
  transform: translateY(-1px);
  filter: saturate(1.05);
}
.sc-cart-trigger:hover .sc-cart-trigger__badge{
  transform: translateY(-7px) scale(1.03);
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
}

.sc-cart-trigger:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc-gold) 25%, #fff);
}

/* Press */
.sc-cart-trigger:active{
  transform: translateY(0px);
}
.sc-cart-trigger:active .sc-cart-trigger__badge{
  transform: translateY(-6px) scale(.99);
}

/* Mobile variant */
.sc-cart-trigger--mobile{
  height:40px;
  padding:0 12px;
  gap:9px;
}
.sc-cart-trigger--mobile .sc-cart-trigger__icon svg{
  width:18px;
  height:18px;
}
.sc-cart-trigger--mobile .sc-cart-trigger__badge{
  min-width:19px;
  height:19px;
  padding:0 6px;
  font-size:11.5px;
}

/* Desktop variant */
.sc-cart-trigger--desktop{
  height:44px;
  padding:0 16px;
}

/* =========================================================
   “Added to cart” effects
   ========================================================= */
@keyframes scCartPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 214, 0, .35); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 214, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 214, 0, 0); }
}

@keyframes scBadgePop {
  0%   { transform: translateY(-6px) scale(1); }
  45%  { transform: translateY(-8px) scale(1.18); }
  100% { transform: translateY(-6px) scale(1); }
}

.sc-cart-trigger.is-pulsing{
  animation: scCartPulse .55s ease-out 1;
}
.sc-cart-trigger.is-pulsing .sc-cart-trigger__badge{
  animation: scBadgePop .35s ease-out 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sc-cart-trigger,
  .sc-cart-trigger__badge{
    transition:none !important;
  }
  .sc-cart-trigger.is-pulsing,
  .sc-cart-trigger.is-pulsing .sc-cart-trigger__badge{
    animation:none !important;
  }
}

/* Touch devices: avoid hover “stuck” look while scrolling */
@media (hover:none), (pointer:coarse){
  .sc-cart-trigger:hover{
    transform:none;
    background: color-mix(in srgb, var(--sc-leaf) 14%, #fff);
    border-color: color-mix(in srgb, var(--sc-leaf) 48%, #E5E7EB);
    filter:none;
  }
  .sc-cart-trigger:hover .sc-cart-trigger__badge{
    transform: translateY(-6px);
    box-shadow: 0 6px 12px rgba(0,0,0,.10);
  }
}