/* =========================================
   Barkada Guided Tutorial Overlay
   FILE: /assets/css/guided-tutorials.css
========================================= */

/* DIM BACKGROUND */
.barkada-guide-dim{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.68);
  display: none;
  pointer-events: none;
}

.barkada-guide-dim.is-active{
  display: block;
}

/* LAYER FIXES */
.storefront-navbar.barkada-guide-layer,
.dropdown.barkada-guide-layer,
.dropdown-menu.barkada-guide-layer{
  z-index: 3004 !important;
}

.storefront-navbar.order-buy-guide-navbar-layer{
  z-index: 3004 !important;
}

.storefront-navbar.post-order-guide-navbar-layer,
.storefront-floating-dock.post-order-guide-layer{
  z-index: 3004 !important;
}

/* TARGET HIGHLIGHT (REGISTRATION GUIDE) */
.barkada-guide-highlight{
  position: relative !important;
  z-index: 3005 !important;
  pointer-events: auto !important;
  isolation: isolate;
  color: #000 !important;

  background: #fff !important;

  outline: 3px solid rgba(252,154,29,.95) !important;
  outline-offset: 3px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.22),
    0 0 0 9999px rgba(0,0,0,0) !important;

  border-radius: 12px !important;
}

/* TOOLTIP BOX */
.barkada-guide-box{
  position: fixed;
  z-index: 3006;
  width: min(86vw, 280px);
  max-width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
  display: none;
  pointer-events: auto;
}

.barkada-guide-box.is-active{
  display: block;
}

/* TOOLTIP ARROWS */
.barkada-guide-box::before{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  transform: rotate(45deg);
}

.barkada-guide-box.guide-pos-left::before{
  right: -7px;
  top: var(--guide-arrow-top, 18px);
  transform: rotate(135deg);
}

.barkada-guide-box.guide-pos-right::before{
  left: -7px;
  top: var(--guide-arrow-top, 18px);
  transform: rotate(-45deg);
}

.barkada-guide-box.guide-pos-top::before{
  left: var(--guide-arrow-left, 22px);
  bottom: -7px;
  transform: rotate(-135deg);
}

.barkada-guide-box.guide-pos-bottom::before{
  left: var(--guide-arrow-left, 22px);
  top: -7px;
  transform: rotate(45deg);
}

/* TEXT */
.barkada-guide-title{
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 5px;
  line-height: 1.25;
}

.barkada-guide-text{
  font-size: 12px;
  line-height: 1.4;
  color: #4b5563;
  margin-bottom: 10px;
}

/* BUTTONS */
.barkada-guide-actions{
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
}

.barkada-guide-actions .btn{
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
}

/* PULSE ANIMATION */
@keyframes barkadaPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

.barkada-guide-pulse{
  animation: barkadaPulse 1.4s ease-in-out infinite;
}

/* FIX DROPDOWN BACKGROUND */
.dropdown-item.barkada-guide-highlight{
  background: #fff !important;
  color: #000 !important;
}

/* =========================================
   HOW TO BUY (NO BORDER, ONLY PULSE)
========================================= */

.order-buy-guide-layer{
  z-index: 3004 !important;
}

.offcanvas.order-buy-guide-layer{
  position: fixed !important;
  z-index: 3004 !important;
}

.order-buy-guide-target{
  position: relative !important;
  z-index: 3005 !important;
  pointer-events: auto !important;
  isolation: isolate;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* =========================================
   POST ORDER GUIDE
========================================= */

.post-order-guide-target{
  position: relative !important;
  z-index: 3005 !important;
  pointer-events: auto !important;
  isolation: isolate;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}