/* Container for the entire calculator */
#weight-calculator {
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    border: 3px solid #ccc;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    display: flex;
    gap: 20px; /* Space between columns */
    align-items: center; /* Vertically align columns */
    flex-direction: row; /* Ensure columns are side by side */
}

/* Common styles for both columns */
#weight-calculator .column {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Left column (input form) */
#weight-calculator .left-column {
    flex: 1;
    max-width: 33%;
    text-align: center;
}

/* Right column (material weights) */
#weight-calculator .right-column {
    flex: 2;
    max-width: 66%;
    text-align: center;
}

/* Form styles */
#weight-calculator form {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Two-column layout for labels and inputs */
    align-items: center;
    gap: 10px;
}

/* Label styles */
#weight-calculator label {
    font-weight: bold;
    margin-right: 10px;
}

/* Input and button styles */
#weight-calculator input[type=number],
#weight-calculator select,
#weight-calculator button {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
    min-width: 120px; /* Set a minimum width for input fields */
}

/* Button styles */
#weight-calculator button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    grid-column: span 2; /* Make button span both columns */
}

/* Button hover effect */
#weight-calculator button:hover {
    background-color: #3e8e41;
}

/* Error message styles */
.error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
    grid-column: span 2; /* Make error span both columns */
}

/* Table styles for material weights */
.material-list {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.material-list th,
.material-list td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    min-width: 60px; /* Reduce minimum width for table columns */
}

.material-list th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Container for the thumbs-up button and count */
#thumbs-up-container {
    text-align: center;
    margin-bottom: 20px;
}

#thumbs-up-button {
    font-size: 16px;
    cursor: pointer;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 25px; /* Completely rounded ends */
    background-color: #f44336; /* Red color */
    color: white; /* Ensure text color is white for better contrast */
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    box-shadow: 0 4px #999; /* 3D effect */
}

#thumbs-up-button:hover {
    background-color: #e53935; /* Slightly darker red on hover */
    box-shadow: 0 4px #666; /* Darker shadow on hover */
}

#thumbs-up-button:active {
    background-color: #4CAF50; /* Green when clicked */
    box-shadow: 0 2px #666; /* Reduce shadow size when clicked */
    transform: translateY(2px); /* Move down 2px when clicked for pressed effect */
}

#thumbs-up-button.selected {
    background-color: #4CAF50; /* Green when selected */
    color: white;
}

#thumbs-up-count {
    font-size: 12px;
    margin-top: 5px;
}

/* Last updated text */
#last-updated {
    text-align: right;
    font-size: 12px;
    margin-top: 10px;
    color: #888;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    width: 100%;
}

/* Media query for tablets */
@media (max-width: 768px) {
    #weight-calculator {
        flex-direction: column; /* Stack columns vertically */
        align-items: stretch; /* Stretch items to fill container */
    }

    #weight-calculator .left-column,
    #weight-calculator .right-column {
        max-width: 100%;
    }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
    #weight-calculator {
        flex-direction: column; /* Stack columns vertically */
        align-items: stretch; /* Stretch items to fill container */
        padding: 10px; /* Reduce padding for mobile */
    }

    #weight-calculator .left-column,
    #weight-calculator .right-column {
        max-width: 100%;
        padding: 5px; /* Reduce padding for mobile */
    }

    #thumbs-up-container {
        margin-bottom: 10px; /* Reduce margin for mobile */
        text-align: center; /* Ensure text alignment */
        width: 100%; /* Full width */
    }

    #thumbs-up-button {
        padding: 5px 10px; /* Reduce padding for mobile */
        font-size: 14px; /* Smaller font size for mobile */
    }

    #thumbs-up-count {
        font-size: 10px; /* Smaller font size for mobile */
    }

    #last-updated {
        font-size: 10px; /* Smaller font size for mobile */
        padding-right: 5px; /* Reduce padding for mobile */
    }

    /* Adjust table styles for mobile */
    .material-list th,
    .material-list td {
        padding: 4px; /* Reduce padding for table cells */
        font-size: 12px; /* Smaller font size for table cells */
        min-width: 60px; /* Further reduce minimum width for table columns */
    }

    .material-list {
        font-size: 12px; /* Smaller font size for table */
    }
}