:root{
  --tt-primary:#b71c1c;
  --tt-accent:#ffc107;
  --tt-ink:#0f172a;
  --tt-muted:#64748b;
  --tt-surface:#ffffff;
  --tt-bg:#f6f7fb;
  --tt-border:rgba(15,23,42,.12);
  --tt-shadow:0 18px 48px rgba(2,6,23,.14);
  --tt-radius:20px;
}

/* Global polish */
html{scroll-behavior:smooth;}
body{
  font-size: 18px;
  line-height: 1.55;
  color: var(--tt-ink);
  background:radial-gradient(1200px 500px at 15% -10%, rgba(255,193,7,.22), transparent 55%),
             radial-gradient(1000px 600px at 95% 0%, rgba(183,28,28,.18), transparent 55%),
             linear-gradient(135deg, #f8fafc 0%, #e3e8ee 100%);
}

/* Bootstrap helper: keep muted text readable */
.text-muted{color: var(--tt-muted) !important;}

/* Bigger tap targets + stronger focus (helps older users) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.tt-btn:focus-visible,
.btn:focus-visible{
  outline: 3px solid rgba(255,193,7,.75);
  outline-offset: 3px;
}

.container{max-width:1100px;}

/* Glass navbar */
.tt-navbar{
  background: linear-gradient(90deg, rgba(183,28,28,.55), rgba(136,14,79,.55));
  border-bottom: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .22s ease, box-shadow .22s ease;
  padding: 18px 0;
}
.tt-navbar.is-scrolled{
  background: linear-gradient(90deg, rgba(183,28,28,.82), rgba(136,14,79,.82));
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}
.tt-navbar .navbar-brand{
  letter-spacing: 1.6px;
  font-size: 1.1rem;
  color: var(--tt-accent) !important;
  text-shadow: 0 1px 10px rgba(2,6,23,.22);
}
.tt-navbar .nav-link{
  color: rgba(255,255,255,.92) !important;
  font-weight: 700;
  padding: 8px 18px !important;
  margin: 0 4px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.tt-navbar .nav-link:hover,
.tt-navbar .nav-link.active{
  color: var(--tt-accent) !important;
  background: rgba(255,255,255,.15);
  text-decoration: none;
}

@media (max-width: 576px){
  .tt-navbar .navbar-brand span{font-size:1rem; letter-spacing:1px;}
  .tt-navbar .nav-link{
    padding: 6px 12px !important;
    margin: 2px 0;
  }
}

.tt-surface{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 40px rgba(2,6,23,.10);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--tt-radius);
}

.tt-section{padding: clamp(24px, 5vw, 72px) 0;}

.tt-hero{
  position:relative;
  overflow:hidden;
}
.tt-hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(900px 480px at 20% 25%, rgba(255,193,7,.28), transparent 55%),
             radial-gradient(850px 520px at 85% 35%, rgba(183,28,28,.22), transparent 55%);
  pointer-events:none;
}
.tt-hero .tt-surface{position:relative;}

.tt-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(183,28,28,.08);
  color:var(--tt-primary);
  font-weight:700;
  letter-spacing:.2px;
}

.tt-title{
  color:var(--tt-ink);
  font-weight:900;
  letter-spacing:-.8px;
  line-height:1.02;
  font-size: clamp(34px, 5vw, 56px);
  margin: 14px 0 10px;
}

.tt-subtitle{
  color:var(--tt-muted);
  font-size: clamp(16px, 2.1vw, 20px);
  line-height:1.55;
  margin: 0;
}

.tt-cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px;}

@media (max-width: 576px){
  .tt-cta-row{gap:10px;}
  .tt-cta-row .tt-btn{flex: 1 1 100%; text-align:center; justify-content:center;}
}

.tt-btn{
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  padding:14px 20px;
  min-height: 56px;
  font-size: 18px;
  border:1px solid rgba(183,28,28,.18);
}

