/* Fill the iOS safe area above the header */

.top-shell{
  padding-top: env(safe-area-inset-top);
  background:#EFB428;
}



/* =========================
   FLOATING REDEEM BUTTON
========================= */

.redeem-bar{
  position:fixed;
  bottom:100px;     /* stays above nav */
  left:0;
  right:0;

  display:flex;
  justify-content:center;

  padding:0;

  background:none;
  border:none;

  z-index:950;
}


/* =========================
   BUTTON
========================= */

.redeem-btn{
  width:90%;
  max-width:420px;

  background:linear-gradient(135deg,var(--yellow2),var(--yellow));
  border:none;

  padding:16px;

  font-size:16px;
  font-weight:800;

  border-radius:18px;

  box-shadow:0 12px 30px rgba(0,0,0,.25);

  cursor:pointer;
}


.redeem-btn.redeemed {
  background: #000;
  color: #fff;
}

.redeem-btn:disabled {
  background: #bdbdbd;
  color: #fff;
}

/* =========================
   REDEEMED STATE
========================= */

.redeem-btn.redeemed{
  background:#6c757d;
  box-shadow:none;
}

#redeemBtn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background:#EFB428;
  color: #000;
}

#redeemBtn.redeemed {
  background: #000;
  color: #fff;
}

#redeemBtn:disabled {
  background: #000;
  color: #fff;
  cursor: not-allowed;
}



/* =================================
   FEED LAYOUT
================================= */

.feed{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:14px 14px 100px;
}


/* =================================
   COUPON CARD
================================= */

.card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:transform .15s ease;
}

.card:active{
  transform:scale(.98);
}


/* =================================
   IMAGE AREA
================================= */

.card-image{
  position:relative;
}

.card-image img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}


/* =================================
   DISCOUNT BADGE
================================= */

.discount-badge{
  position:absolute;
  top:12px;
  left:12px;

  background:#EFB428;
  color:#000;

  font-weight:700;
  font-size:14px;

  padding:6px 10px;
  border-radius:8px;

  box-shadow:0 3px 8px rgba(0,0,0,.2);
}


/* =================================
   SAVE BUTTON
================================= */

.save-btn{
  position:absolute;
  top:12px;
  right:12px;

  width:36px;
  height:36px;

  background:#fff;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;

  box-shadow:0 3px 8px rgba(0,0,0,.25);
  cursor:pointer;
}

.save-btn.saved{
  color:#EFB428;
}

.back-btn{
  position:absolute;
  top:12px;
  left:12px;

  width:36px;
  height:36px;

  background:rgba(255,255,255,.9);
  border:none;
  border-radius:50%;

  font-size:18px;
  font-weight:700;
  line-height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 3px 10px rgba(0,0,0,.25);

  cursor:pointer;
  z-index:5;
}

.back-btn:active{
  transform:scale(.9);
}

/* =================================
   CARD BODY
================================= */

.card-body{
  padding:16px;
}


/* =================================
   TITLE
================================= */

.card-title{
  font-size:20px;
  font-weight:700;
  margin-bottom:4px;
}


/* =================================
   BUSINESS NAME
================================= */

.card-desc{
  font-size:14px;
  color:#666;
}


/* =================================
   LOCATION
================================= */

.card-location{
  font-size:13px;
  color:#888;
  margin-top:2px;
}


/* =================================
   ACTION ROW
================================= */

.card-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}


/* =================================
   EXPIRATION DATE
================================= */

.expire-date{
  font-size:13px;
  color:#E63946;
  font-weight:600;
}


/* =================================
   CATEGORY PILL
================================= */

.category-pill{
  background:#f4f4f4;
  padding:4px 10px;
  border-radius:14px;
  font-size:12px;
  font-weight:600;
  color:#444;
}


/* =================================
   PAGE BACKGROUND
================================= */

body{
  background:#F7F7F7;
}