/* ==========================
   Responsive Table Container
========================== */
.responsive-table-container {
    max-width: 100%;
    margin: 0px auto !important;
    overflow-x: auto;
}

.holiday-popup .table th{font-weight: 600; font-size:20px}
.holiday-popup .table td{font-size: 15px;}
.ays_content_box {margin: 25px auto}


@media (max-width: 768px) {
    .responsive-table-container {
        max-width: 100%;
    }
    
    .holiday-popup .table th{font-weight: 600; font-size:16px}
}

/* ==========================
   Base Table Styles
========================== */
table {
    width: 100%;
    border-collapse: separate; /* Allow row spacing */
    border-spacing: 0 6px;    /* Vertical gap between rows */
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* ==========================
   Table Head
========================== */
thead th {
    background-color: #f8f9fa; /* Light grey for head */
    font-weight: bold;
    text-align: left;
    padding: 12px 10px;
    border-radius: 4px; /* Slight rounding */
}

/* ==========================
   Table Body Cells
========================== */
tbody td {
    background-color: #ffffff;
    padding: 12px 10px; /* Equivalent of py-3 px-2 */
    vertical-align: middle;
    line-height: 1.4;
    border-radius: 4px;
}

/* ==========================
   Table Striped Rows
========================== */
tbody tr:nth-child(even) td {
    background-color: #f2f2f2; /* Light grey stripe */
}

/* ==========================
   Text Alignment Helpers
========================== */
.text-center {
    text-align: center;
}

/* ==========================
   Padding Helpers (Optional)
   Similar to Bootstrap py-3 px-2
========================== */
.py-3 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.px-2 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ==========================
   Responsive Table for Small Devices
========================== */
@media (max-width: 576px) {
    thead th,
    tbody td {
        font-size: 13px; /* Slightly smaller text for mobiles */
        padding: 10px 8px;
    }
}

/* ==========================
   Optional: Hover Effect
========================== */
tbody tr:hover td {
    background-color: #e9ecef; /* Light hover effect */
}