/* custom.css */

/* Styles for the main container of the converter tool */
.converter-container {
    background-color: #ffffff; /* White background (bg-white) */
    padding: 2rem; /* Padding inside the container (p-8) */
    border-radius: 0.75rem; /* Rounded corners (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 effect (shadow-lg) */
    width: 100%; /* Takes full width (w-full) */
    max-width: 48rem; /* Increased from 32rem (max-w-lg) to 48rem (max-w-2xl) */
    border: 2px solid #22794e; /* Emerald-300 border (border-2 border-emerald-300) */
}

/* Styles for the main heading */
.converter-heading {
    font-size: 2.25rem; /* Large font size (text-4xl) */
    font-weight: 700; /* Bold font weight (font-bold) */
    color: #22794e; /* Dark emerald color (text-emerald-900) */
    margin-bottom: 1.5rem; /* Space below heading (mb-6) */
    text-align: center; /* Center align text (text-center) */
}

/* Styles for labels (e.g., "Enter Amount:") */
.form-label {
    display: block; /* Makes label take full width (block) */
    color: #22794e; /* Emerald-700 color (text-emerald-700) */
    font-size: 0.875rem; /* Small font size (text-sm) */
    font-weight: 600; /* Semi-bold font weight (font-semibold) */
    margin-bottom: 0.5rem; /* Space below label (mb-2) */
}

/* Common styles for input fields, textarea, and select dropdown */
.form-input,
.form-textarea,
.form-select {
    width: 100%; /* Takes full width (w-full) */
    border: 1px solid #22794e; /* Emerald-300 border (border border-emerald-300) */
    border-radius: 0.5rem; /* Rounded corners (rounded-lg) */
    background-color: #ffffff; /* Light emerald background (bg-emerald-50) - CHANGED FROM #f0fdf4 */
    color: #22794e; /* Dark emerald text color (text-emerald-900) */
    margin-bottom: 0.5rem; /* Space below label (mb-2) */

    
}

/* Specific padding for input field */
.form-input {
    padding: 0.75rem; /* Padding inside input (p-3) */
}

/* Specific padding and resize for textarea */
.form-textarea {
    padding: 0.75rem; /* Padding inside textarea (p-3) */
    resize: none; /* Prevents manual resizing by user (resize-none) */
}

/* Specific padding for select dropdown */
.form-select {
    padding-top: 0.5rem; /* Vertical padding (py-2) */
    padding-bottom: 0.5rem; /* Vertical padding (py-2) */
    padding-left: 0.25rem; /* Horizontal padding (px-1) */
    padding-right: 0.25rem; /* px-1 */
}

/* Focus styles for input, textarea, and select */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none; /* Removes default outline (focus:outline-none) */
    box-shadow: 0 0 0 2px rgba(110, 180, 53, 0.1); /* Emerald-500 ring effect (focus:ring-2 focus:ring-emerald-500) */
    border-color: #54b441; /* Optional: make border color match ring on focus */
}

/* Container for buttons */
.button-group {
    display: flex; /* Enables flexbox for buttons (flex) */
    flex-direction: column; /* Stacks buttons vertically by default (flex-col) */
    gap: 1rem; /* Space between buttons (gap-4) */
    margin-bottom: .5rem; /* Space below button group (mb-6) */
    margin-TOP: .5rem; /* Space below button group (mb-6) */

}

/* Responsive adjustment for buttons on small screens and up */
@media (min-width: 640px) { /* Applies from small screens (sm:) */
    .button-group {
        flex-direction: row; /* Arranges buttons horizontally (sm:flex-row) */
    }
}

/* Common styles for all buttons */
.btn {
    flex: 1; /* Allows buttons to grow and shrink equally (flex-1) */
    padding: 0.75rem 1.5rem; /* Padding inside buttons (py-3 px-6) */
    border-radius: 0.5rem; /* Rounded corners (rounded-lg) */
    font-weight: 600; /* Semi-bold font weight (font-semibold) */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effects (transition duration-300) */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Shadow effect (shadow-md) */
    color: #ffffff; /* White text color (text-white) */
}

/* Specific styles for the Convert button */
.btn-convert {
    background-color: #22794e; /* Emerald-600 background (bg-emerald-600) */
}

.btn-convert:hover {
    background-color: #54b441; /* Darker emerald on hover (hover:bg-emerald-700) */
}

/* Specific styles for the Copy button */
.btn-copy {
    background-color: #22794e; /* Emerald-500 background (bg-emerald-500) */
}

.btn-copy:hover {
    background-color: #54b441; /* Darker emerald on hover (hover:bg-emerald-600) */
}

/* Styles for the temporary message box */
.message-box {
    position: fixed; /* Fixed position relative to viewport */
    top: 20px; /* 20px from the top */
    left: 50%; /* Centered horizontally */
    transform: translateX(-50%); /* Adjusts for exact centering */
    background-color: #54b441; /* Emerald green background */
    color: white; /* White text color */
    padding: 20px 20px; /* Padding inside the box */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 1000; /* Ensures it appears on top of other content */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Smooth fade in/out effect */
}

/* Class to show the message box */
.message-box.show {
    opacity: 1; /* Makes the message box visible */
}

/* Styles for the specific page wrapper */
.converter-page-wrapper {
    background-color: #ffffff !important; /* Changed from #f0fdf4 to white with !important */
    min-height: 100vh; /* Ensures it takes full viewport height */
    display: flex; /* Enables flexbox for centering */
    align-items: center; /* Centers items vertically */
    justify-content: center; /* Centers items horizontally */
    padding: 0.1rem 0.1rem; /* Adjusted padding: 1rem top/bottom, 0.5rem left/right */
    width: 100%; /* Ensures it takes full width */
}

/* Specific override for Elementor container background */
.elementor-element-885bd66, /* Targets the HTML widget's direct wrapper */
.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-inner-section,
.elementor-container {
    background-color: #ffffff !important; /* Force white background for these Elementor elements */
}