/* SMBF buyer-profile form — styled to the SMBF brand sheet (deep blues, premium gold,
   clean neutrals). Mobile-first, no framework, no build step. Fonts behind variables so
   they can be self-hosted later in one place (see README "Fonts"). */
:root {
  /* 1. Primary brand blues */
  --navy:    #082F6F; /* Deep Royal Blue — hero / headings */
  --navy-2:  #0B2A66; /* hero gradient mid stop */
  --blue:    #2870C5; /* Corporate Blue — primary buttons / links */
  --blue-h:  #1E63BF; /* primary hover */
  --blue-3:  #358AAE; /* Professional Blue — secondary accents */
  --blue-soft:#F4F8FC;/* secondary button hover / selected tint */
  /* 2. Premium gold accents */
  --gold:    #D4AF37; /* Luxury Gold — webinar CTA */
  --gold-h:  #C99A2E; /* gold hover */
  /* 3. Neutrals */
  --white:   #FFFFFF;
  --offwhite:#F8FAFC;
  --light:   #EEF3F8; /* light grey surfaces */
  --border:  #E5EAF0; /* borders / dividers */
  --field:   #CDD6E4; /* input borders */
  --text:    #374151; /* body text */
  --muted:   #6B7280; /* muted text */
  --heading: #1F2937; /* dark charcoal */
  --err:     #C0392B;
  --ok:      #1D9E75;
  /* Tokens */
  --radius:   12px;
  --radius-lg:18px;
  --ring:     0 0 0 3px rgba(40, 112, 197, .18); /* focus ring */
  --shadow:   0 10px 34px rgba(8, 47, 111, .12);
  --shadow-sm:0 3px 10px rgba(8, 47, 111, .10);
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 28px 16px;
  font-family: var(--font-body);
  color: var(--text);
  /* Brand "Light Background Gradient" */
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFD 40%, #EEF5FA 100%);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* Card / surface */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 660px;
  overflow: hidden;
  padding: 0 0 28px;
}

/* ---------------- Brand hero ---------------- */
.brand {
  position: relative;
  text-align: center;
  padding: 30px 24px 26px;
  color: var(--white);
  /* Brand "Main Hero" — kept deep so white text stays legible */
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue-h) 100%);
  overflow: hidden;
}
/* Subtle premium glow, echoing the brand-sheet hero */
.brand::after {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(53, 138, 174, .45), transparent 70%);
  pointer-events: none;
}
.brand > * { position: relative; z-index: 1; }

/* White plate so the full-colour logo reads on navy */
.logo-plate {
  display: inline-block;
  background: var(--white);
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.logo-plate .logo { display: block; height: 64px; width: auto; max-width: 100%; }
/* Fallback wordmark, only shown if the logo image is missing */
.wordmark { font-family: var(--font-heading); font-size: 2rem; letter-spacing: 3px; font-weight: 700; color: var(--navy); }

.brand-sub {
  display: block;
  margin-top: 14px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.sub { margin: 10px auto 0; max-width: 42ch; font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }

/* Inset body content (hero is full-bleed) */
.card > :not(.brand) { margin-left: 28px; margin-right: 28px; }

h1 { font-family: var(--font-heading); color: var(--navy); font-size: 1.55rem; line-height: 1.2; margin: 22px 0 6px; }
.intro { color: var(--muted); font-size: .94rem; line-height: 1.55; margin: 14px 0 4px; }

/* ---------------- Form fields ---------------- */
label { display: block; margin: 16px 0 4px; font-weight: 600; font-size: .92rem; color: var(--heading); }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], textarea, input:not([type]) {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--heading);
  background: var(--white);
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  margin-top: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #9AA4B2; }
input:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
textarea { resize: vertical; min-height: 84px; }

.row { display: flex; gap: 14px; }
.row label { flex: 1; }

fieldset { border: 1.5px solid var(--border); border-radius: var(--radius); margin: 18px 0 4px; padding: 8px 14px 14px; }
legend { font-weight: 600; font-size: .92rem; color: var(--heading); padding: 0 6px; }

/* Radio / option rows as soft selectable chips (modern, bigger tap target) */
.opt {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; color: var(--text);
  margin: 8px 0; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.opt:hover { background: var(--blue-soft); border-color: #D3E0F0; }
.opt input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.opt:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 20px; color: var(--text); }
.check input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--blue); }
.check a, .text-link { color: var(--blue); font-weight: 500; }
.check a:hover, .text-link:hover { color: var(--blue-h); text-decoration: underline; }

/* ---------------- Buttons ---------------- */
button {
  width: 100%;
  margin-top: 24px;
  padding: 14px 18px;
  font-size: 1.05rem; font-weight: 600; font-family: var(--font-body);
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--blue-h));
  border: 0; border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
button:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(40, 112, 197, .32); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--ring); }

/* Gold CTA — the webinar reward (brand "Premium Access" button) */
.cta-wrap { text-align: center; margin: 26px 0; }
.btn-gold {
  display: inline-block; text-decoration: none; font-weight: 600;
  color: var(--white);
  background: linear-gradient(135deg, var(--gold), var(--gold-h));
  padding: 15px 34px; border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(212, 175, 55, .35);
  transition: filter .15s ease, transform .05s ease;
}
.btn-gold:hover { filter: brightness(1.05); }
.btn-gold:active { transform: translateY(1px); }

/* ---------------- Helpers ---------------- */
.small { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.error { background: #FDECEA; color: var(--err); padding: 11px 14px; border-radius: 10px; margin-top: 14px; font-size: .9rem; }
.ok { color: var(--ok); font-size: 1rem; font-family: var(--font-body); }
.muted { color: #8B95A7; text-align: center; }

/* ---------------- Staff dashboard ---------------- */
.scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 12px 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 760px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
thead th, tr:first-child th { background: var(--offwhite); color: var(--navy); font-weight: 600; }
tbody tr:nth-child(even), tr:nth-child(even) { background: #FBFCFE; }

.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; width: auto; margin: 10px 0; }
.inline .filt { margin: 0; }
.inline input[type=date] { width: auto; margin: 0; }

/* Small buttons share one base; primary = filled blue, secondary = outline */
.small-btn {
  width: auto; margin: 0; padding: 10px 16px;
  font-size: .85rem; font-weight: 600; font-family: var(--font-body);
  border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; text-align: center; text-decoration: none;
  color: var(--white);
  background: var(--blue); border: 1.5px solid var(--blue);
  box-shadow: none;
  transition: filter .15s ease, background .15s ease;
}
.small-btn:hover { filter: brightness(1.06); }
.small-btn.secondary { background: var(--white); color: var(--blue); }
.small-btn.secondary:hover { background: var(--blue-soft); filter: none; }

/* ---------------- Responsive ---------------- */
@media (max-width: 480px) {
  body { padding: 16px 10px; }
  .row { flex-direction: column; gap: 0; }
  .card > :not(.brand) { margin-left: 18px; margin-right: 18px; }
  .logo-plate .logo { height: 54px; }
  h1 { font-size: 1.4rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}