/* ==========================================================================
   Nusa Penida Day Trip - Premium Global Stylesheet
   Custom Container Max-Width 1200px, Typography & Glassmorphism Utilities
   ========================================================================== */

/* Google Fonts Integration */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* --------------------------------------------------------------------------
   1. Standard Max-Width Container Override (Strictly limited to 1200px)
   -------------------------------------------------------------------------- */
.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;  /* Equivalent to px-6 */
    padding-right: 1.5rem !important; /* Equivalent to px-6 */
}

/* --------------------------------------------------------------------------
   2. Core Backdrop & Gradient Utilities
   -------------------------------------------------------------------------- */
.blur-backdrop {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.hero-gradient {
    background: linear-gradient(to bottom, rgba(12, 74, 110, 0.4), rgba(12, 74, 110, 0.8)) !important;
}

.hero-banner-gradient {
    background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%) !important;
}

/* --------------------------------------------------------------------------
   3. Custom Micro-Interactions & Animations
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* Smooth Slow Spinning for fallbacks/compass icons */
.animate-spin-slow {
    animation: spin-slow 25s linear infinite !important;
}

/* Smooth slow pulse for active buttons and language toggles */
.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .85; transform: scale(0.97); }
}