/* ==========================================================
   CalclyWorld Age Calculator Stylesheet
========================================================== */


/* ==========================================================
   Part 2
   Header • Calculator Card • Form • Results
========================================================== */



/* ===========================
   Main Calculator Container
=========================== */

.container{

    width:min(700px,92%);

    margin:35px auto;

    padding:35px;

    background:var(--card);

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

    border-radius:20px;

    backdrop-filter:blur(12px);

    box-shadow:var(--shadow);

   transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;

}
.container:hover{

    transform:translateY(-2px);

}

/* ===========================
   Back Home Link
=========================== */

.back-home{

    text-align:center;

    margin-bottom:25px;

    font-weight:600;

}

/* ===========================
   Form
=========================== */

label{

    display:block;

    margin-bottom:10px;

    font-weight:700;

    color:var(--heading);

}

input[type="date"]{

    width:100%;

    padding:14px;

    border:1px solid #d1d5db;

    border-radius:12px;

    font-size:17px;

    background:#ffffff;

    appearance:none;

   -webkit-appearance:none;

    transition:.25s;

}

body.dark-mode input[type="date"]{

    background:#1f2937;

    color:#ffffff;

    border-color:#374151;

}

input[type="date"]:focus{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:2px;

}

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

button{

    width:100%;

    margin-top:22px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#ffffff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

   transition:
    background .3s ease,
    transform .3s ease,
    box-shadow .3s ease;

}

button:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(37,99,235,.25);

}

button:focus{

    outline:3px solid rgba(37,99,235,.35);

    outline-offset:3px;

}

/* ===========================
   Error Message
=========================== */

#error{

    margin-top:18px;

    text-align:center;

    color:var(--danger);

    font-weight:700;

}

/* ===========================
   Result Card
=========================== */

.result-card{

    margin-top:30px;

    padding:25px;

    border-radius:16px;

    background:rgba(37,99,235,.06);

    border:1px solid rgba(37,99,235,.15);

}

body.dark-mode .result-card{

    background:rgba(59,130,246,.08);

    border-color:rgba(59,130,246,.20);

}

.result-card h2{

    text-align:center;

    margin-bottom:18px;

}

.result-card p{

    margin-bottom:12px;

    font-size:17px;

}

/* ===========================
   Highlight Values
=========================== */

.result-value{

    color:var(--primary);

    font-weight:700;

}

body.dark-mode .result-value{

    color:#93c5fd;

}
/* ==========================================================
   Part 3
   Content • FAQ • Footer • Responsive
========================================================== */


/* ===========================
   Responsive
=========================== */

@media (max-width:900px){


    .container{

        width:94%;

        padding:30px;

    }

}

/* ===========================
   Print
=========================== */

@media print{

    button,
    footer{

        display:none;

    }

    body{

        background:#ffffff;

        color:#000000;

    }

    .container{

        box-shadow:none;

        border:1px solid #cccccc;

    }

}
.content-section{
    max-width:900px;
    margin:auto;
    padding:25px 20px;
}
.calculator-footer{
    margin-top:40px;
    padding:25px;
    text-align:center;
    background:#f5f5f5;
}

body.dark-mode .calculator-footer{
    background:#0f172a;
}

.footer-note{
    font-size:14px;
}