@import "tailwindcss";
@config "../tailwind.config.js";

/* 
   LUXURY DESIGN THEME 
   Modular additions for a high-end, cinematic feel.
   To undo: Remove the link to this CSS file and the Playfair Display font.
*/

/* 0. LOADING STATES */
html {
    background-color: #FFFFFF;
    /* Changed to white to prevent green flash on load */
}

.is-loading-translations body,
.is-loading-property body {
    visibility: hidden !important;
}

/* 1. RESET AND BASE */
.text-scale-fit {
    font-size: clamp(0.75rem, 1.2vw + 0.5rem, 1rem);
    /* Scales between 12px and 16px */
    line-height: 1.5;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

@media (max-width: 400px) {
    .text-scale-fit {
        font-size: clamp(0.65rem, 3.8vw, 0.85rem);
        /* Extra scaling for mobile */
    }
}

/* 1. TYPOGRAPHY - High-end Serif for Headings */
h1,
h2,
h3,
h4,
.font-display,
#summary-title,
.property-card h3 {
    font-family: 'Playfair Display', serif !important;
    letter-spacing: -0.01em;
}

/* Specific adjustments for Serif Luxury */
h1 {
    font-weight: 700;
    font-style: italic;
}

h2 {
    font-weight: 700;
}

/* 2. IMAGE INTERACTIONS - Immersive Scale */
.img-lux-hover {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.group:hover .img-lux-hover,
.img-lux-hover:hover {
    transform: scale(1.08) !important;
}

/* 3. ENHANCED GLASSMORPHISM - Navigation */
nav.glass-lux {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 50;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Only apply background color when scrolled or on subpages */
nav.glass-lux.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.dark nav.glass-lux.nav-scrolled {
    background-color: rgba(9, 9, 11, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Remove glass effect when transparent at top */
nav.glass-lux.bg-transparent,
nav.glass-lux.nav-transparent {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* 4. SCROLL REVEAL ANIMATIONS */
.reveal-on-scroll {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.reveal-on-scroll.revealed {
    opacity: 1;
}

.hero-feature-item {
    container-type: inline-size;
}

.text-autoscale {
    font-size: clamp(9px, 4.5cqw, 14px);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-wrap: balance;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    flex-shrink: 1;
    min-width: 0;
}

/* Staggered Delay Utilities */
.reveal-delay-100 {
    transition-delay: 100ms;
}

.reveal-delay-200 {
    transition-delay: 200ms;
}

.reveal-delay-300 {
    transition-delay: 300ms;
}

.reveal-delay-500 {
    transition-delay: 500ms;
}

/* 5. LUXURIOUS ACCENTS */
.lux-border-soft {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .lux-border-soft {
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 6. PERFORMANCE OPTIMIZATIONS for Carousels & Motion */
.gpu-accelerated-track {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.no-jitter {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.gpu-stable {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Luxury Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(197, 163, 93, 0.3);
    /* Muted Gold */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(197, 163, 93, 0.6);
}

/* Ensure smooth interaction during vertical scrolling */
.scrolling-active #latest-track,
.scrolling-active #testimonial-container {
    pointer-events: none !important;
}

/* 7. ROBUST STICKY SIDEBAR */
.sticky-booking-card {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 8rem !important;
    /* Clears 80px header with generous gap */
    z-index: 30 !important;
    align-self: flex-start !important;
    /* Critical for grid children */
}

/* 8. DECORATIVE LINES */
.footer-fade-line {
    position: relative;
}

.header-fade-line {
    /* Do NOT set position: relative here — it overrides position: fixed on the nav */
}

.header-fade-line::after,
.footer-fade-line::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #C5A35D 50%, transparent 100%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 60;
}

.header-fade-line::after {
    bottom: 0;
}

.footer-fade-line::before {
    top: 0;
}

/* 9. SUBTLE GOLD DIVIDER */
.gold-fade-divider {
    position: relative;
    border-top: none !important;
}

.gold-fade-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(197, 163, 93, 0.3);
    /* Solid gold feel, no fade, low opacity for "thin" look */
    pointer-events: none;
}

/* 10. FOOTER LEGAL STYLING */
.footer-legal-info {
    color: rgba(197, 163, 93, 0.6) !important;
}

.footer-legal-link {
    color: rgba(197, 163, 93, 0.6) !important;
    transition: all 0.3s ease;
}

.footer-legal-link:hover {
    color: rgba(197, 163, 93, 1) !important;
    text-shadow: 0 0 .65px currentColor, 0 0 .65px currentColor;
    /* Simulate weight without changing width to prevent jitter */
}

/* 11. SCROLL-TO-TOP BUTTON REFINEMENT */
#scroll-to-top:hover {
    background-color: #1f3d18;
    /* Darker brand green on hover */
    box-shadow: 0 6px 20px rgba(39, 54, 32, 0.35);
}

/* 12. FORM REFINEMENTS - Borderless Checkboxes */
input[type="checkbox"] {
    border: none !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    cursor: pointer;
}

.dark input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

input[type="checkbox"]:checked {
    background-color: #C5A35D !important;
    /* Primary Color */
}

input[type="checkbox"]:focus {
    /* Remove Tailwind ring and standard focus indicators */
    --tw-ring-offset-width: 0px !important;
    --tw-ring-width: 0px !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 13. LANGUAGE SELECTOR REFINEMENT */
html body .lang-btn.active,
html body .md\:flex .lang-btn.active,
html body nav .lang-btn.active,
html body .nav-scrolled .lang-btn.active,
html body .nav-transparent .lang-btn.active {
    color: #C5A35D !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.lang-btn.active.border {
    border-color: #C5A35D !important;
    background-color: rgba(197, 163, 93, 0.05) !important;
}

/* 14. MATERIAL ICONS STABILITY */
.material-icons-outlined {
    font-family: 'Material Icons Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

/* 15. FORM INPUT OPTIMIZATION */
.iti {
    display: block !important;
    width: 100% !important;
}

.iti input {
    width: 100% !important;
    transition: all 0.3s ease !important;
}

/* Ensure consistent height for all form controls */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.iti input {
    min-height: 52px;
}

/* Fix for iti dial code alignment */
.iti__separate-dial-code .iti__selected-dial-code {
    font-size: 14px;
    color: #64748b;
    /* slate-500 */
    margin-right: 8px;
    font-weight: 600;
}

/* Dropdown styling matches theme */
.iti__country-list {
    background-color: white !important;
    color: #1e293b !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    z-index: 10000 !important;
    border-radius: 12px !important;
}

.iti__country {
    padding: 8px 12px !important;
    transition: background 0.2s;
}

.iti__country:hover {
    background-color: rgba(197, 163, 93, 0.1) !important;
}

.iti__selected-country {
    background-color: rgba(197, 163, 93, 0.2) !important;
}

.dark .iti__country-list {
    background-color: #18181b !important;
    /* zinc-900 */
    border-color: #27272a !important;
    /* zinc-800 */
    color: #e4e4e7 !important;
    /* zinc-200 */
}

.dark .iti__country:hover {
    background-color: rgba(197, 163, 93, 0.2) !important;
}