/*
 * External Stylesheet for Loyalty Wallet
 *
 * This file contains all the custom CSS rules originally embedded in the
 * `<style>` block of the monolithic HTML document. Extracting the styles
 * into this dedicated file improves readability and maintainability.
 *
 * No visual changes have been made; variables and rules are identical
 * to the original. Feel free to further organize or modularize these
 * styles if needed.
 */

/* Root variables */
:root{
  --brand:#12b886;
  --brand-600:#0ca678;

  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --app-max: 620px;
  --tap:: 44px; /* (typo safe) */
  --tap: 44px;

  --shadow: 0 10px 30px rgba(0,0,0,.14);
  --shadow-2: 0 18px 50px rgba(0,0,0,.18);

  /* --- Theme tokens (NO Canvas/CanvasText) --- */
  --page-bg: #f7f8fb;
  --page-fg: #0b0f14;
  --canvas: #ffffff;
  --canvas-2: #f1f3f5;
  --border: rgba(15, 23, 42, .12);
  --text-muted: rgba(15, 23, 42, .60);

  --surface: color-mix(in oklab, var(--canvas) 92%, black 8%);
  --surface-2: color-mix(in oklab, var(--canvas) 96%, black 4%);
}

html,body{height:100%}
html, body{
  background: var(--page-bg);
  color: var(--page-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark overrides */
html[data-bs-theme="dark"]{
  --page-bg: #070a0c;
  --page-fg: #f2f5f7;
  --canvas: #0c1114;
  --canvas-2: #10171b;
  --border: rgba(255,255,255,.14);
  --text-muted: rgba(255,255,255,.62);
  --surface: color-mix(in oklab, var(--canvas) 86%, black 14%);
  --surface-2: color-mix(in oklab, var(--canvas) 92%, black 8%);
}

body{
  background:
    radial-gradient(1100px 600px at 15% -10%, color-mix(in oklab, var(--brand) 18%, var(--page-bg) 82%), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, color-mix(in oklab, var(--brand) 12%, var(--page-bg) 88%), transparent 55%),
    var(--page-bg);
  color: var(--page-fg);
}

body.compact{
  --fs-0:.80rem;
  --fs-1:.90rem;
  --fs-2:1rem;
  --btn-pad-y:.42rem;
  --btn-pad-x:.70rem;
}
body.compact .btn, body.compact .btn-sm{
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-size:var(--fs-0);
  border-radius:12px;
}

.app{
  max-width:var(--app-max);
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.app-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(180%) blur(10px);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--brand) 26%, var(--page-bg) 74%),
      color-mix(in oklab, var(--brand) 16%, var(--page-bg) 84%)
    );
  border-bottom: 1px solid color-mix(in oklab, #fff 10%, transparent 90%);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.1;
}

.brand-chip{
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color:white;
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.78rem;
  font-weight:700;
  box-shadow: 0 8px 18px rgba(18,184,134,.25);
  border: 1px solid rgba(255,255,255,.20);
}

.sync-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  border-radius:999px;
  padding:.35rem .55rem;
  font-weight:700;
  letter-spacing:.2px;
}
.sync-badge::before{
  content:"";
  width:.55rem;height:.55rem;border-radius:999px;
  background:currentColor;
  display:inline-block;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent 82%);
}

.view{
  flex:1 1 auto;
  padding-bottom:96px;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.section-head h5{
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
}
.hint{
  color: var(--text-muted);
  font-size:.86rem;
}

.nav-bottom{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:12px;
  width:min(var(--app-max), calc(100% - 18px));
  background: color-mix(in oklab, var(--canvas) 88%, black 12%);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  padding: 6px 8px;
  overflow:hidden;
}
.nav-bottom::before{
  content:"";
  position:absolute;inset:-40%;
  background: radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--brand) 18%, transparent 82%), transparent 40%);
  pointer-events:none;
}
.nav-bottom .nav-link{
  position:relative;
  min-height: var(--tap);
  padding:.65rem .2rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  align-items:center;
  justify-content:center;
  font-size:.80rem;
  color: color-mix(in oklab, var(--page-fg) 62%, transparent 38%);
  border-radius: 14px;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.nav-bottom .nav-link i{ font-size:1.05rem; }
.nav-bottom .nav-link:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--canvas) 80%, black 20%);
}
.nav-bottom .nav-link.active{
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 12%, var(--canvas) 88%);
  box-shadow: 0 8px 18px rgba(18,184,134,.18);
}

.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color:white;
  border:none;
  font-weight:800;
  letter-spacing:.15px;
  box-shadow: 0 10px 22px rgba(18,184,134,.20);
  min-height: var(--tap);
}
.btn-brand:hover{ filter:brightness(0.98); color:white; }
.btn-brand:active{ transform: translateY(1px); }

.card{
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--canvas);
  box-shadow: var(--shadow);
}
.card .card-body{ padding:16px; }

.qrcode{
  display:grid;
  place-items:center;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 14px;
  border:1px solid var(--border);
}

.offers-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 440px){ .offers-grid{ grid-template-columns: 1fr; } }

.offer-card{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--canvas) 96%, black 4%),
      color-mix(in oklab, var(--canvas) 90%, black 10%)
    );
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.offer-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.offer-card .body{
  padding: 12px 12px 14px;
  gap: 10px;
  align-items:flex-start;
}

