/* General body and container styles */
body {
    font-family: 'Inter', Arial, sans-serif; /* Prefer Inter font */
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    color: #333;
    box-sizing: border-box;
    line-height: 1.6; /* Improved readability */
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px; /* Slightly more rounded corners */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow */
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow issues */
}

h1, h2, h3, h4, h5, h6 { /* Added all heading levels */
    color: #0056b3;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600; /* Slightly bolder headings */
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }


/* Layout for admin panel - flex by default */
.flex-container {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    box-sizing: border-box;
}

/* Layout for public index.php - column by default */
.column-single {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    min-height: 150px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Consistent rounded corners */
    resize: vertical;
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 15px;
}

input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Consistent rounded corners */
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555; /* Slightly softer label color */
}

button {
    background-color: #007bff;
    color: white;
    padding: 12px 25px; /* Slightly larger padding for buttons */
    border: none;
    border-radius: 8px; /* Consistent rounded corners */
    cursor: pointer;
    font-size: 1.05rem; /* Slightly larger font */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform for subtle click effect */
    width: 100%;
    max-width: 320px; /* Slightly increased max-width */
    margin: 0 auto;
    display: block;
    font-weight: 500;
}

button:hover {
    background-color: #0056b3;
    transform: translateY(-2px); /* Lift effect on hover */
}

button:active {
    transform: translateY(0); /* Press effect on click */
}

.message {
    margin-top: 15px;
    padding: 12px; /* Slightly larger padding */
    border-radius: 8px; /* Consistent rounded corners */
    text-align: center;
    font-weight: 500;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

hr {
    border: 0;
    height: 1px;
    background: #e0e0e0; /* Lighter separator */
    margin: 40px 0;
}

.encoded-result textarea {
    min-height: 80px;
    background-color: #e9ecef;
    font-family: 'Courier New', Courier, monospace; /* Monospace for code/hash */
    color: #333;
    border: 1px solid #d0d0d0;
    padding: 12px;
    border-radius: 8px;
}

.visits-counter {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    color: #666;
}

/* Styles for time instructions */
.time-instruction {
    text-align: center;
    font-size: 1.1em;
    color: #666;
    margin-bottom: 25px;
    padding: 15px; /* Slightly more padding */
    border: 1px dashed #a0a0a0; /* Darker dashed border */
    border-radius: 8px;
    background-color: #fcfcfc; /* Lighter background */
}

.time-instruction strong {
    color: #0056b3;
    font-size: 1.2em;
}

.time-instruction .current-time {
    font-size: 1.8em; /* Larger font for time */
    font-weight: bold;
    color: #007bff; /* Primary blue for time */
}

/* --- NEW STYLES FOR DECODED HTML OUTPUT (v3) --- */
.decoded-html-output {
    border: 1px solid #dcdcdc; /* Lighter border */
    padding: 15px; /* More padding */
    min-height: 150px;
    background-color: #ffffff; /* White background */
    border-radius: 8px;
    overflow-y: auto; /* Scroll for long content */
    box-sizing: border-box;
    line-height: 1.7; /* Good line height for readability */
    color: #222; /* Slightly darker text for content */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Subtle inner shadow */
}

/* Basic styling for HTML elements within the decoded output */
.decoded-html-output p {
    margin-bottom: 1em; /* Space between paragraphs */
}

.decoded-html-output h1,
.decoded-html-output h2,
.decoded-html-output h3,
.decoded-html-output h4,
.decoded-html-output h5,
.decoded-html-output h6 {
    color: #0056b3; /* Consistent heading color */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    text-align: left; /* Align headings left within content */
    font-weight: 600;
}

.decoded-html-output ul,
.decoded-html-output ol {
    margin-bottom: 1em;
    padding-left: 25px; /* Indent lists */
}

.decoded-html-output li {
    margin-bottom: 0.5em;
}

.decoded-html-output a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.decoded-html-output a:hover {
    text-decoration: underline;
    color: #0056b3;
}

.decoded-html-output table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08); /* Subtle shadow for tables */
    border-radius: 8px; /* Rounded corners for table container */
    overflow: hidden; /* Ensures rounded corners apply */
}

.decoded-html-output th,
.decoded-html-output td {
    border: 1px solid #e0e0e0; /* Lighter table borders */
    padding: 12px 15px; /* More padding in cells */
    text-align: left;
}

.decoded-html-output th {
    background-color: #f0f0f0; /* Light gray header */
    font-weight: bold;
    color: #444;
}

.decoded-html-output tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping for rows */
}

/* Responsive table behavior */
@media (max-width: 600px) {
    .decoded-html-output table,
    .decoded-html-output thead,
    .decoded-html-output tbody,
    .decoded-html-output th,
    .decoded-html-output td,
    .decoded-html-output tr {
        display: block;
    }

    .decoded-html-output thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .decoded-html-output tr {
        border: 1px solid #ccc;
        margin-bottom: 1em;
        border-radius: 8px;
        overflow: hidden;
    }

    .decoded-html-output td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    .decoded-html-output td:before {
        position: absolute;
        top: 12px;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #555;
    }

    /* Labeling the data cells for small screens */
    .decoded-html-output td:nth-of-type(1):before { content: attr(data-label); }
    .decoded-html-output td:nth-of-type(2):before { content: attr(data-label); }
    .decoded-html-output td:nth-of-type(3):before { content: attr(data-label); }
    /* Add more as needed for your table columns */
}


/* --- Media Queries for responsiveness --- */

/* For screens up to 768px wide (typical tablet portrait or smaller) */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .flex-container {
        flex-direction: column;
        gap: 15px;
    }

    .column {
        min-width: unset;
        width: 100%;
    }

    button {
        max-width: 100%;
    }

    .time-instruction {
        font-size: 1em;
    }
}

/* For screens up to 480px wide (typical smartphone) */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.4em;
    }

    textarea,
    input[type="password"] {
        font-size: 0.9em;
    }

    button {
        padding: 10px 15px;
        font-size: 0.95em;
    }

    .decoded-html-output {
        padding: 10px;
    }
}