/*
 * Custom Styles for Calc.io
 * Palette:
 * Primary: #6C63FF (Violet)
 * Secondary: #4CC9F0 (Cyan)
 * Background: #F8F9FA (Light Grey)
 * Surface: #FFFFFF (White)
 * Text: #212529 (Dark Grey)
*/

body {
    font-family: 'Poppins', sans-serif;
    background-color: #F8F9FA;
    color: #212529;
}

.navbar {
    transition: background-color 0.3s ease-in-out;
}

.navbar-brand {
    color: #6C63FF !important;
}

.hero-section {
    background: linear-gradient(45deg, rgba(108, 99, 255, 0.9), rgba(76, 201, 240, 0.9)), url('https://picsum.photos/seed/finance-hero/1600/900') no-repeat center center;
    background-size: cover;
    padding: 10rem 0;
    margin-top: 56px; /* Offset for fixed navbar */
}

.calculator-widget {
    background-color: #FFFFFF;
    color: #212529;
    border-radius: 0.75rem;
    padding: 2.5rem;
    margin-top: 2rem;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.form-range {
    --bs-primary: #6C63FF;
}

.form-range::-webkit-slider-thumb {
    background-color: #6C63FF;
}
.form-range::-moz-range-thumb {
    background-color: #6C63FF;
}
.form-range::-ms-thumb {
    background-color: #6C63FF;
}


.results-panel {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--bs-border-radius);
    padding: 2rem;
}

.interest-rates {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem;
    margin-top: 2rem;
}

.interest-rates h6 {
    margin-bottom: 1rem;
    font-weight: 600;
}

.rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.rate-item {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 0.25rem;
}

.rate-name {
    font-size: 0.85rem;
    color: #f8f9fa;
    display: block;
    margin-bottom: 0.25rem;
}

.rate-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0;
}


.results-panel h3 {
    color: #6C63FF;
}

section {
    padding: 5rem 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.fw-bold {
    font-weight: 600 !important;
}