/* =========================================================
   pay-templates/template1/store.css - /pay's default pack-card look.
   This is the current/original design, moved here verbatim from
   assets/templates/template5/css/store.css (that copy is now unused -
   /pay resolves this file via includes/functions.php::payTemplateCssAsset()
   and PAY_TEMPLATE instead, see config/app.php). Uses the same --tc-* CSS
   custom properties defined by the active SITE_TEMPLATE's main.css, which
   is always loaded before this file on /pay pages.
   ========================================================= */

.store-header{
  background: rgba(6,11,26,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 60;
}

/* Pack card - copied 1:1 from the original project's design
   (Ticarium.COM/pay/index.php's .pack/.bonus-ribbon/.price), not the
   dark navy re-skin this file used to have. */
.pack-card{
  background: #f6f7f8; color: #111; border-radius: .35rem; cursor: pointer; position: relative;
  overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,.25);
  border: 7px solid transparent;
  padding: 1rem .5rem 0;
  text-align: center;
}
.pack-card.selected{
  border-color: #ffd26a;
  animation: packPulse 1.15s ease-in-out infinite;
}
@keyframes packPulse{
  0%   { transform: translateY(0) scale(1);      box-shadow: 0 10px 25px rgba(0,0,0,.25); }
  50%  { transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 35px rgba(0,0,0,.35); }
  100% { transform: translateY(0) scale(1);      box-shadow: 0 10px 25px rgba(0,0,0,.25); }
}
.pack-card-check{
  position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; z-index:4;
  background: linear-gradient(180deg,#ffcc2f,#ffb000); color:#241800;
  font-size:.75rem; font-weight:900; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 8px rgba(0,0,0,.35); opacity:0; transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}
.pack-card.selected .pack-card-check{ opacity:1; transform: scale(1); }

/* "Best value" badge - floats OUTSIDE the card (doesn't push its height,
   so it stays the same size as its siblings) as an eye-catching pill
   straddling the top edge. */
.pack-card[data-badge]{ overflow: visible; }
.pack-card[data-badge]::before{
  content: "\2605  " attr(data-badge);
  position: absolute; top: -14px; left: 50%; z-index: 5;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffe08a, #ffb300);
  color: #241800; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255,179,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
.pack-media{ margin-bottom: .2rem; }
.pack-card .pack-img{ max-width: 150px; width: 100%; height: auto; margin: 0 auto; display: block; }
.pack-card .pack-qty{ font-weight: 700; font-size: 2rem; margin-top: -15px; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.pack-card .pack-bonus{ display: block; color: #666; font-weight: 700; font-size: 1rem; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.pack-card .pack-price{
  margin: 1rem -.5rem 0; background: linear-gradient(180deg,#ffcc2f 0%,#ffb000 100%);
  color: #111; font-weight: 1000; padding: 12px;
}
.pack-price-amount{ font-size: 1.2rem; }
.pack-bonus-ribbon{
  position: absolute; top: 5px; right: 5px; z-index: 2;
  background: linear-gradient(180deg,#ff4d4d,#c62828);
  color: #fff; font-weight: 500; font-size: 1.2rem;
  padding: 6px 6px; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.pack-bonus-ribbon::after{
  content: ""; position: absolute; right: 10px; bottom: -8px;
  border-width: 8px 8px 0 8px; border-style: solid;
  border-color: #a71d1d transparent transparent transparent;
}
.pack-bonus-ribbon span{ display: inline; }

.qty-stepper .btn{ width: 46px; font-weight: 800; }
.qty-stepper .qty-value{ min-width: 64px; display: inline-block; text-align: center; font-weight: 800; }

.checkout-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(6,11,26,.97); border-top: 1px solid rgba(255,255,255,.1);
  padding: .9rem 0; backdrop-filter: blur(8px);
}
.checkout-total{ font-weight: 800; font-size: 1.15rem; }

.pay-state-icon{
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 2.4rem; font-weight: 900;
}
.pay-state-icon.is-success{ background: linear-gradient(180deg, #35d07f, #1fa463); color: #fff; }
.pay-state-icon.is-cancel{ background: linear-gradient(180deg, #ff5b5b, #c62828); color: #fff; }

@media (max-width: 576px){
  .pack-card{ border-width: 5px; padding: .5rem .35rem 0; }
  .pack-card[data-badge]::before{ font-size: .52rem; padding: .28rem .7rem; top: -11px; }
  .pack-card .pack-img{ max-width: 78px; }
  .pack-card .pack-qty{ font-size: 1.35rem; margin-top: -10px; }
  .pack-card .pack-bonus{ font-size: .8rem; }
  .pack-card .pack-price{ margin: .5rem -.35rem 0; font-size: .95rem; padding: 8px; }
  .pack-bonus-ribbon{ font-size: .9rem; padding: 4px 6px; border-radius: 8px; top: 4px; right: 4px; }
  .pack-bonus-ribbon::after{ right: 8px; bottom: -7px; border-width: 7px 7px 0 7px; }
  .checkout-bar{ padding: .6rem 0; }
}