:root {
  --fiesta: #7a1f2b;
  --fiesta-dark: #54131d;
  --cream: #fff8ef;
  --ink: #271d1f;
  --muted: #766b6d;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #fff 0, var(--page-bg, #f0f4e9) 100%);
  color: var(--ink);
  padding-bottom: 5rem;
  line-height: 1.55;
}

.app-header {
  background: linear-gradient(135deg, var(--fiesta-dark), var(--fiesta));
  color: #fff;
  box-shadow: 0 4px 18px rgba(84, 19, 29, .22);
}

body.has-page-photo { background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78)), var(--page-photo); background-size: cover; background-position: center; background-attachment: fixed; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .7rem;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.app-main {
  max-width: 720px;
}

.hero-card,
.member-card,
.panel {
  border: 0;
  border-radius: 1.25rem;
  box-shadow: 0 14px 36px rgba(64, 38, 42, .09);
}

.hero-card {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--fiesta-dark) 88%, transparent), color-mix(in srgb, var(--fiesta) 72%, transparent)), var(--points-photo, none), linear-gradient(135deg, var(--fiesta-dark), var(--fiesta));
  background-size: cover;
  background-position: center;
}

.member-greeting { padding: .15rem .15rem .35rem; }
.member-greeting #greeting-time { color: var(--fiesta-dark); }
.member-greeting #member-name { color: var(--ink); }
.hero-card .point-label,
.hero-card .point-expiry-summary,
.hero-card .point-expiry-summary strong,
.hero-card .badge,
.hero-card .metric { color:#fff !important; text-shadow:0 1px 3px rgba(0,0,0,.45); }
.hero-card .badge { background:rgba(0,0,0,.2) !important; border:1px solid rgba(255,255,255,.65); }
.hero-card .point-expiry-summary { display:grid; gap:.12rem; margin-top:.65rem; opacity:1; }
.news-panel, #news-panel { background: #fff; }
.news-heading { display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem; color:var(--ink); font-weight:800; }
.news-icon { display:grid; width:1.25rem; height:1.25rem; place-items:center; border-radius:50%; background:var(--fiesta); color:#fff; font-size:.8rem; font-weight:900; }

.hero-card::after {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 180px;
  height: 180px;
  border: 35px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: "";
}

.member-card {
  color: #fff;
  background-image: linear-gradient(145deg, rgba(25,36,27,.83), rgba(49,64,31,.58)), var(--member-photo, none), linear-gradient(145deg, var(--fiesta-dark), var(--fiesta));
  background-size: cover;
  background-position: center;
}

.muted {
  color: var(--muted);
}

.section-error {
  display: grid;
  gap: .55rem;
  padding: .8rem;
  border: 1px solid #e1e6e2;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .9);
  color: var(--muted);
  font-size: .88rem;
}

.section-error .btn { width: fit-content; }

#app-toast {
  z-index: 1200;
  display: grid;
  position: fixed;
  right: 1rem;
  bottom: calc(5.25rem + env(safe-area-inset-bottom));
  width: min(26rem, calc(100% - 2rem));
  gap: .5rem;
}

.fiesta-toast,
.app-recovery {
  padding: .8rem 1rem;
  border: 1px solid #d9e1da;
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 9px 28px rgba(35, 56, 44, .16);
  color: var(--ink);
  font-size: .88rem;
}

.fiesta-toast-danger { border-color: #efd1d5; }
.fiesta-toast-success { border-color: #cde4d2; }
.app-recovery-actions,.offline-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.offline-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .6rem 1rem; border: 1px solid var(--fiesta); border-radius: .75rem; color: #fff; background: var(--fiesta); font-weight: 700; }

.metric {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

.code {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.btn-fiesta {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--fiesta);
  --bs-btn-border-color: var(--fiesta);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--fiesta-dark);
  --bs-btn-hover-border-color: var(--fiesta-dark);
}

.form-control {
  border-radius: .8rem;
  padding: .75rem .9rem;
}

.bottom-nav {
  position: fixed;
  z-index: 1000;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: min(calc(100% - 1.5rem), 640px);
  gap: .1rem;
  padding: .35rem .55rem;
  transform: translateX(-50%);
  border: 1px solid #e6e9e7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(35, 56, 44, .15);
}

.bottom-nav a {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 3.4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  padding: .3rem .2rem .4rem;
  color: #6e7772;
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.bottom-nav a:hover,
.bottom-nav a:focus {
  color: #0b684d;
}

.bottom-nav a.active,
.bottom-nav a.active:hover,
.bottom-nav a.active:focus {
  color: #0b684d;
  background: transparent;
  box-shadow: none;
  font-weight: 800;
}

.bottom-nav a.active::after {
  position: absolute;
  bottom: .12rem;
  width: 1rem;
  height: .18rem;
  border-radius: 999px;
  background: #0b684d;
  content: "";
}

.bottom-nav svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.qr-wrap {
  display: inline-block;
  padding: 1rem;
  border-radius: 1rem;
  background: #fff;
}

.qr-wrap canvas {
  display: block;
  width: min(70vw, 280px);
  height: min(70vw, 280px);
  image-rendering: pixelated;
}

.activity-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid #f0e5e7;
}

.activity-row:last-child {
  border-bottom: 0;
}

.purchase-entry {
  padding: 1rem 0;
  border-bottom: 1px solid #f0e5e7;
}

.purchase-entry:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.purchase-entry summary {
  color: var(--fiesta);
  cursor: pointer;
  font-weight: 700;
}

.purchase-items {
  margin: .75rem 0 0;
  padding: .75rem 0 0;
  border-top: 1px dashed #ead7da;
  list-style: none;
}

.purchase-items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  font-size: .9rem;
}

.history-scroll { max-height: 22rem; overflow: auto; overscroll-behavior: contain; padding-right: .35rem; }
.promo-panel { overflow: hidden; border-radius: 1.25rem; }
.promo-carousel { position: relative; min-height: 0; overflow: hidden; background: #f7eff0; }
.promo-slide { display: block; position: relative; color: inherit; text-decoration: none; }
.promo-slide[hidden] { display: none; }
.promo-slide img { display: block; width: 100%; height: clamp(160px, 50vw, 260px); object-fit: cover; }
.promo-skeleton { min-height: 190px; }
.point-expiry-summary { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin-top:.75rem; font-size:.82rem; opacity:.92; }
#news-panel { border-left:4px solid var(--fiesta); }
.profile-address-card address { color: var(--muted); font-style: normal; overflow-wrap: anywhere; }
.reward-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.reward-card { position:relative; display:block; min-height:245px; overflow:hidden; border:0; border-radius:1.25rem; background:#f4f1e7; box-shadow:0 9px 25px rgba(35,48,38,.09); }
.reward-tone-0 { background-color:#fff0d2; }
.reward-tone-1 { background-color:#e9f2e3; }
.reward-tone-2 { background-color:#fae8e4; }
.reward-top,.reward-bottom { position:relative; z-index:1; }
.reward-top { min-height:5rem; padding:.85rem 1rem .65rem; background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.97) 58%,rgba(255,255,255,0) 100%); }
.reward-bottom { display:flex; min-height:5.3rem; flex-direction:column; justify-content:flex-end; padding:.55rem 1rem .7rem; background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.97) 58%,rgba(255,255,255,0) 100%); }
.reward-chip { display: inline-flex; margin-bottom: .45rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(255,255,255,.66); color: #566151; font-size: .7rem; font-weight: 800; }
.reward-top h2 { width:100%; margin:0 0 .25rem; color:#282d28; font-size:1.1rem; font-weight:850; line-height:1.12; overflow-wrap:anywhere; }
.reward-top p { margin:0; color:#505a51; font-size:.76rem; line-height:1.2; }
.reward-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.reward-points { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid rgba(106, 79, 27, .08); border-radius: 999px; background: rgba(255,255,255,.94); color: #4d4433; font-size: .77rem; font-weight: 800; white-space: nowrap; }
.reward-points span { color: #d79716; font-size: 1rem; }
.reward-outlet { max-width: 100%; margin-top: .45rem; color: #38443a; font-size: .7rem; font-weight:700; line-height: 1.2; }
.reward-action, .pending-open-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.35rem; margin-top: .55rem; padding: .4rem .8rem; border: 0; border-radius: 999px; background: #0b684d; color: #fff; font-size: .78rem; font-weight: 800; text-decoration: none; }
.reward-actions .reward-action { margin-top:0; }
.reward-action:disabled { background: #8b9790; color: #fff; opacity: .9; }
.reward-picture { position:absolute; inset:0; overflow:hidden; }
.reward-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.reward-placeholder { display:grid; width:100%; height:100%; min-height:120px; place-items:center; background:rgba(255,255,255,.25); font-size:3rem; }
.pending-redemptions { overflow:hidden; padding:0; border:1px solid #dce8d8; border-radius:1.2rem; background:#fff; }
.pending-summary-toggle { display:flex; width:100%; align-items:center; gap:.7rem; padding:.85rem 1rem; border:0; background:#fff; color:#243a18; text-align:left; }
.pending-summary-icon { display:grid; width:2.4rem; height:2.4rem; flex:0 0 auto; place-items:center; border-radius:.8rem; background:#edf4e9; color:#31552a; font-size:1.3rem; }
.pending-summary-label { display:grid; min-width:0; gap:.1rem; }
.pending-summary-label small { color:#667366; }
.pending-summary-chevron { margin-left:auto; font-size:1.25rem; transition:transform .2s ease; }
.pending-summary-toggle[aria-expanded="true"] .pending-summary-chevron { transform:rotate(180deg); }
.pending-redemption-list { display: grid; gap: .6rem; }
.pending-redemption-list:not([hidden]) { padding:.25rem 1rem 1rem; }
.pending-redemption-card { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem; border: 1px solid #dbe8dc; border-radius: 1rem; background: #fff; }
.pending-redemption-copy { display: grid; min-width: 0; gap: .2rem; }
.pending-redemption-copy strong { overflow-wrap: anywhere; }
.pending-badge { display: inline-block; width: fit-content; padding: .15rem .5rem; border-radius: 999px; background: #d9ead7; color: #286345; font-size: .68rem; font-weight: 800; }
.pending-open-button { flex: 0 0 auto; margin: 0; }
.redemption-qr-view { scroll-margin-top: 1rem; }

.skeleton {
  min-height: 1em;
  border-radius: .4rem;
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%);
  background-size: 200% 100%;
  animation: loading 1.2s infinite;
}

.welcome-shell {
  width: min(100%, 560px);
  margin: 0 auto;
}

.welcome-hero {
  padding: 1.25rem .5rem .5rem;
}

.welcome-logo {
  width: 96px;
  height: 96px;
  margin-bottom: 1rem;
  border-radius: 1.5rem;
  box-shadow: 0 14px 32px rgba(84, 19, 29, .2);
}

.welcome-kicker {
  margin-bottom: .45rem;
  color: var(--fiesta);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.welcome-lead {
  color: var(--muted);
  font-size: 1.05rem;
}

.install-panel {
  border: 1px solid #f0dfe2;
  background: rgba(255, 255, 255, .94);
}

.install-icon {
  display: grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 1rem;
  color: #fff;
  background: var(--fiesta);
  font-size: 1.5rem;
  font-weight: 800;
}

.welcome-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.app-footer {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 2rem;
  padding: 1rem 0;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}

.app-footer span + span::before {
  margin-right: .45rem;
  content: "·";
}

.app-footer a {
  color: var(--fiesta);
  font-weight: 700;
  text-decoration: none;
}

.app-footer a:hover,
.app-footer a:focus {
  text-decoration: underline;
}

@keyframes loading {
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 767.98px) {
  html {
    font-size: 18px;
  }

  body {
    padding-bottom: 6rem;
  }

  .app-header .container {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
  }

  .app-header .small {
    font-size: .9rem;
  }

  .brand {
    font-size: 1.45rem;
  }

  .app-main {
    padding-top: 1.25rem !important;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .app-main .card-body {
    padding: 1.25rem !important;
  }

  .app-main h1,
  .app-main .h3 {
    font-size: 1.65rem;
    line-height: 1.2;
  }

  .app-main h2,
  .app-main .h4,
  .app-main .h5 {
    line-height: 1.3;
  }

  .form-label {
    margin-bottom: .5rem;
    font-weight: 650;
  }

  .form-control {
    min-height: 3.25rem;
    padding: .8rem 1rem;
    font-size: 1rem;
  }

  .form-text,
  .small {
    font-size: .9rem;
  }

  .btn {
    min-height: 3.15rem;
    padding: .7rem 1rem;
    font-size: 1rem;
  }

  .metric {
    font-size: 2.5rem;
  }

  .bottom-nav {
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    width: calc(100% - 1rem);
    padding: .45rem;
  }

  .bottom-nav a {
    min-height: 3.35rem;
    padding: .25rem .15rem .35rem;
    font-size: .72rem;
    font-weight: 650;
  }

  .activity-row {
    align-items: flex-start;
    padding: 1rem 0;
  }

  .app-footer {
    font-size: .88rem;
  }

  .history-scroll { max-height: 19rem; }
  .promo-slide img { height: 190px; }
  .reward-grid { grid-template-columns: 1fr; }
  .reward-card { min-height:225px; }
  .reward-top { min-height:4.6rem; padding:.75rem .85rem .55rem; }
  .reward-bottom { min-height:5rem; padding:.5rem .85rem .65rem; }
  .reward-top h2 { font-size:1.02rem; }

  .welcome-hero {
    padding-top: .5rem;
  }

  .welcome-logo {
    width: 88px;
    height: 88px;
  }

  .welcome-actions {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) {
  .app-main {
    padding-top: 2.25rem !important;
  }

  .hero-card .card-body,
  .member-card .card-body {
    padding: 2rem;
  }
}