/* ==========================================================================
   Openingstijden (Afwijkende openingstijden)
   ========================================================================== */

.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;
    table-layout: fixed;
}

.aangepaste-openingstijden-tabel,
.aangepaste-openingstijden-tabel td,
.aangepaste-openingstijden-tabel th {
    border: none;
}

.aangepaste-openingstijden-tabel td {
    padding: 15px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eaeaea;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Kolombreedte (4 kolommen) */
.aangepaste-openingstijden-tabel .dag-naam {
    width: 12%;
    font-weight: bold;
    color: var(--e-global-color-primary, #89AFA7);
}

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

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

.aangepaste-openingstijden-tabel .openingstijd {
    width: 30%;
    font-style: italic;
    color: #666;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Hover effect */
.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%;
    }
}