/* Cursor Fixes for Instant Quote Modal and Other Elements */

/* Ensure cursor appears above all modals */
.cursor {
    z-index: 10001 !important;
}

.cursor-trail {
    z-index: 10000 !important;
}

/* Apply custom cursor to all interactive elements */
@media (hover: hover) and (pointer: fine) {
    /* Base cursor removal */
    body,
    * {
        cursor: none !important;
    }
    
    /* Instant Quote Modal elements */
    .instant-quote-trigger,
    .close-instant-quote,
    .quote-option,
    .size-btn,
    .instant-quote-form button,
    .instant-quote-form input,
    .instant-quote-form textarea,
    .instant-quote-form select {
        cursor: none !important;
    }
    
    /* All links and buttons */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .btn-primary,
    .btn-secondary,
    .cta-button {
        cursor: none !important;
    }
    
    /* Form elements */
    input,
    textarea,
    select,
    label {
        cursor: none !important;
    }
    
    /* Clickable elements */
    [onclick],
    [role="button"],
    .clickable,
    .service-card,
    .feature,
    .testimonial,
    .gallery-item,
    .slide-item {
        cursor: none !important;
    }
    
    /* Navigation elements */
    .nav-menu a,
    .mobile-menu-toggle,
    .slideshow-controls button,
    .multi-prev,
    .multi-next,
    .test-dot {
        cursor: none !important;
    }
}

/* Fix for modal overlay to ensure cursor works */
.instant-quote-modal {
    cursor: none !important;
}

.instant-quote-modal * {
    cursor: none !important;
}

/* Ensure cursor hover effect works on all interactive elements */
.cursor.hover {
    transform: scale(1.3);
    background: transparent;
    border-color: var(--gold);
    border-width: 3px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

/* Special cursor style for CTA buttons - no transform */
.cursor.hover-cta {
    transform: none !important;
    background: transparent !important;
    border-color: var(--gold) !important;
    border-width: 3px !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important;
    transition: all 0.2s ease !important;
}

/* Smooth transition for cursor */
.cursor {
    transition: transform 0.15s ease, background 0.15s ease, border-width 0.15s ease, box-shadow 0.15s ease !important;
}

/* Add a center dot to the cursor */
.cursor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show center dot on hover */
.cursor.hover::after {
    opacity: 1;
}

/* No center dot for CTA buttons */
.cursor.hover-cta::after {
    opacity: 0 !important;
}

/* Clean cursor design */
.cursor {
    opacity: 0.9;
}

/* Cursor visibility on gold backgrounds */
.instant-quote-header:hover ~ .cursor,
body:has(.instant-quote-header:hover) .cursor,
.calculator-cta:hover ~ .cursor,
body:has(.calculator-cta:hover) .cursor,
[style*="background: var(--gold)"]:hover ~ .cursor,
body:has([style*="background: var(--gold)"]:hover) .cursor {
    border-color: #000 !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6) !important;
}

/* Black cursor when hovering over gold backgrounds */
.cursor-on-gold {
    border-color: #000 !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6) !important;
}

.cursor-on-gold.hover {
    border-color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8) !important;
}

/* Black center dot on gold backgrounds */
.cursor-on-gold::after {
    background: #000 !important;
}

/* Black trail on gold backgrounds */
.cursor-trail-on-gold {
    background: #000 !important;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6) !important;
}

/* Trail enhancement */
.cursor-trail {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Disable button transform when custom cursor is active */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover,
    .btn-secondary:hover,
    .cta-button:hover {
        transform: none !important;
    }
    
    /* Disable ripple effect completely */
    .btn-primary::before,
    .cta-button::before {
        display: none !important;
    }
    
    /* Keep box shadow for depth but no transform */
    .btn-primary:hover,
    .cta-button:hover {
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4) !important;
    }
    
    /* Smoother service card hover */
    .service-card:hover {
        transform: translateY(-5px) scale(1.01) !important;
    }
}

/* Text cursor for input fields */
input:focus ~ .cursor,
textarea:focus ~ .cursor {
    width: 2px;
    height: 24px;
    border-radius: 0;
    background: var(--gold);
    border: none;
    transform: none;
}

/* Pointer events fix for modal content */
.instant-quote-content {
    pointer-events: auto;
}

.instant-quote-modal.active {
    pointer-events: auto;
}

/* Ensure all modal interactive elements are clickable */
.instant-quote-modal button,
.instant-quote-modal a,
.instant-quote-modal input,
.instant-quote-modal select,
.instant-quote-modal textarea,
.instant-quote-modal .quote-option,
.instant-quote-modal .size-btn {
    pointer-events: auto;
}

/* Mobile - hide custom cursor */
@media (hover: none) or (pointer: coarse) {
    .cursor,
    .cursor-trail {
        display: none !important;
    }
    
    /* Restore default cursor on mobile */
    body,
    * {
        cursor: auto !important;
    }
    
    button,
    a,
    input,
    select,
    textarea,
    .quote-option,
    .size-btn {
        cursor: pointer !important;
    }
}

/* High z-index for loading screen to hide cursor temporarily */
.loading-screen {
    z-index: 10002;
}