/* MOVEO COACH — UI polish layer
 * Skeleton loaders, microinteractions, hover lifts, stats grids,
 * stepper in booking modal, sparkline badge prep, story ring gradient.
 * Map untouched on purpose. Loaded after the main stylesheets so it wins.
 */

/* ============== SKELETONS ============== */
.mvo-skel{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,
    var(--sand-50) 0%, var(--sand-100) 50%, var(--sand-50) 100%);
  background-size:200% 100%;
  animation:mvoSkelShimmer 1.4s ease-in-out infinite;
  border-radius:8px;
}
@keyframes mvoSkelShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.mvo-skel-line{height:12px;margin:6px 0;border-radius:6px}
.mvo-skel-line.w-60{width:60%}
.mvo-skel-line.w-40{width:40%}
.mvo-skel-line.w-80{width:80%}
.mvo-skel-card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:18px;display:flex;flex-direction:column;gap:8px;
}
.mvo-skel-avatar{width:56px;height:56px;border-radius:50%}
.mvo-skel-thumb{width:100%;aspect-ratio:1/1;border-radius:12px}

/* ============== CARD ENTRY ANIMATION ============== */
@keyframes mvoCardIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .mvo-anim-in{animation:mvoCardIn .35s cubic-bezier(.2,.7,.2,1) both}
  .mvo-anim-in:nth-child(2){animation-delay:.05s}
  .mvo-anim-in:nth-child(3){animation-delay:.10s}
  .mvo-anim-in:nth-child(4){animation-delay:.15s}
  .mvo-anim-in:nth-child(5){animation-delay:.20s}
  .mvo-anim-in:nth-child(6){animation-delay:.25s}
}

/* ============== COACH CARD HOVER LIFT (list panel) ============== */
@media (prefers-reduced-motion:no-preference){
  .lp-card{
    transition:transform .22s cubic-bezier(.2,.7,.2,1.2),
               box-shadow .22s ease,
               border-color .15s ease !important;
  }
  .lp-card:hover{
    transform:translateY(-3px) scale(1.005);
    box-shadow:0 14px 30px -10px rgba(60,45,20,.18),
               0 4px 8px rgba(60,45,20,.06);
  }
  .lp-card.active{
    transform:translateY(-2px);
    box-shadow:0 18px 40px -10px rgba(60,45,20,.28),
               0 0 0 1px var(--ink);
  }
}

/* ============== COACH PANEL — stats grid + bio blockquote ============== */
.cp-stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:14px 0 18px;
}
.cp-stat{
  background:var(--sand-50);border:1px solid var(--line);
  border-radius:14px;padding:14px 12px;text-align:center;
  position:relative;overflow:hidden;
}
.cp-stat .cps-val{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:30px;line-height:1;color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.cp-stat .cps-lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin-top:6px;
}
.cp-stat.featured{
  background:linear-gradient(135deg, rgba(184,149,107,.12), rgba(122,145,122,.08));
  border-color:rgba(184,149,107,.35);
}
.cp-stat.featured .cps-val{color:var(--accent)}
html[data-theme="dark"] .cp-stat{background:var(--sand-50);border-color:var(--line)}
html[data-theme="dark"] .cp-stat .cps-val{color:var(--ink)}

.cp-bio-quote{
  position:relative;
  margin:14px 0 16px;padding:12px 16px 12px 20px;
  border-left:3px solid var(--sand-300);
  background:linear-gradient(90deg, var(--sand-50) 0%, transparent 70%);
  border-radius:0 12px 12px 0;
  font-size:14.5px;line-height:1.55;color:var(--ink-2);
  text-wrap:pretty;
}
.cp-bio-quote::before{
  content:"";display:block;width:18px;height:14px;
  margin-bottom:4px;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='%23C9B89A'><path d='M2 14V8a4 4 0 014-4V0H4a4 4 0 00-4 4v10h2zm10 0V8a4 4 0 014-4V0h-2a4 4 0 00-4 4v10h2z'/></svg>");
  opacity:.8;
}
html[data-theme="dark"] .cp-bio-quote{
  background:linear-gradient(90deg, rgba(245,239,224,.04) 0%, transparent 70%);
  border-left-color:var(--sand-400);
  color:var(--ink-2);
}

