/* Scoped CSS for the Photo Time Calculator */
#photoTimeCalculator,
#photoTimeCalculator *,
#photoTimeCalculator *:before,
#photoTimeCalculator *:after {
    box-sizing: border-box; 
}

#photoTimeCalculator {
    font-family: Arial, sans-serif; 
    border: 1px solid #ccc;
    padding: 1.5625rem; 
    margin: 1.25rem auto; 
    max-width: 38rem; 
    width: 100%; 
    background-color: #ffffff;
    border-radius: 0.5rem; 
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    line-height: 1.6; 
    overflow-wrap: normal !important; 
    word-wrap: normal !important;     
    word-break: normal !important;    
}
#photoTimeCalculator h2 {
    text-align: center;
    color: #333;
    margin-top: 0;
    margin-bottom: 1.5625rem; 
    font-size: 1.6rem; 
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator div.input-group { 
    margin-bottom: 1.125rem; 
}
#photoTimeCalculator label { /* Applies to both "Select City" and "Select Date" labels */
    display: block;
    margin-bottom: 0.375rem; 
    color: #555;
    font-weight: bold;
    font-size: 0.95rem; 
    overflow-wrap: normal !important; 
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator select#citySelect_calc, /* Target the select specifically */
#photoTimeCalculator input[type="date"],
#photoTimeCalculator button { /* General button styling */
    width: 100%;
    padding: 0.75rem; 
    border: 1px solid #ddd; 
    border-radius: 0.3125rem; 
    font-size: 1rem; 
    background-color: #fff;
    color: #333; 
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator input[type="date"]#datePicker_calc { /* Target date picker specifically */
    line-height: normal; 
    flex-grow: 1; /* Allow date picker to take available space in .date-controls */
}
#photoTimeCalculator .date-controls { 
    display: flex;
    gap: 0.5rem; 
    align-items: center; 
    /* margin-bottom is handled by the parent .input-group */
}
#photoTimeCalculator .date-controls button#jumpToTodayButton_calc { 
    width: auto; /* Override general button width: 100% */
    padding: 0.625rem 0.75rem; 
    font-size: 0.9rem; 
    background-color: #6c757d;
    color: white;
    flex-shrink: 0;
    white-space: nowrap; 
}
#photoTimeCalculator .date-controls button#jumpToTodayButton_calc:hover { 
    background-color: #5a6268;
}

#photoTimeCalculator button#calculateButton_calc { 
    background-color: #0073aa;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 0.5rem; /* Add some space above the main calculate button */
}
#photoTimeCalculator button#calculateButton_calc:hover { 
    background-color: #005a87;
}
#photoTimeCalculator button:active { 
    transform: translateY(1px);
}
#photoTimeCalculator button#calculateButton_calc:disabled { 
    background-color: #94cde7;
    cursor: not-allowed;
}
#photoTimeCalculator .date-controls button#jumpToTodayButton_calc:disabled { 
     background-color: #adb5bd;
     cursor: not-allowed;
}

#photoTimeCalculator #resultsContainer_calc { 
    margin-top: 1.5625rem; 
    padding-top: 1.25rem; 
    border-top: 2px solid #0073aa; 
}
#photoTimeCalculator #resultsContainer_calc h3 { 
    margin-top: 0;
    color: #333;
    font-size: 1.3rem; 
    margin-bottom: 0.9375rem; 
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator #resultsContainer_calc p { 
    margin: 0.75rem 0; 
    color: #333;
    font-size: 1rem; 
    display: flex; 
    align-items: center; 
    overflow-wrap: normal !important; 
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator .result-category-label {  
    font-weight: bold;
    margin-right: 0.6em; 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: auto; 
    min-width: 0;   
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important;    
    word-break: break-word !important; 
    white-space: normal !important; 
}
#photoTimeCalculator .result-time { 
    background-color: #e9f5ff;
    padding: 0.125rem 0.3125rem; 
    border-radius: 0.1875rem; 
    white-space: nowrap; 
    flex-shrink: 0; 
}
#photoTimeCalculator .error-message { 
    color: #d9534f;
    font-weight: bold;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 0.625rem; 
    border-radius: 0.25rem; 
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator .reference-info { 
    margin-top: 1.25rem; 
    font-size: 0.9rem; 
    color: #777;
    text-align: center;
    display: block; 
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator .reference-info:last-of-type { 
     font-size: 0.8rem;
}
#photoTimeCalculator .section-title { 
    font-weight:bold;
    margin-top: 1.25rem; 
    margin-bottom: 0.3125rem; 
    color:#005a87;
    font-size: 1.1rem; 
    display: block; 
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
}
#photoTimeCalculator .color-indicator { 
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.6em;
    border: 1px solid #ccc;
    vertical-align: middle; 
    flex-shrink: 0; 
}

#photoTimeCalculator #sunPathChartContainer_calc { 
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 0.5rem;
}
#photoTimeCalculator #sunPathChartContainer_calc svg { 
    display: block;
    width: 100%;
    height: auto; 
}
#photoTimeCalculator #sunPathChartContainer_calc svg text { 
    overflow-wrap: normal !important; 
    word-wrap: normal !important;
    word-break: normal !important; 
    white-space: nowrap; 
}