/* style.css - Add these styles for the Nepali Calendar Widget */

/* Main container for the calendar widget, often output by the PHP widget's 'before_widget' */
.widget_europati_nepali_calendar_widget .nepali-calendar-widget-container {
    /* The PHP widget already adds: bg-white p-4 rounded shadow-md */
    /* You can add more specific container styles here if needed */
}

/* Wrapper for the calendar generated by nepali-calendar-lib.js */
.nepali-calendar {
    background-color: #ffffff; /* bg-white */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
    overflow: hidden; /* To ensure rounded corners clip inner elements */
}

/* Calendar Header (Month, Year, AD Date) */
.nepali-calendar .calendar-header {
    /* The JS adds: text-center p-3 bg-brand-blue text-white rounded-t-md */
    /* You can add more specific styles or override here if needed */
    /* Example: */
    /* padding: 0.75rem 1rem; */
    /* background-color: #1C2E79; /* Your brand-blue */
    /* color: #ffffff; */
    /* border-top-left-radius: 0.375rem; */
    /* border-top-right-radius: 0.375rem; */
}

.nepali-calendar .calendar-header h3 {
    /* The JS adds: text-lg font-semibold */
    margin: 0 0 0.25rem 0; /* Adjust spacing if needed */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
}

.nepali-calendar .calendar-header p {
    /* The JS adds: text-xs */
    margin: 0;
    font-size: 0.75rem; /* text-xs */
    opacity: 0.9;
}

/* Days of the Week Header (आइत, सोम, ...) */
.nepali-calendar .calendar-days-header {
    /* The JS adds: grid grid-cols-7 text-center text-xs font-medium text-gray-600 py-2 border-b */
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    color: #4b5563; /* text-gray-600 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

.nepali-calendar .calendar-days-header > div { /* Each day cell in header */
    padding: 0.25rem; /* p-1 */
}

/* Main Calendar Grid for Dates */
.nepali-calendar .calendar-grid {
    /* The JS adds: grid grid-cols-7 text-center text-sm */
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 0.875rem; /* text-sm */
}

.nepali-calendar .calendar-grid > div { /* Each date cell */
    padding: 0.5rem; /* p-2 */
    border: 1px solid #f3f4f6; /* border-gray-100 - subtle border */
    /* The JS adds: cursor-pointer hover:bg-gray-100 */
    cursor: pointer;
    min-height: 2.5rem; /* Ensure cells have some height */
    display: flex;
    align-items: center;
    justify-content: center;
}
.nepali-calendar .calendar-grid > div:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}

/* Styling for the current day (example from JS) */
.nepali-calendar .calendar-grid > div.bg-brand-blue {
    background-color: #800a0a !important; /* Your brand-blue */
    color: #ffffff !important; /* text-white */
    font-weight: 600 !important; /* font-semibold */
    border-radius: 0.25rem !important; /* rounded */
}

/* Calendar Footer */
.nepali-calendar .calendar-footer {
    /* The JS adds: text-center p-2 text-xs text-gray-500 border-t */
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
    border-top: 1px solid #e5e7eb; /* border-gray-200 */
}

/* Placeholder text styling if the calendar JS doesn't load/render */
.nepali-calendar-widget-container > p.text-sm {
    /* The JS widget PHP adds: text-sm text-gray-600 */
    padding: 1rem;
    text-align: center;
    border: 1px dashed #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
}