/* Z-Index Strategy:
   Overlay: 9990
   Spotlight Helper: 9991 (Sits on top of target)
   Card: 9992
*/

/* 1. The Dark Backdrop (Only used if we aren't using the spotlight helper's shadow) */
.lc-tour-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9990;
    pointer-events: none; /* Let clicks pass through to the helper */
}

/* 2. The Spotlight Helper (The "Cutout") */
.lc-tour-spotlight {
    position: absolute;
    z-index: 9991;
    border-radius: 4px;
    pointer-events: none; /* Default: don't block clicks, but visual only */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* The Magic: A massive shadow creates the dark overlay around the cutout */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
    
    /* Optional: A subtle glow to highlight the active element */
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* 3. The Content Card (Glassmorphism) */
.lc-tour-card {
    position: absolute;
    z-index: 9992;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 320px;
    max-width: 90vw;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.8);
    
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, top 0.4s ease, left 0.4s ease;
}

.lc-tour-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* Typography */
.lc-tour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.lc-tour-title {
    font-family: 'Cinzel', serif; /* Matching site theme */
    font-weight: 700;
    font-size: 1.1rem;
    color: #2c3e50;
    margin: 0;
}

.lc-tour-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 5px;
}

.lc-tour-body {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Tables inside tour steps */
.lc-tour-body table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.85rem;
}
.lc-tour-body th, .lc-tour-body td {
    border: 1px solid #eee;
    padding: 6px;
    text-align: left;
}
.lc-tour-body th {
    background: #f9f9f9;
    font-weight: 600;
}

/* Footer / Controls */
.lc-tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lc-tour-dots {
    display: flex;
    gap: 4px;
}

.lc-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s;
}
.lc-tour-dot.active {
    background: #3498db;
}

.lc-tour-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}
.lc-tour-btn:hover {
    background: #2980b9;
}

/* --- MODES --- */

/* Mode A: Center Modal (Process Mode) */
.lc-tour-card.mode-center {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px; /* Wider for tables */
}

/* --- MOBILE RESPONSIVENESS --- */
/* --- MOBILE RESPONSIVENESS & SAFE AREA FIX --- */
@media (max-width: 768px) {
    .lc-tour-card, 
    .lc-tour-card.mode-center {
        /* Force Bottom Sheet Style for ALL cards on mobile */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        
        /* Safe Area Padding for iPhone X+ Home Bar */
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        
        border-radius: 20px 20px 0 0;
        margin: 0;
        
        /* Reset Desktop Transforms */
        transform: translateY(110%); /* Start hidden below fold */
        right: auto !important;
        
        /* Allow scrolling if content is huge */
        max-height: 85vh;
        overflow-y: auto; 
        
        /* Ensure high visibility */
        z-index: 99999 !important; 
    }
    
    .lc-tour-card.active {
        transform: translateY(0) !important;
    }

    /* On mobile, we simplify the spotlight to just a dark overlay 
       so the card is readable without weird clipping issues */
    .lc-tour-spotlight {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
    }
}