/* ============================================================
   CHERDAGOLD — Frontend (Member Portal) shared CSS
   Cacheable, load via <link> in header.php
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */
html { font-size: 107%; }
body { background: #0c0c0e; }
* { -webkit-tap-highlight-color: transparent; }

/* ── Scrollbars (dark) ─────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #18181b; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* ── Phosphor icons ────────────────────────────────────────── */
[class^="ph-"], [class*=" ph-"] { line-height: 1; }

/* ── Form inputs ───────────────────────────────────────────── */
.form-input {
    display: block;
    width: 100%;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 10px;
    padding: 10px 14px;
    color: #e4e4e7;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.form-input:focus {
    outline: none;
    border-color: #f0c040;
    box-shadow: 0 0 0 3px rgba(240, 192, 64, .15);
}
.form-input::placeholder { color: #52525b; }

.form-label {
    display: block;
    font-size: .825rem;
    font-weight: 600;
    color: #a1a1aa;
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.req-star { color: #f87171; margin-left: 3px; }

/* ── Gold button ───────────────────────────────────────────── */
.gold-btn {
    background: #f0c040;
    color: #0c0c0e;
    font-weight: 700;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gold-btn:hover    { background: #ffd147; }
.gold-btn:active   { transform: scale(.98); }
.gold-btn:disabled { background: #3f3f46; color: #71717a; cursor: not-allowed; }

/* ── Step chip (for multi-step forms) ──────────────────────── */
.step-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(240, 192, 64, .12);
    border: 1px solid rgba(240, 192, 64, .3);
    color: #f0c040;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Section divider ───────────────────────────────────────── */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #3f3f46 20%, #3f3f46 80%, transparent);
    margin: 2rem 0;
}