/* ══════════════════════════════════════════════════════════
   MBP VAULT — Design que combina com Massage Booking Pro
   Fontes: Cormorant Garamond (títulos) + DM Sans (corpo)
   Paleta: Gold #C9A227 · Vinho #6B0F1A · Quente #f9f8f6
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --vg:       #C9A227;      /* gold  */
  --vg2:      #a88520;      /* gold escuro */
  --vg-g:     linear-gradient(135deg, #C9A227, #e8c96a, #C9A227);
  --vg-glow:  rgba(201,162,39,.22);
  --vw:       #6B0F1A;      /* vinho */
  --vdark:    #0f0c09;      /* banner dark */
  --vdark2:   #1a1612;
  --vbg:      #f9f8f6;      /* fundo quente */
  --vbg2:     #ffffff;      /* cards */
  --vbg3:     #f2ede6;      /* card hover */
  --vtxt:     #1a1410;      /* texto principal */
  --vtxt2:    #6b6560;      /* texto muted */
  --vtxt3:    #b0a89e;      /* texto sutil */
  --vbrd:     #e8e4dc;      /* bordas */
  --vbrd2:    #d4cfc7;      /* bordas fortes */
  --vr:       16px;
  --vr2:      24px;
  --vsh:      0 2px 16px rgba(26,20,16,.08);
  --vsh2:     0 8px 32px rgba(26,20,16,.14);
  --vgold-sh: 0 4px 20px rgba(201,162,39,.3);
  --vtrans:   .2s cubic-bezier(.4,0,.2,1);
  --vff:      'DM Sans', -apple-system, sans-serif;
  --vff-title:'Cormorant Garamond', Georgia, serif;
}

/* ── Reset + Full-Width Breakout ──────────────────── */
.mbv-page {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--vbg);
  color: var(--vtxt);
  font-family: var(--vff);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mbv-page *, .mbv-page *::before, .mbv-page *::after { box-sizing: border-box; }
.mbv-page a { color: var(--vg); text-decoration: none; }
.mbv-page img { display: block; }

/* ── BANNER (mantém dark premium) ─────────────────── */
.mbv-banner {
  position: relative;
  width: 100%; height: 40vh;
  min-height: 240px; max-height: 460px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--vdark) 0%, var(--vdark2) 40%, #2a1a08 100%);
}
.mbv-banner-img { width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.8); }
.mbv-banner-fade { position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,9,0) 0%,rgba(15,12,9,.55) 60%,var(--vdark) 100%); }
.mbv-banner-glow { position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:50%;height:2px;background:var(--vg-g);border-radius:2px;box-shadow:0 0 30px var(--vg-glow),0 0 60px var(--vg-glow); }

/* ── PERFIL (transição dark → quente) ─────────────── */
.mbv-profile-section {
  background: linear-gradient(180deg, var(--vdark) 0%, var(--vdark2) 30%, var(--vbg) 100%);
}
.mbv-profile {
  max-width: 1160px; margin: 0 auto;
  padding: 0 24px 28px;
}
.mbv-avatar-row {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  margin-top: -52px; margin-bottom: 18px;
  gap: 14px; flex-wrap: wrap;
}
.mbv-avatar-wrap { position: relative; flex-shrink: 0; }
.mbv-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--vdark);
  outline: 2.5px solid var(--vg);
  box-shadow: 0 0 0 4px var(--vdark), var(--vgold-sh);
  background: var(--vdark2);
}
.mbv-avatar-ph {
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--vdark2); border: 3px solid var(--vdark);
  outline: 2.5px solid var(--vg);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; box-shadow: 0 0 0 4px var(--vdark);
}
/* Online dot */
.mbv-online {
  position: absolute; bottom: 5px; right: 5px;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid var(--vdark);
  transition: var(--vtrans);
}
.mbv-online.online  { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.mbv-online.recent  { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.5); }
.mbv-online.offline { background: var(--vtxt3); box-shadow: none; }

/* Ações do perfil */
.mbv-profile-actions { display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:2px; }

