/* ==========================================================================
   LEXSTUDI — MENU (Bottom Nav + Sheet + Tira) · v1.0 · Julho 2026
   Requer lexstudi-tokens.css já carregado globalmente.
   Este ficheiro é carregado sozinho (via wp_enqueue_scripts), não dentro
   de uma página Elementor — por isso não tem classe de âmbito pg-*, é
   mesmo global, mas só visível em mobile (<768px).
   ========================================================================== */

.lxm-root { font-family: var(--font-body); }

/* Reserva espaço permanente no fundo da página para a Bottom Nav não
   tapar o rodapé/conteúdo — só em mobile, onde a Bottom Nav existe. */
@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- BOTTOM NAV ---------- */
.lxm-bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixed, 40);
  height: 64px; padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-white); border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  align-items: stretch; justify-content: space-around;
}
@media (max-width: 767px) { .lxm-bottomnav { display: flex; } }

.lxm-bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: var(--touch-target-min); background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); text-decoration: none; font-family: var(--font-body);
  transition: color var(--duration-base) var(--ease-standard);
}
.lxm-bn-item svg { width: 22px; height: 22px; stroke-width: 1.8; }
.lxm-bn-item span { font-size: 11px; font-weight: var(--weight-body-medium); }
.lxm-bn-item.is-active,
.lxm-bn-item[aria-expanded="true"] { color: var(--color-primary); }
.lxm-bn-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- TIRA DE LOGIN/UPGRADE ---------- */
.lxm-strip {
  display: none;
  position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: var(--z-fixed, 40);
  align-items: center; gap: var(--space-s); padding: 6px var(--space-m);
  background: var(--color-primary); color: var(--color-white); font-size: 12.5px;
  animation: lxm-strip-in var(--duration-slow) var(--ease-out);
}
@media (max-width: 767px) { .lxm-strip:not([hidden]) { display: flex; } }
@keyframes lxm-strip-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.lxm-strip-text { flex: 1; line-height: 1.3; }
.lxm-strip-cta {
  flex-shrink: 0; background: var(--color-accent); color: var(--color-primary);
  font-weight: var(--weight-body-medium); font-size: 12px; padding: 4px 10px;
  border-radius: var(--radius-full); text-decoration: none; white-space: nowrap;
}
.lxm-strip-close {
  flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.8);
  font-size: 18px; line-height: 1; width: 24px; height: 24px; cursor: pointer;
}

/* ---------- OVERLAY ---------- */
.lxm-sheet-overlay {
  display: none;
  position: fixed; inset: 0; z-index: var(--z-modal, 50);
  background: var(--scrim-bg); opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
}
@media (max-width: 767px) {
  .lxm-sheet-overlay:not([hidden]) { display: block; }
  body.lxm-sheet-open .lxm-sheet-overlay { opacity: 1; }
}

/* ---------- SHEET ---------- */
.lxm-sheet {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 50);
  max-height: 78vh; background: var(--color-white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.2);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform var(--duration-slow) var(--ease-out);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 767px) { .lxm-sheet:not([hidden]) { display: flex; } }
body.lxm-sheet-open .lxm-sheet { transform: translateY(0); }
body.lxm-sheet-open { overflow: hidden; }

.lxm-sheet-handle { width: 40px; height: 4px; background: var(--color-border-strong); border-radius: var(--radius-full); margin: var(--space-s) auto 0; flex-shrink: 0; }

.lxm-sheet-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  padding: var(--space-l); border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.lxm-sheet-user { display: flex; align-items: center; gap: var(--space-m); min-width: 0; }
.lxm-sheet-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-primary);
  color: var(--color-white); display: flex; align-items: center; justify-content: center;
  font: var(--weight-heading-bold) 16px var(--font-heading);
}
.lxm-sheet-name { font: var(--type-h4); color: var(--color-text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxm-sheet-plan { font-size: var(--text-caption); color: var(--color-accent-hover); text-transform: uppercase; letter-spacing: var(--tracking-uppercase); }
.lxm-sheet-close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg-alt);
  border: none; display: flex; align-items: center; justify-content: center; color: var(--color-text-body); cursor: pointer;
}
.lxm-sheet-close svg { width: 18px; height: 18px; }
.lxm-sheet-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lxm-sheet-list { list-style: none; margin: 0; padding: var(--space-s) var(--space-m); overflow-y: auto; flex: 1; }
.lxm-sheet-list li + li { margin-top: 2px; }
.lxm-sheet-list a {
  display: flex; align-items: center; gap: var(--space-m); padding: var(--space-m); min-height: var(--touch-target-min);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text-heading);
  font: var(--weight-body-medium) var(--text-body) var(--font-body);
  transition: background var(--duration-base) var(--ease-standard);
}
.lxm-sheet-list a:hover, .lxm-sheet-list a:focus-visible { background: var(--color-bg-alt); outline: none; }
.lxm-sheet-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgba(var(--color-primary-rgb), .08);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
}
.lxm-sheet-icon svg { width: 18px; height: 18px; stroke-width: 1.75; }

.lxm-sheet-guest-cta { padding: var(--space-l); }
.lxm-sheet-guest-btn {
  display: block; text-align: center; background: var(--btn-gold-bg); color: var(--btn-gold-color);
  font: var(--btn-gold-font); padding: var(--space-m); border-radius: var(--btn-radius); text-decoration: none;
  min-height: var(--touch-target-min); display: flex; align-items: center; justify-content: center;
}

.lxm-sheet-footer { flex-shrink: 0; border-top: 1px solid var(--color-border); padding: var(--space-m) var(--space-l); }
.lxm-sheet-actions { display: flex; align-items: center; gap: var(--space-m); margin-bottom: var(--space-m); }
.lxm-sheet-share, .lxm-sheet-logout {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--touch-target-min); border-radius: var(--radius-lg); font: var(--weight-body-medium) var(--text-body-sm) var(--font-body);
  text-decoration: none; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text-heading);
}
.lxm-sheet-share svg, .lxm-sheet-logout svg { width: 16px; height: 16px; }
.lxm-sheet-logout { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
.lxm-sheet-legal { text-align: center; font-size: var(--text-caption); color: var(--color-text-muted); }
.lxm-sheet-legal a { color: var(--color-text-muted); text-decoration: underline; }

.lxm-share-menu { position: absolute; bottom: 100%; left: var(--space-l); right: var(--space-l); margin-bottom: var(--space-s);
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; }
.lxm-share-menu a { display: block; padding: var(--space-m); text-decoration: none; color: var(--color-text-heading); border-bottom: 1px solid var(--color-border); }
.lxm-share-menu a:last-child { border-bottom: none; }

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  .lxm-strip, .lxm-sheet, .lxm-sheet-overlay { animation: none !important; transition: none !important; }
}