.sales-calculator {
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.calculator-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
}
.calculator-icon {
width: 2rem;
height: 2rem;
color: #4f46e5;
}
.calculator-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.input-group label {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.input-group label::after {
content: " *";
color: #ef4444;
}
.input-group input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
transition: all 0.2s;
}
.input-group input:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.calculate-button {
width: 100%;
padding: 0.75rem;
background: #4f46e5;
color: white;
border: none;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.calculate-button:hover {
background: #4338ca;
}
.error-message {
margin: 1rem 0;
padding: 0.75rem;
background-color: #fee2e2;
border: 1px solid #ef4444;
border-radius: 0.5rem;
color: #b91c1c;
font-size: 0.875rem;
}
.result-display {
margin-top: 1.5rem;
padding: 1.5rem;
background: linear-gradient(to right, #eef2ff, #e0e7ff);
border-radius: 0.75rem;
text-align: center;
}
.result-display h3 {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
margin: 0 0 0.5rem 0;
}
.result-amount {
font-size: 1.875rem;
font-weight: 700;
color: #4f46e5;
margin: 0.5rem 0;
}
.result-display p {
font-size: 0.875rem;
color: #6b7280;
margin: 0;
}