/* ============================================
   LOGO CONFIGURATION - EASY LOGO REPLACEMENT
   ============================================
   To change your logo across the ENTIRE website,
   just update the path below to your new logo file!
   
   Example: Change to your logo:
   --logo-path: 'images/my-new-logo.svg';
   
   Supported formats: SVG, PNG, JPG
   Recommended: SVG (scalable, small file size)
   ============================================ */
:root {
    --logo-path: 'images/quericore_logo.svg';

    /* Enhanced Quericore Brand Colors - Brighter & More Vibrant */
    --color-primary: #3B82F6;
    /* Brighter Blue (+8% lightness) */
    --color-secondary: #0EA5E9;
    /* More Vibrant Cyan (+7% lightness) */
    --color-primary-dark: #2563EB;
    /* Original blue for hovers */
    --color-secondary-dark: #0891B2;
    /* Darker cyan for depth */

    /* Enhanced Gradients - Glossy & Modern */
    --gradient-brand: linear-gradient(90deg, #3B82F6 0%, #0EA5E9 100%);
    --gradient-brand-hover: linear-gradient(90deg, #2563EB 0%, #0891B2 100%);
    --gradient-brand-glow: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
}

/* Custom Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Modern Loading Animation */
.loading-bar-container {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    margin: 2rem auto;
}

.loading-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #2563EB, #06B6D4);
    border-radius: 10px;
    animation: bar-slide 1.5s ease-in-out infinite;
}

@keyframes bar-slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* FAQ Accordion Animation */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer.active {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

.faq-question svg {
    transition: transform 0.3s ease;
}

.faq-question.active svg {
    transform: rotate(180deg);
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.12);
}

.hover-glow:hover {
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.2);
}

/* Semantic Icon Colors - More Vibrant & Balanced */
.icon-amber {
    color: #F59E0B;
    background-color: #FEF3C7;
}

.icon-green {
    color: #10B981;
    background-color: #D1FAE5;
}

.icon-emerald {
    color: #10B981;
    background-color: #D1FAE5;
}

.icon-purple {
    color: #8B5CF6;
    background-color: #EDE9FE;
}

.icon-blue {
    color: #3B82F6;
    background-color: #DBEAFE;
}

.icon-cyan {
    color: #06B6D4;
    background-color: #E0F2FE;
}

.icon-pink {
    color: #EC4899;
    background-color: #FCE7F3;
}

/* Error state exception */
.icon-red {
    color: #ef4444;
    background-color: #fee2e2;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--gradient-brand);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-brand-hover);
}

/* Result Card Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.slide-up {
    animation: slideUp 0.5s ease-out forwards;
}

/* Loading State Transitions */
#loadingState {
    transition: opacity 0.3s ease-out;
}

.loading-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Copy Button Animation */
@keyframes copied {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.copied {
    animation: copied 0.3s ease;
}

/* Mobile Menu Transition - Right Side */
#mobileMenu {
    transition: transform 0.3s ease-out;
}

/* Pulse Once Animation for Status Badge */
@keyframes pulse-once {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pulse-once {
    animation: pulse-once 0.6s ease-out;
}

/* Blog Card Image Zoom */
.blog-card-image {
    transition: transform 0.4s ease;
    overflow: hidden;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.08);
}

/* Blog Card Hover Effect */
.blog-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* CTA Button Arrow Animation */
.cta-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
}

.cta-button:hover .cta-arrow {
    transform: translateX(4px);
}

/* CTA Button Pulse Effect */
@keyframes subtle-pulse {

    0%,
    100% {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    50% {
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.35), 0 4px 12px rgba(59, 130, 246, 0.25);
    }
}

.cta-button {
    transition: all 0.2s ease;
}

.cta-button:hover {
    animation: subtle-pulse 2s ease-in-out infinite;
}

/* Trust Point Icons - Desktop Only Hover */
.trust-point-icon {
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .trust-point-icon:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* Result Item Hover - Desktop Only */
@media (hover: hover) and (pointer: fine) {
    .result-item:hover {
        background-color: #F8FAFC;
    }

    .result-item .result-icon {
        transition: transform 0.2s ease;
    }

    .result-item:hover .result-icon {
        transform: scale(1.1);
    }
}

/* Gradient Text - Enhanced */
.gradient-text {
    background: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Info Card Styles - Enhanced Border */
.info-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #3B82F6, #0EA5E9) 1;
    border-image-slice: 1;
}

.info-card h3 {
    color: #1E293B;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.info-card p {
    color: #64748B;
    line-height: 1.6;
}

/* Result Item Styles */
.result-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #F1F5F9;
    transition: background-color 0.2s ease;
}

.result-item:hover {
    background-color: #F8FAFC;
}

.result-item:last-child {
    border-bottom: none;
}

.result-icon {
    width: 40px;
    height: 40px;
    background: #F8FAFC;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.result-icon svg {
    width: 20px;
    height: 20px;
    color: currentColor;
}

.result-content {
    flex: 1;
}

.result-label {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 0.25rem;
}

.result-value {
    font-weight: 600;
    color: #1E293B;
}

/* Button Styles */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-size: 0.875rem;
}

.btn-primary {
    background: var(--gradient-brand);
    color: white;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
    background: var(--gradient-brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.btn-secondary {
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--gradient-brand);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

/* Button Color Variations - More Vibrant */
.btn-copy {
    background: #D1FAE5;
    color: #047857;
    border: 2px solid #10B981;
}

.btn-copy:hover {
    background: #10B981;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

/* Primary CTA */
.btn-another {
    background: var(--gradient-brand);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.btn-another:hover {
    background: var(--gradient-brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(59, 130, 246, 0.4);
}

/* Secondary CTA */
.btn-visit {
    background: transparent;
    color: #EAB308;
    border: 2px solid #EAB308;
}

.btn-visit:hover {
    background: #EAB308;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35);
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .result-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-icon {
        margin-bottom: 0.5rem;
    }

    /* Ensure buttons stack properly */
    .btn-icon {
        width: 100%;
        justify-content: center;
    }

    /* Prevent text overflow */
    .result-value {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Disable hover animations on touch devices */
@media (hover: none) and (pointer: coarse) {
    .hover-lift:hover {
        transform: none;
        box-shadow: none;
    }

    .trust-point-icon:hover {
        transform: none;
        box-shadow: none;
    }

    .blog-card:hover {
        transform: none;
    }

    .blog-card:hover .blog-card-image img {
        transform: none;
    }

    /* Add tap highlight for better mobile UX */
    .blog-card:active {
        opacity: 0.8;
    }

    button:active,
    a:active {
        opacity: 0.8;
    }
}