/* =====================================================================
   EmpireBoost — profile pages theme
   Matches the main site: Poppins, orange (#ff5722), light-grey app look.
   ===================================================================== */

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: #f4f5f7;
  margin: 0;
  color: #222;
}

a { color: inherit; text-decoration: none; }

/* ---- Top bar ---- */
.eb-top {
  position: sticky; top: 0; z-index: 40;
  background: #270a9f;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.eb-back {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #444; background: #f4f5f7; cursor: pointer; border: none;
}
.eb-back .material-icons-outlined { font-size: 22px; }
.eb-top .title { font-size: 17px; font-weight: 600; color: #ffffff; }
.eb-top .brand { margin-left: auto; font-weight: 800; color: #ffffff; font-size: 16px; }
.eb-top .brand span { color: #ffffff; }

/* ---- Page shell ---- */
.eb-page { max-width: 480px; margin: 0 auto; padding: 18px 16px 60px; }

.eb-card {
  background: #fff; border-radius: 16px; padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06); margin-bottom: 16px;
}

.eb-h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.eb-sub { color: #888; font-size: 13.5px; margin: 0 0 16px; }

.eb-card h2 { font-size: 16px; font-weight: 600; margin: 18px 0 8px; color: #222; }
.eb-card h2:first-child { margin-top: 0; }
.eb-card h3 { font-size: 14.5px; font-weight: 600; margin: 14px 0 4px; }
.eb-card p, .eb-card li { color: #555; font-size: 14px; line-height: 1.65; }
.eb-card ul { padding-left: 20px; margin: 6px 0; }
.eb-updated { color: #aaa; font-size: 12px; font-style: italic; margin-top: 6px; }

/* ---- Buttons ---- */
.eb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 12px 18px;
  transition: filter .15s ease, transform .1s ease;
}
.eb-btn:active { transform: scale(.98); }
.eb-btn-primary { background: #0d47a1; color: #fff; }
.eb-btn-ghost   { background: #fff3ef; color: #0d47a1; border: 1.5px solid #ffd7c7; }
.eb-btn-call    { background: #e8f4ff; color: #1976d2; border: 1.5px solid #cfe6ff; }
.eb-btn-wa      { background: #e7f8ee; color: #128c4b; border: 1.5px solid #c3ecd3; }
.eb-btn-block   { width: 100%; }
.eb-btn .material-icons-outlined { font-size: 18px; }

/* ---- Form fields ---- */
.eb-field { margin-bottom: 15px; }
.eb-field label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.eb-field input, .eb-field textarea, .eb-field select {
  width: 100%; padding: 12px 13px; border: 1.5px solid #e0e0e0; border-radius: 10px;
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s;
  background: #fff; color: #222;
}
.eb-field input:focus, .eb-field textarea:focus, .eb-field select:focus { border-color: #ff5722; }
.eb-field textarea { resize: vertical; min-height: 100px; }

/* ---- Notes ---- */
.eb-note { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 14px; }
.eb-note.ok  { background: #e8f7ee; color: #1c7a3f; }
.eb-note.err { background: #fdeaea; color: #c0392b; }

/* ---- Star rating input ---- */
.eb-stars { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.eb-stars input { display: none; }
.eb-stars label { font-size: 34px; color: #ddd; cursor: pointer; line-height: 1; transition: color .12s, transform .12s; }
.eb-stars label:hover, .eb-stars label:hover ~ label, .eb-stars input:checked ~ label { color: #ffb400; }
.eb-stars label:hover { transform: scale(1.12); }
.eb-stars-static { color: #ffb400; letter-spacing: 2px; font-size: 15px; }
.eb-stars-static .dim { color: #ddd; }

/* ---- Business / review rows ---- */
.eb-toggle-input { width: 20px; height: 20px; accent-color: #ff5722; }
.eb-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #eee; font-size: 14px; }
.eb-row:first-of-type { border-top: none; }

.eb-chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: #ff5722; background: #fff3ef; padding: 3px 10px; border-radius: 999px; }
.eb-status { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.eb-status.live { background: #e7f8ee; color: #128c4b; }
.eb-status.review { background: #fff4dc; color: #a6791a; }

.eb-empty { text-align: center; padding: 30px 10px; }
.eb-empty .big { font-size: 42px; }
.eb-empty p { color: #888; }

.eb-actions { display: flex; gap: 10px; margin-top: 14px; }
.eb-actions .eb-btn { flex: 1; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }