:root {
    --color-pink-brand: #FF69B4;
    --color-pink-light: #FFB6D9;
    --color-pink-dark: #E91E8C;
    --color-pink-pale: #FFF0F6;
    --color-pink-50: #FFF5F9;
}

/* Layout fallback: keep content centered even if Tailwind CDN is unavailable */
[class*="max-w-"][class*="mx-auto"] {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.max-w-7xl { max-width: 80rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl { max-width: 36rem; }

/* Spacing fallback: adds breathing room when utility classes are not generated */
.p-4 { padding: 1.25rem; }
.p-6 { padding: 1.75rem; }
.p-8 { padding: 2.25rem; }

.px-2 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-5 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-6 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2.25rem; padding-right: 2.25rem; }

.py-1 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-1\.5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-2\.5 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-3\.5 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-16 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.py-20 { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.py-24 { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }

.pt-8 { padding-top: 2.25rem; }
.pl-5 { padding-left: 1.5rem; }
.pr-4 { padding-right: 1.25rem; }

.mb-1 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.625rem; }
.mb-4 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2.25rem; }
.mb-10 { margin-bottom: 2.75rem; }
.mb-12 { margin-bottom: 3.25rem; }
.mb-16 { margin-bottom: 4.5rem; }

.mt-1 { margin-top: 0.375rem; }
.mt-3 { margin-top: 0.875rem; }
.mt-4 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.75rem; }

.ml-2 { margin-left: 0.625rem; }
.mr-2 { margin-right: 0.625rem; }
.mr-3 { margin-right: 0.875rem; }

.gap-2 { gap: 0.625rem; }
.gap-3 { gap: 0.875rem; }
.gap-4 { gap: 1.25rem; }
.gap-6 { gap: 1.75rem; }
.gap-8 { gap: 2.25rem; }
.gap-12 { gap: 3.25rem; }
.gap-16 { gap: 4.5rem; }

.space-y-1 > * + * { margin-top: 0.375rem; }
.space-y-3 > * + * { margin-top: 0.875rem; }
.space-y-4 > * + * { margin-top: 1.25rem; }
.space-y-5 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2.25rem; }

@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.75rem; padding-right: 1.75rem; }
}

@media (min-width: 768px) {
    .md\:py-0 { padding-top: 0; padding-bottom: 0; }
    .md\:p-6 { padding: 1.75rem; }
    .md\:p-10 { padding: 2.75rem; }
}

@media (min-width: 1024px) {
    .lg\:px-8 { padding-left: 2.25rem; padding-right: 2.25rem; }
    .lg\:pl-8 { padding-left: 2.25rem; }
}

/* Custom color utilities used in index.html */
.bg-pink-brand { background-color: var(--color-pink-brand) !important; }
.bg-pink-dark { background-color: var(--color-pink-dark) !important; }
.bg-pink-light { background-color: var(--color-pink-light) !important; }
.bg-pink-pale { background-color: var(--color-pink-pale) !important; }
.bg-pink-50 { background-color: var(--color-pink-50) !important; }
.bg-pink-brand\/5 { background-color: rgb(255 105 180 / 0.05) !important; }

.text-pink-brand { color: var(--color-pink-brand) !important; }
.text-pink-dark { color: var(--color-pink-dark) !important; }
.text-pink-light { color: var(--color-pink-light) !important; }

.border-pink-brand { border-color: var(--color-pink-brand) !important; }
.border-pink-light { border-color: var(--color-pink-light) !important; }
.accent-pink-brand { accent-color: var(--color-pink-brand); }

.hover\:bg-pink-brand:hover { background-color: var(--color-pink-brand) !important; }
.hover\:bg-pink-dark:hover { background-color: var(--color-pink-dark) !important; }
.hover\:bg-pink-50:hover { background-color: var(--color-pink-50) !important; }
.hover\:text-pink-brand:hover { color: var(--color-pink-brand) !important; }
.hover\:text-pink-dark:hover { color: var(--color-pink-dark) !important; }
.hover\:border-pink-brand:hover { border-color: var(--color-pink-brand) !important; }

