/* Tip Calculator specific styles */

/* Different gradient for this tool page */
body {
    background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 50%, #fee2e2 100%); /* Light Amber -> Light Orange -> Light Red */
}

/* Style the tool title with a different gradient */
.gradient-text-tip {
    background: linear-gradient(to right, #f59e0b, #f97316, #ef4444); /* Amber -> Orange -> Red */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.25rem;
}

/* Input field focus */
.input-field:focus {
    border-color: #f97316; /* Orange-500 */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
}

/* Tip Percentage Buttons */
.tip-percent-btn {
    font-weight: 600; /* semibold */
    padding: 0.5rem 0.25rem; /* Adjust padding */
    font-size: 0.9rem;
    border: none;
}

.tip-percent-btn.active {
    background-color: #c2410c; /* Orange-800 */
    color: white;
}

/* Custom tip input alignment */
.tip-percent-input {
    font-size: 0.9rem;
    padding: 0.5rem 0.25rem;
}

/* Results section styling */
.results-section {
    background-color: #9a3412; /* Orange-800 */
    min-height: 300px; /* Ensure results section has decent height */
}

.result-value {
     line-height: 1.1; /* Adjust line height for large text */
     /* Add transition if needed for value changes */
}

#resetBtn {
    /* Styles handled by Tailwind, customize if needed */
}