/* Info do perfil */
.mbv-profile-info { padding-top: 2px; }
.mbv-display-name {
  font-family: var(--vff-title);
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 700; letter-spacing: -.3px;
  color: #f3f0e8;
  line-height: 1.1; margin-bottom: 4px;
}
.mbv-handle { font-size: 13px; color: var(--vtxt3); margin-bottom: 10px; font-weight: 500; }
.mbv-status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 700;
  margin-bottom: 12px;
  transition: var(--vtrans);
}
.mbv-status-chip.online  { background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.2); }
.mbv-status-chip.recent  { background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.2); }
.mbv-status-chip.offline { background:rgba(176,168,158,.1);color:var(--vtxt3);border:1px solid rgba(176,168,158,.15); }
.mbv-status-dot { width:7px;height:7px;border-radius:50%;background:currentColor; }
.mbv-stats { display:flex;gap:20px;margin-bottom:10px;flex-wrap:wrap; }
.mbv-stat { font-size:13px;color:var(--vtxt3);display:flex;align-items:center;gap:4px; }
.mbv-stat strong { color:#f3f0e8;font-weight:700; }
.mbv-bio { font-size:14px;color:var(--vtxt2);line-height:1.65;max-width:540px;color:rgba(243,240,232,.7); }
.mbv-bio a { color:var(--vg);text-decoration:underline; }

/* ── BOTÕES ────────────────────────────────────────── */
.mbv-btn {
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:10px 22px;border-radius:50px;
  font-family:var(--vff);font-size:14px;font-weight:700;
  cursor:pointer;border:none;text-decoration:none;
  transition:var(--vtrans);white-space:nowrap;letter-spacing:.2px;
}
.mbv-btn:active { transform:scale(.97); }
.mbv-btn-primary {
  background:var(--vg-g);color:var(--vdark);
  box-shadow:var(--vgold-sh);background-size:200%;
}
.mbv-btn-primary:hover { background-position:right;box-shadow:0 6px 28px var(--vg-glow);color:var(--vdark);text-decoration:none; }
.mbv-btn-book {
  background:var(--vw);color:#fff;
  box-shadow:0 4px 16px rgba(107,15,26,.3);
}
.mbv-btn-book:hover { background:#8a1220;color:#fff;text-decoration:none;box-shadow:0 6px 22px rgba(107,15,26,.45); }
.mbv-btn-ghost {
  background:rgba(243,240,232,.08);color:rgba(243,240,232,.7);
  border:1px solid rgba(243,240,232,.15);
}
.mbv-btn-ghost:hover { background:rgba(243,240,232,.14);color:#f3f0e8;text-decoration:none; }
.mbv-btn-icon {
  width:40px;height:40px;padding:0;border-radius:50%;
  background:rgba(243,240,232,.08);border:1px solid rgba(243,240,232,.15);
  color:rgba(243,240,232,.6);font-size:16px;
}
.mbv-btn-icon:hover { background:rgba(243,240,232,.16);color:#f3f0e8; }

/* ── DIVISOR ───────────────────────────────────────── */
.mbv-sep { height:1px;background:var(--vbrd);margin:0; }

/* ── FILTROS ───────────────────────────────────────── */
.mbv-filters-bar {
  background:var(--vbg2);
  max-width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--vbrd);
  position:sticky;top:0;z-index:40;
}
.mbv-filters-inner { max-width:1160px;width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; }
.mbv-tabs { display:flex;gap:4px;flex-wrap:wrap; }
.mbv-tab {
  padding:7px 16px;border-radius:50px;font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid transparent;
  background:transparent;color:var(--vtxt2);
  transition:var(--vtrans);font-family:var(--vff);
}
.mbv-tab:hover { background:var(--vbg3);color:var(--vtxt); }
.mbv-tab.on { background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.35);color:var(--vg2); }
.mbv-count-lbl { font-size:13px;color:var(--vtxt3); }

/* ── GRID ──────────────────────────────────────────── */
.mbv-grid-wrap {
  max-width:1160px;margin:0 auto;
  padding:20px 24px 60px;
}
.mbv-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@media(max-width:960px) { .mbv-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px) { .mbv-grid { grid-template-columns:repeat(2,1fr);gap:8px; } }

/* ── CARD ──────────────────────────────────────────── */
.mbv-card {
  background:var(--vbg2);
  border:1px solid var(--vbrd);
  border-radius:var(--vr);
  overflow:hidden;
  cursor:pointer;
  transition:var(--vtrans);
  position:relative;
  box-shadow:var(--vsh);
  animation:mbv-fadein .3s ease both;
}
.mbv-card:hover { border-color:var(--vg);box-shadow:var(--vsh2);transform:translateY(-3px); }
.mbv-card.hidden { display:none; }

/* Pinned — ocupa 2 colunas */
.mbv-card.pinned {
  grid-column:span 2;
  border-color:rgba(201,162,39,.4);
  box-shadow:0 4px 24px var(--vg-glow);
}
.mbv-card.pinned .mbv-card-thumb { aspect-ratio:16/9; }
@media(max-width:640px) { .mbv-card.pinned { grid-column:span 2; } .mbv-card.pinned .mbv-card-thumb { aspect-ratio:4/3; } }

/* Thumb */
.mbv-card-thumb {
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--vbg3);
}
.mbv-card.pinned .mbv-card-thumb { aspect-ratio:16/9; }
.mbv-card-img {
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.mbv-card:hover .mbv-card-img { transform:scale(1.04); }
.mbv-card-img.blurred { filter:blur(18px) brightness(.65) saturate(.7); }
.mbv-card-ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--vbg3); }

