/**
 * ============================================================
 * MoneyBull Calculator
 * Calculator Layout Styles
 * ------------------------------------------------------------
 * Calculator Specific UI
 *
 * Responsibilities
 * - Calculator Card Layout
 * - Form Structure
 * - Button Group
 * - Chart Container
 * ============================================================
 */






/* ============================================================
   Calculator Card
============================================================ */


.calculator-card {


    position:
        relative;



    margin-top:
        var(--space-8);



    padding:
        var(--space-8);



    background:
        var(--color-surface);



    border:

        1px solid var(--color-border);



    border-radius:
        var(--radius-xl);



    box-shadow:
        var(--shadow-card);



    overflow:
        hidden;



    transition:

        transform var(--transition-normal),
        box-shadow var(--transition-normal);



}







.calculator-card::before {


    content:
        "";



    position:
        absolute;



    top:
        0;



    left:
        0;



    width:
        100%;



    height:
        5px;



    background:
        var(--gradient-primary);



}







.calculator-card:hover {


    transform:
        translateY(-2px);



    box-shadow:
        var(--shadow-hover);



}








/* ============================================================
   Calculator Header
============================================================ */


.section-title {


    margin-bottom:
        var(--space-8);



}







.title-badge {


    display:
        inline-flex;



    align-items:
        center;



    padding:

        var(--space-2)
        var(--space-3);



    margin-bottom:
        var(--space-3);



    border-radius:
        var(--radius-full);



    background:
        var(--color-primary-light);



    color:
        var(--color-primary-dark);



    font-size:
        var(--font-size-xs);



    font-weight:
        var(--font-weight-bold);



}







.section-title h2 {


    margin-bottom:
        var(--space-3);



    font-size:
        var(--font-size-2xl);



    font-weight:
        var(--font-weight-bold);



    letter-spacing:
        -0.03em;



}







.section-title p {


    color:
        var(--color-text-secondary);



    line-height:
        1.6;



}








/* ============================================================
   Calculator Form Layout
============================================================ */


.calculator-form {


    display:
        grid;



    grid-template-columns:
        repeat(2, 1fr);



    gap:
        var(--space-5);



}








/* ============================================================
   Calculator Input Area
============================================================ */


.calculator-form .form-group {


    padding:
        var(--space-5);



    background:

        var(--color-background-soft);



    border-radius:
        var(--radius-lg);



    border:

        1px solid transparent;



    transition:

        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);



}







.calculator-form .form-group:hover {


    transform:
        translateY(-2px);



    border-color:
        var(--color-primary-light);



    box-shadow:
        var(--shadow-sm);



}







.calculator-form .form-group input {


    font-size:
        var(--font-size-lg);



    font-weight:
        var(--font-weight-semibold);



    text-align:
        right;



    background:
        var(--color-surface);



}







.calculator-form .form-group input:focus {


    transform:
        scale(1.01);



}








/* ============================================================
   Button Group
============================================================ */


.button-group {


    grid-column:
        1 / -1;



    display:
        flex;



    gap:
        var(--space-4);



    margin-top:
        var(--space-4);



}







.button-group .button {


    flex:
        1;



    height:
        54px;



    font-size:
        var(--font-size-base);



}

/* ============================================================
   Chart Section
============================================================ */


#chartSection {


    overflow:
        hidden;



}







.chart-container {


    width:
        100%;



    min-height:
        320px;



    margin-top:
        var(--space-5);



    padding:
        var(--space-5);



    background:
        var(--color-background-soft);



    border-radius:
        var(--radius-xl);



    border:

        1px solid var(--color-border);



    position:
        relative;



}







#investmentChart {


    display:
        block;



    width:
        100%;



    height:
        auto;



}








/* ============================================================
   Result Area Layout
============================================================ */


#resultSummary,
#resultSection,
#chartSection {


    margin-top:
        var(--space-6);



    animation:

        fadeUp var(--animation-duration) ease;



}







@keyframes fadeUp {


    from {


        opacity:
            0;



        transform:
            translateY(12px);



    }



    to {


        opacity:
            1;



        transform:
            translateY(0);



    }


}








/* ============================================================
   Summary Layout
============================================================ */


#resultSummary {


    position:
        relative;



}







#resultSummary .summary-main {


    min-height:
        180px;



}







#resultSummary .summary-value {


    word-break:
        break-all;



}








/* ============================================================
   Result Detail Layout
============================================================ */


#resultSection {


    overflow:
        hidden;



}







#resultSection h2 {


    display:
        flex;



    align-items:
        center;



    gap:
        var(--space-2);



}







.result-item strong {


    white-space:
        nowrap;



}








/* ============================================================
   Chart Description
============================================================ */


#chartSection h2 {


    margin-bottom:
        var(--space-2);



}







#chartSection .chart-description {


    margin-bottom:
        var(--space-5);



    color:
        var(--color-text-secondary);



}








/* ============================================================
   Mobile Calculator
============================================================ */


@media(max-width:768px){



    .calculator-card {


        padding:
            var(--space-5);



    }







    .calculator-form {


        grid-template-columns:
            1fr;



    }







    .button-group {


        flex-direction:
            column;



    }







    .button-group .button {


        width:
            100%;



    }







    .calculator-form .form-group {


        padding:
            var(--space-4);



    }







    .calculator-form .form-group input {


        font-size:
            var(--font-size-base);



    }







    .chart-container {


        padding:
            var(--space-3);



        min-height:
            240px;



    }



}








/* ============================================================
   Small Mobile
============================================================ */


@media(max-width:420px){



    .calculator-card {


        border-radius:
            var(--radius-lg);



    }







    .section-title h2 {


        font-size:
            var(--font-size-xl);



    }







    .chart-container {


        border-radius:
            var(--radius-md);



    }



}