.tt-btn-primary{
  color:#fff;
  background:linear-gradient(90deg, var(--tt-primary), #880e4f);
  border-color:transparent;
  box-shadow:0 14px 26px rgba(183,28,28,.22);
}
.tt-btn-primary:hover{filter:brightness(1.05);}

.tt-btn-ghost{
  color:var(--tt-ink);
  background:rgba(255,255,255,.75);
}
.tt-btn-ghost:hover{background:#fff;}

.tt-metric{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.70);
}
.tt-metric strong{font-size:18px;}
.tt-metric span{color:var(--tt-muted); font-size:15px;}

.tt-card{
  border-radius: var(--tt-radius);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.90);
  box-shadow:0 18px 48px rgba(2,6,23,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover:hover){
  .tt-card:hover{transform:translateY(-6px); box-shadow:0 22px 64px rgba(2,6,23,.16);}
}

.tt-img{
  position:relative;
  background:#0b1220;
}
.tt-img img{width:100%; height: clamp(190px, 30vw, 240px); object-fit:cover; display:block;}
.tt-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(2,6,23,.55), transparent 60%);
}

.tt-chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  font-weight:800;
  color:var(--tt-ink);
}

.tt-progress{
  height:10px;
  border-radius:999px;
  background:rgba(15,23,42,.10);
  overflow:hidden;
}
.tt-progress > div{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #16a34a, #22c55e);
}

.tt-reveal{opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s ease;}
.tt-reveal.is-visible{opacity:1; transform:none;}

/* Detail page */
.tt-detail-grid{display:grid; grid-template-columns: 1.4fr .9fr; gap:18px;}
@media (max-width: 992px){.tt-detail-grid{grid-template-columns:1fr;}}

@media (max-width: 992px){
  .tt-detail-right{grid-row: 1;}
  .tt-detail-left{grid-row: 2;}
}

@media (max-width: 576px){
  .tt-detail-page{padding-bottom: 110px;}
}

.tt-gallery{padding:14px;}
.tt-main-image{border-radius:18px; overflow:hidden; background:#0b1220;}
.tt-main-image img{width:100%; height: clamp(240px, 60vw, 420px); object-fit:cover; display:block;}

.tt-thumbs{display:flex; gap:10px; overflow-x:auto; padding:12px 2px 2px;}
.tt-thumbs button{
  border:0;
  padding:0;
  background:transparent;
  border-radius:14px;
  overflow:hidden;
  flex: 0 0 auto;
  outline: none;
}
.tt-thumbs img{width:88px; height:66px; object-fit:cover; display:block; filter:saturate(.98);}
.tt-thumbs button[aria-current="true"]{box-shadow:0 0 0 3px rgba(255,193,7,.85);}

.tt-buy{padding:16px; position:sticky; top: 14px;}
@media (max-width: 992px){.tt-buy{position:static;}}

.tt-price{font-size: 28px; font-weight:900; letter-spacing:-.3px; color: var(--tt-ink);}
.tt-small{color:var(--tt-muted); font-size: 15px;}

.tt-stepper{display:flex; align-items:center; gap:10px;}
.tt-stepper button{
  width:52px; height:52px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-weight:900;
  font-size: 20px;
}
.tt-stepper input{
  width: 110px;
  height:52px;
  text-align:center;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  font-weight:900;
  font-size: 18px;
}
@media (max-width: 576px){
  body{font-size: 18px;}
  .tt-stepper{gap:12px;}
  .tt-stepper button{width:52px; height:52px; border-radius:16px; font-size:20px;}
  .tt-stepper input{width: 120px; height:52px; border-radius:16px; flex:1; font-size:18px;}
  .tt-price{font-size: 26px;}
}

/* Make Bootstrap buttons match the larger touch-friendly style inside TT sections */
.tt-section .btn{
  min-height: 56px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Floating WhatsApp help button */
.tt-help-wa{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1040;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 48px rgba(2,6,23,.18);
  color: var(--tt-ink);
  font-weight: 900;
}
.tt-help-wa:hover{background:#fff; color: var(--tt-ink);}
.tt-help-wa__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.18);
}
@media (max-width: 576px){
  /* avoid overlapping the mobile buy bar */
  .tt-help-wa{bottom: 92px;}
}

/* Collapsible 'more info' on buy panel */
.tt-buy-more{border-top: 1px solid rgba(15,23,42,.10); padding-top: 12px;}
.tt-buy-more > summary{
  list-style:none;
  cursor:pointer;
  font-weight: 900;
  color: var(--tt-ink);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.84);
}
.tt-buy-more > summary::-webkit-details-marker{display:none;}