/* Keep Tailwind gradient helpers working with brand colors */
.from-pink-brand {
    --tw-gradient-from: var(--color-pink-brand) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 105 180 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-pink-dark { --tw-gradient-to: var(--color-pink-dark) var(--tw-gradient-to-position); }

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

        body {
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
        }

        .font-pacifico {
            font-family: 'Pacifico', cursive;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #FFF0F6;
        }
        ::-webkit-scrollbar-thumb {
            background: #FF69B4;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #E91E8C;
        }

        /* Hero parallax */
        .hero-bg {
            background: linear-gradient(135deg, rgba(255,105,180,0.85) 0%, rgba(233,30,140,0.75) 100%),
                        url('https://images.unsplash.com/photo-1553530666-ba11a7da3888?w=1920&q=80') center/cover no-repeat fixed;
            min-height: 100vh;
        }

        /* Floating animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-15px) rotate(2deg); }
            66% { transform: translateY(-8px) rotate(-1deg); }
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        .animate-float-delayed {
            animation: float 6s ease-in-out 2s infinite;
        }

        /* Blob shapes */
        @keyframes blob {
            0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
            50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
        }
        .blob {
            animation: blob 8s ease-in-out infinite;
        }

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

        /* Card hover effects */
        .menu-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .menu-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 25px 60px rgba(255,105,180,0.3);
        }

        /* FAQ accordion */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
        }
        .faq-answer.open {
            max-height: 500px;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        /* Navbar */
        .navbar {
            transition: all 0.3s ease;
        }
        .navbar.scrolled {
            background: rgba(255,255,255,0.97) !important;
            box-shadow: 0 4px 30px rgba(255,105,180,0.15);
            backdrop-filter: blur(10px);
        }

        /* Pulse animation for price */
        @keyframes pulse-pink {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,105,180,0.4); }
            50% { box-shadow: 0 0 0 10px rgba(255,105,180,0); }
        }
        .pulse-pink {
            animation: pulse-pink 2s infinite;
        }

        /* Mobile menu */
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .mobile-menu.open {
            transform: translateX(0);
        }

        /* Gradient text */
        .gradient-text {
            background: linear-gradient(135deg, #FF69B4, #E91E8C);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Modal */
        .modal-overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        /* Wave separator */
        .wave-separator {
            position: relative;
        }
        .wave-separator::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 80px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23ffffff' d='M0,50 C360,100 720,0 1080,50 C1260,75 1380,60 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom center;
            background-size: cover;
        }

        /* Straw animation */
        @keyframes sip {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        /* Input focus styles */
        .form-input:focus {
            outline: none;
            border-color: #FF69B4;
            box-shadow: 0 0 0 3px rgba(255,105,180,0.2);
        }

        /* Cookie banner */
        .cookie-banner {
            transform: translateY(100%);
            transition: transform 0.5s ease;
        }
        .cookie-banner.show {
            transform: translateY(0);
        }

        /* Spinner for loading */
        .spinner {
            border: 3px solid #FFB6D9;
            border-top: 3px solid #FF69B4;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 0.8s linear infinite;
            display: inline-block;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Decorative circles */
        .deco-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,105,180,0.08);
            pointer-events: none;
        }

        /* Social icons hover */
        .social-icon {
            transition: all 0.3s ease;
        }
        .social-icon:hover {
            transform: translateY(-4px) scale(1.15);
        }

        /* Shimmer effect on buttons */
        .btn-shimmer {
            position: relative;
            overflow: hidden;
        }
        .btn-shimmer::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to right,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.3) 50%,
                rgba(255,255,255,0) 100%
            );
            transform: rotate(30deg);
            transition: all 0.6s ease;
            opacity: 0;
        }
        .btn-shimmer:hover::after {
            animation: shimmer 0.6s forwards;
        }
        @keyframes shimmer {
            0% { transform: translateX(-100%) rotate(30deg); opacity: 1; }
            100% { transform: translateX(100%) rotate(30deg); opacity: 1; }
        }

        /* Counter animation */
        .counter {
            display: inline-block;
        }

        /* Image skeleton loader */
        .img-skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton 1.5s infinite;
        }
        @keyframes skeleton {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }