/* Basic styling for the Room Tile Calculator */
.room-tile-calculator {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-2xl */
    border: 1px solid #e2e8f0; /* border border-gray-200 */
    max-width: 37rem; /* max-w-md */
    width: 100%;
    margin: 2rem auto; /* Center the calculator on the page */
    font-family: "Inter", sans-serif; /* font-inter */
}

.calculator-title {
    font-family: Cormorant Garamond;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: left;
    color: #6B4B3E !important;
    margin-bottom: 1.5rem; /* mb-6 */
}

.input-group {
    margin-bottom: 1rem; /* mb-4 */
}

.input-group label {
    display: block;
    font-family: Inter;
    font-weight: 400;
    font-style: Medium;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #374151;
    margin-bottom: 0.5rem; /* mb-2 */
}

.input-group input[type="number"] {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    -webkit-appearance: none; /* appearance-none */
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #e2e8f0; /* border */
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    color: #6B4B3E; /* text-gray-700 */
    line-height: 1.25; /* leading-tight */
    outline: none; /* focus:outline-none */
    transition: all 0.2s ease-in-out; /* transition duration-200 ease-in-out */
    font-size: 16px !important;
}

.input-group input[type="number"]:focus {
    border-color: transparent; /* focus:border-transparent */
    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.5); /* focus:ring-2 focus:ring-blue-400 */
}

.calculate-button {
    width: 100%;
    background-color: #6B4B3E; /* bg-blue-600 */
    color: #ffffff; /* text-white */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    cursor: pointer;
    outline: none; /* focus:outline-none focus:shadow-outline */
    transform: scale(1); /* transform */
    transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
}

.calculate-button:hover {
    background-color: #F7F5F3; /* hover:bg-blue-700 */
    color: #6B4B3E;
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #6B4B3E;
}

button:focus {
    background-color: #F7F5F3 !important; /* hover:bg-blue-700 */
    color: #6B4B3E !important;
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #6B4B3E;
}

/* COMBINED AND CORRECTED STYLES FOR RESULT AND ERROR AREAS */
/* These elements should be hidden by default */
#calculator-result, /* Targeting by ID is more specific */
.result-area { /* Also target by class to be safe, but the ID should be enough */
    display: none; /* This is the key change */
    margin-top: 1.5rem; /* mt-6 */
    padding: 1.25rem; /* p-5 */
    background-color: #fef2f2; /* bg-green-50 (original color from your .result-area) */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #bbf7d0; /* border border-green-200 */
    text-align: center;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* shadow-inner */
}

#calculator-error, /* Targeting by ID is more specific */
.error-area { /* Also target by class to be safe */
    display: none; /* This is the key change */
    margin-top: 1rem; /* mt-4 */
    text-align: center;
    color: #dc2626; /* text-red-600 */
    padding: 0.5rem; /* p-2 */
    background-color: #fef2f2; /* bg-red-50 (original color from your .error-area) */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #fecaca; /* border border-red-200 */
    font-size: 0.875rem; /* text-sm */
}

/* Specific styling for messages within the result/error areas */
.error-message {
    color: inherit; /* Inherit color from parent .error-area */
    padding: 0; /* Remove redundant padding if already on parent */
    background-color: transparent; /* Remove redundant background if already on parent */
    border: none; /* Remove redundant border if already on parent */
    font-size: inherit; /* Inherit font-size from parent */
}

.success-message {
    font-size: 1.125rem; /* text-lg */
    color: #166534; /* text-green-800 */
    font-weight: 600; /* font-semibold */
}

.success-message strong {
    font-family: Cormorant Garamond;
    font-size: 1.5rem; /* text-2xl */
    font-weight: 800; /* font-extrabold */
    color: #6B4B3E; /* text-green-900 */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .room-tile-calculator {
        padding: 1.5rem;
    }
    .calculator-title {
        font-size: 2rem; /* Adjusted for smaller screens */
    }
}