/* Base Styles using Tailwind are imported via CDN in HTML */

/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Desktop: when navbar is transparent, make desktop menu links white */
@media (min-width: 768px) {
    #navbar.transparent .ml-10 a:not(.bg-brand-orange) {
        color: #ffffff !important;
    }
    #navbar.transparent .ml-10 a:not(.bg-brand-orange):hover {
        color: #F97316 !important;
    }
}

.hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0; /* Init hidden */
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Scroll Reveal Class */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #F97316; /* Brand Orange */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ea580c;
}

/* Testimonial slider utility */
.testimonial-slide {
    display: none;
}
.testimonial-slide.active {
    display: block;
    animation: fadeInUp 0.5s ease-out;
}

/* Cookie Consent Animations */
@keyframes slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.4s ease-out;
}

/* Certificate Auto-Scroll Animation */
@keyframes scroll-certs {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.certs-auto-scroll {
    animation: scroll-certs 45s linear infinite;
    will-change: transform;
}

.certs-auto-scroll.paused {
    animation-play-state: paused;
}

.certs-auto-scroll.manual-control {
    animation: none;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#certs-slider-container:hover .certs-auto-scroll:not(.manual-control) {
    animation-play-state: paused;
}
/* Mobile Phone Pulse Animation */
@keyframes pulse-phone {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pulse-phone-ring {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-15deg);
    }
    30% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-15deg);
    }
    50%, 100% {
        transform: rotate(0deg);
    }
}

.animate-pulse-phone {
    animation: pulse-phone-ring 2s ease-in-out infinite;
    animation-delay: 3s;
}

/* Mobile Menu Animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

#mobile-menu.open {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#mobile-menu > div {
    max-height: calc(100vh - 80px);
}

/* Mobile Phone Bar */
#mobile-phone-bar {
    transform: translateY(100%);
}

#mobile-phone-bar.visible {
    transform: translateY(0);
}

/* Mobile Calculator Bar */
#mobile-calculator-bar {
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 0;
}

#mobile-calculator-bar.visible {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

/* Extra small screen breakpoint */
@media (min-width: 475px) {
    .xs\\:inline {
        display: inline !important;
    }
}

/* Mobile Font Adjustments */
@media (max-width: 767px) {
    /* Section headers */
    .text-3xl.md\\:text-5xl {
        font-size: 1.75rem;
        line-height: 2rem;
    }
    
    /* Sub headers */
    .text-2xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    /* FAQ items */
    .faq-item .text-lg {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    /* Testimonials */
    .text-lg.lg\\:text-xl {
        font-size: 1rem;
        line-height: 1.6rem;
    }
    
    /* Stats */
    .text-3xl.font-bold.text-brand-orange {
        font-size: 1.5rem;
    }
    
    /* Process steps */
    .grid.md\\:grid-cols-5 p {
        font-size: 0.75rem;
    }
    
    /* Padding bottom for mobile phone bar */
    body {
        padding-bottom: 60px;
    }
}

/* Certificate Modal Image Zoom */
#cert-modal-image {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

#cert-modal-image:active {
    cursor: grabbing;
}

#cert-image-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Touch action for better gesture support */
.touch-none {
    touch-action: none;
}

#modal-main-image {
    transition: transform 0.12s ease-out;
    transform-origin: center center;
    will-change: transform;
}

/* Interactive House Hotspots */
.hotspot-btn span {
    animation: pulse-hotspot 2s infinite;
}

@keyframes pulse-hotspot {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);
    }
}

.hotspot-tooltip {
    animation: fadeIn 0.3s ease-out;
}

.hotspot-container {
    z-index: 10;
}

.hotspot-container.active {
    z-index: 1000;
}

.hotspot-tooltip.visible {
    display: block;
    z-index: 1001;
}

/* Make bottom tooltips visible on small screens and lift hotspots above the image */
@media (max-width: 767px) {
    .interactive-house {
        overflow: visible; /* allow tooltip to extend outside image wrapper */
    }

    .interactive-house .hotspot-container {
        z-index: 20; /* base z-index for hotspots */
        pointer-events: auto;
    }

    /* Active hotspot gets highest z-index so tooltip is always on top */
    .interactive-house .hotspot-container.active {
        z-index: 10000 !important;
    }

    .interactive-house .hotspot-tooltip {
        z-index: 10001;
        width: 220px;
        max-width: calc(100vw - 32px);
        left: 50% !important;
        transform: translateX(-50%) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.22);
    }

    /* Hotspots near left edge - align tooltip to the right */
    .interactive-house .hotspot-container.hotspot-left .hotspot-tooltip {
        left: 0 !important;
        transform: translateX(-10%) !important;
    }
    .interactive-house .hotspot-container.hotspot-left .hotspot-tooltip > div {
        left: 20px !important;
        transform: rotate(45deg) !important;
    }

    /* Hotspots near right edge - align tooltip to the left */
    .interactive-house .hotspot-container.hotspot-right .hotspot-tooltip {
        left: auto !important;
        right: 0 !important;
        transform: translateX(10%) !important;
    }
    .interactive-house .hotspot-container.hotspot-right .hotspot-tooltip > div {
        left: auto !important;
        right: 20px !important;
        transform: rotate(45deg) !important;
    }

    /* For hotspots placed low on the image, show tooltip above the marker */
    .interactive-house .hotspot-container.hotspot-bottom .hotspot-tooltip {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
    }

    /* Move arrow to bottom of tooltip when tooltip is above the marker */
    .interactive-house .hotspot-container.hotspot-bottom .hotspot-tooltip > div {
        top: auto !important;
        bottom: -8px !important;
        border-left-width: 0 !important;
        border-top-width: 0 !important;
        border-right-width: 2px !important;
        border-bottom-width: 2px !important;
    }

    /* Combined: bottom + left */
    .interactive-house .hotspot-container.hotspot-bottom.hotspot-left .hotspot-tooltip > div {
        left: 20px !important;
        right: auto !important;
        transform: rotate(45deg) !important;
    }

    /* Combined: bottom + right */
    .interactive-house .hotspot-container.hotspot-bottom.hotspot-right .hotspot-tooltip > div {
        left: auto !important;
        right: 20px !important;
        transform: rotate(45deg) !important;
    }
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Consent expandable text */
.consent-full {
    display: none;
    opacity: 0;
}

.consent-full.open {
    display: inline;
    opacity: 1;
    animation: fadeIn 0.4s ease-in;
}

/* Lazy Loading Sections - Deferred rendering for performance */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* Loading placeholder for lazy sections */
.lazy-section:not(.loaded) {
    min-height: 400px;
}

.lazy-section.loaded {
    content-visibility: visible;
}

/* Defer iframe loading */
.lazy-iframe {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.lazy-iframe.loaded {
    background: none;
    animation: none;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Tweak checkbox look slightly */
#consent-checkbox {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.3);
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    max-width: 1.125rem;
    max-height: 1.125rem;
    border-radius: 0.2rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
#consent-checkbox:checked {
    background-color: rgba(249,115,22,1);
    border-color: rgba(249,115,22,1);
}
#consent-checkbox:checked::after {
    content: '\2713';
    color: white;
    position: absolute;
    top: -0.05rem;
    left: 0.2rem;
    font-size: 0.9rem;
    line-height: 1.125rem;
}
#consent-checkbox:focus {
    outline: none;
}