/* General table styling */
table {
    width: 80%; /* Set table width to 80% */
    margin: 20px auto; /* Center the table horizontally */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    border: 1px solid #468085; /* Changed border to soft teal */
}

.injected-content-block p {
    font-size: 20px;
}

/* Data rows */
table tr:not(:first-child) {
    /* No background color */
}

/* Table cells */
table td {
    padding: 8px;
    border: 1px solid #468085; /* Changed border to soft teal */
    text-align: center !important; /* FORCED CENTER ALIGNMENT */
    vertical-align: middle;
    width: 50%; /* Make each table column 50% width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    /* Ensure text content wraps responsively */
    overflow-wrap: break-word; /* For long words that would overflow */
    word-break: break-word; /* Fallback for older browsers and specific breaking rules */
    color: #000; /* Existing font color for all <td> elements */
    font-weight: 100;
}

table td a {
    color: #468085; /* Changed link color to soft teal */
    text-decoration: none; /* Remove underline from links */
}

/* Make images inside table cells responsive */
table td img {
    max-width: 100%; /* Ensure images don't overflow their cell */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image if it's inline */
    margin: 0 auto; /* Center image horizontally in the cell */
}

/* Header cells for the first table's first <tr> */
h3:first-of-type + table tr:first-child td {
    font-weight: bold;
    font-size: 20px;
}

/* Other h3 elements */
h3 {
    margin: 0 auto;
    font-size: 28px;
    color: white; /* Retain original color for h3 */
    text-align: center;
    padding: 5px;
    display: block;
    width: 80%;
    box-sizing: border-box;
    position: relative;
    left: auto;
    top: 20px;
    border: 1px solid #468085; /* Changed border to soft teal */
    border-bottom: none;
    background-color: #95A5A6;
}

/* THIS IS THE NEW CHANGE FOR LAPTOP SCREENS */
h4 {
    font-size: 28px !important; /* Making h4 bigger than p (20px) on laptops */
    /* This will apply to screens larger than 768px */
}

/* Form container styling (background box) */
.form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    border: 2px solid #ccc;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Status messages */
.status {
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    max-width: 600px;
}

.status.success {
    background: #dff0d8;
    color: #3c763d;
}

.status.error {
    background: #f2dede;
    color: #a94442;
}

.status.processing {
    background: #d9edf7;
    color: #31708f;
}

/* Warning styling */
.warning {
    color: #8a6d3b;
    background: #fcf8e3;
    padding: 10px;
    border: 1px solid #faebcc;
    border-radius: 4px;
    max-width: 600px;
    margin: 10px auto;
}

/* Responsive adjustments */
/* Container for tables to enable horizontal scrolling on small screens */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px auto;
}

@media screen and (max-width: 768px) {
    table, .form-container, h3, .status, .warning {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
    table {
        min-width: 450px;
    }
    body {
        font-size: 14px;
    }
    /* THIS RULE STAYS TO MAKE H4 BIGGER THAN P ON MOBILE */
    h4 {
        font-size: 24px !important; 
    }
}

@media screen and (max-width: 500px) {
    table {
        min-width: 360px;
    }
    body {
        font-size: 13px;
    }
}

@media screen and (max-width: 400px) {
    table {
        min-width: 300px;
    }
    table td {
        font-size: 0.85em;
        padding: 6px;
    }
    body {
        font-size: 12px;
    }
}