/* style.css */

:root{

    --primary:#B76674;
    --secondary:#B78166;
    --accent:#B7AA66;

    --bg-dark:#141414;
    --bg-card:#1d1d1d;

    --text:#ffffff;
    --light-text:#d6d6d6;

}

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

/* BODY */

body{

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #181414,
        #241d1d,
        #2b241b
    );

    color:var(--text);

    padding:30px 15px 100px;

    overflow-x:hidden;
}

/* CONTAINER */

.container{
    max-width:1200px;
    margin:auto;
}

/* TOP BAR */

.top-bar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:25px;
}

/* TITLE */

.title-box h1{

    font-size:38px;
    font-weight:700;

    margin-bottom:8px;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--accent)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.title-box p{

    color:var(--light-text);

    font-size:15px;
}

/* CLOCK */

.live-clock{

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    padding:12px 18px;

    border-radius:16px;

    backdrop-filter:blur(12px);

    font-size:15px;
    font-weight:600;

    color:var(--light-text);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.3);
}

/* CARD */

.card{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:26px;

    overflow:hidden;

    backdrop-filter:blur(15px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.4);

    animation:fadeIn 1s ease;
}

/* TABLE */

.table-wrapper{
    overflow-x:auto;
}

table{

    width:100%;

    border-collapse:collapse;

    min-width:850px;
}

thead{

    background:
    rgba(255,255,255,0.06);
}

th{

    padding:20px;

    text-align:left;

    font-size:15px;
    font-weight:600;

    color:var(--text);
}

td{

    padding:18px 20px;

    border-top:
    1px solid rgba(255,255,255,0.06);
}

tbody tr{

    transition:0.3s ease;
}

tbody tr:hover{

    background:
    rgba(183,102,116,0.08);
}

/* APPLIANCE */

.appliance-name{

    display:flex;
    align-items:center;

    gap:14px;

    font-weight:500;
}

.appliance-name i{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary),
        var(--accent)
    );

    color:white;

    font-size:16px;

    box-shadow:
    0 8px 20px rgba(183,102,116,0.35);
}

/* INPUT */

input{

    width:110px;

    padding:12px 14px;

    border:none;
    outline:none;

    border-radius:14px;

    background:#151515;

    color:white;

    font-size:15px;
    font-weight:500;

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.3s;
}

input:focus{

    border-color:var(--secondary);

    box-shadow:
    0 0 20px rgba(183,129,102,0.35);

    transform:scale(1.03);
}

/* REMOVE ARROWS */

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button{

    -webkit-appearance:none;

    margin:0;
}

/* TOTAL */

.row-total{

    font-weight:700;

    color:var(--accent);

    font-size:16px;
}

/* SUMMARY */

.summary{

    margin-top:28px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:20px;
}

.summary-box{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:28px;

    text-align:center;

    backdrop-filter:blur(10px);

    transition:0.3s;

    box-shadow:
    0 12px 30px rgba(0,0,0,0.25);
}

.summary-box:hover{

    transform:
    translateY(-5px);
}

.summary-box h3{

    font-size:15px;

    font-weight:500;

    color:var(--light-text);

    margin-bottom:12px;
}

.summary-box p{

    font-size:34px;

    font-weight:700;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* BUTTONS */

.button-group{

    margin-top:30px;

    display:flex;

    gap:16px;

    flex-wrap:wrap;
}

button{

    border:none;
    outline:none;

    cursor:pointer;

    padding:15px 28px;

    border-radius:16px;

    font-size:15px;
    font-weight:600;

    display:flex;
    align-items:center;
    gap:10px;

    transition:0.3s ease;
}

/* CALCULATE BUTTON */

.calculate-btn{

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    box-shadow:
    0 10px 25px rgba(183,102,116,0.35);
}

.calculate-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 30px rgba(183,102,116,0.45);
}

/* RESET BUTTON */

.reset-btn{

    background:
    linear-gradient(
        135deg,
        #8d4c57,
        #6e4038
    );

    color:white;

    box-shadow:
    0 10px 25px rgba(110,64,56,0.35);
}

.reset-btn:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 15px 30px rgba(110,64,56,0.45);
}

/* FOOTER */

.footer{

    position:fixed;

    bottom:0;
    left:0;

    width:100%;

    background:
    rgba(20,20,20,0.95);

    border-top:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    padding:15px 20px;

    z-index:999;
}

.footer-content{

    max-width:1200px;

    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    color:var(--light-text);

    font-size:14px;
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#161616;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
        var(--primary),
        var(--secondary)
    );

    border-radius:20px;
}

/* ANIMATION */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* MOBILE */

@media(max-width:768px){

    body{
        padding:20px 10px 110px;
    }

    .title-box h1{
        font-size:28px;
    }

    .title-box p{
        font-size:13px;
    }

    .live-clock{
        width:100%;
        text-align:center;
    }

    table{
        min-width:700px;
    }

    th,
    td{
        padding:15px;
    }

    input{
        width:85px;
        font-size:14px;
    }

    .summary-box{
        padding:22px;
    }

    .summary-box p{
        font-size:28px;
    }

    button{
        width:100%;
        justify-content:center;
    }

    .footer-content{
        justify-content:center;
        text-align:center;
    }

}