/* assets/css/app.css – CleanerLocator design system */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --dark:   #0F172A;
  --amber:  #FBBF24;
  --amber2: #F59E0B;
  --amber-light: #FEF3C7;
  --bg:     #F8FAFC;
  --white:  #FFFFFF;
  --border: #E5E7EB;
  --border-light: #F0F0F0;
  --text:   #1A1F2C;
  --muted:  #6B7280;
  --subtle: #4B5565;
  --green:  #10B981;
  --red:    #EF4444;
  --blue:   #3B82F6;

  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 60px;
  --shadow:    0 4px 16px rgba(0,0,0,0.07);
  --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.12);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.5; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input,select,textarea { font-family:inherit; }
ul { list-style:none; }

/* ── Container ──────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 32px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:var(--radius-pill); font-size:14px; font-weight:600; transition:all 0.18s; border:none; cursor:pointer; }
.btn-primary { background:var(--dark); color:#fff; }
.btn-primary:hover { background:var(--amber); color:var(--dark); }
.btn-amber { background:var(--amber); color:var(--dark); }
.btn-amber:hover { background:var(--amber2); box-shadow:0 8px 24px rgba(251,191,36,.3); }
.btn-outline { background:transparent; color:var(--subtle); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--amber); background:var(--amber-light); color:var(--dark); }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-ghost:hover { background:var(--border-light); color:var(--text); }
.btn-sm  { padding:7px 16px; font-size:13px; }
.btn-lg  { padding:14px 32px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }

/* ── Cards ──────────────────────────────────────────────────── */
.card { background:var(--white); border:1px solid var(--border-light); border-radius:var(--radius-lg); overflow:hidden; }
.card:hover { border-color:var(--amber); box-shadow:var(--shadow); }
.card-pad { padding:24px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge::before { content:''; width:5px; height:5px; border-radius:50%; }
.badge-green  { background:#D1FAE5; color:var(--green); } .badge-green::before  { background:var(--green); }
.badge-red    { background:#FEE2E2; color:var(--red);   } .badge-red::before    { background:var(--red); }
.badge-amber  { background:var(--amber-light); color:#B45309; } .badge-amber::before { background:var(--amber); }
.badge-blue   { background:#DBEAFE; color:var(--blue);  } .badge-blue::before   { background:var(--blue); }
.badge-gray   { background:#F3F4F6; color:var(--muted); } .badge-gray::before   { background:var(--muted); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--subtle); margin-bottom:6px; }
.form-input { width:100%; padding:11px 14px; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--white); color:var(--text); font-size:14px; outline:none; transition:all .18s; }
.form-input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(251,191,36,.1); }
.form-textarea { min-height:120px; resize:vertical; line-height:1.6; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; cursor:pointer; }
.form-error { font-size:12px; color:var(--red); margin-top:4px; }
.form-hint  { font-size:12px; color:var(--muted); margin-top:4px; }

/* ── Stepper ────────────────────────────────────────────────── */
.stepper { display:flex; align-items:center; gap:0; margin-bottom:32px; }
.step { display:flex; align-items:center; gap:8px; }
.step-circle { width:32px; height:32px; border-radius:50%; background:var(--border); color:var(--muted); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step.active .step-circle  { background:var(--dark); color:#fff; }
.step.done   .step-circle  { background:var(--amber); color:var(--dark); }
.step-label { font-size:12px; font-weight:600; color:var(--muted); }
.step.active .step-label { color:var(--dark); }
.step-line { flex:1; height:1px; background:var(--border); min-width:24px; }
.step-line.done { background:var(--amber); }

/* ── Stars ───────────────────────────────────────────────────── */
.stars { display:flex; gap:2px; }
.star { font-size:14px; color:#D1D5DB; }
.star.filled { color:var(--amber); }

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar { border-radius:12px; background:var(--amber-light); color:#92400E; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-sm { width:32px; height:32px; font-size:11px; border-radius:9px; }
.avatar-md { width:44px; height:44px; font-size:15px; }
.avatar-lg { width:80px; height:80px; font-size:26px; border-radius:20px; }
.avatar-xl { width:120px; height:120px; font-size:40px; border-radius:28px; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header { background:var(--white); border-bottom:1px solid var(--border-light); position:sticky; top:0; z-index:100; }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { display:flex; align-items:center; gap:8px; }
.logo-icon { width:38px; height:38px; background:var(--dark); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; color:var(--amber); }
.logo-text { font-size:18px; font-weight:700; color:var(--dark); letter-spacing:-.02em; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { font-size:14px; font-weight:500; color:var(--subtle); transition:color .18s; }
.nav-links a:hover { color:var(--amber); }

/* ── Toast ───────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column-reverse; gap:8px; }
.toast { background:var(--dark); color:#fff; padding:12px 18px; border-radius:10px; font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; min-width:260px; animation:slideUp .3s ease; }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
.toast.info    { border-left:3px solid var(--blue); }
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-bg { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px); }
.modal-bg.open { display:flex; }
.modal { background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:480px;width:calc(100% - 40px);max-height:90vh;overflow-y:auto; }
.modal-header { padding:22px 24px 16px;border-bottom:1px solid var(--border-light);display:flex;align-items:flex-start;justify-content:space-between; }
.modal-title { font-size:17px;font-weight:700;color:var(--text); }
.modal-body { padding:20px 24px; }
.modal-footer { padding:16px 24px;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;gap:10px; }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner { width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--amber); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Page sections ───────────────────────────────────────────── */
.page-header { margin-bottom:24px; }
.page-title { font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.page-sub { font-size:14px; color:var(--muted); margin-top:4px; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:768px) { .container { padding:0 16px; } .nav-links { display:none; } }
@media (max-width:640px) { .btn-lg { padding:12px 24px; font-size:14px; } }