/* Simple Calculator specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f3e8ff 100%); /* Light Blue -> Light Indigo -> Light Purple */
    display: flex; /* Ensure body uses flex */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    min-height: 100vh; /* Ensure full viewport height */
}

/* Style the tool title with a different gradient */
.gradient-text-calc {
    background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6); /* Blue -> Indigo -> Purple */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem; /* Add slight space below for visual balance */
}

/* Calculator specific container adjustments */
.calculator-wrapper {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(209, 213, 219, 0.5);
    padding: 2rem;
    border-radius: 1rem; /* More rounded */
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Softer shadow */
    position: relative; /* For absolute positioning of back link */
}

/* Display Screen Styling */
.display-screen {
    font-family: 'Orbitron', sans-serif; /* Digital-style font */
    background-color: #1f2937; /* Darker gray */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    min-height: 70px; /* Ensure consistent height */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    word-break: break-all; /* Prevent long numbers from overflowing */
}

/* General Button Styling */
.btn-calc {
    padding: 1rem 0.5rem; /* Adjusted padding */
    font-weight: 500; /* medium */
    border-radius: 0.5rem; /* 8px */
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, transform 0.1s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* Make buttons square-ish (adjust if needed) */
    font-size: 1.25rem; /* Adjust font size as needed */
}

.btn-calc:active {
    transform: scale(0.96);
}

/* Specific button styles (using Tailwind in HTML, but could define here) */
.btn-calc.number {
    /* background-color: #4b5563; */ /* Tailwind gray-600 */
}

.btn-calc.operator {
     /* background-color: #f97316; */ /* Tailwind orange-500 */
}

/* Zero button span */
.btn-calc[data-number="0"] {
    grid-column: span 2;
    aspect-ratio: auto; /* Allow zero button to be wider */
}

/* Back link adjustments */
.back-link {
    /* Ensure it doesn't overlap content too much */
    /* Styling defined in common styles.css */
}