:root {
    --primary: #cf9e00;
    /* Corporate Gold */
    --primary-dark: #b68b00;
    --accent: #f28c38;
    /* Corporate Orange */
    --accent-hover: #e07b2b;
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --text-main: #334155;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --white: #ffffff;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius: 3px;
    /* Corporate squared look */
}

@media (prefers-color-scheme: dark) {
    /* Optional: Keep a dark mode override if system preference demands it, 
       but primarily aiming for the light corporate look requested. 
       Can be removed if STRICT adherence to the golden site is needed always.
       For now, let's enforce the light corporate look as it's a specific brand request. */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Google Sans', 'Outfit', sans-serif;
    /* Fallback to Outfit if Google Sans not loaded */
}

body {
    background-color: var(--bg-color);
    min-height: 100vh;
    color: var(--text-main);
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow-x: hidden;
}

/* Background Blobs Removed for clean look */
.background-blobs {
    display: none;
}

.container {
    width: 100%;
    max-width: 1000px;
    z-index: 1;
}

.app-header {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

.app-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    /* Gold Heading */
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.app-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Grid Layout */
.calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Inputs */
.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(207, 158, 0, 0.2);
    background: var(--white);
}

.currency-symbol,
.unit-symbol {
    color: var(--text-muted);
    font-weight: 500;
}

.input-wrapper input {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: right;
    margin-left: 0.5rem;
}

.split-inputs {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.percentage-wrapper input {
    margin-left: 0;
    margin-right: 0.2rem;
}

/* Range Slider */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    outline: none;
    margin-top: 1rem;
    cursor: pointer;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* Sliders usually look better round even in square themes */
    background: var(--accent);
    cursor: pointer;
    transition: transform 0.2s;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: var(--accent-hover);
}

/* Results */
.result-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fafbfc;
    /* Slight contrast for result card */
}

.monthly-result {
    text-align: center;
    padding: 2.5rem 0;
    background: var(--primary);
    border-radius: var(--radius);
    color: var(--white);
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
}

.monthly-result .label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.monthly-result h2 {
    font-size: 3rem;
    margin: 0;
    color: var(--white);
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}

.breakdown h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    color: var(--text-muted);
    border-bottom: 1px solid #e2e8f0;
}

.cost-item span:last-child {
    font-weight: 600;
    color: var(--text-dark);
}

.divider {
    height: 1px;
    background: #cbd5e1;
    margin: 1.5rem 0;
}

.total {
    border-bottom: none;
    font-size: 1.2rem;
    background: #fefce8;
    /* Very light yellow highlight */
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid #fef08a;
    margin-top: 1rem;
}

.total span {
    font-weight: 700;
    color: var(--primary-dark);
}

.disclaimer p {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2rem;
    line-height: 1.5;
}

/* Button overrides if any JS adds buttons later */
button {
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--accent-hover);
}

/* Print Button */
.print-btn {
    width: 100%;
    margin-top: 1.5rem;
    background-color: var(--text-dark);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.print-btn:hover {
    background-color: var(--text-main);
}

/* Print Styles */
@media print {

    /* Hide everything unnecessary */
    .input-card,
    .app-header,
    .print-btn,
    .disclaimer,
    .background-blobs {
        display: none !important;
    }

    /* Reset layout for print */
    body {
        padding: 0;
        margin: 0;
        background-color: white !important;
        display: block;
    }

    .container {
        width: 100%;
        max-width: none;
        padding: 2cm;
        /* Standard print margin */
        margin: 0;
    }

    .calculator-grid {
        display: block;
        gap: 0;
    }

    .result-card {
        border: none;
        box-shadow: none;
        padding: 0;
        width: 100%;
    }

    .monthly-result {
        background: white !important;
        color: black !important;
        box-shadow: none;
        border: 2px solid #000;
        margin-bottom: 2rem;
        page-break-inside: avoid;
    }

    .monthly-result h2 {
        color: black !important;
    }

    .monthly-result .label {
        color: #666 !important;
    }

    .breakdown {
        page-break-inside: avoid;
    }

    .cost-item {
        border-bottom: 1px solid #ccc;
    }

    .total {
        background: none !important;
        border: 2px solid #000;
        color: black !important;
    }

    .total span {
        color: black !important;
    }

    /* Ensure text is distinct */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Add a title for the printout since we hid the header */
    .result-card::before {
        content: "Property Loan Repayment Schedule";
        display: block;
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 1rem;
        text-align: center;
        border-bottom: 2px solid black;
        padding-bottom: 1rem;
    }

    /* Reveal print-only details */
    .print-details {
        display: block !important;
        margin-bottom: 2rem;
        border-bottom: 2px solid black;
        padding-bottom: 1rem;
    }

    .print-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
    }

    .print-row span:last-child {
        font-weight: bold;
    }

    .result-card::after {
        content: "Generated by Eric Lau (REN 76299) Property Calculator";
        display: block;
        font-size: 0.8rem;
        color: #666;
        margin-top: 2rem;
        text-align: center;
        font-style: italic;
    }
}

/* Hide print details on screen */
.print-details {
    display: none;
}