/* Sticky mobile buy bar */
.tt-mobile-buybar{display:none;}
@media (max-width: 576px){
  .tt-mobile-buybar{
    display:block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92);
    border-top: 1px solid rgba(15,23,42,.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .tt-mobile-buybar__inner{max-width:1100px; margin:0 auto; display:flex; gap:12px; align-items:center;}
  .tt-mobile-buybar__meta{flex: 1 1 auto; min-width: 0;}
  .tt-mobile-buybar__cta{flex: 0 0 160px;}
  .tt-mobile-buybar__label{font-size:12px; color: var(--tt-muted); font-weight:800;}
  .tt-mobile-buybar__total{font-size:18px; font-weight:900; letter-spacing:-.2px; color: var(--tt-ink); line-height:1.1;}
  .tt-mobile-buybar__cop{font-size:12px; color: var(--tt-muted); font-weight:900;}
  .tt-mobile-buybar__sub{font-size:12px; color: var(--tt-muted); font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .tt-mobile-buybar .tt-btn{padding: 12px 14px;}
}

.tt-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.84);
}

/* Badge urgente - últimas boletas */
.tt-badge-urgent{
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  color: #92400e;
  animation: tt-badge-pulse 1.5s ease-in-out infinite;
}
@keyframes tt-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}

/* Badge agotado */
.tt-badge-soldout{
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #ef4444;
  color: #991b1b;
}

.tt-divider{height:1px; background: rgba(15,23,42,.10); margin: 14px 0;}

/* Auth pages */
.tt-auth .tt-auth-card{max-width: 520px; margin: 0 auto;}
.tt-input{
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  font-weight: 800;
}
.tt-input:focus{box-shadow: 0 0 0 4px rgba(255,193,7,.25); border-color: rgba(255,193,7,.65);}

.tt-password{position:relative;}
.tt-password .tt-input{padding-right: 92px;}
.tt-password__toggle{
  position:absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.90);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  color: var(--tt-ink);
}
.tt-password__toggle:active{transform: translateY(-50%) scale(.98);}

/* FAQ accordion polish */
.tt-faq .accordion-item{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
}
.tt-faq .accordion-button{
  background: transparent;
  font-weight: 900;
  color: var(--tt-ink);
  box-shadow: none;
  padding: 18px 20px;
  font-size: 17px;
  gap: 12px;
}
.tt-faq .accordion-button:not(.collapsed){
  background: rgba(255,193,7,.16);
}
.tt-faq .accordion-button:focus{
  box-shadow: none;
  border-color: transparent;
}
.tt-faq .accordion-button::after{
  background-size: 18px;
  width: 18px;
  height: 18px;
}
.tt-faq .accordion-body{
  color: var(--tt-muted);
  line-height: 1.7;
  padding: 0 20px 20px;
}
.tt-faq .accordion-body p,
.tt-faq .accordion-body ul,
.tt-faq .accordion-body ol{
  margin-bottom: 12px;
}
.tt-faq .accordion-body ul:last-child,
.tt-faq .accordion-body ol:last-child,
.tt-faq .accordion-body p:last-child{
  margin-bottom: 0;
}
.tt-faq-icon{
  font-size: 22px;
  line-height: 1;
}

