/**
 * Villa SunFlower - Styles
 * Main stylesheet for the villa rental page
 */

/* ==========================================
   GLOBAL STYLES
   ========================================== */
body {
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}

h1 {
  font-size: 16px;
  margin-top: 0;
}

p {
  color: rgb(107, 114, 128);
  font-size: 15px;
  margin-bottom: 10px;
  margin-top: 5px;
}

/* ==========================================
   CUSTOM SCROLLBAR
   ========================================== */
::-webkit-scrollbar { 
    width: 8px; 
}
::-webkit-scrollbar-track { 
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb { 
    background: #ccc; 
    border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #aaa; 
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-pulse { 
    animation: pulse-green 2s infinite; 
}

/* ==========================================
   AMENITIES STYLES
   ========================================== */
.amenity-missing { 
    text-decoration: line-through; 
    color: #d1d5db; 
}

/* ==========================================
   PHOTO MODAL STYLES
   ========================================== */
#photo-modal {
    backdrop-filter: blur(5px);
}
#photo-modal.active {
    display: flex !important;
}

/* Thumbnails scrollbar */
#thumbnails-container::-webkit-scrollbar {
    height: 6px;
}
#thumbnails-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
#thumbnails-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}
#thumbnails-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Thumbnail styles */
.thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.thumbnail:hover {
    opacity: 1;
}
.thumbnail.active {
    opacity: 1;
    border-color: #FF385C;
}

/* ==========================================
   WIDGET FIXES (Aminos & Mobile)
   ========================================== */

/* 1. Force l'affichage et la couleur du bouton Aminos */
.sc-launcher, 
.sc-launcher[data-v-70482454] {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background-color: #38c7ff !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    z-index: 2147483647 !important;
}

/* 2. On NE blanchit PAS l'image (pour voir l'avatar) */
/* (Code supprimé volontairement) */

/* 3. MOBILE : Remonte tout le monde au-dessus du footer sticky */
/* ==========================================
   MOBILE ADJUSTMENTS (Footer Sticky)
   ========================================== */
@media (max-width: 768px) {
    
    /* 1. Le bouton principal (Launcher) */
    .sc-launcher, 
    .sc-launcher[data-v-70482454] {
        position: fixed !important;
        bottom: 120px !important;
        right: 15px !important;
    }

    /* 2. L'Infobulle "Des questions sur le logement ?" */
    .talk-bubble-right,
    .talk-bubble-left { /* Au cas où elle change de côté */
        bottom: 125px !important; /* Alignée avec le bouton (120px + marge) */
        position: fixed !important; /* Force le positionnement */
        right: 90px !important; /* Décalée vers la gauche du bouton */
    }

    /* 3. La fenêtre de chat ouverte */
    .sc-chat-window {
        bottom: 90px !important;
    }
}

/* FORCE BOUTON PHOTOS À GAUCHE SUR MOBILE */
@media (max-width: 768px) {
    #view-photos-btn {
        left: 12px !important;
        right: auto !important;
    }
}


/* --- FIX POSITION BOUTON PHOTOS --- */

#view-photos-btn {
    position: absolute !important;
    z-index: 50;
    bottom: -50px !important;
    
    /* COMPORTEMENT MOBILE (Par défaut) : GAUCHE */
    left: 50px !important;
    right: auto !important;
    bottom: 12px !important;
}

/* COMPORTEMENT PC (Écrans > 768px) : DROITE */
@media (min-width: 768px) {
    #view-photos-btn {
        left: auto !important;   /* On annule la gauche */
        right: 400px !important;  /* On force la droite */
        bottom: -50px !important;
    }
}