/* ==========================================================
   Vetscraft Veterinary Dose Calculator
   Version: 1.0
   Author: mkvisuals.org
========================================================== */

.vc-dose-calculator {

    max-width: 700px;
    margin: 20px auto;
    padding: 25px;

    border: 1px solid #dddddd;
    border-radius: 10px;

    background: #ffffff;

    box-sizing: border-box;

}

.vc-dose-calculator h3 {

    margin-top: 0;
    margin-bottom: 25px;

}

.vc-dose-row {

    margin-bottom: 20px;

}

.vc-dose-row label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

}

.vc-dose-input-group {

    display: flex;
    gap: 10px;

}

.vc-dose-input-group input {

    flex: 1;

    padding: 10px;

    border: 1px solid #cccccc;
    border-radius: 6px;

    box-sizing: border-box;

}

.vc-dose-input-group select {

    width: 110px;

    padding: 10px;

    border: 1px solid #cccccc;
    border-radius: 6px;

    box-sizing: border-box;

}

#vc_calculate_btn {

    margin-top: 10px;

    padding: 12px 22px;

    cursor: pointer;

}

.vc-dose-result-card {

    margin-top: 25px;

    padding: 20px;

    border: 1px solid #dddddd;
    border-radius: 8px;

    background: #fafafa;

}

.vc-dose-result-card h4 {

    margin-top: 0;
    margin-bottom: 18px;

}

.vc-dose-result-card p {

    margin: 10px 0;

}

.vc-dose-final {

    margin-top: 20px;

    font-size: 20px;
    font-weight: bold;

}

.vc-dose-button-group {

    margin-top: 20px;

}

.vc-dose-copy-btn {

    padding: 10px 18px;

    cursor: pointer;

}

.vc-dose-error {

    margin-top: 20px;

    padding: 15px;

    border-radius: 6px;

    background: #ffe6e6;

    color: #b10000;

    font-weight: 600;

}

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

@media (max-width: 600px) {

    .vc-dose-input-group {

        flex-direction: column;

    }

    .vc-dose-input-group select {

        width: 100%;

    }

    #vc_calculate_btn {

        width: 100%;

    }

    .vc-dose-copy-btn {

        width: 100%;

    }

}