/* ==========================================================================
   KOSMETALL — MENU (Bottom Nav + Sheet "Conta" + Partilhar) · v1.1
   Requer kosmetall-tokens.css já carregado globalmente.

   v1.1 — ícones passaram de Lucide (stroke, via CDN) para FontAwesome
   (fill, embutido no PHP) — por isso as regras `stroke-width` nos svg
   saíram (não têm efeito em ícones preenchidos); o botão de fechar do
   sheet passou a usar --touch-target-min em vez de 36px fixos; e entrou
   o estilo do modal de confirmação de saída (secção nova no fim).
   Ficheiro global (não é uma página Elementor) — carregado via
   wp_enqueue_style, visível em todo o site, mas só ACTIVO em <768px
   (o Bottom Nav e o sheet só existem em mobile; desktop usa o cabeçalho
   normal + um menu de conta próprio, à parte deste ficheiro).

   Adaptado a partir do sistema da lexstudi (lxm-*) — mesma mecânica de
   sheet/bottom-nav/partilhar, cores/tokens 100% da KosmeTall, sem a tira
   de login/upgrade (não aplicável — a KosmeTall não tem planos), sem a
   borda "neon" (trocada por uma sombra suave com toque dourado).
   ========================================================================== */

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

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

/* ---------- BOTTOM NAV ---------- */
.km-bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-nav);
  height: var(--mobile-nav-height); padding-bottom: var(--safe-area-bottom);
  background: rgba(var(--pure-white-rgb), .96);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border-top: var(--border-hairline);
  box-shadow: 0 -4px 20px rgba(var(--midnight-900-rgb), .06);
  align-items: stretch; justify-content: space-around;
}
@media (max-width: 767px) { .km-bottomnav { display: flex; } }

.km-bn-item {
  position: relative;
  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(--midnight-500); text-decoration: none; font-family: var(--font-body);
  transition: color var(--speed-fast) var(--ease-in-out);
}
.km-bn-item svg { width: 22px; height: 22px; }
.km-bn-item span { font-size: 10.5px; font-weight: var(--fw-medium); }
.km-bn-item.is-active,
.km-bn-item[aria-expanded="true"] { color: var(--color-primary); }
.km-bn-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--rd-sm); }

.km-bn-badge {
  position: absolute; top: 2px; right: calc(50% - 18px);
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--rd-pill);
  background: var(--color-primary); color: var(--pure-white);
  font-size: 10px; font-weight: var(--fw-bold); line-height: 16px; text-align: center;
}

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

/* ---------- SHEET "CONTA" ---------- */
.km-sheet {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  max-height: 82vh; background: var(--pure-white);
  border-radius: var(--rd-2xl) var(--rd-2xl) 0 0;
  box-shadow: 0 -16px 48px rgba(var(--midnight-900-rgb), .18);
  padding-bottom: var(--safe-area-bottom);
  transform: translateY(100%); transition: transform var(--speed-slow) var(--ease-out);
  flex-direction: column; overflow: hidden;
}
@media (max-width: 767px) { .km-sheet:not([hidden]) { display: flex; } }
body.km-sheet-open .km-sheet { transform: translateY(0); }
body.km-sheet-open { overflow: hidden; }

.km-sheet-handle { width: 40px; height: 4px; background: var(--midnight-300); border-radius: var(--rd-pill); margin: var(--sz-sm) auto 0; flex-shrink: 0; }

