/* Styles for Fluid Oz to mL Quick Converter */
.calcufacil-fluid_oz_to_ml_converter.calcufacil-container.enhanced-flozml-calc {
    max-width: 550px; /* Compact calculator */
    margin: 25px auto;
    background: #f7fcff; /* Light, airy blue */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-family: 'Arial', sans-serif;
}

.calcufacil-fluid_oz_to_ml_converter .calculator-form-compact {
    text-align: center; /* Center content for compact layout */
}

.calcufacil-fluid_oz_to_ml_converter .calculator-form-compact h3 {
    font-size: 20px; color: #3477a8; /* Softer blue */
    margin-top:0; margin-bottom: 10px; font-weight: 600;
}
.calcufacil-fluid_oz_to_ml_converter .calculator-form-compact .description {
    font-size: 14px; color: #5a8cb0; margin-bottom: 20px; line-height: 1.5;
}

.calcufacil-fluid_oz_to_ml_converter .form-inline-group {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    justify-content: center;
    align-items: flex-end; /* Align items to the bottom for better appearance */
    gap: 15px; /* Space between input groups and button */
    margin-bottom: 20px;
}

.calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group {
    display: flex;
    flex-direction: column; /* Label on top of input/select */
    align-items: flex-start; /* Align labels to the left */
    margin-bottom: 0; /* Remove bottom margin as gap handles it */
}
.calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group label {
    font-weight: 500; color: #4a789d; margin-bottom: 5px; font-size: 13px;
}
.calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group input[type="text"],
.calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group select {
    padding: 9px; border: 1px solid #c0d0e0; border-radius: 4px;
    font-size: 14px; box-sizing: border-box;
    min-width: 120px; /* Ensure they don't get too small */
}
.calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group input[type="text"] {
    max-width: 150px;
}


.calcufacil-fluid_oz_to_ml_converter button.compact-submit-button {
    background: #3477a8; color: #fff; padding: 10px 18px; border: none; border-radius: 5px;
    cursor: pointer; font-size: 14px; font-weight: bold;
    transition: background-color 0.2s ease;
    height: 38px; /* Match input height roughly */
}
.calcufacil-fluid_oz_to_ml_converter button.compact-submit-button:hover { background: #2a608a; }

.calcufacil-fluid_oz_to_ml_converter .flozml-result-display {
    margin-top: 20px;
    padding: 15px;
    background-color: #e9f5ff;
    border: 1px solid #c3d9ec;
    border-radius: 6px;
}
.calcufacil-fluid_oz_to_ml_converter .flozml-result-display p {
    font-size: 1.1em; color: #3477a8; margin: 0 0 8px 0;
}
.calcufacil-fluid_oz_to_ml_converter .calculated-value-box-flozml {
    font-size: 2em; font-weight: bold; color: #1e5277;
    padding: 10px; background-color: #fff; border-radius: 4px;
    display: inline-block; border: 1px solid #c3d9ec;
}
.calcufacil-fluid_oz_to_ml_converter .conversion-factors-note {
    margin-top: 10px; font-size: 0.8em; color: #777;
}
.calcufacil-fluid_oz_to_ml_converter .conversion-factors-note p { margin: 0; }


.calcufacil-fluid_oz_to_ml_converter .initial-message.compact-initial-message {
    text-align: center; padding: 15px; background-color: #f0f8ff;
    border: 1px dashed #d1e0ec; border-radius: 5px; margin-top: 20px; color: #5a8cb0;
    font-size: 0.95em;
}

@media (max-width: 500px) {
    .calcufacil-fluid_oz_to_ml_converter .form-inline-group {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Make them full width */
    }
    .calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group input[type="text"],
    .calcufacil-fluid_oz_to_ml_converter .input-group.compact-input-group select {
        max-width: none; /* Allow full width when stacked */
        width: 100%;
    }
     .calcufacil-fluid_oz_to_ml_converter button.compact-submit-button {
        width: 100%;
    }
}