/* ==========================================
   WATER CALCULATOR
========================================== */

.main-container{

    max-width:900px;

    margin:50px auto;

    padding:20px;

}

/* ==========================================
BOX
========================================== */

.water-box{

    background:rgba(17,28,51,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:45px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.45);

    animation:fadeUp .6s ease;

}

.water-box h2{

    text-align:center;

    font-size:34px;

    color:#38bdf8;

    margin-bottom:15px;

}

.water-description{

    text-align:center;

    color:#94a3b8;

    line-height:1.6;

    max-width:650px;

    margin:auto;

}

/* ==========================================
INPUTS
========================================== */

.water-box input,
.water-box select{

    width:100%;

    padding:15px 18px;

    margin-top:14px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:#172338;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.25s;

}

.water-box input::placeholder{

    color:#94a3b8;

}

/* SELECT */

.water-box select{

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    background:
        #172338
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2338bdf8' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5 8 10.3l4.8-4.8' stroke='%2338bdf8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat
        right 16px center;

    padding-right:48px;

}

.water-box select option{

    background:#172338;

    color:#ffffff;

}

.water-box input:focus,
.water-box select:focus{

    border-color:#38bdf8;

    box-shadow:
    0 0 0 4px rgba(56,189,248,.15),
    0 0 18px rgba(56,189,248,.15);

}

/* ==========================================
GENDER
========================================== */

.gender-box{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.gender-box input{

    display:none;

}

.gender-box label{

    flex:1;

    padding:15px;

    border-radius:14px;

    text-align:center;

    cursor:pointer;

    font-weight:700;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    transition:.25s;

    color:#94a3b8;

}

.gender-box label:hover{

    border-color:#38bdf8;

    color:white;

}

.gender-box input:checked+label{

    background:#0ea5e9;

    color:white;

    border-color:#0ea5e9;

}

/* ==========================================
SPORT CHECKBOX
========================================== */

.sport-toggle{

    margin-top:25px;

    padding:18px;

    border-radius:14px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

}

.sport-toggle label{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    font-weight:600;

    color:#e2e8f0;

}

.sport-toggle input{

    width:20px;

    height:20px;

    cursor:pointer;

}

/* ==========================================
SPORT PANEL
========================================== */

#sportPanel{

    max-height:0;

    opacity:0;

    overflow:hidden;

    margin-top:0;

    transition:
    max-height .45s ease,
    opacity .35s ease,
    margin .35s ease;

}

#sportPanel.active{

    max-height:450px;

    opacity:1;

    margin-top:25px;

}

#sportPanel h3{

    margin-bottom:18px;

    color:#38bdf8;

    font-size:22px;

}

#sportPanel label{

    display:block;

    margin-top:15px;

    margin-bottom:8px;

    color:#cbd5e1;

    font-weight:600;

}
/* ==========================================
BUTTONS
========================================== */

.water-box button{

    width:100%;

    padding:16px;

    margin-top:18px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    transition:.25s;

}

#calculateWater{

    background:
    linear-gradient(
    135deg,
    #0ea5e9,
    #2563eb
    );

    color:white;

}

#calculateWater:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 30px rgba(14,165,233,.35);

}

#saveButtons{

    display:flex;

    justify-content:center;

    margin-top:20px;

}

#saveGoal{

    width:100%;

    max-width:320px;

    background:
    linear-gradient(
    135deg,
    #16a34a,
    #22c55e
    );

    color:white;

}

#saveGoal:hover{

    transform:translateY(-2px);

    box-shadow:
    0 15px 30px rgba(34,197,94,.30);

}

/* ==========================================
RESULT
========================================== */

.result{

    margin-top:25px;

    padding:30px;

    border-radius:18px;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    rgba(14,165,233,.12),
    rgba(37,99,235,.10)
    );

    border:1px solid rgba(56,189,248,.18);

    transition:.35s;

}

.result:hover{

    transform:translateY(-2px);

}

.result h3{

    font-size:22px;

    margin-bottom:12px;

    color:white;

}

.water-value{

    font-size:48px;

    font-weight:900;

    color:#22c55e;

    line-height:1;

}

.water-liters{

    font-size:20px;

    margin-top:10px;

    color:#38bdf8;

    font-weight:700;

}

.water-info{

    margin-top:18px;

    color:#cbd5e1;

    line-height:1.7;

}

/* ==========================================
EMPTY WIDGET
========================================== */

.water-empty{

    padding:25px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    rgba(14,165,233,.12),
    rgba(37,99,235,.08)
    );

    border:
    1px solid rgba(56,189,248,.25);

    color:#e2e8f0;

    line-height:1.7;

    text-align:center;

    animation:fadeUp .4s ease;

}

.water-empty h3{

    color:#38bdf8;

    margin-bottom:15px;

}

/* ==========================================
ANIMATION
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:768px){

    .water-box{

        padding:28px;

    }

    .water-box h2{

        font-size:28px;

    }

    #saveGoal{

        max-width:none;

    }

    .gender-box{

        flex-direction:column;

    }

    .result{

        padding:22px;

    }

    .water-value{

        font-size:38px;

    }

}

@media(max-width:480px){

    .main-container{

        padding:12px;

        margin:25px auto;

    }

    .water-box{

        padding:22px;

    }

    .water-box h2{

        font-size:24px;

    }

    .water-description{

        font-size:14px;

    }

    .water-value{

        font-size:34px;

    }

    .water-liters{

        font-size:18px;

    }

}

/* ==========================================
FIREFOX FIX
========================================== */

.water-box select:-moz-focusring{

    color:transparent;

    text-shadow:0 0 0 #fff;

}

/* ==========================================
DISABLED
========================================== */

.water-box input:disabled,
.water-box select:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/* ==========================================
AUTOFILL FIX
========================================== */

.water-box input:-webkit-autofill,
.water-box input:-webkit-autofill:hover,
.water-box input:-webkit-autofill:focus{

    -webkit-text-fill-color:#fff;

    -webkit-box-shadow:
    0 0 0 1000px #172338 inset;

    transition:
    background-color 9999s ease-in-out 0s;

}