/* ------------------------------------------
   Promotions page-specific styles
--------------------------------------------- */
.promotions-main {
  margin-top: var(--space-12);
  margin-bottom: var(--space-16);
}
.promotions-title {
  text-align: center;
  margin-bottom: var(--space-10);
  color: var(--color-primary);
}
.promotions-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: var(--space-8);
}
.promotions-list .card {
  border-left: 6px solid var(--color-primary);
  align-items: flex-start;
}
.card--special {
  border-left: 6px solid var(--color-warning);
  background: linear-gradient(100deg, #fffbe7 60%, #f0ebdc 100%);
}
.promo-valid {
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}
.limited-time-offers {
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}
.seasonal-promotions {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--space-8);
}
.refer-friend-card {
  background: linear-gradient(90deg, #f0f5ff 80%, #fafffd 100%);
  border-left: 6px solid var(--color-success);
  margin-bottom: var(--space-8);
}
.promotions-calendar {
  overflow-x: auto;
  margin-bottom: var(--space-8);
}
.promotions-calendar table {
  width: 100%;
  font-size: var(--font-size-base);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 0;
}
.promotions-calendar th,
.promotions-calendar td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-neutral-200);
  text-align: left;
}
.promotions-calendar th {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}
.promotions-calendar tr:last-child td {
  border-bottom: none;
}
.vip-offers {
  background: linear-gradient(95deg, #e5e7fb 60%, #f6f9ff 100%);
  border-left: 6px solid var(--color-primary-hover);
  margin-bottom: var(--space-8);
}
.promo-terms {
  background: #fff6f0;
  border-left: 6px solid var(--color-danger);
}
.promo-terms ol {
  padding-left: var(--space-6);
  margin-bottom: 0;
  color: var(--color-neutral-900);
}
.promo-terms li {
  margin-bottom: var(--space-2);
}
@media (max-width: 700px) {
  .promotions-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-6);
  }
  .promotions-main {
    margin-top: var(--space-6);
  }
  .promotions-list,
  .seasonal-promotions {
    grid-template-columns: 1fr;
  }
  .card {
    padding: var(--space-4);
  }
}
@media (max-width: 480px) {
  .promotions-calendar th,
  .promotions-calendar td {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
  }
}