/**
 * Hopmans Openingstijden Styling
 */

 .hopmans-openingstijden {
    margin-bottom: 2em;
}

/* Tabel styling voor aangepaste openingstijden */
.aangepaste-openingstijden-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 16px;
}

.aangepaste-openingstijden-tabel td {
    padding: 15px; /* Padding rechts voor ruimte tussen kolommen */
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eaeaea;
}

/* Zorgen voor gelijke kolombreedte */
.aangepaste-openingstijden-tabel .dag-naam {
    width: 15%;
    font-weight: bold;
    color: var(--e-global-color-primary, #0170B9);
}

.aangepaste-openingstijden-tabel .datum {
    width: 30%;
}

.aangepaste-openingstijden-tabel .feestdag {
    width: 30%;
    font-weight: bold;
}

.aangepaste-openingstijden-tabel .openingstijd {
    width: 25%;
    font-style: italic;
}

/* Styling voor rijen */
.aangepaste-openingstijden-tabel .aangepaste-openingstijd:hover {
    background-color: rgba(242, 242, 242, 0.5);
}

/* Bericht als er geen speciale openingstijden zijn */
.hopmans-openingstijden .geen-openingstijden {
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    text-align: left;
    font-style: italic;
}

/* Responsive styling */
@media screen and (max-width: 768px) {
    .aangepaste-openingstijden-tabel, 
    .aangepaste-openingstijden-tabel tbody, 
    .aangepaste-openingstijden-tabel tr, 
    .aangepaste-openingstijden-tabel td {
        display: block;
        width: 100%;
        text-align: left;
    }
    
    .aangepaste-openingstijden-tabel tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #eaeaea;
        padding-bottom: 10px;
    }
    
    .aangepaste-openingstijden-tabel td {
        border: none;
        padding: 3px 0;
    }
    
    .aangepaste-openingstijden-tabel .dag-naam {
        margin-top: 8px;
        width: 100%;
    }
    
    .aangepaste-openingstijden-tabel .datum,
    .aangepaste-openingstijden-tabel .feestdag,
    .aangepaste-openingstijden-tabel .openingstijd {
        width: 100%;
    }
}