.km-sheet-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sz-md);
  padding: var(--sz-lg); border-bottom: var(--border-hairline); flex-shrink: 0;
}
.km-sheet-user { display: flex; align-items: center; gap: var(--sz-md); min-width: 0; }
.km-sheet-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--grad-corporate);
  color: var(--pure-white); display: flex; align-items: center; justify-content: center;
  font: var(--fw-bold) 16px var(--font-heading);
}
.km-sheet-name { font: var(--type-h5); color: var(--color-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-sheet-sub { font-size: var(--fs-xs); color: var(--color-muted); }
.km-sheet-close {
  flex-shrink: 0; width: var(--touch-target-min); height: var(--touch-target-min); border-radius: 50%; background: var(--color-section);
  border: none; display: flex; align-items: center; justify-content: center; color: var(--color-txt); cursor: pointer;
}
.km-sheet-close svg { width: 18px; height: 18px; }
.km-sheet-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.km-sheet-list { list-style: none; margin: 0; padding: var(--sz-sm) var(--sz-md); overflow-y: auto; flex: 1; }
.km-sheet-list li + li { margin-top: 2px; }
.km-sheet-divider { margin: var(--sz-sm) var(--sz-md); border: none; border-top: var(--border-hairline); }
.km-sheet-list a {
  display: flex; align-items: center; gap: var(--sz-md); padding: var(--sz-md); min-height: var(--touch-target-min);
  border-radius: var(--rd-lg); text-decoration: none; color: var(--color-title);
  font: var(--fw-medium) var(--fs-body-fluid) var(--font-body);
  transition: background var(--speed-fast) var(--ease-in-out);
}
.km-sheet-list a:hover, .km-sheet-list a:focus-visible { background: var(--color-section); outline: none; }
.km-sheet-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--rd-md); background: var(--peony-50);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
}
.km-sheet-icon svg { width: 18px; height: 18px; }

.km-sheet-guest-cta { padding: var(--sz-lg); }
.km-sheet-guest-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--btn-bg); color: var(--btn-txt);
  font: var(--btn-font); padding: var(--btn-padding); border-radius: var(--btn-radius); text-decoration: none;
  min-height: var(--touch-target-min);
}

.km-sheet-footer { flex-shrink: 0; border-top: var(--border-hairline); padding: var(--sz-md) var(--sz-lg); position: relative; }
.km-sheet-actions { display: flex; align-items: center; gap: var(--sz-md); margin-bottom: var(--sz-md); }
.km-sheet-share, .km-sheet-logout {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sz-xs);
  min-height: var(--touch-target-min); border-radius: var(--rd-lg); font: var(--fw-medium) var(--fs-sm) var(--font-body);
  text-decoration: none; cursor: pointer; border: var(--border-default); background: var(--pure-white); color: var(--color-title);
}
.km-sheet-share svg, .km-sheet-logout svg { width: 16px; height: 16px; }
.km-sheet-logout { color: var(--color-danger); border-color: var(--color-danger); background: #FFF5F5; }

.km-share-menu {
  position: absolute; bottom: 100%; left: var(--sz-lg); right: var(--sz-lg); margin-bottom: var(--sz-sm);
  background: var(--pure-white); border: var(--border-default); border-radius: var(--rd-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.km-share-menu a { display: block; padding: var(--sz-md); text-decoration: none; color: var(--color-title); border-bottom: var(--border-hairline); font-size: var(--fs-sm); }
.km-share-menu a:last-child { border-bottom: none; }

/* ---------- CONFIRMAÇÃO DE SAÍDA (novo em v1.1) ---------- */
.km-confirm-overlay {
  display: none;
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--scrim-bg);
  align-items: center; justify-content: center; padding: var(--sz-lg);
}
.km-confirm-overlay:not([hidden]) { display: flex; }
.km-confirm-box {
  width: 100%; max-width: 320px; background: var(--pure-white); border-radius: var(--rd-xl);
  box-shadow: var(--shadow-lg); padding: var(--sz-xl) var(--sz-lg); text-align: center;
}
.km-confirm-box p { font: var(--fw-medium) var(--fs-body-fluid) var(--font-body); color: var(--color-title); margin: 0 0 var(--sz-lg); }
.km-confirm-actions { display: flex; gap: var(--sz-md); }
.km-confirm-cancel, .km-confirm-ok {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: var(--touch-target-min); border-radius: var(--rd-lg); font: var(--fw-medium) var(--fs-sm) var(--font-body);
  text-decoration: none; cursor: pointer; border: var(--border-default);
}
.km-confirm-cancel { background: var(--pure-white); color: var(--color-title); }
.km-confirm-ok { background: var(--color-danger); border-color: var(--color-danger); color: var(--pure-white); }

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