/* ============================================================
   NFB Multi-Page Element Tour — Styles
   ============================================================ */

   /* ---------- Click Blocker ---------- */
   .nfb-tour-click-blocker {
       position: fixed;
       inset: 0;
       z-index: 99999;
       background: transparent;
       visibility: hidden;
   }
   .nfb-tour-click-blocker.active {
       visibility: visible;
   }

   /* ---------- Spotlight Highlight (Fixes z-index issues) ---------- */
   .nfb-tour-spotlight {
       position: absolute;
       z-index: 100000;
       box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
       border-radius: 8px;
       pointer-events: auto; /* Intercepts clicks directly over the target element hole */
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, top 0.4s ease, left 0.4s ease, width 0.4s ease, height 0.4s ease;
   }
   
   .nfb-tour-spotlight.active {
       opacity: 1;
       visibility: visible;
   }

   /* (Optional) we can add a glowing border directly to the spotlight */
   .nfb-tour-spotlight::after {
       content: "";
       position: absolute;
       inset: -4px;
       border: 2px solid #F92155;
       border-radius: 12px;
       opacity: 0.8;
       animation: nfb-pulse 2s infinite;
   }

   @keyframes nfb-pulse {
       0% { box-shadow: 0 0 0 0 rgba(249, 33, 85, 0.4); }
       70% { box-shadow: 0 0 0 10px rgba(249, 33, 85, 0); }
       100% { box-shadow: 0 0 0 0 rgba(249, 33, 85, 0); }
   }
   
   /* ---------- Tooltip Container ---------- */
   .nfb-tour-tooltip {
       position: fixed;
       z-index: 100002;
       width: 100%;
       max-width: 400px;
       background: #ffffff;
       border-radius: 20px;
       box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
       opacity: 0;
       visibility: hidden;
       transform: scale(0.95);
       transition: opacity 0.3s ease, transform 0.3s ease, left 0.4s ease, top 0.4s ease;
       padding: 0;
   }
   
   .nfb-tour-tooltip.active {
       opacity: 1;
       visibility: visible;
       transform: scale(1);
   }
   
   /* Caret Arrow */
   .nfb-tour-arrow {
       position: absolute;
       width: 16px;
       height: 16px;
       background: #ffffff;
       transform: rotate(45deg);
       z-index: -1;
   }
   
   .nfb-tour-tooltip[data-placement="top"] .nfb-tour-arrow {
       bottom: -6px;
       left: 50%;
       margin-left: -8px;
   }
   
   .nfb-tour-tooltip[data-placement="bottom"] .nfb-tour-arrow {
       top: -6px;
       left: 50%;
       margin-left: -8px;
   }
   
   .nfb-tour-tooltip[data-placement="left"] .nfb-tour-arrow {
       right: -6px;
       top: 50%;
       margin-top: -8px;
   }
   
   .nfb-tour-tooltip[data-placement="right"] .nfb-tour-arrow {
       left: -6px;
       top: 50%;
       margin-top: -8px;
   }
   
   .nfb-tour-tooltip[data-placement="center"] .nfb-tour-arrow {
       display: none;
   }
   
   /* ---------- Layout ---------- */
   .nfb-tour-content {
       padding: 32px 32px 24px;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   /* ---------- Step Icon ---------- */
   .nfb-tour-icon {
       width: 64px;
       height: 64px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 20px;
       position: relative;
   }
   
   .nfb-tour-icon::before {
       content: '';
       position: absolute;
       inset: -6px;
       border-radius: 50%;
       background: inherit;
       opacity: 0.2;
   }
   
   .nfb-tour-icon svg {
       width: 32px;
       height: 32px;
       z-index: 1;
   }
   
   /* Gradients */
   .nfb-icon-welcome  { background: linear-gradient(135deg, #F92155, #FF6B8F); }
   .nfb-icon-browse   { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
   .nfb-icon-customize{ background: linear-gradient(135deg, #0891B2, #22D3EE); }
   .nfb-icon-pricing  { background: linear-gradient(135deg, #059669, #34D399); }
   .nfb-icon-giftcard { background: linear-gradient(135deg, #D97706, #FBBF24); }
   .nfb-icon-ready    { background: linear-gradient(135deg, #F92155, #FF6B8F); }
   .nfb-icon-default  { background: linear-gradient(135deg, #F92155, #FF6B8F); }
   
   /* ---------- Text Styling ---------- */
   .nfb-step-counter {
       font-family: 'Literata', serif;
       font-size: 11px;
       color: #F92155;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       margin-bottom: 12px;
   }
   
   .nfb-step-title {
       font-family: 'Marcellus', serif;
       font-size: 24px;
       color: #1B1B1B;
       margin: 0 0 12px;
       line-height: 1.2;
   }
   
   .nfb-step-description {
       font-family: 'Literata', serif;
       font-size: 15px;
       color: #525252;
       line-height: 1.6;
       margin: 0;
   }
   
   /* ---------- Progress & Navigation ---------- */
   .nfb-tour-footer {
       border-top: 1px solid #F3F4F6;
       padding: 20px 32px;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   
   .nfb-tour-dots {
       display: flex;
       gap: 6px;
   }
   
   .nfb-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #E5E5E5;
       transition: 0.3s ease;
   }
   .nfb-dot.active {
       background: #F92155;
       width: 16px;
       border-radius: 4px;
   }
   .nfb-dot.completed {
       background: #FFBDCD;
   }
   
   .nfb-tour-btns {
       display: flex;
       gap: 8px;
   }
   
   .nfb-btn-skip {
       font-family: 'Literata', serif;
       font-size: 14px;
       color: #9CA3AF;
       background: none;
       border: none;
       cursor: pointer;
       padding: 8px;
   }
   
   .nfb-btn-prev {
       font-family: 'Literata', serif;
       font-size: 14px;
       color: #525252;
       background: #F3F4F6;
       border: none;
       border-radius: 100px;
       padding: 10px 16px;
       cursor: pointer;
       transition: background 0.2s, color 0.2s;
   }
   
   .nfb-btn-prev:hover {
       background: #E5E7EB;
       color: #1B1B1B;
   }

   .nfb-btn-next {
       font-family: 'Literata', serif;
       font-size: 14px;
       font-weight: 500;
       background: #F92155;
       color: #fff;
       border: none;
       border-radius: 100px;
       padding: 10px 20px;
       cursor: pointer;
       box-shadow: 0 4px 14px rgba(249, 33, 85, 0.3);
       transition: transform 0.2s;
   }
   .nfb-btn-next:hover { transform: translateY(-1px); background: #E01E4D;}
   
   .nfb-loader {
       display: none;
       width: 14px;
       height: 14px;
       border: 2px solid #fff;
       border-top-color: transparent;
       border-radius: 50%;
       animation: nfb-spin 0.8s linear infinite;
   }
   
   .nfb-btn-next.loading span, .nfb-btn-prev.loading span { display: none; }
   .nfb-btn-next.loading .nfb-loader, .nfb-btn-prev.loading .nfb-loader { display: inline-block; }
   .nfb-btn-prev.loading .nfb-loader { border-color: #525252; border-top-color: transparent; }
   
   @keyframes nfb-spin {
       to { transform: rotate(360deg); }
   }
   
   /* ---------- Mobile Tweaks ---------- */
   @media (max-width: 480px) {
       .nfb-tour-tooltip {
           max-width: 90%;
           /* On mobile, center the tooltip regardless of placement to avoid clipping */
           top: 50% !important;
           left: 50% !important;
           transform: translate(-50%, -50%) scale(0.95);
       }
       .nfb-tour-tooltip.active {
           transform: translate(-50%, -50%) scale(1);
       }
       .nfb-tour-arrow { display: none !important; }
   }