/*
 * Aswaf frontend: 01-product-detail.css
 * Responsibility: product/group hero, gallery, ticker, price tiers, payment steps, timeline, and CTA card.
 * This file was split from assets/css/frontend.css; keep import order in frontend.css.
 */

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.asw-hero {
  display: flex;
  background: var(--asw-bg);
  border: 1px solid var(--asw-border);
  border-radius: var(--asw-r4);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--asw-sh-sm);
}

.asw-hero-img {
  width: 240px;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: #fff;
  padding: 5px;
}

.asw-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asw-hero-body {
  padding: 1.5rem;
  flex: 1;
  min-width: 0;
}

.asw-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--asw-text);
  margin: 0.3rem 0 0.25rem;
  line-height: 1.2;
}

.asw-prod-link {
  font-size: 0.82rem;
  color: var(--asw-text-2);
  display: inline-block;
  margin-bottom: 0.35rem;
}

.asw-prod-link:hover {
  color: var(--asw-primary);
  text-decoration: none;
}

.asw-group-desc {
  font-size: 0.88rem;
  color: var(--asw-text-2);
  margin-top: 0.5rem;
  line-height: 1.7;
}

.asw-pdb-arrow svg {
  transform: rotateY(180deg);
}

@media (max-width: 640px) {
  .asw-hero {
    flex-direction: column;
  }

  .asw-hero-img {
    width: 100%;
  }

  .asw-hero-body {
    padding: 1rem;
  }

  .asw-page-title {
    font-size: 1.2rem;
  }
}

/* ════════════════════════════════════════════
   PRODUCT GALLERY
════════════════════════════════════════════ */
.asw-gallery-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  overflow: hidden;
  position: relative;
}

/* Main slide area */
.asw-gal-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f7f7f7;
}

.asw-gal-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.asw-gal-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.asw-gal-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

/* Video slide */
.asw-gal-video.active .asw-gal-play-ico {
  display: none;
}

.asw-gal-play-ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  background: rgba(0, 0, 0, 0.18);
}

.asw-gal-vid {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Arrow navigation */
.asw-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--asw-border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--asw-sh-sm);
  transition: all var(--asw-tr);
  padding: 0;
}

.asw-gal-arrow:hover {
  background: #fff;
  box-shadow: var(--asw-sh);
  transform: translateY(-50%) scale(1.08);
}

.asw-gal-prev {
  right: auto;
  left: 8px;
}

.asw-gal-next {
  left: auto;
  right: 8px;
}

/* Dots */
.asw-gal-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 5;
}

.asw-gal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--asw-tr);
}

.asw-gal-dot.active {
  background: var(--asw-primary);
  transform: scale(1.3);
}

/* Counter badge */
.asw-gal-count {
  position: absolute;
  top: 9px;
  right: 9px;
  /* RTL: top-right */
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--asw-r-full);
  z-index: 5;
  letter-spacing: 0.03em;
}

/* Thumbnails strip */
.asw-gal-thumbs {
  display: flex;
  gap: 5px;
  padding: 6px 6px;
  background: #fff;
  border-top: 1px solid var(--asw-border);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--asw-border-dk) transparent;
}

.asw-gal-thumbs::-webkit-scrollbar {
  height: 3px;
}

.asw-gal-thumbs::-webkit-scrollbar-thumb {
  background: var(--asw-border-dk);
  border-radius: 3px;
}

.asw-gal-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--asw-r);
  overflow: hidden;
  border: 2px solid var(--asw-border);
  cursor: pointer;
  padding: 0;
  background: #f7f7f7;
  transition: all var(--asw-tr);
  position: relative;
}

.asw-gal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asw-gal-thumb.active {
  border-color: var(--asw-primary);
  box-shadow: 0 0 0 2px var(--asw-primary-lt);
}

.asw-gal-thumb:hover:not(.active) {
  border-color: var(--asw-border-dk);
  transform: scale(1.05);
}

.asw-gal-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

/* ── Lightbox ── */
.asw-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.asw-lightbox.open {
  display: flex;
}

.asw-lb-main {
  max-width: min(90vw, 800px);
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asw-lb-main img,
.asw-lb-main video {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--asw-r2);
}

.asw-lb-close {
  position: fixed;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 100000;
  transition: background var(--asw-tr);
  padding: 0;
}

.asw-lb-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.asw-lb-prev,
.asw-lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  padding: 0;
  z-index: 100000;
  transition: background var(--asw-tr);
}

.asw-lb-prev {
  left: 12px;
}

.asw-lb-next {
  right: 12px;
}

.asw-lb-prev:hover,
.asw-lb-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.asw-lb-counter {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.2rem 0.8rem;
  border-radius: var(--asw-r-full);
}

