/*
 Theme Name:   ASAS-IT-Child-Theme
 Description:  Custom Child Theme für SW Wonderful Skin (Treatwell Popup Integration)
 Author:       ASAS-IT
 Template:     hello-elementor
 Version:      1.1.0
*/

/* --- 1. STYLING FÜR DEN BUCHUNGS-BUTTON --- */
.tw-button-wrapper {
    text-align: center;
    margin: 20px 0;
}
.tw-open-popup-btn {
    display: inline-block !important;
    background-color: #432C07 !important; /* Hier deine Wunschfarbe für den Button eintragen */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 15px 35px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}
.tw-open-popup-btn:hover {
    transform: scale(1.03) !important;
    background-color: #CFC2AD !important;
}

/* --- 2. STYLING FÜR DAS VORSCHAUFENSTER (OVERLAY) --- */
.tw-overlay-hidden {
    display: none !important;
}

.tw-overlay-visible {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important; /* Dynamische Displayhöhe für iOS */
    z-index: 9999999 !important; /* Überlagert ALLES auf der Seite */
    background-color: rgba(0, 0, 0, 0.6) !important; /* Schicker, leicht dunkler Hintergrund */
}

/* Der weiße Inhalts-Kasten */
.tw-overlay-content {
    position: absolute !important;
    background: #ffffff !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
}

/* --- 3. DER SCHLIESSEN-BUTTON (OBEN RECHTS) --- */
.tw-close-popup-btn {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 100000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    font-family: sans-serif !important;
    font-weight: bold !important;
    font-size: 14px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

/* --- 4. DAS TREATWELL IFRAME IM POPUP --- */
#wahanda-online-booking-widget-iframe,
#wahanda-online-booking-widget-iframe iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border: none !important;
    display: block !important;
    padding-top: 60px !important; /* Schafft oben Platz, damit das "Schließen" nichts verdeckt */
    
    /* Ermöglicht das saubere Scrollen im Vorschaufenster */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* --- OPTIMIERUNG FÜR DESKTOP (Damit es am PC wie ein schickes zentriertes Fenster aussieht) --- */
@media (min-width: 769px) {
        /* HIER REGELST DU DIE GRÖSSE DES BUTTONS AUF DEM HANDY: */
    .tw-open-popup-btn {
        font-size: 12px !important;      /* Etwas kleinere Schrift (vorher 16px) */
        padding: 15px 35px !important;   /* Weniger Abstand oben/unten und links/rechts (vorher 15px 35px) */
    }

    .tw-overlay-content {
        width: 70% !important;
        max-width: 900px !important;
        height: 85% !important;
        top: 7.5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }
    .tw-close-popup-btn {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
    }
}