/* prayer-times-plugin/assets/css/style.css */

/* ... (previous CSS styles remain here) ... */


.seo-text-info { /* New style for the dynamic info text */
    text-align: center;
    font-size: 1.1em;
    color: #555;
    margin: 25px 0;
    line-height: 1.6;
    background-color: #f0f8ff; /* Light blue background */
    border: 1px solid #cceeff;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    animation: fadeIn 0.8s ease-out forwards; /* Reuse fadeIn animation */
}

.seo-text-info strong {
    color: #1a73e8;
}

/* ... (rest of your CSS styles) ... */

/* Basic Reset & Global Styles */
#prayer-times-plugin {
    margin: 30px auto;
    background-color: #ffffff;
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger, softer shadow */
    padding: 30px;
    color: #333;
    overflow: hidden; /* Clear any floating elements */
    position: relative; /* For background effects */
    animation: fadeIn 0.8s ease-out forwards; /* Fade in animation for the whole plugin */
}

/* Keyframe for fadeIn animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header & City Selector */
.plugin-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.plugin-header h2 {
    color: #1a73e8; /* Google Blue */
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

.city-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between label and select */
}

.city-selector label {
    width: 20%;
    font-size: 1.1em;
    font-weight: 600;
    color: #555;
}

/* Select2 Custom Styles */
.select2-container .select2-selection--single {
    height: 42px; /* Taller select box */
    border: 1px solid #c0c0c0;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.select2-container .select2-selection--single:focus,
.select2-container--open .select2-selection--single {
    border-color: #1a73e8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2); /* Blue glow on focus */
}

.select2-container .select2-selection__rendered {
    line-height: 40px; /* Vertically center text */
    padding-left: 15px;
    color: #444;
    font-size: 1.05em;
}

.select2-container .select2-selection__arrow {
    height: 40px;
    width: 30px;
}

/* Dropdown specific styles */
.select2-dropdown {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.select2-results__option {
    padding: 10px 15px;
    font-size: 1.05em;
}

.select2-results__option--highlighted {
    background-color: #e6f3ff !important; /* Light blue on hover */
    color: #1a73e8 !important;
}

.select2-search input {
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 8px !important;
}

/* Section Headings */
#prayer-times-plugin h3 {
    color: #1a73e8;
    text-align: center;
    margin-bottom: 25px;
    margin-top: 30px;
    position: relative;
    padding-bottom: 10px;
}


/* Prayer Times Grid */
.current-prayer-times, .today-sehri-iftar, .monthly-prayer-times {
    margin-bottom: 35px;
    padding: 25px;
    background-color: #f9f9f9; /* Lighter background for sections */
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.03); /* Inner shadow for depth */
    animation: slideIn 0.6s ease-out forwards; /* Slide in animation */
    opacity: 0; /* Start invisible for animation */
    transform: translateY(20px); /* Start slightly below */
}

/* Animation delay for subsequent sections */
.today-sehri-iftar { animation-delay: 0.2s; }
.monthly-prayer-times { animation-delay: 0.4s; }

/* Keyframe for slideIn animation */
@keyframes slideIn {
    to { opacity: 1; transform: translateY(0); }
}

.prayer-grid, .sehri-iftar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Slightly larger min-width */
    gap: 20px; /* More space between items */
    margin-bottom: 25px;
    text-align: center;
}

.prayer-item, .sehri-iftar-grid .item {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* More prominent shadow */
    transition: all 0.3s ease; /* Smooth transition for hover/highlight */
    position: relative; /* For glow effect */
    overflow: hidden; /* Hide overflow for animations */
}

.prayer-item h4, .sehri-iftar-grid .item h4 {
    color: #4285f4; /* Google Blue variant */
    margin-bottom: 10px;
    font-weight: 600;
}

.prayer-item .time, .sehri-iftar-grid .item p {
    font-size: 20px; /* Larger time font */
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
}

/* Highlight for current/next prayer */
.prayer-item.highlight {
    background-color: #eaf2ff; /* Very light blue */
    border: 2px solid #4285f4; /* Solid blue border */
    transform: translateY(-5px) scale(1.02); /* Slight lift and scale */
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3); /* Blue glow effect */
    z-index: 1; /* Bring to front */
}

/* Next Prayer Countdown */
.next-prayer-countdown {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    margin-top: 25px;
    font-size: 1.2em;
    background: linear-gradient(45deg, #e6ffed, #d1f7d9); /* Soft green gradient */
    border: 1px solid #28a745;
    color: #1a5e2d;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.15);
    font-weight: 600;
    animation: pulse 2s infinite ease-in-out; /* Subtle pulse animation */
}

/* Keyframe for pulse animation */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 4px 10px rgba(40, 167, 69, 0.15); }
    50% { transform: scale(1.01); box-shadow: 0 6px 15px rgba(40, 167, 69, 0.25); }
    100% { transform: scale(1); box-shadow: 0 4px 10px rgba(40, 167, 69, 0.15); }
}

.next-prayer-countdown h4 {
    margin-bottom: 10px;
    color: #1a5e2d;
}

