* { box-sizing: border-box; }

:root {
    --ink: #0a0a0a;
    --paper: #f5f2ee;
    --accent: #0074d5;        /* NGNS blue */
    --accent-dark: #005ba8;
    --secondary: #7a2f42;     /* lightened maroon, readable on dark */
    --mid: #141414;
    --field-bg: #1a1a1a;
    --muted: #888;
    --rule: rgba(255,255,255,0.07);
    --warn: #e08a7a;
}

body {
    margin: 0;
    padding: 24px 16px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    background: var(--ink);
    color: var(--paper);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.disclaimer-banner {
    background: var(--mid);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    color: rgba(245,242,238,0.75);
    max-width: 420px;
    width: 100%;
    margin: 0 auto 16px;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

.disclaimer-banner.wide {
    max-width: 900px;
}

.card {
    background: var(--mid);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 32px 28px;
    max-width: 420px;
    width: 100%;
    height: fit-content;
}

.card.wide {
    max-width: 900px;
}

h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 10px;
    color: var(--paper);
}

h1 span { color: var(--accent); }

.subtitle {
    color: rgba(245,242,238,0.6);
    margin-bottom: 24px;
    line-height: 1.5;
    font-size: 0.95rem;
}

label {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 18px 0 6px;
}

.required { color: var(--accent); text-transform: none; letter-spacing: 0; }
.optional { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.field-hint {
    margin: 2px 0 8px;
    font-size: 0.8rem;
    color: rgba(245,242,238,0.5);
    line-height: 1.4;
}

input, select, textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: 'DM Sans', sans-serif;
    background: var(--field-bg);
    color: var(--paper);
}

textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: rgba(245,242,238,0.35); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}

select option {
    background: var(--field-bg);
    color: var(--paper);
}

button {
    width: 100%;
    margin-top: 24px;
    padding: 0.9rem 1rem;
    background: var(--accent);
    color: var(--paper);
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
}

button:hover { background: var(--accent-dark); }

.errors {
    color: var(--warn);
    padding-left: 20px;
}

.button-link {
    display: inline-block;
    text-decoration: none;
    background: var(--accent);
    color: var(--paper);
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.button-link:hover { background: var(--accent-dark); }

.button-link.secondary {
    background: transparent;
    border: 1px solid var(--rule);
    color: rgba(245,242,238,0.7);
    margin-left: 8px;
}

.button-link.secondary:hover { border-color: var(--accent); color: var(--paper); }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.88rem;
    white-space: nowrap;
    color: rgba(245,242,238,0.85);
}

th {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.delete-btn {
    width: auto;
    margin-top: 0;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--muted);
    padding: 6px 12px;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
}

.delete-btn:hover { background: var(--secondary); border-color: var(--secondary); color: var(--paper); }

.policy-link {
    text-align: center;
    margin-top: 16px;
    font-size: 0.8rem;
}

.policy-link a { color: var(--muted); }

.ai-note {
    text-align: center;
    margin-top: 6px;
    font-size: 0.72rem;
    color: rgba(245,242,238,0.35);
    line-height: 1.4;
}

.chris-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.chris-avatar-wrap img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--rule);
    opacity: 0.85;
}
/* ============================================================
   NGNS style additions — supplementary rules only.
   Append these to the LIVE style.css (not included in this
   handoff). Everything here uses new classes / new tags that
   the current form doesn't use yet, so nothing here should
   override existing rules — it only adds styling for the new
   identity/contact/business/interest/travel/wellbeing/upload
   sections added to index.php and the expandable detail rows
   added to admin.php.

   Colors are scoped to local --ngns-* custom properties (not
   reusing any variable names from the live sheet, since I don't
   have its contents) so there's no risk of accidentally
   colliding with or overriding existing tokens. Swap the values
   below to match the live palette if they don't feel right next
   to the rest of the page — the class names/structure are the
   part that matters.
   ============================================================ */

