/* Brand Colors */

:root {

    --cyan: #00BCD4;

    --purple: #9C27B0;

    --pink: #E91E63;

    --navy: #1A1F3A;

}



/* Typography */

.font-poppins {

    font-family: 'Poppins', sans-serif;

    font-weight: 700;

}



.font-inter {

    font-family: 'Inter', sans-serif;

}



/* Custom Tailwind Configuration */

@tailwind base;

@tailwind components;

@tailwind utilities;



/* Brand Color Classes */

.text-navy {

    color: var(--navy);

}



.bg-navy {

    background-color: var(--navy);

}



.text-cyan-500 {

    color: var(--cyan);

}



.bg-cyan-500 {

    background-color: var(--cyan);

}



.text-purple-600 {

    color: var(--purple);

}



.bg-purple-600 {

    background-color: var(--purple);

}



.text-pink-500 {

    color: var(--pink);

}



.bg-pink-500 {

    background-color: var(--pink);

}



/* Gradient Background - Override Tailwind for brand colors */

.bg-gradient-to-r.from-cyan-500.via-purple-600.to-pink-500,

.bg-gradient-to-r.from-cyan-500 {

    background-image: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%) !important;

}



/* Additional gradient variations */

.gradient-brand {

    background: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);

}



/* Smooth Scroll */

html {

    scroll-behavior: smooth;

}



/* Header Sticky Behavior */

#header {

    transition: all 0.3s ease;

    top: 0;

    z-index: 40;

}



/* Legal Banner - Now at bottom, no special positioning needed */

#legal-banner {

    position: relative;

}



/* Promo Banner at Bottom */

#promo-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 50;

}



/* Ensure content is not hidden behind bottom banner */

@media (max-width: 768px) {

    #promo-banner {

        font-size: 0.75rem;

    }

}



/* Body padding for fixed header and bottom banner */

body {

    padding-top: 64px; /* Header height */

    padding-bottom: 0;

    transition: padding-top 0.3s ease, padding-bottom 0.3s ease;

}



/* Promo Banner Animation */

@keyframes pulse {

    0%, 100% {

        opacity: 1;

    }

    50% {

        opacity: 0.9;

    }

}



.animate-pulse {

    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



/* FAQ Accordion Animation */

.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease-out, padding 0.3s ease-out;

}



.faq-answer.active {

    max-height: 1000px;

    padding: 1.5rem;

    padding-top: 1rem;

}



.faq-question.active span:last-child {

    transform: rotate(45deg);

}

/* FAQ Question Styling - Make questions stand out from answers */

.faq-question {

    background-color: #f9fafb !important; /* bg-gray-50 */

    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */

}

.faq-question:hover {

    background-color: #f3f4f6 !important; /* bg-gray-100 */

}

.faq-question span:first-child {

    font-weight: 700 !important; /* font-bold */

    color: #1A1F3A !important; /* text-navy */

}

.faq-answer {

    background-color: #f0fdf4 !important; /* bg-green-50 */

    padding-top: 1rem !important;

}



/* Focus States for Accessibility */

a:focus,

button:focus {

    outline: 2px solid var(--cyan);

    outline-offset: 2px;

}



/* Mobile Optimizations */

@media (max-width: 768px) {

    .text-4xl {

        font-size: 2rem;

    }

    

    .text-5xl {

        font-size: 2.5rem;

    }

    

    .text-6xl {

        font-size: 3rem;

    }
    
    /* Ensure minimum font size for readability */
    body {
        font-size: 16px;
    }
    
    /* Ensure buttons are tappable (minimum 44px height) */
    button, 
    a[role="button"],
    .btn,
    input[type="submit"],
    input[type="button"],
    a.bg-gradient-to-r,
    a.bg-blue-600,
    a.bg-green-600 {
        min-height: 44px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Form fields should be tappable and prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
    }
    
    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
    }
    
    /* Ensure adequate spacing between elements */
    .space-y-6 > * + * {
        margin-top: 1.5rem;
    }
    
    /* Mobile menu links should be tappable */
    #mobile-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 12px 0;
    }
    
    /* Hero section cards stack properly with spacing */
    .grid.md\:grid-cols-2 > * {
        margin-bottom: 1.5rem;
    }
    
    /* Success page timeline steps stack properly on very small screens */
    @media (max-width: 480px) {
        .flex.items-start {
            flex-direction: column;
        }
        
        .flex.items-start > .flex-shrink-0 {
            margin-bottom: 1rem;
            margin-right: 0;
        }
    }
    
    /* Ensure text in hero cards is readable */
    .text-sm {
        font-size: 14px;
    }
    
    .text-xs {
        font-size: 12px;
    }

}



/* Christmas Price Tag Animation */

@keyframes sparkle {

    0%, 100% {

        opacity: 0.3;

        transform: scale(0.8);

    }

    50% {

        opacity: 1;

        transform: scale(1.2);

    }

}



.price-tag-sparkle {

    animation: sparkle 2s ease-in-out infinite;

}



/* Print Styles */

@media print {

    #promo-banner,

    #header,

    footer {

        display: none;

    }

}