/* ========================================
   CALCULATOR PAGE — Specific Styles
   ======================================== */

.calculator-wrapper {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

/* Calc Tabs */
.calc-tabs {
    display: flex;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
}

.calc-tab {
    flex: 1;
    padding: var(--space-4);
    text-align: center;
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--neutral-500);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all var(--transition-fast);
}

.calc-tab.active {
    color: var(--primary-700);
    border-bottom-color: var(--primary-500);
    background: white;
}

/* Calc Input Area */
.calc-inputs {
    padding: var(--space-10);
}

.calc-input-group {
    margin-bottom: var(--space-8);
}

.calc-input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.calc-input-label {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--neutral-700);
}

.calc-input-field {
    display: flex;
    align-items: center;
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
}

.calc-input-field span {
    font-weight: 600;
    color: var(--neutral-500);
    margin-right: var(--space-2);
}

.calc-input-field input {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary-700);
    width: 120px;
    text-align: right;
}

/* Calc Range Slider (larger than home page) */
.calc-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: var(--neutral-200);
    outline: none;
    margin-top: var(--space-2);
}

.calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-500);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.calc-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--neutral-400);
    margin-top: var(--space-2);
}

/* Calc Result Area */
.calc-results {
    background: var(--bg-gradient);
    padding: var(--space-10);
    color: white;
    display: flex;
    flex-direction: column;
}

.result-card {
    text-align: center;
    margin-bottom: var(--space-8);
}

.result-label {
    font-size: var(--text-sm);
    color: var(--primary-200);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.result-value {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.result-breakdown {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    margin-top: var(--space-6);
}

.breakdown-item {
    text-align: left;
}

.breakdown-item.right {
    text-align: right;
}

.breakdown-item span {
    display: block;
    font-size: var(--text-xs);
    color: var(--primary-200);
    margin-bottom: 2px;
}

.breakdown-item strong {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
}

.breakdown-item .text-success {
    color: #34D399;
}

/* Chart container */
.chart-container {
    flex: 1;
    min-height: 250px;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container canvas {
    max-height: 100%;
}

/* Schedule Table */
.schedule-table-wrapper {
    overflow-x: auto;
    margin-top: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.schedule-table th, .schedule-table td {
    padding: var(--space-3) var(--space-4);
    text-align: right;
    border-bottom: 1px solid var(--neutral-100);
}

.schedule-table th:first-child, .schedule-table td:first-child {
    text-align: left;
}

.schedule-table th {
    background: var(--neutral-50);
    font-weight: 600;
    color: var(--neutral-600);
    font-size: var(--text-sm);
}

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

@media (max-width: 480px) {
    .calc-inputs, .calc-results {
        padding: var(--space-6);
    }
    
    .result-value {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 480px) {
    .calc-input-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .calc-input-field {
        width: 100%;
    }
    .calc-input-field input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .result-breakdown {
        flex-direction: column;
        gap: var(--space-4);
    }
    .breakdown-item {
        text-align: left !important;
    }
}

.chart-container { min-width: 0; width: 100%; }
.calc-results { min-width: 0; }
.calculator-wrapper { min-width: 0; }