:root {
  --ngns-accent: #3f7fb8;
  --ngns-accent-dark: #2f628f;
  --ngns-border: #e2e6ea;
  --ngns-bg-soft: #f7f9fb;
  --ngns-danger: #c0574a;
  --ngns-text-muted: #6b7280;
}

/* ----- Section grouping (fieldset/legend used for the new blocks) ----- */
fieldset.form-section {
  border: none;
  margin: 1.8rem 0;
  padding: 0;
}
fieldset.form-section:first-of-type { margin-top: 1.2rem; }
legend.section-title {
  width: 100%;
  font-size: 1.15rem;
  font-weight: 500;
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--ngns-border);
}
legend.section-title .required { color: var(--ngns-danger); }
legend.section-title .optional { color: var(--ngns-text-muted); font-weight: 400; text-transform: none; }

.subsection-label {
  display: block;
  font-weight: 500;
  margin: 0.4rem 0 0.5rem;
}
.section-gap { height: 1.4rem; }

/* ----- Generic field/grid helpers used inside the new sections ----- */
.field { margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

.phonegroup { display: grid; grid-template-columns: 130px 1fr; gap: 0.5rem; }
@media (max-width: 480px) { .phonegroup { grid-template-columns: 1fr; } }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
}
.checkbox-row input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--ngns-accent);
}
.checkbox-row label {
  font-weight: 400;
  margin: 0;
}

.hidden { display: none !important; }

/* ----- Dynamic "add another" entry cards (extra emails/phones/businesses) -----
   Named .entry-card (not .card) so it never collides with the page's
   existing outer .card wrapper. */
.entry-card {
  background: var(--ngns-bg-soft);
  border: 1px solid var(--ngns-border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
}
.entry-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ngns-accent);
  margin-bottom: 0.7rem;
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px dashed var(--ngns-accent);
  color: var(--ngns-accent-dark);
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 0.2rem;
}
.add-btn:hover { background: rgba(63, 127, 184, 0.08); }

.remove-btn {
  background: none;
  border: none;
  color: var(--ngns-danger);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 0.4rem;
  padding: 0;
}

/* ----- Interests / industry checkbox blocks with optional elaboration ----- */
.industry-block {
  border: 1px solid var(--ngns-border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}
.industry-elaborate { margin-top: 0.7rem; display: none; }
.industry-elaborate.show { display: block; }
.industry-elaborate textarea { width: 100%; }

/* ----- File upload / drag-drop widget ----- */
.file-drop {
  border: 1.5px dashed var(--ngns-border);
  border-radius: 8px;
  padding: 1.6rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.file-drop:hover, .file-drop.dragover {
  border-color: var(--ngns-accent);
  background: rgba(63, 127, 184, 0.05);
}
.file-drop input { display: none; }
.file-drop-text { color: var(--ngns-text-muted); font-size: 0.9rem; margin: 0; }

.file-list { margin-top: 0.8rem; }
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: #333;
  padding: 0.5rem 0.7rem;
  background: var(--ngns-bg-soft);
  border: 1px solid var(--ngns-border);
  border-radius: 5px;
  margin-bottom: 0.4rem;
}
.file-item button {
  background: none;
  border: none;
  color: var(--ngns-danger);
  cursor: pointer;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.upload-total {
  font-size: 0.78rem;
  color: var(--ngns-text-muted);
  margin-top: 0.5rem;
}
.upload-total.over { color: var(--ngns-danger); font-weight: 500; }

/* ============================================================
   Admin page: expandable detail rows for the new fields
   ============================================================ */
.detail-toggle {
  background: var(--ngns-bg-soft);
  border: 1px solid var(--ngns-border);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ngns-accent-dark);
}
.detail-toggle:hover { background: rgba(63, 127, 184, 0.1); }

tr.detail-row td { background: var(--ngns-bg-soft); }
tr.detail-row.hidden { display: none; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0.9rem 0.3rem;
}
.detail-block { font-size: 0.85rem; }
.detail-block-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ngns-text-muted);
  margin-bottom: 0.35rem;
}
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li { margin-bottom: 0.4rem; }
.muted-small { color: var(--ngns-text-muted); font-size: 0.78rem; }