/* ========== GLOBAL STYLES ========== */
body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #111;
  background-color: #fff;
  box-sizing: border-box;
}

main,
section {
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

/* ========== HEADER & BANNER ========== */
.site-header  {
  text-align: center;
}

.site-banner {
  display: block;
  width: 100%;
  height: auto;          /* keep aspect ratio */
  max-height: none;      /* don't cap the height */
  object-fit: contain;   /* belt-and-suspenders; never crop */
}

/* ========== NAVIGATION ========== */
.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1.5rem auto;
  max-width: 700px;
  padding: 0 1rem;
}

.nav-buttons a img {
  width: 130px;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.nav-buttons a img:hover {
  transform: scale(1.05);
}

.auth-btn {
  width: 80px !important;
  height: auto !important;
  margin: 10px auto;
  display: block;
}
/* ========== HERO SECTION ========== */
.hero-message {
  background-image: url("images/dna-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

.hero-overlay {
  padding: 1.5rem;
  border-radius: 10px;
  max-width: 700px;
  width: 100%;
}

.hero-overlay h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.hero-overlay p {
  font-size: 1rem;
  margin: 0 auto;
}

.hero-overlay h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.hero-overlay p {
  font-size: 1rem;
  margin: 0 auto;
}

/* ========== WHY SECTION ========== */
.why {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.why h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.why p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* ========== DECODE PAGE LAYOUT ========== */
.decode-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-tier {
  background-color: #ffffff;
  border: 2px solid #0b1957;
  border-radius: 12px;
  padding: 20px;
  width: 320px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.tier-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0b1957;
  margin-bottom: 10px;
}

.tier-description {
  font-size: 1rem;
  color: #333333;
  margin-bottom: 20px;
}

.tier-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.tier-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #0b1957;
}

.add-to-cart {
  padding: 8px 16px;
  background-color: #0b1957;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.add-to-cart:hover {
  background-color: #1a2969;
}

/* ========== FORMS ========== */
.form-wrapper {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  border: 2px solid #0b1957;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

form input {
  padding: 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

form button {
  padding: 12px;
  background-color: #0b1957;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #1a2969;
}

/* ========== CHECKOUT INFO ========== */
#checkout-info {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

#checkout-info p {
  margin: 10px 0;
}
footer img {
  transition: transform 0.2s ease;
}

footer img:hover {
  transform: scale(1.1);
  }
/* Admin Dashboard Styles */
.header {
  background-color: #002244;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header .logo {
  height: 50px;
}
.logout-btn {
  background: white;
  color: #002244;
  padding: 10px 15px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}
.dashboard-container {
  padding: 30px;
}
.filters input {
  padding: 10px;
  width: 300px;
  font-size: 16px;
  margin-bottom: 20px;
}
.submission-table table {
  width: 100%;
  border-collapse: collapse;
}
.submission-table th,
.submission-table td {
  padding: 12px;
  border-bottom: 1px solid #ccc;
  text-align: left;
}
.submission-table th {
  background-color: #f4f4f4;
}
.submission-table td button {
  padding: 6px 12px;
  margin: 2px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.submission-table .in-review {
  background-color: #f0ad4e;
  color: white;
}
.submission-table .completed {
  background-color: #5cb85c;
  color: white;
}

/* ========== AUTH FORM MESSAGES ========== */
.error-message {
  background-color: #fee2e2;
  color: #b91c1c;
  padding: 12px 18px;
  border-left: 5px solid #ef4444;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.footer-nav {
  text-align: center; /* center the links */
}

.footer-nav a {
  margin: 0 15px; /* space on both sides of each link */
  text-decoration: none; /* optional: removes underline */
}

.footer-nav a:hover {
  text-decoration: underline; /* optional: underline on hover */
}
.blog-page .container { max-width: 900px; margin: 0 auto; }
.blog-list { display: grid; gap: 24px; }
.blog-preview { padding: 16px 0; border-bottom: 1px solid #e5e7eb; }
.blog-preview:last-child { border-bottom: 0; }
.blog-preview h2 { margin: 0 0 6px; font-size: 1.5rem; }
.blog-preview .meta { color: #6b7280; margin: 0 0 10px; font-size: 0.95rem; }
.blog-preview p { margin: 0 0 10px; }
.blog-preview .read-more { font-weight: 600; text-decoration: none; }
.blog-preview .read-more:hover { text-decoration: underline; }

.blog-page .container { max-width: 900px; margin: 0 auto; }
.blog-list { display: grid; gap: 24px; }
.blog-preview { padding: 16px 0; border-bottom: 1px solid #e5e7eb; }
.blog-preview:last-child { border-bottom: 0; }
.blog-preview h2 { margin: 0 0 6px; font-size: 1.5rem; }
.blog-preview .meta { color: #6b7280; margin: 0 0 10px; font-size: 0.95rem; }
.blog-preview p { margin: 0 0 10px; }
.blog-preview .read-more { font-weight: 600; text-decoration: none; }
.blog-preview .read-more:hover { text-decoration: underline; }

/* ——— BANNER: show the whole image ——— */
.site-banner {
  display: block;
  width: 100%;
  height: auto !important;       /* let it grow */
  max-height: none !important;   /* remove the cap */
  object-fit: contain !important;/* never crop */
  vertical-align: middle;        /* no stray baseline gap */
}

/* ——— WRAPPERS: do NOT clip the banner ——— */
.site-header,
.hero,
.banner,
.header,
#header {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;  /* no clipping */
  padding: 0;                    /* avoid squeezing text */
  margin: 0;
}

/* ——— MAKE SURE the section below isn’t overlapping upward ——— */
.nav-buttons {
  position: relative;
  margin-top: 24px !important;   /* give the banner breathing room */
  z-index: 0;
}

/* If you used a “hero” wrapper around the img, keep it on top */
.hero, .site-banner { z-index: 1; position: relative; }

/* Optional: smaller banner ONLY on small screens (still no crop) */
@media (max-width: 600px) {
  .site-banner {
    max-height: 360px;           /* visual cap for phones */
    object-fit: contain !important;
  }
}
form.filters label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--muted);
}
form.filters label input {
  margin-top: 4px;
}
:root { 
  --bg:#ffffff; 
  --ink:#0b2a4a; /* navy */
}

* { box-sizing:border-box }

body {
  margin:0;
  background:#f6f8fb;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- HEADER ---------- */
header {
  background: var(--bg);
  color: var(--ink);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb; /* subtle divider */
}

.brand {
  display: flex;
  flex-direction: column;   /* stack logo above title */
  align-items: flex-start;
  gap: 6px;
}

.logo {
  height: 50px;  /* bigger so it’s visible */
  width: auto;
}

header .title {
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}

/* ---------- TOGGLE BUTTON ---------- */
.toggle a {
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 6px 12px;
  border-radius: 999px; /* pill shape */
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.toggle a:hover {
  background: var(--ink);
  color: #fff;
}

/* ---------- WRAPPER ---------- */
.wrap {
  padding:14px;
}

h2 {
  font-size:14px;
  margin:18px 6px 10px;
  color:#1f2937;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---------- GRID CARDS ---------- */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}

.card {
  display:block;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px 14px;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.card.ok:hover {
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

.card.missing {
  pointer-events:none;
  opacity:.8;
}

.title {
  font-weight:700;
  color:#111827;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.badge {
  font-size:12px;
  background:#eef;
  padding:2px 8px;
  border-radius:999px;
  margin-left:8px;
}

.desc {
  font-size:12px;
  color:#374151;
  margin-top:6px;
}

.note {
  font-size:12px;
  color:#4b5563;
  margin:8px 6px;
}

@media (max-width:520px) { 
  .grid { grid-template-columns:1fr } 
}
/* ===== Admin-only overrides (keep at END of file) ===== */
body.admin {
  --ink: #0b2a4a;   /* navy */
  --line: #e5e7eb;
  --tile: #fff;
}

/* Centered, stacked header: logo -> title -> button */
body.admin header{
  background:#fff;
  color:var(--ink);
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-bottom:1px solid var(--line);
  gap:10px;
}

/* Brand block (logo above title) */
body.admin .brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* Bigger/cleaner logo; never squished */
body.admin .logo{
  height:64px;           /* adjust 56–72 if needed */
  width:auto;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}

/* Title */
body.admin header .title{
  font-size:22px;
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
}

/* Toggle as a proper centered pill button */
body.admin .toggle{
  display:flex; justify-content:center;
}
body.admin .toggle a{
  display:inline-block;
  background:var(--ink);
  color:#fff !important;
  border:1px solid var(--ink);
  padding:8px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  text-decoration:none !important;   /* nuke any underline */
  white-space:nowrap;                /* no line break in label */
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .08s ease, opacity .15s ease;
}
body.admin .toggle a:hover{ opacity:.9; transform:translateY(-1px); }

/* Cards/sections keep your existing look (optional tweaks below) */
body.admin .wrap{ padding:14px; }
body.admin h2{
  font-size:14px; margin:18px 6px 10px; color:#1f2937;
  text-transform:uppercase; letter-spacing:.06em;
}
body.admin .grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px;
}
body.admin .card{
  display:block; background:var(--tile);
  border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .05s ease, box-shadow .12s ease;
}
body.admin .card.ok:hover{ box-shadow:0 4px 10px rgba(0,0,0,.08); transform:translateY(-1px); }
body.admin .card.missing{ pointer-events:none; opacity:.8; }
body.admin .title{ font-weight:700; color:#111827; display:flex; justify-content:space-between; align-items:center; }
body.admin .badge{ font-size:12px; background:#eef; padding:2px 8px; border-radius:999px; margin-left:8px; }
body.admin .desc{ font-size:12px; color:#374151; margin-top:6px; }
body.admin .note{ font-size:12px; color:#4b5563; margin:8px 6px; }

@media (max-width:520px){
  body.admin .logo{ height:60px; }
}
/* === Admin dashboard header fix === */
body.admin header {
  background:#fff;
  color:#0b2a4a;
  padding:18px;
  display:flex;
  flex-direction:column; /* stack everything */
  align-items:center;    /* center horizontally */
  text-align:center;
  border-bottom:1px solid #e5e7eb;
  gap:12px;              /* space between logo/title/toggle */
}

body.admin .brand {
  display:flex;
  flex-direction:column; /* logo above title */
  align-items:center;
  gap:6px;
}

/* --- Admin logo sizing --- */
body.admin .logo {
  height: 90px;          /* bump up for visibility */
  max-height: 18vh;      /* cap it on very tall screens */
  width: auto;           
  object-fit: contain;   /* preserve proportions */
  margin-bottom: 6px;    /* breathing room before title */
}

body.admin header .title {
  font-size:22px;
  font-weight:800;
  color:#0b2a4a;
}

body.admin .toggle {
  display:flex;
  justify-content:center; /* center the button under the title */
}

body.admin .toggle a {
  display:inline-block;
  background:#0b2a4a;
  color:#fff !important;
  border:1px solid #0b2a4a;
  padding:8px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  text-decoration:none !important;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .08s ease, opacity .15s ease;
}

body.admin .toggle a:hover {
  opacity:.9;
  transform:translateY(-1px);
}
<div class="gen-card">
  <form class="gen-grid" action="generate_report.php" method="get">
    <div class="gen-field">
      <label for="tier">Tier</label>
      <select id="tier" name="tier">
        <option value="">Select a tier…</option>
        <!-- your options -->
      </select>
    </div>

    <div class="gen-field">
      <label for="custom_tier">Or custom tier key</label>
      <input id="custom_tier" name="custom_tier" placeholder="e.g., T1 or wellness" />
    </div>

    <div class="gen-field">
      <label for="count">Count</label>
      <input id="count" name="count" type="number" value="500" min="1" />
    </div>

    <div class="gen-actions">
      <button type="submit">Generate</button>
      <a href="admin-dashboard.php" class="btn">Back to Admin</a>
    </div>
  </form>
</div>