/* ==============================================
   TREATWELL NO OVERLAY CSS - Version Propre
   Fichier: css/treatwell-no-overlay.css
   Basé sur votre index.html SANS overlay logo
   ============================================== */

/* Reset pour le conteneur principal */
.treatwell-clean-container * {
    box-sizing: border-box;
}

/* Main container - Version propre */
.treatwell-clean-container .main-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: white;
    min-height: calc(100vh - 100px);
}

/* Widget container - Version propre sans overlay */
.treatwell-clean-container .treatwell-widget-container {
    width: 100%;
    height: calc(100vh - 100px);
    min-height: 600px;
    overflow: hidden;
    position: relative;
}

/* Widget iframe principal - Version propre */
.treatwell-clean-container #wahanda-online-booking-widget-iframe {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border: none;
    display: block;
}

/* Iframe interne - Version propre */
.treatwell-clean-container #wahanda-online-booking-widget-iframe iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Loading indicator - Identique à votre index.html */
.treatwell-clean-container .loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #667eea;
    z-index: 1;
}

.treatwell-clean-container .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: treatwell-clean-spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* Mobile First - Responsive identique à votre index.html */
@media screen and (max-width: 480px) {
    .treatwell-clean-container .treatwell-widget-container {
        height: calc(100vh - 80px);
        min-height: 500px;
    }
    
    .treatwell-clean-container #wahanda-online-booking-widget-iframe {
        min-height: 500px;
    }
}

/* Tablettes - Responsive identique */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .treatwell-clean-container .main-container {
        max-width: 100%;
        margin: 0;
    }
    
    .treatwell-clean-container .treatwell-widget-container {
        height: calc(100vh - 90px);
        min-height: 650px;
    }
    
    .treatwell-clean-container #wahanda-online-booking-widget-iframe {
        min-height: 650px;
    }
}

/* Écrans moyens - Responsive identique */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .treatwell-clean-container .main-container {
        max-width: 100%;
        margin: 0;
    }
    
    .treatwell-clean-container .treatwell-widget-container {
        height: calc(100vh - 100px);
        min-height: 700px;
    }
    
    .treatwell-clean-container #wahanda-online-booking-widget-iframe {
        min-height: 700px;
    }
}

/* Grands écrans - Responsive identique */
@media screen and (min-width: 1025px) {
    .treatwell-clean-container .main-container {
        max-width: 1200px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }
    
    .treatwell-clean-container .treatwell-widget-container {
        height: calc(100vh - 120px);
        min-height: 800px;
    }
    
    .treatwell-clean-container #wahanda-online-booking-widget-iframe {
        min-height: 800px;
    }
}

/* Écrans très larges - Responsive identique */
@media screen and (min-width: 1440px) {
    .treatwell-clean-container .main-container {
        max-width: 1400px;
    }
    
    .treatwell-clean-container .treatwell-widget-container {
        min-height: 900px;
    }
    
    .treatwell-clean-container #wahanda-online-booking-widget-iframe {
        min-height: 900px;
    }
}

/* Mode paysage sur mobile - Responsive identique */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .treatwell-clean-container .treatwell-widget-container {
        height: calc(100vh - 60px);
        min-height: 400px;
    }
    
    .treatwell-clean-container #wahanda-online-booking-widget-iframe {
        min-height: 400px;
    }
}

/* Support écrans haute densité */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    .treatwell-clean-container .main-container {
        box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    }
}

/* Accessibilité - Animations réduites */
@media (prefers-reduced-motion: reduce) {
    .treatwell-clean-container .loading-spinner {
        animation: none;
    }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .treatwell-clean-container .main-container {
        background: #2d2d2d;
    }
    
    .treatwell-clean-container .loading-indicator {
        color: #b3b3ff;
    }
}

/* États de chargement */
.treatwell-clean-container.loading {
    background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
    background-size: 200% 100%;
    animation: treatwell-clean-loading 2s infinite;
}

@keyframes treatwell-clean-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.treatwell-clean-container.loaded {
    background: white;
    animation: none;
}

/* Classes utilitaires pour personnalisation */

/* Compact - Hauteur réduite */
.treatwell-clean-container.compact .treatwell-widget-container {
    min-height: 500px;
}

.treatwell-clean-container.compact #wahanda-online-booking-widget-iframe {
    min-height: 500px;
}

/* Large - Hauteur augmentée */
.treatwell-clean-container.large .treatwell-widget-container {
    min-height: 1000px;
}

.treatwell-clean-container.large #wahanda-online-booking-widget-iframe {
    min-height: 1000px;
}

/* Full width - Pleine largeur */
.treatwell-clean-container.full-width .main-container {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
}

/* No shadow - Sans ombre */
.treatwell-clean-container.no-shadow .main-container {
    box-shadow: none;
}

/* Rounded corners - Coins arrondis */
.treatwell-clean-container.rounded .main-container {
    border-radius: 12px;
    overflow: hidden;
}