/* Hero img override when gallery is used */
.asw-gal-hero.asw-gallery-wrap {
  width: 260px;
  flex-shrink: 0;
  aspect-ratio: unset;
}

.asw-gal-hero .asw-gal-main {
  aspect-ratio: 1;
  width: 100%;
}

/* Responsive gallery */
@media (max-width: 640px) {
  .asw-gal-hero.asw-gallery-wrap {
    width: 100%;
    aspect-ratio: unset;
  }

  .asw-gal-main {
    aspect-ratio: 4/3;
  }

  .asw-gal-thumb {
    width: 44px;
    height: 44px;
  }

  .asw-lb-prev {
    left: 4px;
  }

  .asw-lb-next {
    right: 4px;
  }
}

/* ════════════════════════════════════════════
   STOCK TICKER — Price Display
════════════════════════════════════════════ */
.asw-ticker {
  display: flex;
  text-align: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--asw-bg-2);
  border: 1px solid var(--asw-border);
  border-radius: var(--asw-r3);
  padding: 0.9rem 1.1rem;
  margin-top: 0.9rem;
}

.asw-ticker-main {
}

.asw-ticker-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--asw-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.asw-ticker-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--asw-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.asw-ticker-change {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--asw-text-3);
  margin-top: 0.2rem;
}

.asw-ticker-change.down {
  color: var(--asw-green);
}

.asw-ticker-change.down span {
  color: var(--asw-green);
}

.asw-ticker-stats {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-right: 2px solid var(--asw-border);
  padding-right: 1.5rem;
  margin-right: 0;
}

.asw-ticker-stat {
}

.asw-ticker-stat-label {
  font-size: 0.69rem;
  color: var(--asw-text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.asw-ticker-stat-val {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--asw-text);
}

.asw-striked-sm {
  text-decoration: line-through;
  color: var(--asw-text-3);
  font-weight: 400;
}

.asw-ticker-next {
  color: var(--asw-green) !important;
}

/* ════════════════════════════════════════════
   PRICE TIERS — Discount Steps Visual
════════════════════════════════════════════ */

/* Forecast bar */
.asw-forecast-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--asw-red-lt), var(--asw-green-lt));
  border-radius: var(--asw-r2);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.asw-forecast-from,
.asw-forecast-to {
  text-align: center;
  flex-shrink: 0;
}

.asw-forecast-label {
  font-size: 0.7rem;
  color: var(--asw-text-2);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.asw-forecast-price {
  font-size: 0.95rem;
  font-weight: 800;
}

.asw-forecast-from .asw-forecast-price {
  color: var(--asw-red);
}

.asw-forecast-to .asw-forecast-price {
  color: var(--asw-green-dk);
}

.asw-green {
  color: var(--asw-green-dk);
}

.asw-forecast-arrow-track {
  flex: 1;
  height: 6px;
  background: var(--asw-bg-3);
  border-radius: var(--asw-r-full);
  position: relative;
  overflow: visible;
}

.asw-forecast-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--asw-red), var(--asw-green));
  border-radius: var(--asw-r-full);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.asw-forecast-arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--asw-green);
  line-height: 1;
}

/* Tiers list */
.asw-tiers-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.asw-tier-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--asw-r2);
  border: 1px solid var(--asw-border);
  background: var(--asw-bg);
  transition: all var(--asw-tr);
}

.asw-tier-row.done {
  background: #f0fff5;
  border-color: rgba(39, 174, 96, 0.25);
}

.asw-tier-row.active {
  background: linear-gradient(135deg, var(--asw-gold-lt), #fff9e8);
  border-color: var(--asw-gold);
  box-shadow: var(--asw-sh-gold);
  transform: scale(1.01);
}

.asw-tier-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
}

.asw-tier-ico {
  width: 1.3rem;
  text-align: center;
  font-size: 0.82rem;
  flex-shrink: 0;
  color: var(--asw-text-3);
}

.asw-tier-row.done .asw-tier-ico {
  color: var(--asw-green);
}

.asw-tier-row.active .asw-tier-ico {
  color: var(--asw-gold-dk);
}

.asw-tier-range-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--asw-text-2);
}

.asw-tier-row.active .asw-tier-range-text {
  color: var(--asw-text);
  font-weight: 700;
}

.asw-tier-state-text {
  font-size: 0.7rem;
  color: var(--asw-text-3);
  margin-top: 0.1rem;
}

.asw-tier-state-text.asw-green {
  color: var(--asw-green);
}

.asw-tier-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.asw-tier-disc-badge {
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--asw-red-lt);
  color: var(--asw-red);
  padding: 0.1rem 0.42rem;
  border-radius: 3px;
}

