/* Custom Styles for Sun Seeker Landing Page */

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

/* Custom button styles */
.btn-primary {
    padding: 0.625rem 1.5rem;
    background-color: #ffffff;
    color: #111827;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;
}

.btn-primary:hover {
    background-color: #f9fafb;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary-large {
    @apply px-10 py-5 bg-gray-900 text-white font-bold text-lg rounded-full;
    @apply hover:scale-105 hover:bg-gray-800;
    @apply transition-all duration-300 ease-out;
    @apply shadow-lg hover:shadow-xl;
    @apply inline-block;
}

.btn-cta {
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #F4BC5E 0%, #E89B2E 100%);
    color: #ffffff;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: 0 4px 14px 0 rgba(244, 188, 94, 0.3);
    transition: all 0.3s ease-out;
}

.btn-cta:hover {
    background: linear-gradient(135deg, #E89B2E 0%, #D88A1E 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(244, 188, 94, 0.4);
}

.btn-hero {
    padding: 0.75rem 2rem;
    background-color: #ffffff;
    color: #111827;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;
}

.btn-hero:hover {
    background-color: #f9fafb;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    @apply px-6 py-3 bg-gray-100 text-gray-900 font-semibold rounded-full;
    @apply hover:bg-gray-200 hover:scale-105;
    @apply transition-all duration-300 ease-out;
    @apply border-2 border-gray-300 hover:border-accent;
}

/* Feature Cards */
.feature-card {
    @apply bg-white rounded-2xl p-6 shadow-lg;
    @apply hover:shadow-2xl hover:scale-105;
    @apply transition-all duration-300 ease-out;
    @apply cursor-pointer;
}

.feature-image {
    @apply mb-6 relative overflow-hidden rounded-xl;
}

.phone-mockup {
    @apply w-full h-auto rounded-xl shadow-md;
    @apply transform hover:rotate-2;
    @apply transition-all duration-300 ease-out;
}

/* Pricing Cards */
.pricing-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

.pricing-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.pricing-card-highlighted {
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
}

/* Hero Image Container */
.hero-image-container {
    transform: rotate(3deg);
    transition: all 0.2s ease-out;
}

.hero-image-container:hover {
    transform: rotate(1deg) scale(1.05);
}

.hero-image-container img {
    transition: all 0.2s ease-out;
}

/* Navigation hover effects */
nav a:not(.btn-primary) {
    position: relative;
}

nav a:not(.btn-primary)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #F4BC5E;
    transition: width 0.3s ease-out;
}

nav a:not(.btn-primary):hover::after {
    width: 100%;
}

/* Smooth gradient animations */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Remove pulse animation from buttons */

.bg-gradient-to-br {
    background-size: 200% 200%;
    animation: gradient-shift 15s ease infinite;
}

/* Link styles for privacy page */
.prose a {
    @apply text-accent hover:text-accent-dark transition-colors;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-image-container > div {
        @apply h-64;
    }

    nav .flex.items-center.space-x-6 {
        @apply space-x-3;
    }

    nav .btn-primary {
        @apply px-4 py-2 text-sm;
    }
}

/* Loading state for images */
img {
    @apply transition-opacity duration-300;
}

img[loading="lazy"] {
    @apply opacity-0;
}

img.loaded {
    @apply opacity-100;
}

/* Focus states for accessibility */
a:focus,
button:focus {
    @apply outline-none ring-2 ring-accent ring-offset-2;
}

/* Smooth transitions for Alpine.js x-show */
[x-cloak] {
    display: none !important;
}