/* ==========================================================================
   Aston Mark — Packages Widget   (prefix: pkg-)

   দুইটা আলাদা গ্রেডিয়েন্ট, দুটোই আলাদা ভেরিয়েবলে —
     ১) GOLD  → হেডিং accent + দাম        : --pkg-gold-from / --pkg-gold-to / --pkg-gold-angle
     ২) RED   → ব্যাজ, চেক আইকন, ফিচার্ড বর্ডার, ফিলড বাটন
                                          : --pkg-red / --pkg-red-deep / --pkg-red-angle
   একটা বদলালে অন্যটা প্রভাবিত হয় না।
   ========================================================================== */

.pkg, .pkg * { box-sizing: border-box !important; }

.pkg {
  /* ---- গ্রেডিয়েন্ট ১: সোনালি-কমলা (টেক্সট) ---- */
  --pkg-gold-from: #ffb648;
  --pkg-gold-to: #ff6b3d;
  --pkg-gold-angle: 90deg;
  --pkg-gold-fallback: #ff8a4c;   /* background-clip সাপোর্ট না করলে */
  --pkg-gold: linear-gradient(var(--pkg-gold-angle), var(--pkg-gold-from) 0%, var(--pkg-gold-to) 100%);

  /* ---- গ্রেডিয়েন্ট ২: লাল (ব্যাজ, চেক, বর্ডার, বাটন) ---- */
  --pkg-red: #b1352a;
  --pkg-red-deep: #531e19;
  --pkg-red-angle: 90deg;
  --pkg-red-grad: linear-gradient(var(--pkg-red-angle), var(--pkg-red) 0%, var(--pkg-red-deep) 100%);

  /* ---- রঙ ---- */
  --pkg-bg: #121016;
  --pkg-card-bg: #1a171d;
  --pkg-card-featured-bg: #18151b;
  --pkg-card-border: rgba(255, 255, 255, 0.09);
  --pkg-title-color: #ffffff;
  --pkg-muted: #7d7982;
  --pkg-feature-color: #d8d5da;
  --pkg-discount-color: #e0665a;
  --pkg-discount-bg: rgba(177, 53, 42, 0.15);
  --pkg-label-color: #d97a6e;

  /* ---- সেকশন ---- */
  --pkg-pad-top: 90px;
  --pkg-pad-bottom: 90px;
  --pkg-container-w: 1180px;
  --pkg-container-pad: 20px;

  /* ---- হেডিং ---- */
  --pkg-heading-size: clamp(24px, 3.6vw, 38px);
  --pkg-heading-gap: 54px;

  /* ---- কার্ড ---- */
  --pkg-grid-gap: 26px;
  --pkg-card-max: 340px;
  --pkg-card-pad: 40px 28px 32px;
  --pkg-card-radius: 14px;
  --pkg-featured-scale: 1.05;

  --pkg-card-title-size: 19px;
  --pkg-price-size: 38px;
  --pkg-feature-size: 14.5px;
  --pkg-check-size: 18px;
  --pkg-btn-size: 14.5px;
  --pkg-btn-radius: 6px;

  position: relative !important;
  padding: var(--pkg-pad-top) 0 var(--pkg-pad-bottom) !important;
  background-color: var(--pkg-bg) !important;
  color: #ffffff !important;
  font-family: 'Hind Siliguri', Arial, Helvetica, sans-serif !important;
}

.pkg-container {
  max-width: var(--pkg-container-w) !important;
  margin: 0 auto !important;
  padding: 0 var(--pkg-container-pad) !important;
  text-align: center !important;
}

/* ---------------- হেডিং ---------------- */
.pkg-heading {
  font-size: var(--pkg-heading-size) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 0 var(--pkg-heading-gap) !important;
  color: var(--pkg-title-color) !important;
}

.pkg-heading__accent {
  background: var(--pkg-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--pkg-gold-fallback) !important;
}

.pkg-grid {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: var(--pkg-grid-gap) !important;
  flex-wrap: wrap !important;
}

/* ---------------- কার্ড ---------------- */
.pkg-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 300px !important;
  max-width: var(--pkg-card-max) !important;
  min-width: 280px !important;
  background: var(--pkg-card-bg) !important;
  border: 1px solid var(--pkg-card-border) !important;
  border-radius: var(--pkg-card-radius) !important;
  padding: var(--pkg-card-pad) !important;
  text-align: left !important;
}

.pkg-card--featured {
  background: linear-gradient(var(--pkg-card-featured-bg), var(--pkg-card-featured-bg)) padding-box,
              linear-gradient(135deg, var(--pkg-red) 0%, var(--pkg-red-deep) 100%) border-box !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 30px 60px -18px rgba(177, 53, 42, 0.45) !important;
  transform: scale(var(--pkg-featured-scale)) !important;
  z-index: 2 !important;
}

.pkg-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--pkg-red-grad) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 7px 18px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px rgba(177, 53, 42, 0.4) !important;
}

.pkg-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--pkg-label-color) !important;
  margin-bottom: 14px !important;
}

.pkg-card__title {
  font-size: var(--pkg-card-title-size) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--pkg-title-color) !important;
  margin: 0 0 22px !important;
}

.pkg-card__price {
  text-align: center !important;
  font-size: var(--pkg-price-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  background: var(--pkg-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--pkg-gold-fallback) !important;
}

.pkg-card__old-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.pkg-card__old-price {
  font-size: 14px !important;
  color: var(--pkg-muted) !important;
  text-decoration: line-through !important;
}

.pkg-card__discount {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--pkg-discount-color) !important;
  background: var(--pkg-discount-bg) !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
}

.pkg-card__purchase-type {
  text-align: center !important;
  font-size: 11.5px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--pkg-muted) !important;
  margin-bottom: 30px !important;
}

.pkg-card__features {
  list-style: none !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
}

.pkg-card__features li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: var(--pkg-feature-size) !important;
  line-height: 1.5 !important;
  color: var(--pkg-feature-color) !important;
}

.pkg-check {
  flex-shrink: 0 !important;
  width: var(--pkg-check-size) !important;
  height: var(--pkg-check-size) !important;
  border-radius: 50% !important;
  background: var(--pkg-red-grad) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

/* ---------------- CTA ---------------- */
.pkg-cta {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.pkg-cta--outline {
  padding: 16px 20px !important;
  border-radius: var(--pkg-btn-radius) !important;
  background: #ffffff !important;
  color: #1c1a20 !important;
  font-weight: 700 !important;
  font-size: var(--pkg-btn-size) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.pkg-cta--outline:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35) !important;
}

.pkg-cta--filled .pkg-cta__inner {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 17px 20px !important;
  background: var(--pkg-red-grad) !important;
  border-radius: var(--pkg-btn-radius) !important;
  box-shadow: 0 0 25px 4px rgba(177, 53, 42, 0.4) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease !important;
}

.pkg-cta--filled .pkg-cta__inner span {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: var(--pkg-btn-size) !important;
}

.pkg-cta--filled .pkg-cta__inner::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -75% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%) !important;
  transform: skewX(-25deg) !important;
  animation: pkgShine 2.6s ease-in-out infinite !important;
}

.pkg.pkg--no-shine .pkg-cta--filled .pkg-cta__inner::before { display: none !important; }

@keyframes pkgShine {
  0%   { left: -75%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}

.pkg-cta--filled:hover .pkg-cta__inner {
  transform: translateY(-2px) !important;
  background: linear-gradient(var(--pkg-red-angle), #db5d52 0%, #450b06 100%) !important;
  box-shadow: 0 0 35px 8px rgba(219, 93, 82, 0.55) !important;
}

/* WooCommerce ajax স্টেট */
.pkg-cta.loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.pkg-card .added_to_cart { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pkg-cta--filled .pkg-cta__inner::before { animation: none !important; }
  .pkg * { transition: none !important; }
}

/* ---------------- Responsive ডিফল্ট ---------------- */
@media (max-width: 991px) {
  .pkg { --pkg-featured-scale: 1; }
  .pkg-grid { align-items: stretch !important; }
  .pkg-card--featured { order: -1 !important; }
}

@media (max-width: 576px) {
  .pkg {
    --pkg-pad-top: 60px;
    --pkg-pad-bottom: 60px;
    --pkg-card-max: 100%;
  }
}