.asw-tier-row.done .asw-tier-disc-badge {
  background: var(--asw-green-lt);
  color: var(--asw-green);
}

.asw-tier-row.active .asw-tier-disc-badge {
  background: var(--asw-gold);
  color: #fff;
}

.asw-tier-arrow {
  font-size: 0.75rem;
  color: var(--asw-text-3);
}

.asw-tier-row.active .asw-tier-arrow {
  color: var(--asw-gold-dk);
  font-size: 0.9rem;
}

.asw-tier-right {
  text-align: left;
  flex-shrink: 0;
}

.asw-tier-price {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--asw-green-dk);
}

.asw-tier-row.active .asw-tier-price {
  font-size: 1.05rem;
  color: var(--asw-gold-dk);
}

.asw-tier-row.done .asw-tier-price {
  text-decoration: line-through;
  color: var(--asw-text-3);
  font-weight: 400;
  font-size: 0.82rem;
}

.asw-tier-saving {
  font-size: 0.68rem;
  color: var(--asw-green);
  font-weight: 600;
}

/* Max saving callout */
.asw-max-saving-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #e8f8ef, #f0fff5);
  border: 1px solid rgba(39, 174, 96, 0.25);
  border-radius: var(--asw-r2);
  padding: 0.65rem 0.9rem;
  margin-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.asw-callout-disc {
  background: var(--asw-green);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: var(--asw-r-full);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ════════════════════════════════════════════
   PAYMENT INFO STEPS
════════════════════════════════════════════ */
.asw-payment-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asw-pi-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.asw-pi-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--asw-primary);
  color: var(--asw-text-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.asw-pi-text {
  flex: 1;
  padding-bottom: 0.2rem;
}

.asw-pi-text strong {
  display: block;
  font-size: 0.88rem;
  color: var(--asw-text);
  margin-bottom: 0.15rem;
}

.asw-pi-text span {
  font-size: 0.78rem;
  color: var(--asw-text-2);
  line-height: 1.5;
}

.asw-pi-connector {
  width: 1px;
  height: 20px;
  background: var(--asw-border-dk);
  margin: 3px 0 3px 13px;
}

/* ════════════════════════════════════════════
   TIMELINE
════════════════════════════════════════════ */
.asw-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.asw-tl-item {
  display: flex;
  gap: 0.7rem;
  font-size: 0.84rem;
}

.asw-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--asw-border-dk);
  background: var(--asw-bg);
  margin-top: 0.28rem;
  transition: var(--asw-tr);
}

.asw-tl-item.done .asw-tl-dot {
  background: var(--asw-green);
  border-color: var(--asw-green);
}

.asw-tl-lbl {
  display: block;
  font-weight: 700;
  color: var(--asw-text);
}

.asw-tl-val {
  font-size: 0.78rem;
  color: var(--asw-text-2);
}

/* ════════════════════════════════════════════
   CTA CARD — Join button area
════════════════════════════════════════════ */
.asw-cta-card {
  text-align: center;
}

.asw-cta-price-block {
  margin-bottom: 0.75rem;
}

.asw-cta-market {
  text-decoration: line-through;
  color: var(--asw-text-3);
  font-size: 0.88rem;
}

.asw-cta-arrow {
  font-size: 1.5rem;
  color: var(--asw-green);
  line-height: 1;
  margin: 0.1rem 0;
}

.asw-cta-current {
  font-size: 2rem;
  font-weight: 900;
  color: var(--asw-text);
  line-height: 1;
}

.asw-cta-disc-badge {
  display: inline-block;
  background: var(--asw-red);
  color: #fff;
  padding: 0.2rem 0.65rem;
  border-radius: var(--asw-r-full);
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0.35rem 0 0;
}

.asw-cta-next-hint {
  font-size: 0.8rem;
  color: var(--asw-green-dk);
  background: var(--asw-green-lt);
  border: 1px solid rgba(39, 174, 96, 0.2);
  border-radius: var(--asw-r2);
  padding: 0.45rem 0.75rem;
  margin: 0.6rem 0;
}

.asw-cta-deposit {
  background: var(--asw-gold-lt);
  border: 1px solid rgba(200, 168, 74, 0.3);
  border-radius: var(--asw-r2);
  padding: 0.75rem;
  margin: 0.75rem 0;
}

.asw-cta-deposit-label {
  font-size: 0.76rem;
  color: var(--asw-text-2);
  font-weight: 600;
}

.asw-cta-deposit-amt {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--asw-gold-dk);
}

.asw-cta-deposit-hint {
  font-size: 0.72rem;
  color: var(--asw-text-3);
}

.asw-cta-trust {
  font-size: 0.74rem;
  color: var(--asw-text-3);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}