.offer-title{
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: .1px;
  font-size: .98rem;
  max-width: 20ch;
}

.offer-media{
  background: #fff;
  height: 136px;
  display:grid;
  place-items:center;
  padding: 10px;
  border-bottom: 1px dashed color-mix(in oklab, var(--page-fg) 22%, var(--canvas) 78%);
}
html[data-bs-theme="dark"] .offer-media{
  background: var(--surface-2);
  border-bottom: 1px dashed color-mix(in oklab, var(--page-fg) 22%, var(--canvas) 78%);
}

.offer-media svg{
  width:100%;
  height:100%;
  max-height: 112px;
}
.offer-media--placeholder{
  background:
    radial-gradient(700px 220px at 20% 15%, color-mix(in oklab, var(--brand) 18%, var(--page-bg) 82%), transparent 55%),
    var(--surface-2);
}

.offer-code-caption{
  text-align:center;
  font-weight:800;
  font-size:.80rem;
  letter-spacing:.08em;
  margin-top: 6px;
  font-family: ui-monospace, Menlo, monospace;
  color: color-mix(in oklab, var(--page-fg) 70%, transparent 30%);
}

.offer-media.clickable{ cursor:pointer; position:relative; }
.offer-media.clickable::after{
  content:"Tap";
  position:absolute;
  top:10px; left:10px;
  font-size:.72rem;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  background: color-mix(in oklab, var(--brand) 12%, var(--canvas) 88%);
  color: var(--brand);
  border: 1px solid var(--border);
  opacity:.9;
}

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

.offer-chip{
  position:absolute; right:10px; top:10px;
  background: linear-gradient(135deg, #ef476f, #d64572);
  color:white;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 900;
  font-size: .78rem;
  border:1px solid rgba(255,255,255,.20);
  box-shadow: 0 10px 22px rgba(239,71,111,.18);
}
.offer-qty{
  position:absolute; right:12px; bottom:56px;
  background: color-mix(in oklab, #fff 84%, #000 16%);
  color:black;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 900;
  font-size: .78rem;
  border: 1px solid rgba(0,0,0,.06);
}
.offer-tag{
  position:absolute; left:12px; bottom:56px;
  background: color-mix(in oklab, #ff8fab 70%, #fff 30%);
  color:black;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 900;
  font-size: .78rem;
  border: 1px solid rgba(0,0,0,.05);
}

/* Tap targets */
.app-header .btn{
  min-width: var(--tap);
  min-height: var(--tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.offer-card .btn-group .btn{
  min-width: 44px;
  min-height: 44px;
  padding: .4rem .55rem;
}
.form-control, .form-select{
  min-height: var(--tap);
  border-radius: 12px;
  border-color: var(--border);
  background: var(--canvas);
  color: var(--page-fg);
}
.input-group-text{
  border-color: var(--border);
  background: var(--canvas);
  color: var(--page-fg);
}

/* Search/Filter bar */
.searchbar{
  position: sticky;
  top: 68px;
  z-index: 5;
  padding-top: 10px;
  padding-bottom: 10px;
  backdrop-filter: blur(10px) saturate(160%);
  background: color-mix(in oklab, var(--canvas) 88%, transparent 12%);
  border-bottom: 1px solid var(--border);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}
@media (max-width: 420px){ .searchbar{ top: 64px; } }

.filter-chip{
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 800;
  font-size: .78rem;
  border: 1px solid var(--border);
  background: var(--canvas);
  color: color-mix(in oklab, var(--page-fg) 75%, transparent 25%);
  min-height: 38px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.filter-chip.active{
  background: color-mix(in oklab, var(--brand) 14%, var(--canvas) 86%);
  color: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--border) 65%);
}
.filter-chip i{ font-size: .95rem; }

/* Settings */
#view-settings .card .card-body{ padding:14px; }
#view-settings .settings-actions .btn{
  padding:.30rem .58rem;
  font-size:.74rem;
  border-radius:12px;
  min-height: 44px;
}
.form-label{
  font-weight:800;
  font-size:.84rem;
  color: color-mix(in oklab, var(--page-fg) 80%, transparent 20%);
}

/* Debug */
#debugOut{
  max-height:260px;
  overflow:auto;
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px;
  border:1px solid var(--border);
  font-family: ui-monospace, Menlo, monospace;
  font-size: .78rem;
  color: var(--page-fg);
}

.ro-badge{
  background: color-mix(in oklab, var(--page-fg) 12%, var(--canvas) 88%);
  color: var(--page-fg);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .74rem;
  font-weight: 900;
  border:1px solid var(--border);
}

.modal-content{
  border-radius: 20px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-2);
  background: var(--canvas);
  color: var(--page-fg);
}
.modal-header{
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--canvas) 96%, black 4%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.modal-footer{
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--canvas) 96%, black 4%);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.soft-pill{
  background: color-mix(in oklab, var(--brand) 14%, var(--canvas) 86%);
  color: color-mix(in oklab, var(--page-fg) 88%, black 12%);
  border:1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .78rem;
  font-weight: 800;
}


.text-muted{ color: var(--text-muted) !important; }