/* ============================================================
   PAVUNA COMMUNITY — Loja CSS
   ============================================================ */

/* ---- TABS ---- */
.loja-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ash);
  margin-bottom: var(--space-7);
  overflow-x: auto;
  scrollbar-width: none;
}
.loja-tabs::-webkit-scrollbar { display: none; }

.loja-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--bone-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all var(--transition);
  cursor: pointer;
}
.loja-tab:hover { color: var(--bone); }
.loja-tab.active { color: var(--fire); border-bottom-color: var(--fire); }
.loja-tab .tab-icon { font-size: 20px; }

/* ---- TAB CONTENT ---- */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeDown 0.3s ease; }

/* ---- VIP SECTION ---- */
.vip-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-7);
  align-items: start;
}

.vip-card {
  background: var(--coal-light);
  border: 1px solid var(--fire);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  position: relative;
}
.vip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fire-deep), var(--fire), #FFB347);
}
.vip-card-header {
  padding: var(--space-6);
  border-bottom: var(--border-ash);
  background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, transparent 100%);
}
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fire);
  color: var(--coal);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: var(--radius-sharp);
  margin-bottom: var(--space-3);
}
.vip-name {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--bone);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.vip-duration {
  font-size: 13px;
  color: var(--bone-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.vip-benefits {
  padding: var(--space-5) var(--space-6);
}
.vip-benefits h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fire);
  margin-bottom: var(--space-4);
}
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-ash);
  font-size: 14px;
  color: var(--bone-dim);
  transition: color var(--transition);
}
.benefit-item:last-child { border-bottom: none; }
.benefit-item:hover { color: var(--bone); }
.benefit-check {
  width: 20px; height: 20px;
  background: rgba(255,107,0,0.15);
  border: 1px solid var(--fire);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--fire);
  margin-top: 1px;
}

/* VIP Sidebar (preço + ação) */
.vip-sidebar { position: sticky; top: calc(var(--nav-h) + var(--space-4)); }
.vip-price-card {
  background: var(--coal-light);
  border: var(--border-ash);
  border-radius: var(--radius-sharp);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.price-old {
  font-size: 14px;
  color: var(--bone-dim);
  text-decoration: line-through;
  margin-bottom: 4px;
}
.price-main {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--fire);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.price-sub { font-size: 13px; color: var(--bone-dim); }
.price-discount {
  display: inline-block;
  background: var(--fire);
  color: var(--coal);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  margin-left: var(--space-2);
  border-radius: var(--radius-sharp);
}
.vip-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.vip-guarantee {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--bone-dim);
  padding: var(--space-3);
  background: rgba(255,107,0,0.05);
  border: var(--border-ash);
  border-radius: var(--radius-sharp);
}

/* ---- CARROS SECTION ---- */
.carros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.carro-card {
  background: var(--coal-light);
  border: var(--border-ash);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  transition: all var(--transition-slow);
  position: relative;
}
.carro-card:hover {
  border-color: var(--fire);
  transform: translateY(-6px);
  box-shadow: var(--shadow-fire);
}
.carro-img-wrap {
  aspect-ratio: 16/9;
  background: var(--coal-mid);
  overflow: hidden;
  position: relative;
}
.carro-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.carro-card:hover .carro-img-wrap img { transform: scale(1.05); }
.carro-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--smoke);
  font-size: 48px;
}
.carro-placeholder span { font-size: 12px; color: var(--smoke); margin-top: 8px; letter-spacing: 1px; }

.carro-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}
.carro-body { padding: var(--space-4); }
.carro-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--bone);
  margin-bottom: var(--space-2);
}
.carro-desc { font-size: 13px; color: var(--bone-dim); margin-bottom: var(--space-4); line-height: 1.5; }
.carro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.carro-price { font-family: var(--font-display); font-size: 28px; color: var(--fire); }
.carro-actions { display: flex; gap: var(--space-2); }
.btn-icon {
  width: 36px; height: 36px;
  background: var(--ash);
  border-radius: var(--radius-sharp);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all var(--transition);
}
.btn-icon:hover { background: var(--fire); color: var(--coal); }

/* ---- PAVPOINTS SECTION ---- */
.pavpoints-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  background: var(--coal-light);
  border: var(--border-ash);
  border-radius: var(--radius-sharp);
}
.pavpoints-uses h3 {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: var(--space-4);
}
.pavpoints-use-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 14px;
  color: var(--bone-dim);
}
.pavpoints-use-item .icon { font-size: 20px; }

.pavpoints-currency {
  text-align: center;
  padding: var(--space-5);
}
.pp-icon {
  width: 100px; height: 100px;
  background: linear-gradient(135deg, var(--fire-deep), var(--fire));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--coal);
  margin: 0 auto var(--space-3);
  box-shadow: 0 0 40px var(--fire-glow);
  animation: float 3s ease-in-out infinite;
}
.pavpoints-currency h4 { font-family: var(--font-display); font-size: 28px; color: var(--bone); }
.pavpoints-currency p  { font-size: 14px; color: var(--bone-dim); }

.combos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.combo-card {
  background: var(--coal-light);
  border: var(--border-ash);
  border-radius: var(--radius-sharp);
  padding: var(--space-5);
  text-align: center;
  position: relative;
  transition: all var(--transition-slow);
  overflow: hidden;
}
.combo-card:hover { border-color: var(--fire); transform: translateY(-6px); box-shadow: var(--shadow-fire); }
.combo-card.featured {
  border-color: var(--fire);
  background: linear-gradient(135deg, var(--coal-light), rgba(255,107,0,0.08));
}
.combo-tag {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  background: var(--fire);
  color: var(--coal);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 0 0 var(--radius-sharp) var(--radius-sharp);
  white-space: nowrap;
}
.combo-points {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--fire);
  line-height: 1;
  margin: var(--space-4) 0 var(--space-1);
}
.combo-label { font-size: 13px; color: var(--bone-dim); font-weight: 600; margin-bottom: var(--space-3); }
.combo-bonus {
  display: inline-block;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #4CAF50;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: var(--radius-sharp);
  margin-bottom: var(--space-4);
}
.combo-price-old { font-size: 12px; color: var(--bone-dim); text-decoration: line-through; margin-bottom: 2px; }
.combo-price {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--bone);
  margin-bottom: var(--space-4);
}

/* ============================================================
   RESPONSIVE LOJA
   ============================================================ */
@media (max-width: 1024px) {
  .vip-layout { grid-template-columns: 1fr; }
  .vip-sidebar { position: static; }
  .combos-grid { grid-template-columns: repeat(2, 1fr); }
  .pavpoints-intro { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .carros-grid { grid-template-columns: 1fr 1fr; }
  .combos-grid { grid-template-columns: 1fr 1fr; }
  .loja-tab { padding: var(--space-3); font-size: 15px; }
}
@media (max-width: 480px) {
  .carros-grid { grid-template-columns: 1fr; }
  .combos-grid { grid-template-columns: 1fr; }
  .vip-name { font-size: 36px; }
}