/* Sehri/Iftar Countdown Text */
.countdown-text { 
    display: block;
    font-size: 1.1em; /* Slightly larger */
    color: #e91e63; /* Pink color for prominence */
    margin-top: 8px;
    font-weight: 700;
    animation: fadePulse 1.5s infinite alternate; /* Fade and pulse effect */
}

/* Keyframe for fadePulse animation */
@keyframes fadePulse {
    0% { opacity: 1; }
    100% { opacity: 0.7; }
}


/* ... (previous general CSS styles remain here) ... */

/* Monthly Table */
#monthly-prayer-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0; 
    margin-top: 30px;
    overflow: hidden; 
    border-radius: 10px;
}

/* New: Wrapper for responsive table */
.monthly-prayer-times {
    overflow-x: auto; /* Enable horizontal scroll for table wrapper */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: 0; /* Remove padding from this div as table itself will handle it */
    border: none; /* Remove border from this div */
    box-shadow: none; /* Remove shadow from this div */
    background-color: transparent; /* Remove background from this div */
    animation: slideIn 0.6s ease-out forwards; /* Re-apply animation */
    opacity: 0; 
    transform: translateY(20px); 
    animation-delay: 0.4s;
}

/* Ensure the table takes up the full width within its scrollable container */
#monthly-prayer-table {
    min-width: 600px; /* A minimum width to ensure content doesn't get too cramped before scrolling */
    width: 100%; /* Ensure it tries to be 100% of parent when possible */
}


#monthly-prayer-table th,
#monthly-prayer-table td {
    border: 1px solid #e9ecef;
    padding: 12px 8px; 
    text-align: center;
    font-size: 0.95em;
    white-space: nowrap; /* Prevent text from wrapping within cells */
}

#monthly-prayer-table th {
    background-color: #1a73e8; 
    color: white;
    font-weight: 600;
    position: sticky; 
    top: 0;
    z-index: 2; 
}

#monthly-prayer-table thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}
#monthly-prayer-table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}
#monthly-prayer-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
#monthly-prayer-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}


#monthly-prayer-table tbody tr:nth-child(even) {
    background-color: #f6f6f6; 
}

#monthly-prayer-table tbody tr:hover {
    background-color: #eef7ff; 
    cursor: pointer;
}

/* Today's row highlight */
#monthly-prayer-table tbody tr.today {
    background-color: #fff3e0; 
    font-weight: bold;
    color: #d65300;
    border: 2px solid #ff9800; 
    transform: scale(1.01); 
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2); 
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #prayer-times-plugin {
        padding: 20px;
        margin: 15px auto;
        border-radius: 8px;
    }

    .plugin-header h2 {
    }

    .city-selector {
        flex-direction: column;
        gap: 10px;
    }

    h3 {
        margin-bottom: 20px;
        margin-top: 25px;
    }

    .prayer-grid, .sehri-iftar-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }

    .prayer-item, .sehri-iftar-grid .item {
        padding: 15px;
    }

    .prayer-item h4, .sehri-iftar-grid .item h4 {

    }

    .next-prayer-countdown {
        font-size: 1em;
        padding: 15px;
    }

    .countdown-text {
        font-size: 0.9em;
    }

    /* Mobile Table specific adjustments */
    #monthly-prayer-table th,
    #monthly-prayer-table td {
        padding: 8px 5px; /* Reduce padding to fit more content */
        font-size: 0.8em; /* Smaller font size for table content */
    }
    .current-prayer-times, .today-sehri-iftar, .monthly-prayer-times {
        padding: 10px;
    }

    /* For very small screens, make cells even tighter if necessary */
    @media (max-width: 480px) {
        .prayer-grid, .sehri-iftar-grid {
            grid-template-columns: 1fr; /* Stack items vertically on very small screens */
        }
        #monthly-prayer-table th,
        #monthly-prayer-table td {
            font-size: 0.75em; /* Even smaller font size */
            padding: 6px 4px; /* Even less padding */
        }
        /* Optionally, hide the 'ইশা' column if space is extremely tight */
        #monthly-prayer-table th:nth-child(6),
           #monthly-prayer-table td:nth-child(6) {
               display: none;
           }
    }
}

/* ... (rest of your CSS styles, like loading state) ... */


/* Responsive adjustments */
@media (max-width: 768px) {
    #prayer-times-plugin {
        padding: 20px;
        margin: 15px auto;
        border-radius: 8px;
    }

    .city-selector {
        flex-direction: column;
    }

    h3 {
        margin-bottom: 20px;
        margin-top: 25px;
    }

    .prayer-grid, .sehri-iftar-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }

    .prayer-item, .sehri-iftar-grid .item {
        padding: 15px;
    }

    .next-prayer-countdown {

        padding: 15px;
    }

    .countdown-text {
        font-size: 0.9em;
    }
}

@media (max-width: 1005px) {
    .prayer-grid, .sehri-iftar-grid {
        grid-template-columns: 1fr; /* Stack items vertically on very small screens */
    }
    .city-selector label {
        width: 100%;
    }
}

/* Loading state styles (from previous JS, just ensuring it's here if needed) */
.current-prayer-times.loading, 
.today-sehri-iftar.loading, 
.monthly-prayer-times.loading {
    opacity: 0.5;
    pointer-events: none;
}

.select2-container--default .select2-selection--single .select2-selection__clear{
    display: none;
}