/* styles.css */

/* Modern Font Settings */
:root {
    --brand-navy: #003358;
    --brand-orange: #FF8A5B;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--brand-navy);
    overflow-x: hidden; /* Prevents horizontal scrollbar during 3D tilts */
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

/* =========================================
   ANIMATION PREPARATION
   This hides elements initially so GSAP can 
   fade them in smoothly. But they should be
   visible after a short delay as a fallback.
   ========================================= */
section:not(:first-child) h2, 
section:not(:first-child) p, 
section:not(:first-child) .grid > *,
section:not(:first-child) span.block,
section:not(:first-child) .group {
    opacity: 0;
    animation: fallbackFadeIn 0.8s ease-out 0.5s forwards;
}

@keyframes fallbackFadeIn {
    to {
        opacity: 1;
        visibility: visible;
    }
}

/* =========================================
   3D & INTERACTIVITY
   ========================================= */
.group.relative, .rounded-2xl {
    transform-style: preserve-3d;
    will-change: transform;
    perspective: 1000px; /* Adds depth */
}

/* =========================================
   HERO ANIMATION (Ken Burns Effect)
   ========================================= */
.animate-kenburns {
    animation: kenburns 20s infinite alternate ease-in-out;
    transform-origin: center;
}

@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}




/* about us page*/
/* Custom Scroll Behavior */
html { 
    scroll-behavior: smooth; 
}

body { 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased;
}

/* LOADER STYLES */
#loader {
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #F27D57; /* Sunset Coral */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Payment Method Hover & Active States */
.card-type-btn.active,
.mobile-type-btn.active {
    color: white !important;
}

/* Card Type Button Active States Only */
.card-type-btn.active[data-type="credit"] {
    background-color: #1434CB !important;
    border-color: #1434CB !important;
    color: white !important;
}

.card-type-btn.active[data-type="mastercard"] {
    background-color: #EB001B !important;
    border-color: #EB001B !important;
    color: white !important;
}

.card-type-btn.active[data-type="prepaid"] {
    background-color: #003D7A !important;
    border-color: #003D7A !important;
    color: white !important;
}

.card-type-btn.active[data-type="paypal"] {
    background-color: #003087 !important;
    border-color: #003087 !important;
    color: white !important;
}

/* Mobile Network Button Active States (Desktop view) */
#mobileFields .mobile-type-btn.active:nth-child(1) {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

#mobileFields .mobile-type-btn.active:nth-child(2) {
    background-color: #9333ea !important;
    border-color: #9333ea !important;
}

#mobileFields .mobile-type-btn.active:nth-child(3) {
    background-color: #f97316 !important;
    border-color: #f97316 !important;
}

#mobileFields .mobile-type-btn.active:nth-child(4) {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
}

/* Prevent dropdown layout shift */
select {
    min-height: 56px;
    height: 56px;
}

#mobileCardTypeContainer,
#mobileNetworkContainer {
    min-height: 280px;
}

/*fqs*?
/* Base */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset for sticky header */
}

/* Animations Helper */
.fade-up, .scale-in {
    opacity: 0;
}

/* FAQ CARD STYLES */
.faq-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-card:hover {
    border-color: #F27D57;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.faq-trigger {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    outline: none;
}

.faq-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
    background: #fcfcfc;
}

.faq-content .prose {
    padding: 0 1.5rem 1.5rem 1.5rem;
    color: #475569;
    line-height: 1.6;
}

/* Icon Rotation & Color Change on Active */
.faq-trigger.active .icon-wrap i {
    transform: rotate(45deg);
    color: #F27D57;
}

.faq-trigger .icon-wrap i {
    transition: transform 0.3s ease, color 0.3s ease;
    display: block;
    color: #cbd5e1;
    font-size: 1.25rem;
}

/* SIDEBAR ACTIVE STATE */
.nav-link.active {
    background-color: white;
    color: #003C63;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.nav-link.active i {
    color: #F27D57;
}




/*zanzibar*/
/* Base */
html {
    scroll-behavior: smooth;
}

/* Helper for Animations */
.fade-up, .scale-in {
    opacity: 0;
}

/* CARD HOVER EFFECTS */
.exp-card {
    transition: box-shadow 0.3s ease;
}

.exp-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* Ensure images don't look distorted */
img {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}




/* Booking */
/* --- MORIX BOOKING ENGINE STYLES --- */

/* Hide number input arrows cleanly */
.booking-engine .hide-arrows::-webkit-inner-spin-button, 
.booking-engine .hide-arrows::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* Smooth drop-down reveal for payment section */
.booking-engine .reveal-section { 
    max-height: 0; 
    overflow: hidden; 
    transition: all 0.5s ease-in-out; 
    opacity: 0; 
}

.booking-engine .reveal-section.active { 
    max-height: 1200px; 
    opacity: 1; 
    margin-top: 1.5rem; 
}

/* Payment Option Active States */
.booking-engine .payment-tab.active { 
    border-color: #003C63; 
    color: #003C63; 
    background-color: #f0f7ff; 
}

.booking-engine .card-type-btn.active, 
.booking-engine .mobile-type-btn.active { 
    border-color: #003C63;
    background-color: #f0f7ff;
    color: #003C63;
}


/*guest*/


/*transfer*/
@keyframes fadeUpAnim {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-up-anim {
    animation: fadeUpAnim 0.5s ease-out forwards;
}

/*safris*/