/* Tour de introdução guiado — popup de boas-vindas na primeira visita
   + passos com seta a apontar para cada zona importante da página.
   Ver assets/onboarding-tour.js. Partilhado por qualquer página que
   registe os seus próprios passos — nunca duplicar este CSS por
   página, só os textos dos passos mudam de página para página.
   Tokens com fallback (var(--red,#CC0000)) para funcionar em
   qualquer página, tal como assets/cookie-consent.css. */

.tour-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(17, 17, 17, .55);
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
.tour-overlay.open { opacity: 1; pointer-events: auto; }

.tour-spotlight {
  position: fixed; z-index: 5000;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(17, 17, 17, .55);
  pointer-events: none;
  opacity: 0;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, opacity .2s ease;
}
.tour-spotlight.open { opacity: 1; }

.tour-tooltip {
  position: fixed; z-index: 5001;
  width: min(340px, calc(100vw - 32px));
  background: var(--white, #fff);
  border: 1px solid var(--border, #E2E2E2);
  border-radius: 4px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
  padding: 22px 24px;
  font-family: 'Jost', sans-serif;
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, top .25s ease, left .25s ease;
}
.tour-tooltip.open { opacity: 1; transform: translateY(0); }
.tour-tooltip::before {
  content: ''; position: absolute; width: 14px; height: 14px;
  left: var(--arrow-left, 20px);
  background: var(--white, #fff);
  border-left: 1px solid var(--border, #E2E2E2);
  border-top: 1px solid var(--border, #E2E2E2);
}
.tour-tooltip[data-arrow="top"]::before { top: -8px; transform: rotate(45deg); }
.tour-tooltip[data-arrow="bottom"]::before { bottom: -8px; transform: rotate(225deg); }

.tour-step-count {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red, #CC0000); font-weight: 500; margin-bottom: 8px;
}
.tour-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.25rem;
  color: var(--black, #111); margin-bottom: 8px; line-height: 1.25;
}
.tour-text {
  font-size: .84rem; line-height: 1.6; color: var(--grey, #555); margin-bottom: 18px;
}
.tour-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tour-skip {
  font-size: .72rem; color: var(--grey2, #888); background: none; border: none;
  cursor: pointer; text-decoration: underline; padding: 4px 0;
}
.tour-skip:hover { color: var(--red, #CC0000); }
.tour-next-group { display: flex; align-items: center; gap: 8px; }
.tour-prev {
  background: none; border: 1px solid var(--border, #E2E2E2); color: var(--grey, #555);
  font-family: 'Jost', sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer; transition: .2s;
}
.tour-prev:hover { border-color: var(--red, #CC0000); color: var(--red, #CC0000); }
.tour-prev:disabled { opacity: 0; pointer-events: none; }
.tour-next {
  background: var(--red, #CC0000); color: #fff; border: none;
  font-family: 'Jost', sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 18px; cursor: pointer; transition: .2s;
}
.tour-next:hover { background: var(--red-h, #E60000); }

/* Popup de boas-vindas — modal centrado, mesmo espírito visual do
   welcome-overlay do Círculo (circle/dashboard.html), mas
   independente para funcionar em qualquer área (administração,
   profissional). */
.tour-welcome-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(17, 17, 17, .6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.tour-welcome-overlay.open { opacity: 1; }
.tour-welcome-modal {
  background: var(--white, #fff); max-width: 400px; width: 100%;
  padding: 40px 36px; text-align: center;
  transform: scale(.96); transition: transform .2s ease;
  border-top: 3px solid var(--red, #CC0000);
}
.tour-welcome-overlay.open .tour-welcome-modal { transform: scale(1); }
.tour-welcome-modal h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.6rem;
  color: var(--black, #111); margin-bottom: 12px;
}
.tour-welcome-modal p {
  font-size: .88rem; line-height: 1.65; color: var(--grey, #555); margin-bottom: 28px;
}
.tour-welcome-actions { display: flex; flex-direction: column; gap: 10px; }
.tour-welcome-yes {
  background: var(--red, #CC0000); color: #fff; border: none;
  font-family: 'Jost', sans-serif; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px; cursor: pointer; transition: .2s;
}
.tour-welcome-yes:hover { background: var(--red-h, #E60000); }
.tour-welcome-no {
  background: none; border: none; color: var(--grey2, #888);
  font-family: 'Jost', sans-serif; font-size: .74rem; letter-spacing: .06em;
  padding: 8px; cursor: pointer;
}
.tour-welcome-no:hover { color: var(--grey, #555); }

/* Botão flutuante "Ajuda" — recapitula o tour a qualquer momento.
   Canto inferior esquerdo (o direito já pode ter a Tasha noutras
   áreas do site — este fica sempre livre). */
.tour-help-btn {
  position: fixed; left: 20px; bottom: 20px; z-index: 400;
  background: var(--white, #fff); border: 1px solid var(--border, #E2E2E2);
  color: var(--grey, #555); font-family: 'Jost', sans-serif;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 20px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1); transition: .2s;
  display: flex; align-items: center; gap: 6px;
}
.tour-help-btn:hover { border-color: var(--red, #CC0000); color: var(--red, #CC0000); }
.tour-help-btn .q {
  width: 16px; height: 16px; border-radius: 50%; background: var(--red, #CC0000); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .62rem; flex-shrink: 0;
}

@media (max-width: 640px) {
  .tour-tooltip { padding: 18px 20px; }
  .tour-help-btn { left: 14px; bottom: 14px; padding: 9px 13px; }
}