/* Overlay hover */
.mbv-card-overlay {
  position:absolute;inset:0;
  background:rgba(26,20,16,.32);
  opacity:0;transition:opacity .2s;
  display:flex;align-items:center;justify-content:center;
}
.mbv-card:hover .mbv-card-overlay { opacity:1; }
.mbv-play-ic { font-size:38px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

/* Badges top-left */
.mbv-card-badges { position:absolute;top:9px;left:9px;display:flex;gap:5px;flex-wrap:wrap; }
.mbv-badge {
  backdrop-filter:blur(8px);border-radius:7px;padding:3px 8px;
  font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  display:flex;align-items:center;gap:3px;
}
.mbv-badge-type  { background:rgba(26,20,16,.65);color:#f3f0e8; }
.mbv-badge-new   { background:var(--vg);color:var(--vdark); }
.mbv-badge-pin   { background:var(--vw);color:#fff; }

/* Favorito ♥ */
.mbv-fav-btn {
  position:absolute;top:9px;right:9px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(249,248,246,.85);backdrop-filter:blur(6px);
  border:1px solid var(--vbrd);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--vtxt3);
  transition:var(--vtrans);
  opacity:0;
}
.mbv-card:hover .mbv-fav-btn,.mbv-fav-btn.on { opacity:1; }
.mbv-fav-btn.on { color:var(--vw);border-color:rgba(107,15,26,.3);background:rgba(107,15,26,.08); }
.mbv-fav-btn:hover { transform:scale(1.2);color:var(--vw); }

/* Lock */
.mbv-lock-layer {
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(26,20,16,.15);
}
.mbv-lock-wrap {
  width:48px;height:48px;border-radius:50%;
  background:rgba(249,248,246,.92);backdrop-filter:blur(8px);
  border:1.5px solid var(--vbrd2);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:var(--vsh);
}
.mbv-lock-price {
  background:var(--vg-g);color:var(--vdark);
  font-size:12px;font-weight:800;padding:4px 12px;border-radius:50px;
  box-shadow:var(--vgold-sh);letter-spacing:.2px;
}

/* Info bar */
.mbv-card-info { padding:10px 12px 12px; }
.mbv-card-title { font-size:13px;font-weight:700;color:var(--vtxt);margin-bottom:4px;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.mbv-card-meta { display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--vtxt3); }
.mbv-card-views { display:flex;align-items:center;gap:3px; }
.mbv-access-ok   { color:var(--vg2);font-weight:700; }
.mbv-buy-link {
  background:var(--vg-g);color:var(--vdark);font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:50px;cursor:pointer;border:none;font-family:var(--vff);
  box-shadow:var(--vgold-sh);
}
.mbv-buy-link:hover { opacity:.88; }

/* Live views indicator */
.mbv-live-views { display:flex;align-items:center;gap:3px;font-size:11px;color:var(--vtxt3);animation:mbv-fadein .3s ease; }
.mbv-live-dot { width:5px;height:5px;border-radius:50%;background:var(--vg);animation:mbv-pulse 2s ease infinite; }
@keyframes mbv-pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── LIGHTBOX ──────────────────────────────────────── */
.mbv-lightbox {
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,12,9,.97);
  display:none;align-items:center;justify-content:center;flex-direction:column;
}
.mbv-lightbox.open { display:flex; }
.mbv-lb-close {
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(243,240,232,.08);border:1px solid rgba(243,240,232,.12);
  color:rgba(243,240,232,.6);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--vtrans);z-index:2;
}
.mbv-lb-close:hover { background:rgba(201,162,39,.2);color:#f3f0e8; }
.mbv-lb-nav {
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(243,240,232,.07);border:1px solid rgba(243,240,232,.12);
  color:rgba(243,240,232,.6);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--vtrans);z-index:2;
}
.mbv-lb-nav:hover { background:rgba(201,162,39,.2);color:#f3f0e8; }
.mbv-lb-nav.prev { left:12px; }.mbv-lb-nav.next { right:12px; }
.mbv-lb-nav.hidden { opacity:0;pointer-events:none; }
.mbv-lb-media img { max-width:min(90vw,920px);max-height:80vh;object-fit:contain;border-radius:10px;user-select:none;pointer-events:none; }
.mbv-lb-media video { max-width:min(90vw,920px);max-height:80vh;border-radius:10px; }
.mbv-lb-media iframe { width:min(90vw,920px);height:min(50.6vw,518px);border:none;border-radius:10px; }
.mbv-lb-loader { display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--vtxt3);font-size:14px; }
.mbv-lb-loader.hidden { display:none; }
.mbv-spinner { width:28px;height:28px;border:3px solid rgba(243,240,232,.08);border-top-color:var(--vg);border-radius:50%;animation:mbv-spin .65s linear infinite; }
@keyframes mbv-spin { to{transform:rotate(360deg)} }

