/* Plugin Styles */
.athan-express-widget {
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #f8f8f8;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

.athan-express-widget .top-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px; /* Adjust the font size for the first line */
    margin-bottom: 10px;
}

.athan-express-widget .top-line .city,
.athan-express-widget .top-line .country,
.athan-express-widget .top-line .qibla-direction,
.athan-express-widget .top-line .date,
.athan-express-widget .top-line .hijri-date {
    display: inline;
    padding: 0 5px;
}

.athan-express-widget .prayer-times {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.athan-express-widget .prayer-time {
    display: inline-block;
    padding: 5px;
    font-size: 14px; /* Keep the font size for the prayer times */
}

.athan-express-widget .current-prayer,
.athan-express-widget .prayer-time.current-prayer {
    background-color: #e0ffe0; /* Change this color to your preferred highlight color */
    font-weight: bold;
    color: #333; /* Change this color to your preferred text color */
}

.clock,
.city {
    font-size: 18px; /* Adjust the font size as needed */
}

/* Center the clock container and clock in mobile view */
@media (max-width: 767px) {
    .clock-container {
        display: flex;
        justify-content: center;
        margin-top: 10px; /* Adjust spacing as needed */
        flex-direction: column; /* Stack elements vertically */
    }

    .clock {
        font-size: 18px; /* Adjust font size as needed */
        margin: 5px 0; /* Add some spacing around the clock in mobile view */
    }

    .top-line {
        flex-direction: column; /* Stack elements vertically in mobile view */
        text-align: center; /* Center-align text in mobile view */
    }

    .athan-express-widget .top-line .city,
    .athan-express-widget .top-line .country,
    .athan-express-widget .top-line .qibla-direction,
    .athan-express-widget .top-line .date,
    .athan-express-widget .top-line .hijri-date {
        display: block; /* Display elements in block style in mobile view */
        margin: 5px 0; /* Add some spacing around elements in mobile view */
    }

    .prayer-times {
        text-align: center; /* Center-align prayer times in mobile view */
    }
}