/* Tinker Product Radar — brand theme, mobile-first.
   Palette + fonts mirror the tinkersandtots.com "Opening Soon" page. Layered on top of
   Bootstrap 5 (loaded via CDN in base.html). */

:root {
  --ink: #332E58;
  --ink-soft: #736F97;
  --cream: #FFFDF9;
  --tangerine: #FF8A5B;
  --sun: #FFC64D;
  --teal: #37C6B2;
  --blue: #6C8CFF;
  --pink: #FF7CA8;
  --sky-1: #E9F6F0;
  --sky-2: #FDEEE3;
  --line: rgba(51, 46, 88, .12);
  --shadow: 0 22px 45px -22px rgba(51, 46, 88, .35);
  --shadow-sm: 0 10px 22px -14px rgba(51, 46, 88, .40);
  --radius: 18px;

  --bs-body-font-family: "Nunito", system-ui, sans-serif;
  --bs-body-color: var(--ink);
}

* { box-sizing: border-box; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(165deg, var(--sky-1) 0%, var(--sky-2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  /* leave room for the fixed bottom nav on phones */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .brand-font {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  color: var(--ink);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- top app bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(255, 253, 249, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: .6rem .9rem;
}
.appbar .logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--tangerine), var(--sun));
  display: grid; place-items: center; color: #fff; font-size: 1.05rem;
}
.appbar .title { font-family: "Fredoka", sans-serif; font-size: 1.05rem; line-height: 1; }
.appbar .subtitle { font-size: .68rem; color: var(--ink-soft); }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--cream);
}
.card-soft { background: #fff; }

/* ---------- stat tiles (dashboard) ---------- */
.stat-tile {
  border-radius: var(--radius);
  padding: .9rem 1rem;
  color: #fff;
  box-shadow: var(--shadow-sm);
  min-height: 84px;
  display: flex; flex-direction: column; justify-content: center;
}
.stat-tile .num { font-family: "Fredoka", sans-serif; font-size: 1.7rem; line-height: 1; }
.stat-tile .lbl { font-size: .74rem; opacity: .95; margin-top: .25rem; }
.bg-tangerine { background: linear-gradient(135deg, var(--tangerine), #ff6f3d); }
.bg-teal { background: linear-gradient(135deg, var(--teal), #21a894); }
.bg-blue { background: linear-gradient(135deg, var(--blue), #4f6fe6); }
.bg-sun { background: linear-gradient(135deg, var(--sun), #f5a623); color: var(--ink); }
.bg-pink { background: linear-gradient(135deg, var(--pink), #ff5f92); }

/* ---------- product / list cards ---------- */
.thumb {
  width: 68px; height: 68px; object-fit: cover; border-radius: 14px;
  background: var(--sky-1); flex: 0 0 auto;
}
.thumb-placeholder {
  display: grid; place-items: center; color: var(--ink-soft); font-size: 1.4rem;
}
.list-photo {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;
  background: var(--sky-1);
}

/* ---------- badges / pills ---------- */
.pill {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .18rem .55rem; border-radius: 999px; line-height: 1.2;
}
.pill-status { background: var(--sky-1); color: var(--ink); }
.rec-badge { font-weight: 700; border-radius: 999px; padding: .28rem .7rem; font-size: .78rem; }

/* recommendation colours */
.rec-danger { background: #ffe2e2; color: #c1272d; }
.rec-secondary { background: #ece9f4; color: var(--ink-soft); }
.rec-warning { background: #fff0d6; color: #b8761a; }
.rec-info { background: #e2f0ff; color: #2f6fd0; }
.rec-success { background: #d9f6ee; color: #1a8f7a; }

/* ---------- score ring ---------- */
.score-ring {
  --val: 0; width: 74px; height: 74px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--teal) calc(var(--val) * 1%), #e7e3f0 0);
  display: grid; place-items: center;
}
.score-ring .inner {
  width: 58px; height: 58px; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; text-align: center;
}
.score-ring .inner b { font-family: "Fredoka", sans-serif; font-size: 1.15rem; }
.score-ring .inner small { font-size: .58rem; color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn-brand {
  background: linear-gradient(135deg, var(--tangerine), #ff6f3d);
  color: #fff; border: none; border-radius: 14px; font-weight: 700;
}
.btn-brand:hover { color: #fff; filter: brightness(1.03); }
.btn-outline-brand {
  border: 1.5px solid var(--tangerine); color: var(--tangerine);
  border-radius: 14px; font-weight: 700; background: transparent;
}
.btn-outline-brand:hover { background: var(--tangerine); color: #fff; }
.btn-soft {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); font-weight: 600;
}

/* ---------- forms ---------- */
.form-control, .form-select {
  border-radius: 14px; border: 1px solid var(--line); background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--tangerine);
  box-shadow: 0 0 0 .2rem rgba(255, 138, 91, .18);
}
label.form-label { font-weight: 700; font-size: .85rem; color: var(--ink); }
.form-text { color: var(--ink-soft); }

/* ---------- bottom nav (mobile-first) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: rgba(255, 253, 249, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; align-items: center;
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
}
.bottom-nav a {
  flex: 1; text-align: center; color: var(--ink-soft); font-size: .64rem;
  text-decoration: none; padding: .3rem 0; line-height: 1.1;
}
.bottom-nav a i { display: block; font-size: 1.25rem; margin-bottom: .1rem; }
.bottom-nav a.active { color: var(--tangerine); }
.bottom-nav .fab {
  flex: 0 0 auto; margin-top: -26px;
}
.bottom-nav .fab span {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tangerine), #ff6f3d);
  color: #fff; display: grid; place-items: center; font-size: 1.6rem;
  box-shadow: var(--shadow); border: 4px solid var(--cream);
}

/* ---------- misc ---------- */
.section-title { font-size: 1rem; margin: 0; }
.muted { color: var(--ink-soft); }
.hr-soft { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
.container-app { max-width: 760px; }

/* On wider screens keep the bottom nav (still handy) but center content nicely */
@media (min-width: 992px) {
  body { padding-bottom: 90px; }
}