/* ============================================================
   mitra.css  —  KHUSUS halaman Daftar + Login Mitra
   ============================================================ */

.auth{max-width:560px;margin:0 auto;padding:30px 0 50px}
.auth-head{text-align:center;margin-bottom:18px}
.auth-head h2{font-size:26px;margin:0 0 6px;font-weight:800;letter-spacing:-.4px}
.auth-head p{margin:0;color:#475569;font-size:14.5px}

.banner{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;border-radius:16px;padding:14px 16px;margin:0 0 18px}
.banner .bic{font-size:26px}
.banner b{display:block;font-size:14.5px;color:#9a3412}
.banner span{font-size:12.5px;color:#b45309}

.tabs{display:flex;background:#f1f5f9;border-radius:14px;padding:5px;margin-bottom:20px}
.tab{flex:1;text-align:center;padding:11px;border-radius:10px;font-weight:700;font-size:14.5px;color:#64748b;cursor:pointer;border:none;background:transparent}
.tab.active{background:#fff;color:var(--blue);box-shadow:0 4px 10px rgba(2,6,23,.08)}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(2,6,23,.04);padding:24px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.field label .req{color:#ef4444}
.field .hint{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:4px}
input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.agree{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#475569;margin:4px 0 14px}
.agree input{width:auto;margin-top:3px}
.agree a{color:var(--blue)}
.submit{width:100%;background:var(--orange);color:#fff;border:none;border-radius:14px;padding:14px;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 12px 26px rgba(249,115,22,.3)}
.submit:hover{background:var(--orange-d)}
.submit.blue{background:var(--blue);box-shadow:0 12px 26px rgba(37,99,235,.3)}
.submit.blue:hover{background:var(--blue-d)}
.err{display:none;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13px;border-radius:10px;padding:10px 12px;margin-bottom:14px}
.err.show{display:block}
.swap{text-align:center;font-size:13.5px;color:#475569;margin-top:16px}
.swap a{color:var(--blue);font-weight:700;cursor:pointer}
.hidden{display:none}

/* modal sukses */
.modal-card{background:#fff;border-radius:20px;width:100%;max-width:440px;box-shadow:0 30px 70px rgba(2,6,23,.4);text-align:center;padding:30px 26px}
.modal-card .big{font-size:50px;margin-bottom:8px}
.modal-card h3{margin:0 0 8px;font-size:21px}
.modal-card p{margin:0 0 12px;color:#475569;font-size:14.5px;line-height:1.5}
.gift{display:inline-flex;flex-direction:column;gap:2px;background:var(--green-tint);border:1px solid var(--green-line);border-radius:14px;padding:12px 18px;margin:6px 0 20px}
.gift b{font-size:24px;color:#15803d}
.gift span{font-size:12.5px;color:#166534}
.btn-go{display:inline-block;width:100%;background:var(--orange);color:#fff;border:none;border-radius:13px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none}
.btn-go:hover{background:var(--orange-d)}

@media (max-width:560px){ .row2{grid-template-columns:1fr} }

/* ===== Pilih peran (pembeli / mitra) ===== */
.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px}
.role-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid #e8edf3;background:#fff;border-radius:14px;cursor:pointer;text-align:left;transition:all .15s}
.role-opt .ro-ic{font-size:26px;line-height:1}
.role-opt .ro-tx{display:flex;flex-direction:column}
.role-opt .ro-tx b{font-size:14.5px;color:#0f172a}
.role-opt .ro-tx small{font-size:12px;color:#64748b}
.role-opt:hover{border-color:#c7d2fe}
.role-opt.active{border-color:#2563eb;background:#eff4ff;box-shadow:0 4px 14px rgba(37,99,235,.12)}
@media(max-width:560px){.role-switch{grid-template-columns:1fr}}
/* avatar picker */
.avatar-pick{display:flex;flex-wrap:wrap;gap:10px}
.av-opt{width:46px;height:46px;border-radius:50%;border:2px solid #e8edf3;background:#f8fafc;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.av-opt:hover{border-color:#c7d2fe}
.av-opt.active{border-color:#2563eb;background:#eff4ff;transform:scale(1.05)}
.hidden{display:none!important}


/* === Pemilih peran (Pembeli / Mitra) === */
.role-pick{display:flex;gap:10px;margin-bottom:14px}
.rp-btn{flex:1;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:14px;background:#fff;cursor:pointer;text-align:left;transition:.15s}
.rp-btn:hover{border-color:#bfdbfe}
.rp-btn.active{border-color:#2563eb;background:#eff6ff}
.rp-ic{font-size:22px;flex:0 0 auto}
.rp-tx{display:flex;flex-direction:column;min-width:0}
.rp-tx b{font-size:13.5px;color:#0f172a}
.rp-tx small{font-size:11.5px;color:#64748b}
@media(max-width:560px){.role-pick{flex-direction:column}}

/* Role switch (Pembeli <-> Mitra) di halaman auth */
.role-switch{margin-top:18px;text-align:center}
.rs-or{font-size:13px;color:var(--muted,#64748b);margin-bottom:10px}
.rs-mitra{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center;background:#fff;border:1.5px dashed var(--blue,#2563eb);color:var(--blue,#2563eb);border-radius:12px;padding:13px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.rs-mitra:hover{background:#eff6ff}
.rs-mitra .rs-ic{font-size:18px}
.rs-mitra b{font-weight:800}
.rs-back{display:inline-block;margin-top:4px;color:var(--blue,#2563eb);font-weight:700;font-size:14px;cursor:pointer;text-decoration:none}
.rs-back:hover{text-decoration:underline}