/* weight-converter.css */

.converter-container {
    /* Ensures direct children of converter-container stack vertically */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced space between stacked elements */
    align-items: stretch; /* Ensures items take full available width within the flex container */
    
    /* Basic styling for the converter container itself, if not already present */
    padding: 15px; /* Reduced padding of the container */
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    max-width: 700px; /* Optional: Constrain the overall width of the converter */
    margin: 20px auto; /* Centers the converter horizontally on the page */
}

.input-group {
    /* Ensures the input field and select dropdown within each input group stack vertically */
    display: flex;
    flex-direction: column;
    gap: 6px; /* Reduced space between input and select */
    width: 100%; /* Ensures the input group itself takes the full width of its parent (.converter-container) */
}

.input-group input[type="number"],
.input-group input[type="text"],
.input-group select {
    width: 100%; /* Makes the input and select elements take the full width of their parent (.input-group) */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* Includes padding and border in the element's total width */
}

.swap-button-container {
    width: 100%; /* Ensures the swap button container takes the full width */
    text-align: center; /* Centers the button if it doesn't naturally fill the width */
    margin-top: 8px; /* Reduced margin */
    margin-bottom: 8px; /* Reduced margin */
}

.swap-button-container button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    width: 100%; /* Makes the button take the full width of its container */
    box-sizing: border-box;
    max-width: 200px; /* Optional: Limits the maximum width of the button for better aesthetics */
}

.swap-button-container button:hover {
    background-color: #0056b3;
}

.conversion-result {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 15px; /* Reduced margin */
    color: #333;
    width: 100%; /* Ensures the result paragraph takes the full width */
    background-color: #e6f7ff; /* Light blue background color */
    padding: 12px; /* Reduced padding */
    border-radius: 8px; /* Rounded corners for the background */
    box-sizing: border-box; /* Include padding in the element's total width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for a 3D effect */
}