/* =========================================
   1. Fonts & Imports
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); 
   @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap'); 
   
   /* =========================================
      2. Global & Typography
      ========================================= */
   body { 
       font-family: 'Inter', sans-serif; 
       -webkit-font-smoothing: antialiased; 
       overflow-x: hidden; 
   }
   
   /* Font Family Utilities */
   .font-inter { font-family: 'Inter', sans-serif; }
   .font-cormorant { font-family: 'Cormorant Garamond', serif; }
   .font-lato { font-family: 'Lato', sans-serif; }
   .font-playfair { font-family: 'Playfair Display', serif; }
   .font-montserrat { font-family: 'Montserrat', sans-serif; }
   .font-cursive { font-family: 'Great Vibes', cursive; }
   
   /* Default Layout Styles */
   .nav-link { 
       font-size: 1.5rem; 
       transition: color 0.2s ease; 
   } 
   
   /* =========================================
      3. Shapes & Utilities
      ========================================= */
   .shape-circle { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
   .shape-rounded { border-radius: 1rem; }
   .shape-square { border-radius: 0; }
   .shape-star { 
       clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 
       aspect-ratio: 1; 
       object-fit: cover; 
   }
   
   /* =========================================
      4. Overlays & Modals
      ========================================= */
   #loading-overlay {
       position: fixed; top: 0; left: 0; width: 100%; height: 100%;
       background-color: white; display: flex; justify-content: center; align-items: center;
       z-index: 30000; transition: opacity 0.5s ease-out; opacity: 1;
   }
   
   #error-bar {
       display: none; position: fixed; top: 0; left: 0; right: 0;
       background-color: #ef4444; color: white; text-align: center; padding: 1rem; 
       z-index: 20001; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   }
   
   #staff-login-modal, #concierge-modal { 
       background-color: rgba(0, 0, 0, 0.5); 
   }
   
   /* =========================================
      5. Page Sections & Transitions
      ========================================= */
   #hero-section {
       background-color: #1a1a1a;
       background-size: cover;
       background-position: center;
   }
   
   .page-section { 
       min-height: calc(100vh - 200px); 
       padding-bottom: 4rem; 
       opacity: 1;
       transform: translateX(0);
       transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
       width: 100%;
   }
   
   .page-enter-start { opacity: 0 !important; transform: translateX(50px) !important; }
   .page-fading-out { opacity: 0 !important; transform: translateX(-50px) !important; }
   .page-hidden { display: none !important; }
   
   .page-hero-img { 
       width: 100%; height: 350px; border-radius: 0.5rem; 
       margin-bottom: 2rem; display: none; background-color: transparent; 
   }
   .page-hero-img.visible { display: block; }
   
   /* =========================================
      6. Dashboard & Interactive Elements
      ========================================= */
   .staff-nav-link.active { 
       background-color: #eef2ff; color: #4f46e5; border-left: 4px solid #4f46e5; 
   }
   
   /* Drag and Drop Zone */
   .drop-zone {
       border: 2px dashed #d1d5db; border-radius: 0.5rem; padding: 1.5rem; text-align: center; cursor: pointer;
       transition: all 0.2s ease; background-color: transparent; /* Transparent fix */
       position: relative; overflow: hidden;
       min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center;
   }
   .drop-zone:hover, .drop-zone.drag-over { border-color: #4f46e5; background-color: #f9fafb; }
   .drop-zone-preview { max-width: 100%; max-height: 90px; object-fit: contain; margin-top: 0.5rem; display: none; }
   .drop-zone.has-image .drop-zone-text { display: none; }
   .drop-zone.has-image .drop-zone-preview { display: block; }
   .drop-zone * { pointer-events: none; }
   
   /* Calendar Styles */
   .calendar-day { min-height: 100px; border: 1px solid #e5e7eb; padding: 0.5rem; transition: background-color 0.2s; }
   .calendar-day:hover { background-color: #f9fafb; }
   .calendar-day.today { background-color: #eff6ff; }
   .calendar-event { 
       font-size: 0.75rem; padding: 2px 4px; margin-top: 2px; border-radius: 4px; 
       background-color: #4f46e5; color: white; cursor: pointer; white-space: nowrap; 
       overflow: hidden; text-overflow: ellipsis; 
   }
   .calendar-header-cell { text-align: center; font-weight: 600; padding: 0.5rem; color: #4b5563; background-color: #f3f4f6; }
   
   /* Buttons */
   .btn-styled { 
       background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); 
       color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
       transition: transform 0.2s, box-shadow 0.2s; 
       font-family: 'Inter', sans-serif; 
   }
   .btn-styled:hover { transform: translateY(-2px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); }
   
   .dashboard-btn { cursor: pointer; transition: all 0.2s; }
   .dashboard-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
   
   /* Dynamic Grid */
   .dynamic-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(50px, auto); gap: 1rem; }
   
   /* =========================================
      7. Animation & Seasonal
      ========================================= */
   #seasonal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; overflow: hidden; }
   .seasonal-item { position: absolute; top: -50px; user-select: none; }
   .seasonal-img { width: 24px; height: 24px; object-fit: contain; }
   
   @keyframes fall { 
       to { transform: translateY(110vh) rotate(360deg); } 
   }
   
   /* =========================================
      8. Cards & Swipers
      ========================================= */
   .product-card-frame { transition: all 0.3s ease-in-out; border: 2px solid transparent; border-radius: 0.5rem; overflow: hidden; }
   .product-card-frame:hover { 
       box-shadow: 0 0 20px rgba(79, 70, 229, 0.4), 0 0 10px rgba(234, 179, 8, 0.3); 
       border-color: rgba(79, 70, 229, 0.3); transform: scale(1.02); z-index: 10; 
   }
   
   .swiper-slide { transition: all 0.3s ease; border-radius: 0.5rem; }
   .swiper-slide:hover { 
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); z-index: 20; 
       transform: scale(1.02); background: transparent; 
   }
   
   /* Service Cards */
   .service-card { 
       background: white; padding: 0; border-radius: 1rem; border: 1px solid #e5e7eb; 
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; 
       height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; 
   }
   .service-card:hover { 
       transform: translateY(-8px); box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.2); 
       border-color: #4f46e5; z-index: 5; 
   }
   .service-img-container { width: 100%; height: 220px; overflow: hidden; background-color: transparent; border-bottom: 1px solid #eee; }
   .service-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
   .service-card:hover .service-img { transform: scale(1.15); }
   
   .service-content { padding: 1.5rem; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; }
   .service-icon { 
       background: #eef2ff; color: #4f46e5; padding: 0.75rem; border-radius: 50%; 
       display:inline-flex; align-items: center; justify-content: center; 
       margin: -3rem auto 1rem auto; position: relative; z-index: 10; 
       border: 4px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
   }
   
   /* Services Dropdown */
   .services-dropdown-container { position: relative; width: 100%; max-width: 64rem; margin: 0 auto; }
   .services-summary { 
       width: 100%; padding: 1.5rem; background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; 
       cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; 
       transition: all 0.3s; z-index: 20; position: relative; 
   }
   .services-summary:hover { background-color: #f9fafb; border-color: #4f46e5; }
   .services-content { 
       max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; 
       background: white; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; 
       border-bottom: 1px solid #e5e7eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; 
   }
   .services-dropdown-container.is-hovered .services-content { max-height: 500px; opacity: 1; }
   .services-dropdown-container.is-hovered .chevron { transform: rotate(180deg); }
   .chevron { transition: transform 0.3s; }
   
   /* =========================================
      9. Media & Logos
      ========================================= */
   /* Video Positioning & Transparent Backgrounds */
   .video-position-wrapper { width: 100%; min-height: 600px; display: flex; padding: 1rem; margin-top: 2rem; background: transparent; }
   .v-pos-top-left { align-items: flex-start; justify-content: flex-start; }
   .v-pos-top-center { align-items: flex-start; justify-content: center; }
   .v-pos-top-right { align-items: flex-start; justify-content: flex-end; }
   .v-pos-mid-left { align-items: center; justify-content: flex-start; }
   .v-pos-mid-center { align-items: center; justify-content: center; }
   .v-pos-mid-right { align-items: center; justify-content: flex-end; }
   .v-pos-bot-left { align-items: flex-end; justify-content: flex-start; }
   .v-pos-bot-center { align-items: flex-end; justify-content: center; }
   .v-pos-bot-right { align-items: flex-end; justify-content: flex-end; }
   
   .video-container { width: 600px; height: 400px; max-width: 100%; border-radius: 0.5rem; overflow: hidden; box-shadow: lg; background: transparent; }
   
   /* Logo Styling - Ensures Transparency */
   .site-logo-img { max-height: 80px; width: auto; object-fit: contain; background-color: transparent !important; display: block; position: relative; z-index: 50; }
   #header-logo-container { background: transparent !important; display: inline-block; position: relative; z-index: 50; }
   #site-header-logo { background: transparent !important; }
   
   /* FORCE TRANSPARENCY on containers to fix black box issues */
   #central-logo-container { background: transparent !important; position: relative; z-index: 20; }
   #footer-logo-container { background: transparent !important; }
   
   /* =========================================
      10. NEW VISUAL EDITOR STYLES
      ========================================= */
    #editor-live-preview-wrapper {
        height: 70vh; /* Give the wrapper a fixed height */
        overflow: auto; /* Make the wrapper scrollable in both directions */
        position: relative;
    }
    
    #editor-live-preview {
        position: relative; /* Context for draggable items */
        height: 100%; /* Default height */
        min-width: 1280px; /* Force desktop width to match live site max-w-7xl */
    }

    .editor-preview-background {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; /* Behind visual items */
    }

    .visual-item {
        position: absolute;
        touch-action: none;
        user-select: none;
        box-sizing: border-box;
        min-width: 50px;
        min-height: 50px;
        z-index: 2; /* Above background */
    }

    .visual-item:hover {
        cursor: grab;
    }

    .visual-item.interact-dragging {
        cursor: grabbing;
        z-index: 100;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }
    
    .visual-content-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }

    .visual-content-overlay > .rendered-visual-item {
        pointer-events: auto;
    }

    .editable-in-editor {
        outline: 1px dashed rgba(66, 153, 225, 0.5);
        cursor: text;
        transition: outline 0.2s ease-in-out;
    }
    .editable-in-editor:hover {
        outline: 1px solid rgba(66, 153, 225, 1);
    }

    #text-editor-toolbar {
        background-color: #2d3748; /* dark gray */
        padding: 4px;
        margin-bottom: 1rem;
    }
    .toolbar-btn {
        background: transparent;
        color: white;
        border: none;
        padding: 6px;
        border-radius: 4px;
    }
    .toolbar-btn:hover {
        background-color: #4a5568;
    }
    .toolbar-select {
        background-color: #4a5568;
        color: white;
        border: 1px solid #718096;
        border-radius: 4px;
        padding: 4px 6px;
        font-size: 14px;
    }