/* Lightbox bottom bar (posição + CTA agendar) */
.mbv-lb-bar {
  display:flex;align-items:center;gap:12px;
  margin-top:14px;
  background:rgba(26,20,16,.75);backdrop-filter:blur(10px);
  border:1px solid rgba(243,240,232,.1);
  border-radius:50px;padding:7px 16px;
}
.mbv-lb-pos { font-size:13px;color:rgba(243,240,232,.65);white-space:nowrap; }
.mbv-lb-sep { width:1px;height:14px;background:rgba(243,240,232,.15); }
.mbv-lb-book {
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:50px;
  background:var(--vg);color:var(--vdark);
  font-size:12px;font-weight:800;cursor:pointer;border:none;font-family:var(--vff);
  transition:var(--vtrans);
}
.mbv-lb-book:hover { background:#e8c96a;transform:scale(1.03); }

/* ── MODAL ─────────────────────────────────────────── */
.mbv-modal {
  position:fixed;inset:0;z-index:8000;
  background:rgba(15,12,9,.7);backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;
}
.mbv-modal.open { display:flex; }
@media(min-width:600px) { .mbv-modal { align-items:center; } }
.mbv-modal-box {
  background:var(--vbg2);border:1px solid var(--vbrd);
  border-radius:22px 22px 0 0;padding:26px 22px;
  width:100%;max-width:440px;position:relative;box-shadow:var(--vsh2);
}
@media(min-width:600px) { .mbv-modal-box { border-radius:var(--vr2); } }
.mbv-modal-close { position:absolute;top:14px;right:16px;background:none;border:none;color:var(--vtxt3);font-size:20px;cursor:pointer; }
.mbv-modal-title {
  font-family:var(--vff-title);font-size:22px;font-weight:700;
  color:var(--vtxt);margin:0 0 8px;
}
.mbv-modal-body { color:var(--vtxt2);font-size:14px;line-height:1.65;margin-bottom:18px; }
.mbv-modal-actions { display:flex;gap:10px;flex-wrap:wrap; }
.mbv-modal .mbv-btn-primary { background:var(--vg-g);color:var(--vdark);box-shadow:var(--vgold-sh); }
.mbv-modal .mbv-btn-ghost { background:var(--vbg3);color:var(--vtxt2);border:1px solid var(--vbrd); }
.mbv-modal .mbv-btn-ghost:hover { background:var(--vbg);color:var(--vtxt); }

/* ── EMPTY ─────────────────────────────────────────── */
.mbv-empty { grid-column:1/-1;text-align:center;padding:56px 24px;color:var(--vtxt3); }
.mbv-empty-ic { font-size:40px;margin-bottom:12px; }
.mbv-empty p { font-size:14px; }

/* ── ANIMAÇÕES ─────────────────────────────────────── */
@keyframes mbv-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes mbv-heart  { 0%{transform:scale(1)} 40%{transform:scale(1.55)} 70%{transform:scale(.88)} 100%{transform:scale(1)} }
.mbv-fav-btn.pop { animation:mbv-heart .35s ease forwards; }

/* ── MOBILE ────────────────────────────────────────── */
@media(max-width:768px) {
  .mbv-banner { height:30vh;min-height:180px; }
  .mbv-profile { padding:0 14px 20px; }
  .mbv-avatar { width:80px;height:80px; }
  .mbv-avatar-ph { width:80px;height:80px;font-size:30px; }
  .mbv-avatar-row { margin-top:-40px; }
  .mbv-display-name { font-size:26px; }
  .mbv-grid-wrap { padding:14px 12px 48px; }
  .mbv-filters-bar { padding:10px 14px; }
  .mbv-lb-nav.prev { left:6px; }
  .mbv-lb-nav.next { right:6px; }
  .mbv-lb-bar { margin-top:10px;padding:6px 12px; }
}