.content-area-wrapper {
    width: 100%; max-width: 900px; margin: 50px auto 0 auto;
    padding: 5px 8px; box-sizing: border-box;
}
.intro-container {
    max-width: 900px; margin: 0 auto 30px auto; text-align: left;
    border-bottom: 1px solid #eee; padding-bottom: 20px;
}
.intro-container h1 { font-size: 2em; margin-top: 0; margin-bottom: 0.5em; color: var(--primary-color, #2c3e50); }
.intro-container p { font-size: 1.1em; line-height: 1.6; color: #555; }


#time-calculator {
    width: 100%; max-width: 800px; margin: 30px auto;
    padding: 25px; box-sizing: border-box; background-color: #f9fafb;
    border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
#input-group {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: center; gap: 10px; margin-bottom: 15px;
}
#hours-input, #before-after, #time-select {
    padding: 12px; border: 1px solid #ccc; border-radius: 5px;
    font-size: 1rem; background-color: #fff;
}
#hours-input { flex: 2; min-width: 80px; }
#before-after { flex: 1.5; min-width: 90px; }
#time-select { flex: 1.5; min-width: 100px; }
#calculate-button-js {
    width: 100%; margin-top: 10px; background-color: var(--secondary-color, #3498db);
    color: white; border: none; padding: 14px; font-size: 1.1rem;
    font-weight: bold; cursor: pointer; transition: background-color 0.3s; border-radius: 5px;
}


.result-container { margin-top: 30px; text-align: center; width: 100%; }
#result-box {
    background-color: #000; color: #fff;
    padding: 25px 20px; border-radius: 8px; margin-bottom: 30px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; min-width: 300px;
}
#result-time-php {
    font-size: 3.2em; font-weight: bold; margin: 0; line-height: 1.2;
}
#result-date-php {
    font-size: 1.3em; margin-top: 10px; opacity: 0.8;
}
.clock-container { margin-top: 30px; display: flex; justify-content: center; }
#result-clock { background-color: #ffffff; border-radius: 50%; border: 4px solid #333; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }


.calculation-tables-wrapper {
    max-width: 800px; 
    margin: 30px auto;
}
.results-table-container { width: 100%; overflow-x: auto; margin-bottom: 40px; }
#additional-results-php { width: 100%; border-collapse: collapse; }
#additional-results-php th, #additional-results-php td {
    border: 1px solid #ddd; padding: 12px 15px;
    text-align: left; white-space: nowrap;
}
#additional-results-php th { background-color: #f5f5f5; }


h2 { font-size: 1.6em; margin-top: 0; margin-bottom: 20px; color: var(--primary-color, #2c3e50); border-bottom: 2px solid #eee; padding-bottom: 10px; }
.related-calculators-list { list-style: none; padding: 0; margin: 0; }
.related-calculators-list li a { display: block; padding: 10px 15px; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 5px; margin-bottom: 8px; text-decoration: none; color: #3498db; font-weight: 500; transition: background-color 0.2s, border-color 0.2s; }
.related-calculators-list li a:hover { background-color: #f0f0f0; border-color: #ddd; }