/* ══ Walkero – Klientská sekce & Hodnocení ════════════════════════════ */
:root {
  --smu-primary: #7c3aed;
  --smu-primary-l: #ede9fe;
  --smu-border: #e5e7eb;
  --smu-gray: #6b7280;
  --smu-radius: 12px;
  --font-body: 'DM Sans', -apple-system, sans-serif;
}

/* ── Auth box ── */
.smu-wrap { font-family: var(--font-body); max-width: 480px; margin: 0 auto; }
.smu-auth-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--smu-border); margin-bottom: 24px; }
.smu-tab { background: none; border: none; padding: 10px 20px; font-size: .95rem; font-weight: 600; color: var(--smu-gray); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.smu-tab--active { color: var(--smu-primary); border-bottom-color: var(--smu-primary); }
.smu-panel { display: none; }
.smu-panel--active { display: block; }
.smu-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 20px; color: #111; }
.smu-field { margin-bottom: 14px; }
.smu-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #374151; }
.smu-field input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--smu-border); border-radius: 8px; font-size: 14px; transition: border-color .2s; }
.smu-field input:focus { outline: none; border-color: var(--smu-primary); }
.smu-btn { display: block; width: 100%; padding: 11px; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; border: none; transition: all .2s; }
.smu-btn--primary { background: var(--smu-primary); color: #fff; }
.smu-btn--primary:hover { background: #5b21b6; }
.smu-msg { min-height: 18px; font-size: 13px; margin-bottom: 10px; padding: 0 4px; }
.smu-msg--ok  { color: #059669; }
.smu-msg--err { color: #dc2626; }

/* ── Profil ── */
.smu-profil { max-width: 720px; margin: 0 auto; }
.smu-profil-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--smu-border); margin-bottom: 28px; flex-wrap: wrap; }
.smu-pnav { background: none; border: none; padding: 10px 18px; font-size: .9rem; font-weight: 600; color: var(--smu-gray); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.smu-pnav--active { color: var(--smu-primary); border-bottom-color: var(--smu-primary); }
.smu-pnav--right { margin-left: auto; color: #dc2626; }
.smu-ppanel { display: none; }
.smu-ppanel--active { display: block; }
.smu-badge { background: var(--smu-primary); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }

/* Avatar */
.smu-profil-header { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.smu-avatar-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.smu-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--smu-border); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 700; background: var(--smu-primary); color: #fff; }
.smu-avatar-edit { position: absolute; bottom: -4px; right: -4px; width: 26px; height: 26px; background: var(--smu-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; color: #fff; border: 2px solid #fff; }

/* Hodnocení list */
.smu-hodnoceni-list { display: flex; flex-direction: column; gap: 12px; }
.smu-hod-item { border: 1.5px solid var(--smu-border); border-radius: 10px; padding: 14px 16px; }
.smu-hod-item__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.smu-star { font-size: 1.2rem; color: #e5e7eb; }
.smu-star--on { color: #f59e0b; }

/* ── Hodnocení widget na stránce ── */
.sm-hodnoceni-widget { margin: 40px 0; padding: 28px; border: 1.5px solid var(--smu-border); border-radius: var(--smu-radius); }
.sm-hodnoceni-widget h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.sm-avg-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sm-avg-num { font-size: 2.4rem; font-weight: 700; color: var(--smu-primary); }
.sm-avg-stars .smu-star { font-size: 1.4rem; }
.sm-avg-count { font-size: 13px; color: var(--smu-gray); }

/* Formulář hodnocení */
.sm-hod-form { background: #faf5ff; border: 1.5px solid #c4b5fd; border-radius: 10px; padding: 18px 20px; margin-bottom: 24px; }
.sm-hod-form h4 { margin: 0 0 12px; font-size: .95rem; }
.sm-star-picker { display: flex; gap: 4px; margin-bottom: 12px; cursor: pointer; font-size: 1.8rem; user-select: none; }
.sm-star-picker .smu-star { cursor: pointer; transition: color .1s; }
.sm-hod-text { width: 100%; padding: 8px 10px; border: 1.5px solid var(--smu-border); border-radius: 8px; font-size: 13px; margin-bottom: 12px; min-height: 80px; resize: vertical; font-family: inherit; }
.sm-hod-submit { background: var(--smu-primary); color: #fff; border: none; padding: 9px 20px; border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.sm-hod-submit:hover { background: #5b21b6; }
.sm-login-prompt { font-size: 13px; color: var(--smu-gray); padding: 12px; background: #f9fafb; border-radius: 8px; }
.sm-login-prompt a { color: var(--smu-primary); font-weight: 600; }

/* Hodnocení items */
.sm-hod-items { display: flex; flex-direction: column; gap: 14px; }
.sm-hod-one { padding: 14px 0; border-bottom: 1px solid var(--smu-border); }
.sm-hod-one:last-child { border-bottom: none; }
.sm-hod-one__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.sm-hod-one__name { font-weight: 600; font-size: 13px; }
.sm-hod-one__date { font-size: 11px; color: #9ca3af; }
.sm-hod-one__text { font-size: 13px; color: #374151; line-height: 1.6; }

@media (max-width: 600px) {
  .smu-wrap, .smu-profil { padding: 0 4px; }
  .smu-profil-nav { gap: 0; }
  .smu-field input, .smu-hod-text { font-size: 16px; } /* prevence zoom na iOS */
}