.shepherd-title{
    color: #E5E7EB !important;
    font-weight: 800 !important;
  }
  
  .shepherd-text{
    color: #94A3B8 !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    padding: 0 16px 14px 16px !important;
  }
  
  .shepherd-cancel-icon{
    color: #E5E7EB !important;
    opacity: .8 !important;
  }
  .shepherd-cancel-icon:hover{
    opacity: 1 !important;
  }
  
  
  .shepherd-button{
    border-radius: 12px !important;
    font-weight: 800 !important;
    padding: 10px 14px !important;
  }
  
  .shepherd-button-secondary{
    background: rgba(255,255,255,.08) !important;
    color: #E5E7EB !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }
  
  .shepherd-button:not(.shepherd-button-secondary){
    background: linear-gradient(135deg, #F0B90B, #F59E0B) !important;
    color: #0b1225 !important;
    border: 0 !important;
  }

/* ===== SHEPHERD TOUR — KPI GLASS STYLE (FINAL) ===== */

.shepherd-element{
  background: transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  z-index: 2005 !important;
  pointer-events: auto !important;
}

.shepherd-content{
  background: rgba(17, 27, 46, .42) !important;  /* GLASS */
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;

  color: #E5E7EB !important;
}

/* subtle KPI-like glow */
.shepherd-content::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(600px 240px at 20% 20%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(520px 220px at 80% 30%, rgba(240,185,11,.14), transparent 60%);
  filter: blur(18px);
  opacity: .9;
  pointer-events:none;
  z-index: -1;
}

.shepherd-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 14px 16px !important;
}

.shepherd-title{
  color: #E5E7EB !important;
  font-weight: 850 !important;
}

.shepherd-text{
  color: rgba(229,231,235,.72) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  padding: 10px 16px 10px 16px !important;
}

.shepherd-footer{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 12px 16px 16px !important;
  display:flex !important;
  gap:10px !important;
  justify-content:flex-end !important;
}

/* buttons */
.shepherd-button{
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: #E5E7EB !important;
}

.shepherd-button:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

.shepherd-button-primary{
  background: linear-gradient(135deg, #8feee6, #85ebdd) !important;
  color: #0B0F1A !important;
  border: 0 !important;
  box-shadow: 0 12px 30px rgba(240,185,11,.35) !important;
}

.shepherd-button-primary:hover {
  box-shadow: 0 14px 34px rgba(240,185,11,.45);
}

/* overlay layering */
.shepherd-modal-overlay-container,
.shepherd-modal-overlay-container.shepherd-modal-is-visible{
  z-index: 1998 !important;
  pointer-events: auto !important;
}

/* ===== Shepherd click + stacking fix ===== */

/* Overlay should be behind the popup, but still darken page */
.shepherd-modal-overlay-container,
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  z-index: 1998 !important;
  pointer-events: auto !important;
}

/* Popup must be above overlay + navbar */
.shepherd-element {
  z-index: 2005 !important;
  pointer-events: auto !important;
}

/* Ensure buttons/text can receive clicks */
.shepherd-element *,
.shepherd-content,
.shepherd-footer,
.shepherd-header,
.shepherd-text,
.shepherd-button,
.shepherd-cancel-icon {
  pointer-events: auto !important;
}
/* During transitions, slightly strengthen the backdrop so text never becomes readable */
.shepherd-element{
  backdrop-filter: none;
}

.shepherd-content{
  /* bump opacity a bit (only small) to prevent readable flash */
  background: rgba(17, 27, 46, .70) !important;
}
/* Prevent clipping by parents */
.shepherd-element {
  max-width: min(420px, calc(100vw - 24px)) !important;
}

/* If something forces clipping, give extra margin */
.shepherd-element[data-popper-placement^="top"] {
  margin-bottom: 10px !important;
}
.shepherd-element,
.shepherd-element *{
  max-width: min(92vw, 520px);   /* prevents going off-screen */
}

.shepherd-element{
  overflow: visible !important;  /* just in case */
}
/* =========================================================
   SHEPHERD 2026 — GLASS CARD ALIGNMENT + SIZE REDUCTION
   Paste LAST in shepherd-2026.css
   ========================================================= */

/* 1. Hard size control (this is the BIG win) */
.shepherd-element{
  max-width: min(360px, calc(100vw - 28px)) !important; /* was ~420–520 */
  border-radius: 14px !important;
}

/* 2. True glass-card-2026 surface */
.shepherd-content{
  background: rgba(14, 22, 38, .78) !important; /* closer to glass-card-2026 */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* 3. Kill “hero glow” → keep subtle premium glow */
.shepherd-content::before{
  inset:-40px !important;
  background:
    radial-gradient(420px 180px at 20% 20%, rgba(59,130,246,.10), transparent 65%),
    radial-gradient(420px 180px at 80% 30%, rgba(240,185,11,.08), transparent 65%);
  filter: blur(22px);
  opacity: .65;
}

/* 4. Header: tighter + calmer */
.shepherd-header{
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.shepherd-title{
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* 5. Body text: compact but readable */
.shepherd-text{
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding: 8px 14px 10px !important;
  color: rgba(229,231,235,.75) !important;
}

/* 6. Footer: slimmer buttons, less padding */
.shepherd-footer{
  padding: 10px 14px 12px !important;
  gap: 8px !important;
}

/* 7. Buttons: slightly smaller, still premium */
.shepherd-button{
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

.shepherd-button-primary{
  box-shadow: 0 8px 22px rgba(240,185,11,.28) !important;
}

/* 8. Cancel icon — smaller visual weight */
.shepherd-cancel-icon{
  font-size: 14px !important;
  opacity: .7 !important;
}
/* =========================================
   SHEPHERD — FINAL SLIM PASS (≈ -12%)
   ========================================= */

/* Narrower container */
.shepherd-element{
  max-width: min(330px, calc(100vw - 28px)) !important;
}

/* Slightly tighter glass */
.shepherd-content{
  border-radius: 13px !important;
}

/* Header tighter */
.shepherd-header{
  padding: 8px 12px !important;
}

.shepherd-title{
  font-size: 14.5px !important;
}

/* Body text tighter */
.shepherd-text{
  font-size: 13.8px !important;
  line-height: 1.42 !important;
  padding: 8px 12px 8px !important;
}

/* Footer + buttons slimmer */
.shepherd-footer{
  padding: 8px 12px 10px !important;
  gap: 6px !important;
}

.shepherd-button{
  padding: 7px 12px !important;
  font-size: 12.8px !important;
  border-radius: 9px !important;
}
/* Keep button text crisp on click / focus */
.shepherd-button,
.shepherd-button:focus,
.shepherd-button:active{
  opacity: 1 !important;
  filter: none !important;
}

.shepherd-button:active{
  transform: translateY(0) !important; /* avoid weird down-fade feel */
}
/* Slimmer Shepherd card */
.shepherd-element{
  max-width: min(300px, calc(100vw - 24px)) !important;
}

.shepherd-header{ padding: 8px 10px !important; }
.shepherd-text{ padding: 8px 14px 10px 14px !important; font-size: 14px !important; }
.shepherd-footer{ padding: 8px 10px 10px !important; }
.shepherd-button{ padding: 6px 11px !important; }
/* ================================
   SHEPHERD STEP COUNTER (SLIM)
================================ */

/* Main progress text */
.shepherd-progress,
.shepherd-progress-text{
  font-size: 12px !important;      /* ⬅ shrink text */
  font-weight: 600 !important;
  opacity: .65 !important;
  letter-spacing: .02em;
}

/* If wrapped inside header */
.shepherd-header .shepherd-progress,
.shepherd-header .shepherd-progress-text{
  margin-left: auto !important;    /* keeps it right-aligned */
}

/* Optional: make it look like a tiny pill */
.shepherd-progress,
.shepherd-progress-text{
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* --- HARD OVERRIDE: stop "Continue" fading --- */
.shepherd-element .shepherd-button,
.shepherd-element .shepherd-button:focus,
.shepherd-element .shepherd-button:active,
.shepherd-element .shepherd-button:focus-visible{
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.shepherd-element .shepherd-button:active{
  transform: translateY(0) !important;
}
/* If some global CSS still hits ONLY Continue, force all states */
.shepherd-element .shepherd-footer .shepherd-button-primary,
.shepherd-element .shepherd-footer .shepherd-button-primary *{
  opacity: 1 !important;
  filter: none !important;
}