.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.required-field::after {
    content: " *";
    color: #DF4661;
    font-weight: bold;
}

/* Updated Parking Calculator Styles - Full Width in Flexbox Container */
.parking-calculator-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 1 100% !important;
}

.parking-calculator {
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #fff;
    padding: 2rem 2rem 0 2rem !important;
    margin: 0 !important;
    display: block !important;
}

.parking-calculator h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.calculator-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
}

.parking-option-row {
    display: flex;
    align-items: center !important;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-right: 0 !important;
}

.parking-option-container {
    flex: 0 0 auto;
    width: calc(50% - 0.75rem);
    box-sizing: border-box !important;
}

.calculator-bottom {
    display: flex;
    align-items: center !important;
    margin-left: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .calculator-form {
        grid-template-columns: 1fr;
    }
    
    .parking-option-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .parking-option-container {
        width: 100%;
        max-width: none;
    }
    
    .calculator-bottom {
        margin-top: 1rem;
        margin-left: 0 !important;
        width: 100%;
    }
    
    .estimate-button {
        width: 100%;
    }
}

.date-time-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-group {
    margin-bottom: 1.25rem;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #0F0F10;
    width: 100% !important;
}

.input-wrapper {
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Force all inputs to have square corners */
input[type="date"].form-control,
input[type="time"].form-control,
select.form-control,
.form-control {
    width: 100% !important;
    padding: 0.75rem 1rem;
    background-color: #DEE2E8;
    border: 1px solid #75787B;
    border-radius: 0 !important;
    font-size: 0.95rem;
    color: #0F0F10;
    appearance: none;
    height: 50px;
    box-sizing: border-box !important;
}

/* Increase icon size for date and time inputs */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    transform: scale(1.2);
    margin-right: 0.25rem;
}

.select-wrapper .form-control {
    padding-right: 2.5rem;
}

/* Style native dropdown arrow */
select.form-control {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
}

/* Hide our custom icons - rely on browser defaults */
.calendar-icon, .clock-icon, .dropdown-icon {
    display: none !important;
}

/* Button styling */
.estimate-button {
    background-color: #1e3a5f !important;
    color: white !important;
    border: none !important;
    border-radius: 2rem !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s, color 0.2s !important;
    white-space: nowrap !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.estimate-button:hover {
    background-color: #DEE2E8 !important;
    color: #0F0F10 !important;
}

/* Result section - always visible */
.result-section {
    padding: 1.25rem 2rem;
    background-color: #e9f8ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -2rem -.90rem -2rem !important;
    border-top: 1px solid #75787B;
    width: calc(100% + 4rem) !important;
    box-sizing: border-box !important;
}

.result-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0F0F10;
}

.disclaimer {
    color: #0F0F10;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.result-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #000;
    margin-left: 1.5rem;
}

@media (max-width: 480px) {
    .result-section {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .result-amount {
        margin-left: 0;
        margin-top: 1rem;
        align-self: flex-end;
    }
}

.error-message {
    color: #DF4661;
    background: #FFDFE6;
    padding: 0.75rem;
    border-radius: 0;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Accessibility Focus Styles */
*:focus {
    outline: 2px solid #0088ff;
    outline-offset: 2px;
}

/* Focus Visible */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #0088ff;
    outline-offset: 2px;
}

/* Additional WCAG 2.1 AA Requirements */
/* High contrast mode support */
@media (forced-colors: active) {
    .form-control {
        border: 2px solid ButtonText;
    }
    
    .estimate-button {
        border: 2px solid ButtonText !important;
    }
    
    .result-section {
        border-top: 2px solid ButtonText;
    }
}

/* Skip navigation for keyboard users */
.skip-link {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.skip-link:focus {
    top: 0;
    left: 0;
    height: auto;
    width: auto;
    z-index: 999999;
    background: white;
    padding: 0.5rem 1rem;
}

/* Elementor-specific fixes for full width in flexbox container */
.elementor-widget-container .parking-calculator-wrapper,
.elementor-container .parking-calculator-wrapper,
.elementor-section .parking-calculator-wrapper,
.elementor-column .parking-calculator-wrapper,
.elementor-widget .parking-calculator-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

/* Fix for Firefox and other browsers that might handle flex differently */
#parking-calculator {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* Fix for Elementor flex containers */
.elementor-widget-container, 
.elementor-container,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* Media queries for different screen sizes */
@media (max-width: 1440px) {
    .parking-calculator {
        padding: 1.5rem 1.5rem 0 1.5rem !important;
    }
    
    .result-section {
        width: calc(100% + 3rem) !important;
        margin: 0 -1.5rem 0 -1.5rem !important;
    }
}

@media (max-width: 1024px) {
    .parking-calculator {
        padding: 1.25rem 1.25rem 0 1.25rem !important;
    }
    
    .result-section {
        width: calc(100% + 2.5rem) !important;
        margin: 0 -1.25rem 0 -1.25rem !important;
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 767px) {
    .parking-calculator {
        padding: 1rem 1rem 0 1rem !important;
    }
    
    .result-section {
        width: calc(100% + 2rem) !important;
        margin: 0 -1rem 0 -1rem !important;
        padding: 1rem;
    }
    
    .calculator-form {
        gap: 1rem;
    }
    
    .parking-option-row {
        gap: 1rem;
    }
}