/* Slot machine animation for ticket numbers */
.tt-slot-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.tt-slot-number.is-spinning {
  animation: tt-slot-spin 0.1s linear infinite;
}
@keyframes tt-slot-spin {
  0% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.tt-slot-number.is-revealed {
  animation: tt-slot-reveal 0.4s ease-out forwards;
}
@keyframes tt-slot-reveal {
  0% { transform: scale(1.1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* Auth: Google button + separator */
.tt-btn-google{
  color: var(--tt-ink);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
}
.tt-btn-google:hover{background:#fff;}

.tt-or{
  position:relative;
  text-align:center;
  margin: 12px 0 16px;
}
.tt-or::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background: rgba(15,23,42,.12);
}
.tt-or span{
  position:relative;
  display:inline-block;
  padding: 0 12px;
  background: rgba(255,255,255,.86);
  color: var(--tt-muted);
  font-weight: 900;
}

/* ============================
   Auth Pages - Senior Friendly
   ============================ */

/* Auth card wider variant */
.tt-auth-card-wide{max-width: 680px !important;}

/* Auth titles - bigger for readability */
.tt-auth-title{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.3px;
  color: var(--tt-ink);
  margin: 0 0 8px;
}
@media (min-width: 768px){
  .tt-auth-title{font-size: 32px;}
}

.tt-auth-subtitle{
  font-size: 17px;
  color: var(--tt-muted);
  margin: 0;
  line-height: 1.5;
}

/* Auth icon container */
.tt-auth-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 50%;
  color: #b45309;
}
.tt-auth-icon svg{
  width: 36px;
  height: 36px;
}

/* Google button - bigger and more prominent */
.tt-btn-google-big{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 800;
  color: var(--tt-ink);
  background: #fff;
  border: 2px solid rgba(15,23,42,.12);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(2,6,23,.08);
  transition: all .2s;
  text-decoration: none;
  gap: 0;
}
.tt-btn-google-big:hover{
  background: #f8fafc;
  border-color: rgba(15,23,42,.20);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2,6,23,.10);
  text-decoration: none;
  color: var(--tt-ink);
}

/* Auth hint text */
.tt-auth-hint{
  font-size: 15px;
  color: #16a34a;
  font-weight: 700;
  margin: 0;
}

/* Or divider - improved */
.tt-or-divider{
  position: relative;
  text-align: center;
  margin: 24px 0;
}
.tt-or-divider::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(15,23,42,.12);
}
.tt-or-divider span{
  position: relative;
  display: inline-block;
  padding: 0 16px;
  background: rgba(255,255,255,.92);
  color: var(--tt-muted);
  font-size: 15px;
  font-weight: 700;
}

/* Form labels - bigger */
.tt-label{
  display: block;
  font-size: 17px;
  font-weight: 900;
  color: var(--tt-ink);
  margin-bottom: 10px;
}

/* Field hints */
.tt-field-hint{
  font-size: 14px;
  color: var(--tt-muted);
  margin-top: 6px;
}
.tt-field-hint-important{
  color: #b45309;
  font-weight: 700;
}

/* Field errors - more visible */
.tt-field-error{
  font-size: 15px;
  color: #dc2626;
  font-weight: 700;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 8px;
}

/* Big buttons */
.tt-btn-big{
  padding: 18px 28px !important;
  font-size: 18px !important;
  border-radius: 16px !important;
}

/* Secondary button style */
.tt-btn-secondary{
  background: rgba(15,23,42,.06);
  color: var(--tt-ink);
  border: 1px solid rgba(15,23,42,.10);
}
.tt-btn-secondary:hover{
  background: rgba(15,23,42,.10);
}

/* Big alerts */
.tt-alert-big{
  font-size: 16px;
  padding: 16px 20px;
  border-radius: 16px;
}

/* Auth footer section */
.tt-auth-footer{
  text-align: center;
}
.tt-auth-footer-text{
  font-size: 17px;
  color: var(--tt-muted);
  margin-bottom: 12px;
}

/* Legal text */
.tt-auth-legal{
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--tt-muted);
  line-height: 1.5;
}

/* Form steps indicator */
.tt-form-steps{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.tt-form-step{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tt-muted);
}
.tt-form-step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  font-weight: 900;
  border-radius: 50%;
}

/* ============================
   Loading States
   ============================ */

/* Spinner animation */
@keyframes tt-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Button spinner */
.tt-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tt-spin .7s linear infinite;
}

/* Ghost button spinner */
.tt-btn-ghost .tt-spinner {
  border-color: rgba(15,23,42,.15);
  border-top-color: var(--tt-ink);
}

/* Loading button state */
.tt-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.tt-loading .tt-spinner {
  margin-right: 8px;
}

/* Full-page loading overlay */
.tt-page-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.tt-page-loading.is-visible {
  opacity: 1;
  visibility: visible;
}

.tt-page-loading__content {
  text-align: center;
}

.tt-page-loading__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(183,28,28,.15);
  border-top-color: var(--tt-primary);
  border-radius: 50%;
  animation: tt-spin .8s linear infinite;
  margin: 0 auto 16px;
}

.tt-page-loading__text {
  font-size: 18px;
  font-weight: 800;
  color: var(--tt-ink);
}

/* Skeleton loading placeholder */
.tt-skeleton {
  background: linear-gradient(90deg, 
    rgba(15,23,42,.06) 0%, 
    rgba(15,23,42,.12) 50%, 
    rgba(15,23,42,.06) 100%
  );
  background-size: 200% 100%;
  animation: tt-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes tt-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pulse animation for processing */
@keyframes tt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.tt-pulse {
  animation: tt-pulse 1.5s ease-in-out infinite;
}

/* ============================
   Tour Guide / Onboarding
   ============================ */

/* Overlay backdrop */
.tt-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(2,6,23,.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.tt-tour-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Highlighted element during tour */
.tt-tour-highlight {
  position: relative;
  z-index: 9991 !important;
  box-shadow: 0 0 0 4px var(--tt-accent), 0 0 0 8px rgba(255,193,7,.3), 0 0 40px rgba(255,193,7,.4) !important;
  border-radius: 12px;
}

/* Tooltip box */
.tt-tour-tooltip {
  position: fixed;
  z-index: 9992;
  max-width: 340px;
  width: calc(100vw - 32px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(2,6,23,.25), 0 0 0 1px rgba(255,255,255,.5);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}

.tt-tour-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Tooltip arrow */
.tt-tour-tooltip::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(2,6,23,.05);
}

.tt-tour-tooltip[data-position="bottom"]::before {
  top: -8px;
  left: 50%;
  margin-left: -8px;
}

.tt-tour-tooltip[data-position="top"]::before {
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
}

.tt-tour-tooltip[data-position="left"]::before {
  right: -8px;
  top: 50%;
  margin-top: -8px;
}

.tt-tour-tooltip[data-position="right"]::before {
  left: -8px;
  top: 50%;
  margin-top: -8px;
}

/* Tooltip header */
.tt-tour-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tt-tour-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--tt-primary) 0%, #880e4f 100%);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  border-radius: 50%;
}

.tt-tour-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--tt-ink);
  margin: 0;
  flex: 1;
}

/* Tooltip content */
.tt-tour-content {
  font-size: 15px;
  color: var(--tt-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Progress dots */
.tt-tour-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.tt-tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15,23,42,.15);
  transition: all .2s;
}

.tt-tour-dot.is-active {
  background: var(--tt-primary);
  transform: scale(1.25);
}

.tt-tour-dot.is-completed {
  background: #22c55e;
}

/* Tooltip actions */
.tt-tour-actions {
  display: flex;
  gap: 10px;
}

.tt-tour-btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all .2s;
}

.tt-tour-btn-skip {
  background: rgba(15,23,42,.06);
  color: var(--tt-muted);
}

.tt-tour-btn-skip:hover {
  background: rgba(15,23,42,.10);
}

.tt-tour-btn-next {
  background: linear-gradient(90deg, var(--tt-primary) 0%, #880e4f 100%);
  color: #fff;
}

.tt-tour-btn-next:hover {
  filter: brightness(1.08);
}

/* Welcome modal for first-time users */
.tt-tour-welcome {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2,6,23,.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.tt-tour-welcome.is-visible {
  opacity: 1;
  visibility: visible;
}

.tt-tour-welcome__card {
  max-width: 420px;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(2,6,23,.3);
  transform: scale(0.92);
  transition: transform .3s ease;
}

.tt-tour-welcome.is-visible .tt-tour-welcome__card {
  transform: scale(1);
}

.tt-tour-welcome__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.tt-tour-welcome__title {
  font-size: 24px;
  font-weight: 900;
  color: var(--tt-ink);
  margin: 0 0 12px;
}

.tt-tour-welcome__text {
  font-size: 16px;
  color: var(--tt-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.tt-tour-welcome__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tt-tour-welcome__btn-start {
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 800;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--tt-primary) 0%, #880e4f 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(183,28,28,.25);
  transition: all .2s;
}

.tt-tour-welcome__btn-start:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.tt-tour-welcome__btn-skip {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--tt-muted);
  cursor: pointer;
  transition: color .2s;
}

.tt-tour-welcome__btn-skip:hover {
  color: var(--tt-ink);
}