/**
 * Daily Prayer Times block styles
 */

.wp-block-prayer-times-daily-prayer-times {
    margin: 1em auto;
    max-width: 600px;
    margin-bottom: 2em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    position: relative;
}

.wp-block-prayer-times-daily-prayer-times .prayer-times-date {
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: 1.2em;
}

.wp-block-prayer-times-daily-prayer-times .gregorian-date {
    font-size: 1.1em;
}

.wp-block-prayer-times-daily-prayer-times .hijri-date {
    font-size: 0.9em;
    color: #555;
    margin-top: 0.3em;
}

.wp-block-prayer-times-daily-prayer-times .prayer-times-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

/* Prayer icon styling */
.wp-block-prayer-times-daily-prayer-times .prayer-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.wp-block-prayer-times-daily-prayer-times .prayer-name {
    display: flex;
    align-items: center;
}

/* Default table style */
.wp-block-prayer-times-daily-prayer-times .table-style-default th,
.wp-block-prayer-times-daily-prayer-times .table-style-default td {
    padding: 0.5em;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.wp-block-prayer-times-daily-prayer-times .table-style-default th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Bordered table style */
.wp-block-prayer-times-daily-prayer-times .table-style-bordered th,
.wp-block-prayer-times-daily-prayer-times .table-style-bordered td {
    padding: 0.5em;
    text-align: center;
    border: 1px solid #ddd;
}

.wp-block-prayer-times-daily-prayer-times .table-style-bordered th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Striped table style */
.wp-block-prayer-times-daily-prayer-times .table-style-striped th,
.wp-block-prayer-times-daily-prayer-times .table-style-striped td {
    padding: 0.5em;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.wp-block-prayer-times-daily-prayer-times .table-style-striped th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.wp-block-prayer-times-daily-prayer-times .table-style-striped tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Minimal table style */
.wp-block-prayer-times-daily-prayer-times .table-style-minimal th,
.wp-block-prayer-times-daily-prayer-times .table-style-minimal td {
    padding: 0.5em;
    text-align: center;
}

.wp-block-prayer-times-daily-prayer-times .table-style-minimal th {
    border: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

.wp-block-prayer-times-daily-prayer-times .table-style-minimal td {
    border: 0px solid #f0f0f0;
}

/* Carousel styling */
.prayer-times-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.prayer-times-carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.prayer-times-carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}

/* Carousel navigation dots */
.prayer-times-carousel-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 5px;
    gap: 8px;
}

.prayer-times-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.prayer-times-carousel-dot.active {
    background-color: #333;
}

/* Carousel navigation arrows - set to display: none to hide them */
.prayer-times-carousel-nav {
    display: none;
}

.prayer-times-carousel-dot {
    width: 12px;
    height: 12px;
    background-color: #ddd;
}

.prayer-times-carousel-dot.active {
    background-color: #555;
    transform: scale(1.2);
}

/* Make Iqama times bold */
.prayer-times-table td.iqama-time {
    font-weight: bold;
}

/* Also make the Iqama column header bold for consistency */
.prayer-times-table thead th:nth-child(3) {
    font-weight: bold;
}

/* Jumuah times styling */
.prayer-times-jumuah {
    margin-top: 15px;
}

.prayer-times-jumuah h4 {
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
}

.jumuah-times-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.jumuah-times-table td {
    text-align: center;
    padding: 10px;
    width: 33.33%;
}

.jumuah-time-value {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
}

.jumuah-label {
    display: block;
    font-size: 0.9em;
    margin-top: 5px;
    color: #555;
}

/* Table styles for Jumuah that match regular table styles */
.wp-block-prayer-times-daily-prayer-times .table-style-bordered .jumuah-times-table td {
    border: 1px solid #ddd;
}

.wp-block-prayer-times-daily-prayer-times .table-style-striped .jumuah-times-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Ensure header color background takes precedence for all table styles */
.wp-block-prayer-times-daily-prayer-times .prayer-times-table thead tr[style*="background-color"] th {
    background-color: transparent !important; /* Let the inline style on tr be visible */
}

/* Responsive styles for small screens */
@media (max-width: 600px) {
    .wp-block-prayer-times-daily-prayer-times {
        font-size: 0.9em;
    }
    
    .wp-block-prayer-times-daily-prayer-times .prayer-times-table th,
    .wp-block-prayer-times-daily-prayer-times .prayer-times-table td {
        padding: 0.3em;
    }
    
    .wp-block-prayer-times-daily-prayer-times .prayer-icon {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }
    
    .prayer-times-carousel-nav {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    
    .jumuah-time-value {
        font-size: 1em;
    }
    
    .jumuah-label {
        font-size: 0.8em;
    }
}