/* ============================================================
   LEMON TREE RESTAURANT — css/promotions.css
   Styles for promotions.html only.
   ============================================================ */

/* Filter tabs row */
.promo-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 32px;
}

.promo-filter-btn {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  border: 1.5px solid var(--border-c);
  color: var(--text-mid);
  background: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.promo-filter-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.promo-filter-btn.active {
  background: var(--lemon);
  color: var(--green);
  border-color: var(--lemon);
  font-weight: 700;
}

/* Promotions grid */
.promos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.promo-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--lemon);
  transition: all 0.25s ease;
}

.promo-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Promo banner image — fixed height */
.promo-card-img {
  height: 160px;
}

.promo-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* Shows the whole image */
  object-position: center;
}

.promo-card-body {
  padding: 18px;
}

/* Validity / type tag */
.promo-card-validity {
  display: inline-block;
  background: var(--lemon);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.promo-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.promo-card-desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 14px;
}

.promo-card-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}


.promo-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
}

.promo-card-type{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  padding:5px 10px;
  background:#f5f5f5;
  border-radius:999px;
  white-space:nowrap;
}

.promo-btn{
  flex-shrink:0;
}

/* Terms note at bottom */
.promo-terms-note {
  background: var(--green-light);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 13px;
  color: var(--green);
  border-left: 4px solid var(--green);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .promos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .promos-grid { grid-template-columns: 1fr; }
}