/* FriendPerks — Light Theme (Blue + Green) */

/* ============== Reset (trimmed) ============== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

:root{
  /* Consumer palette */
  --bg: #fffaf7;              /* warm background */
  --panel: #ffffff;
  --panel-2: #fff4ed;         /* soft peach panel */
  --text: #17211f;            /* deep charcoal */
  --muted: #6b7280;

  /* Brand & accents (fun + friendly) */
  --brand: #f97316;           /* orange primary */
  --brand-2: #ea580c;         /* darker orange (hover) */
  --brand-3: #ff8a3d;         /* lighter accent */
  --accent: #14b8a6;          /* teal accent */
  --accent-2: #0d9488;

  /* Feedback */
  --success: #22c55e;
  --warn: #f59e0b;
  --error: #ef4444;

  /* UI/Elevation */
  --border: #fde7db;
  --radius: 12px;
  --shadow: 0 10px 24px rgba(249, 115, 22, .08), 0 1px 0 rgba(255,255,255,.4) inset;
}

/* Background glow */
body{
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(249, 115, 22, .08), transparent 40%),
    radial-gradient(700px 400px at 110% -10%, rgba(20, 184, 166, .08), transparent 45%),
    var(--bg);
  color: var(--text);
}

/* Links */
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.header{ background: rgba(255,255,255,.8); border-bottom:1px solid var(--border); backdrop-filter: blur(8px); }
.nav a{ color:#374151; opacity:.95; }
.nav a:hover{ color:#111827; }

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card.soft{ background: var(--panel-2); border-color:#ffd3b8; }
.card.highlight{
  border-color: #ffcaa5;
  box-shadow:
    0 0 0 1px rgba(249, 115, 22, .18) inset,
    var(--shadow);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border:0; border-radius:10px; cursor:pointer;
  color:#fff; font-weight:700;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(249, 115, 22, .22), 0 1px 0 rgba(255,255,255,.3) inset;
  transition: transform .06s ease, filter .15s ease;
}
.btn:hover{ filter: brightness(1.02); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 22px rgba(20, 184, 166, .18);
}
.btn.ghost{
  background:#fff; color: var(--brand-2);
  border:1px solid #ffb889;
}

/* Tags for polls/reviews */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600;
  background:#fff1e7; color:#7c2d12; border:1px solid #ffd2b1;
}
.tag.teal{ background:#e6fffb; color:#0f766e; border-color:#bff4ee; }
.tag.ok{ background:#ecfdf5; color:#166534; border-color: rgba(34,197,94,.25); }

/* Perk (or card-with-image) layout stays the same */
.perk-card { padding:0; overflow:hidden; }
.perk-media { position:relative; aspect-ratio: 16/9; background:#fff1e7; }
.perk-media img{ width:100%; height:100%; object-fit: cover; display:block; }
.perk-badge{
  position:absolute; top:10px; left:10px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px; box-shadow: var(--shadow);
}


/* ============== Base ============== */

.stack-12 > * + *{ margin-top:12px; }
.stack-16 > * + *{ margin-top:16px; }
.stack-24 > * + *{ margin-top:24px; }

/* ============== Header / Nav ============== */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 20px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
  color: var(--text);
}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #60a5fa, var(--brand));
  box-shadow: 0 0 10px rgba(37, 99, 235, .6);
}
.nav-links{ display:flex; gap:14px; align-items:center; }
.nav a{ color: #374151; opacity:.9; }
.nav a:hover{ color:#111827; opacity:1; }

/* ============== Hero ============== */
.hero{ padding: 48px 20px 24px; text-align: center; }
.h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: .2px;
  margin: 0 0 10px;
}
.h2{ font-size: clamp(18px, 2.2vw, 22px); margin:0; color: var(--muted); }

/* ============== Cards / Panels ============== */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card.soft{ background: var(--panel-2); }
.card.highlight{
  border-color: rgba(37, 99, 235, .45);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, .18) inset,
    var(--shadow);
}
.card.success{ border-color: rgba(34, 197, 94, .35); }
.card.error{ border-color: rgba(239, 68, 68, .35); }

/* ============== Grid ============== */
.grid{ display: grid; gap: 16px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

/* ============== Forms ============== */
label{ display:block; margin: 10px 0 6px; font-weight:600; color: #374151; }
.input, .select, .textarea{
  width:100%;
  background:#fff;
  color: var(--text);
  border:1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px;
  outline: none;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.input::placeholder, .textarea::placeholder{ color:#9ca3af; }
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--brand-3);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
  background:#ffffff;
}
.row{ display:flex; gap:12px; flex-wrap: wrap; }
.row > .col{ flex:1; min-width: 200px; }

/* ============== Buttons ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:700; border:0; border-radius:10px; cursor:pointer;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .25), 0 1px 0 rgba(255,255,255,.2) inset;
  transition: transform .06s ease, filter .15s ease;
}
.btn:hover{ filter: brightness(1.03); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{
  background: linear-gradient(180deg, #e5e7eb, #d1d5db);
  color:#111827; box-shadow: none; border:1px solid var(--border);
}
.btn.ghost{
  background: transparent; color: var(--brand-2);
  border:1px solid rgba(37, 99, 235, .35);
}
.btn.ok{ background: linear-gradient(180deg, var(--success), #16a34a); }
.btn.full{ width:100%; }

/* ============== Meta / Badges ============== */
.meta{ font-size: 12px; color: var(--muted); }
.kbd{
  font: 12px ui-monospace, Menlo, monospace; background:#f3f4f6;
  padding:2px 6px; border-radius:6px; border:1px solid var(--border); color:#374151;
}

/* ============== Tables (stats) ============== */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:10px; border-bottom:1px solid var(--border); text-align:left; }
.table th{ color:#374151; font-weight:700; }

/* ============== Banners (alerts) ============== */
.banner{
  background: linear-gradient(180deg, #eef2ff, #e0e7ff);
  border: 1px solid rgba(37, 99, 235, .25);
  border-radius: var(--radius);
  padding: 14px;
  color: #1e3a8a;
}
.banner.ok{
  background: linear-gradient(180deg, #ecfdf5, #dcfce7);
  border-color: rgba(34, 197, 94, .35);
  color: #065f46;
}
.banner.err{
  background: linear-gradient(180deg, #fef2f2, #fee2e2);
  border-color: rgba(239, 68, 68, .35);
  color: #7f1d1d;
}

/* ============== Email preview frame ============== */
.preview{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.preview-inner{ background:#fff; padding:18px; }

/* ============== Utilities ============== */
.center { text-align: center; }
.hidden { display: none !important; }
.mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; }
.mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; }