/* Verified credentials panel */
.cp-verified-card{
  border:1px solid rgba(77,163,217,.30);
  background:linear-gradient(135deg, rgba(77,163,217,.06), rgba(77,163,217,.02));
  border-radius:14px;padding:14px 16px;margin:12px 0 18px;
  display:flex;flex-direction:column;gap:10px;
}
.cp-verified-card .cpv-head{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#1F6F9C;
}
.cp-verified-card .cpv-head svg{flex-shrink:0}
.cp-verified-card .cpv-creds{
  display:flex;flex-wrap:wrap;gap:6px;
}
.cp-verified-card .cpv-creds .cred{
  background:var(--paper);border:1px solid var(--line);
  padding:5px 10px;border-radius:999px;font-size:12px;color:var(--ink-2);
  font-weight:500;
}
html[data-theme="dark"] .cp-verified-card{
  background:linear-gradient(135deg, rgba(77,163,217,.10), rgba(77,163,217,.02));
}
html[data-theme="dark"] .cp-verified-card .cpv-head{color:#7AC3E6}

/* ============== STORY RING — richer gradient ============== */
.cp-stories-bubble .csb-ring,
.ms-pill .ms-ring{
  background:conic-gradient(from 220deg,
    #D97B5F 0%, #E8A05B 18%, #E8C56A 35%,
    #B89875 52%, #7A917A 70%, #D97B5F 100%) !important;
}
.ms-pill.viewed .ms-ring{background:var(--sand-200) !important}

/* ============== BOOKING STEPPER ============== */
.bk-stepper{
  display:flex;align-items:center;gap:6px;
  margin:6px 0 18px;padding:0;
  font-family:'DM Sans',system-ui,sans-serif;
}
.bk-step{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;
}
.bk-step .bks-dot{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
  background:var(--sand-100);color:var(--mute);
  border:1px solid var(--line);
  transition:background .2s, color .2s, transform .2s;
}
.bk-step.is-done .bks-dot{
  background:var(--accent-2);color:#fff;border-color:var(--accent-2);
}
.bk-step.is-active .bks-dot{
  background:var(--ink);color:#F6F1E7;border-color:var(--ink);
  transform:scale(1.08);
  box-shadow:0 4px 12px -4px rgba(36,31,24,.4);
}
.bk-step .bks-lbl{
  font-size:11.5px;font-weight:600;color:var(--mute);
  letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-step.is-active .bks-lbl{color:var(--ink)}
.bk-step.is-done .bks-lbl{color:var(--ink-2)}
.bk-step-line{
  flex:0 0 auto;width:18px;height:2px;
  background:var(--sand-200);border-radius:1px;
}
.bk-step.is-done + .bk-step-line{background:var(--accent-2)}
@media (max-width:480px){
  .bk-step .bks-lbl{display:none}
  .bk-step{flex:0 0 auto}
  .bk-step-line{flex:1;width:auto}
}

/* ============== ONLINE DOT IN LIST CARDS ============== */
.lp-card .lp-online{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#2B6A3A;
  box-shadow:0 1px 3px rgba(60,45,20,.10);
  z-index:2;
}
.lp-card .lp-online::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#4CAF50;
  box-shadow:0 0 0 0 rgba(76,175,80,.6);
  animation:mvoOnlinePulse 1.8s ease-in-out infinite;
}
@keyframes mvoOnlinePulse{
  0%{box-shadow:0 0 0 0 rgba(76,175,80,.6)}
  70%{box-shadow:0 0 0 6px rgba(76,175,80,0)}
  100%{box-shadow:0 0 0 0 rgba(76,175,80,0)}
}
html[data-theme="dark"] .lp-card .lp-online{
  background:rgba(20,17,13,.85);color:#7DD08E;
}

/* ============== BACKGROUND TINTS ON FEATURED CARDS ============== */
.dash-card.featured,
.dash-card.next-session{
  background:linear-gradient(135deg, var(--sand-50), var(--paper));
  border-color:var(--sand-300);
  position:relative;overflow:hidden;
}
.dash-card.next-session::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
}
.dash-card.next-session{padding-left:22px}

/* ============== EMPTY-STATE ILLUSTRATIONS ============== */
.mvo-empty{
  text-align:center;padding:48px 22px;color:var(--mute);
}
.mvo-empty .ic{
  width:64px;height:64px;border-radius:50%;
  background:var(--sand-50);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;margin-bottom:14px;
  border:1px solid var(--line);
}
.mvo-empty h4{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:22px;color:var(--ink);margin:0 0 6px;
}
.mvo-empty p{font-size:13.5px;line-height:1.5;max-width:320px;margin:0 auto;text-wrap:pretty}

/* Kill the cream strip at the bottom of the map page — legal link sits as a
   floating pill on the map, no background needed under it. */
body > .footer,
body > footer:not(.acc-footer):not(.coach-footer){
  display:none !important;
}
.legal-link{background:rgba(255,255,255,.85) !important}
html[data-theme="dark"] .legal-link{background:rgba(20,17,13,.85) !important}

/* ============== HEADER POLISH (topbar only, footer untouched) ============== */
/* Soft cream tint behind the topbar with blur — separates the header from
   the map without using a hard line. Filters row stays transparent.
   Right-side actions grouped into a pill container. */
.top .topbar{
  background:rgba(246,241,231,.55) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:14px;
  padding:8px 14px !important;
  border:1px solid rgba(233,226,211,.6);
  box-shadow:0 4px 14px -6px rgba(60,45,20,.10);
}
html[data-theme="dark"] .top .topbar{
  background:rgba(31,27,20,.55) !important;
  border-color:rgba(47,42,31,.7);
}
.top .top-actions{
  background:rgba(255,255,255,.5);
  border:1px solid rgba(233,226,211,.7);
  border-radius:999px;
  padding:4px 6px;
  gap:4px !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
html[data-theme="dark"] .top .top-actions{
  background:rgba(20,17,13,.45);
  border-color:rgba(47,42,31,.7);
}
.top .top-actions .btn{
  padding:7px 12px !important;
  font-size:12.5px;
}
@media (max-width:1100px){
  .topbar .tagline{display:none}
}

/* ============== COACH PANEL — wider ============== */
.panel.coach-panel{ width:460px !important; max-width:calc(100vw - 32px) !important; }
.panel.coach-panel.maximized{ width:720px !important; }

/* Disable the booking button on demo coaches */
.is-demo #cpBook,
.coach-panel.is-demo #cpBook,
#cpBook.is-disabled{
  opacity:.45 !important;
  pointer-events:none !important;
  cursor:not-allowed !important;
  position:relative;
}

/* ============== MOBILE RESPONSIVE — index.html ============== */
@media (max-width:640px){
  /* Topbar pill: full-width, smaller padding, hide tagline + wordmark dots */
  .top{ padding:10px 10px 14px !important; }
  .top .topbar{
    padding:6px 10px !important;
    border-radius:14px;
    gap:6px !important;
    flex-wrap:nowrap;
  }
  /* overflow:visible — prevent clipping the runner icon (brand-mark) */
  .top .topbar .brand{ min-width:0; overflow:visible; flex-shrink:1 }
  .top .topbar .brand .logo{
    font-size:18px !important;
    letter-spacing:.08em !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:140px;
  }
  .top .topbar .brand .tagline{ display:none !important }
  .top .top-actions{
    padding:3px 4px !important;
    gap:2px !important;
    flex-shrink:0;
  }
  .top .top-actions .btn{
    padding:6px 9px !important;
    font-size:12px !important;
  }
  .top .top-actions .btn span:not(.msg-count){ display:none !important }
  /* "Join as coach" stays full text since it's the primary CTA */
  .top .top-actions #joinBtn span,
  .top .top-actions .btn-ink span{ display:inline !important; font-size:11.5px !important; }
  /* Filter row scrolls horizontally, hide scrollbar */
  .top .filters-row{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:6px 4px !important;
  }
  .top .filters-row::-webkit-scrollbar{ display:none }
  /* Search input slightly smaller */
  .search-wrap input{ font-size:14px !important }
  /* Filter button stays compact */
  #filtersBtn{ flex-shrink:0 }
}

/* Even narrower phones */
@media (max-width:380px){
  .top .topbar .brand .logo{ max-width:100px;font-size:16px !important }
  .top .top-actions .btn{ padding:5px 7px !important }
}

/* Mobile: solid Join-as-coach button (no blur/transparency), add a "+" icon
   before the text so it reads as a clear primary action even when narrow. */
@media (max-width:640px){
  #joinBtn{
    background:var(--ink) !important;
    color:#F6F1E7 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 2px 8px -2px rgba(60,45,20,.25);
  }
  #joinBtn::before{
    content:"+";
    display:inline-block;
    margin-right:5px;
    font-size:15px;
    font-weight:600;
    line-height:1;
  }
}

