/* ==========================================================================
   Public "Become a member" application (src/join.php)
   Theme: Ledger & Brass — matches the SACCO's public website
   Font: self-hosted Sen (see /css/fonts.css) — the system's CSP is
   font-src 'self' / style-src without fonts.googleapis.com, so a Google
   Fonts <link> is silently blocked by the browser. This file, like every
   other page in this app, pulls the ONE shared @font-face declaration in
   instead of duplicating or reaching off-origin for it.
   ========================================================================== */

@import url('/css/fonts.css');

:root {
    --color-ink: #20261f;
    --color-primary: #1f4d3a;
    --color-primary-dark: #163829;
    --color-primary-light: #2d6b4f;
    --color-accent: #c8932c;
    --color-accent-dark: #a8761c;
    --color-paper: #f6f7f2;
    --color-paper-alt: #edefe7;
    --color-line: #d8ded2;
    --color-white: #ffffff;
    --color-danger: #b5432e;
    --font-base: 'Sen', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --radius-sm: 8px;
    --radius-md: 14px;
    --shadow-md: 0 10px 30px rgba(32, 38, 31, 0.10);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

body {
    margin: 0; font-family: var(--font-base); background: var(--color-paper); color: var(--color-ink);
    line-height: 1.55; -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1600px; margin: 0 auto; padding: 36px 20px 72px; }
/* The page canvas can span up to 1600px on a large screen, but a form
   reads badly stretched edge-to-edge that wide — inputs end up hundreds
   of pixels wide. .inner keeps the brand bar, stepper, and card at a
   sane reading width, centered within the wider page. */
.inner { max-width: 960px; margin: 0 auto; animation: rise .5s var(--ease) both; }

/* Brand bar */
.brandbar { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brandbar .mark {
    width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brandbar .mark svg { width: 22px; height: 22px; stroke: var(--color-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brandbar .name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }

/* Intro card */
.intro { background: var(--color-primary); border-radius: var(--radius-md); padding: 26px 28px; margin-bottom: 20px;
          box-shadow: 0 8px 24px rgba(31,77,58,0.22); }
.intro h1 { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.intro p { color: rgba(255,255,255,0.82); font-size: 14.5px; margin: 0; max-width: 560px; }
.intro .req-note { color: var(--color-accent); font-weight: 700; }

.alert { background: #fbe9e5; border: 1px solid #edc0b3; color: #8a2f1c; padding: 12px 15px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; animation: rise .35s var(--ease) both; }

/* Stepper */
.wiz-steps { display: flex; align-items: flex-start; gap: 0; margin-bottom: 20px; }
.wiz-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; cursor: default; }
.wiz-step.done { cursor: pointer; }
.wiz-step::before, .wiz-step::after { content: ""; position: absolute; top: 17px; height: 2px; background: var(--color-line); z-index: 0; transition: background .35s var(--ease); }
.wiz-step::before { left: 0; width: 50%; }
.wiz-step::after { right: 0; width: 50%; }
.wiz-step:first-child::before, .wiz-step:last-child::after { display: none; }
.wiz-step.done::before, .wiz-step.done::after, .wiz-step.active::before { background: var(--color-primary-light); }
.wiz-dot {
    width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--color-line);
    color: #8a9188; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px;
    z-index: 1; transition: all .28s var(--ease);
}
.wiz-step.active .wiz-dot { border-color: var(--color-primary); background: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(31,77,58,0.14); animation: pulseRing 1.8s ease-out infinite; }
.wiz-step.done .wiz-dot { border-color: var(--color-primary-light); background: var(--color-primary-light); color: #fff; animation: popIn .35s var(--ease); }
.wiz-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wiz-slabel { font-size: 12.5px; font-weight: 600; color: #6b756a; margin-top: 8px; text-align: center; transition: color .28s var(--ease); }
.wiz-step.active .wiz-slabel { color: var(--color-primary); }

/* Card + panes */
.wiz-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; }
.wiz-pane { padding: 28px 28px 8px; animation: paneIn .38s var(--ease) both; }
.wiz-pane[hidden] { display: none; }
.wiz-sec {
    display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--color-primary);
    padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--color-line);
}
.wiz-sec svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 640px) { .wiz-grid { grid-template-columns: 1fr; } }
.fg { display: flex; flex-direction: column; margin-bottom: 18px; }
.fg.span-2 { grid-column: span 2; }
@media (max-width: 640px) { .fg.span-2 { grid-column: span 1; } }
.fg label { font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: #384038; }
.fg label .req { color: var(--color-danger); }
.fg label .opt { color: #8a9188; font-weight: 400; }
.fg input[type="text"], .fg input[type="email"], .fg input[type="tel"], .fg input[type="date"], .fg select {
    padding: 11px 13px; border: 1.5px solid var(--color-line); border-radius: 9px; font-size: 15px;
    font-family: inherit; background: #fff; transition: border-color .18s, box-shadow .18s; width: 100%;
}
.fg input:focus, .fg select:focus { outline: none; border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(45,107,79,0.14); }
.fg.invalid input, .fg.invalid select { border-color: var(--color-danger); background: #fef7f6; }
.fg.shake { animation: shake .4s var(--ease); }
.fg-err { display: none; align-items: center; gap: 5px; color: var(--color-danger); font-size: 12.5px; margin-top: 5px; }
.fg-err:not(:empty) { display: flex; }
.fg-err.show { animation: rise .25s var(--ease) both; }
.fg-hint { font-size: 12.5px; color: #8a9188; margin-top: 5px; }

/* Upload + preview */
.up { display: flex; align-items: center; gap: 14px; }
.up-prev {
    width: 78px; height: 78px; border-radius: 12px; border: 2px dashed var(--color-line); background: var(--color-paper);
    display: flex; align-items: center; justify-content: center; color: #a4ab9f; overflow: hidden; flex-shrink: 0;
    transition: border-color .2s;
}
.up-prev img { width: 100%; height: 100%; object-fit: cover; animation: popIn .3s var(--ease); }
.up-prev svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.up-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1.5px dashed var(--color-primary-light);
    border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--color-primary); background: #fff;
    transition: all .18s; font-weight: 600;
}
.up-btn:hover { background: var(--color-paper-alt); border-color: var(--color-primary); transform: translateY(-1px); }
.up-btn input { display: none; }
.up-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.up-name { font-size: 12.5px; color: #8a9188; margin-top: 6px; word-break: break-all; }

/* Review */
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 640px) { .rev-grid { grid-template-columns: 1fr; } }
.rev-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-paper-alt); }
.rev-row .l { width: 130px; flex-shrink: 0; font-size: 12.5px; color: #8a9188; }
.rev-row .v { font-size: 14px; color: var(--color-ink); font-weight: 500; word-break: break-word; }
.rev-note {
    background: var(--color-paper-alt); border: 1px solid var(--color-line); color: var(--color-primary-dark);
    border-radius: 10px; padding: 13px 16px; font-size: 13.5px; margin: 18px 0 6px;
}

/* Footer nav */
.wiz-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px;
    border-top: 1px solid var(--color-line); background: var(--color-paper);
}
.wiz-count { font-size: 13px; color: #8a9188; }
.wiz-nav { display: flex; gap: 10px; }
.wb {
    display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border: none; border-radius: 9px;
    font-size: 14.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .18s;
}
.wb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb-primary { background: var(--color-accent); color: #2a1e08; }
.wb-primary:hover:not(:disabled) { background: var(--color-accent-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168,118,28,0.3); }
.wb-ghost { background: #fff; color: #556155; border: 1.5px solid var(--color-line); }
.wb-ghost:hover:not(:disabled) { background: var(--color-paper-alt); }
.wb:active:not(:disabled) { transform: translateY(0); }
.wb:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Submit spinner */
.wb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(42,30,8,0.35); border-top-color: #2a1e08; animation: spin .7s linear infinite; display: none; }
#wiz-submit.loading .wb-spin { display: inline-block; }
#wiz-submit.loading .wb-check { display: none; }

.honey { position: absolute; left: -5000px; height: 0; overflow: hidden; }

.foot { text-align: center; color: #8a9188; font-size: 12.5px; margin-top: 22px; }
.foot a { color: var(--color-primary); }

/* ── Motion ──────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
@keyframes pulseRing {
    0% { box-shadow: 0 0 0 4px rgba(31,77,58,0.14); }
    70% { box-shadow: 0 0 0 9px rgba(31,77,58,0); }
    100% { box-shadow: 0 0 0 4px rgba(31,77,58,0); }
}

/* Respect it — some visitors get genuinely unwell from motion, and none of
   this is functional, so turning it off costs nothing. */
@media (prefers-reduced-motion: reduce) {
    .inner, .alert, .wiz-pane, .fg-err.show, .up-prev img, .wiz-step.done .wiz-dot { animation: none !important; }
    .wiz-step.active .wiz-dot { animation: none !important; }
    .wb-primary:hover:not(:disabled), .up-btn:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}