/* ============== USER AVATAR MENU — always above topbar capsule ============== */
.user-avatar-wrap{ position:relative !important; z-index:9000 !important; }
.user-avatar-wrap .user-menu{
  position:fixed !important;
  z-index:9999 !important;
  top:64px !important;
  right:18px !important;
  margin-top:0 !important;
}

/* Move Leaflet zoom +/- to bottom-left, above the "Info y legal" pill */
.leaflet-top.leaflet-left{ top:auto !important; bottom:60px !important; left:14px !important; }
.leaflet-top.leaflet-left .leaflet-control-zoom{ margin-top:0 !important; }

/* Leaflet zoom — smaller, cream pill, extra specificity to beat library CSS */
body .leaflet-touch .leaflet-bar,
body .leaflet-control-zoom{
  border:none !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:0 4px 14px -4px rgba(60,45,20,.20), 0 1px 3px rgba(60,45,20,.10) !important;
  margin:14px !important;
}
body .leaflet-touch .leaflet-bar a,
body .leaflet-control-zoom a,
body .leaflet-control-zoom-in,
body .leaflet-control-zoom-out{
  background-color:var(--sand-50) !important;
  color:var(--ink) !important;
  width:30px !important;
  height:30px !important;
  line-height:30px !important;
  font-size:15px !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
}
body .leaflet-control-zoom a:last-child,
body .leaflet-control-zoom-out{ border-bottom:none !important; }
body .leaflet-control-zoom a:hover{ background-color:var(--sand-100) !important; }
.leaflet-control-zoom a:last-child{ border-bottom:none !important; }
.leaflet-control-zoom a:hover{
  background:var(--sand-100) !important;
  color:var(--ink) !important;
}
html[data-theme="dark"] .leaflet-control-zoom a{
  background:var(--paper) !important;
  color:var(--ink) !important;
  border-bottom-color:var(--line) !important;
}
html[data-theme="dark"] .leaflet-control-zoom a:hover{
  background:var(--sand-100) !important;
}

/* ============== FINAL — COACH MARKER RINGS (source-order wins) ============== */
.coach-marker.demo .photo,
.coach-marker.unverified .photo{
  border:3px solid #fff !important;
  box-shadow:0 6px 16px -4px rgba(60,45,20,.35), 0 0 0 1px rgba(60,45,20,.05) !important;
}
.coach-marker.elite .photo{
  border:3px solid #D4AF37 !important;
  box-shadow:0 0 0 2px rgba(212,175,55,.30), 0 6px 16px -4px rgba(60,45,20,.35) !important;
}
.coach-marker.vip .photo{
  border:3px solid #C9A24B !important;
  box-shadow:0 0 0 2px rgba(201,162,75,.28), 0 6px 16px -4px rgba(60,45,20,.35) !important;
}
.coach-marker.verified .photo{
  border:3px solid #90C5E2 !important;
  box-shadow:0 0 0 2px rgba(144,197,226,.25), 0 6px 16px -4px rgba(60,45,20,.35) !important;
}
html[data-theme="dark"] .coach-marker.demo .photo,
html[data-theme="dark"] .coach-marker.unverified .photo{
  border:3px solid #fff !important;
}