@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Vazirmatn', sans-serif;
}

/* ===== Body.index ===== */
.index-main {

    background-color: #666;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.asli {
    width: 100%;
    height: 400px;
    background-color: #049d30;
}

.btn-grop {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: space-around;
    align-self: center;
    gap: 4px;
    margin-top: 30px;
}

.btn-1,
.btn-2,
.btn-3 {
    background-color: #3498db;
    width: 200px;
    height: 100px;
    border-radius: 10px;
}


/* ===== ورود ===== */
.total {
    direction: rtl;
    background-color: #354126;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.login-box {
    width: 437px;
    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    justify-content: center;
    border-radius: 20px;

}

.image {
    width: 390px;
    height: 300px;
    background-color: #354126;
    opacity: 5;
    margin: 15px auto;
    border-radius: 20px;
}

.form-login {
    width: 390px;
    height: 300px;
    background-color: #DBE0D3;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5;
}

.form-login input,
button {
    width: 350px;
    height: 50px;
    margin: 10px;
    border-radius: 10px;
    border: none;
    padding: 10px;
    font-size: 20px;
    color: #485539;

}

.form-login button {
    cursor: pointer;

}

.login-box-main {
    width: 437px;
    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border-radius: 20px;


}

.header-form {
    min-width: 300px;
    height: 100px;
    border-radius: 10px;
    background-color: #DBE0D3;
    color: #485539;

    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.text-form {
    font-size: 20px;
    font-weight: 700;
    color: #485539;
    width: 100%;
    /* text-align: center; */
}

.form-login-main {
    min-width: 300px;
    height: 500px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 30px;

}


.card-box {
    font-size: 20px;
    display: flex;
    border-radius: 8px;
    text-decoration: none;
    background-color: #DBE0D3;
    padding: 8px;

}

.card-box-red {

    font-size: 25px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    background-color: rgb(122, 2, 30);
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);
    padding: 7px;
    color: #EAEFE3;
    cursor: pointer;
}

/* .text-form-red {
    color: #2b2b2b;
} */


/* ------admin----- */
.login-box-admin {
    width: 437px;
    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    padding: 5px;
}

.box-data {
    padding: 15px;
    color: #485539;
    margin: 0 auto;


}

.box-data-admin {
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
    background-color: #DBE0D3;
    border-radius: 18px;
    box-shadow: 20px 4px 20px rgba(0, 0, 0, 0.3);
}

.form-login-admin {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    align-items: center;
    gap: 20px;
}

.card-button-admin {
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    gap: 5px;
    border-radius: 10px;
    width: 347px;
    height: 50px;
    text-decoration: none;
    padding: 10px;
}


/* ----------- */
.login-box-create {

    width: 437px;
    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    padding: 5px;

}

.login-box-header {
    width: 437px;
    height: 100%;
}

.header-form-create {
    padding: 50px;
    border-radius: 18px;
    background-color: #DBE0D3;
    font-size: 20px;
    color: #485539;
    text-align: center;

}

.form-login-create {
    margin-top: 10px;

    background-color: #DBE0D3;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5;
    padding-top: 5px;
}

.form-login-create input,
button {
    width: 350px;
    height: 50px;
    margin: 10px;
    border-radius: 10px;
    border: none;
    padding: 10px;
    font-size: 20px;
    color: #485539;
}

.dropdown {
    width: 350px;
    padding: 15px;
    border-radius: 8px;
    border: none;
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
}



/* ----- food----- */


.login-box-food {

    width: 437px;
    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    padding: 5px;
}

.header-form-food {

    padding: 50px;
    border-radius: 10px;
    background-color: #DBE0D3;
    font-size: 20px;
    color: #485539;
    text-align: center;
}

.form-food {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    text-align: center;

    padding: 10px;
}

.text-form-food {
    text-align: center;
    line-height: 90px;
    font-size: 20px;
    font-weight: 700;
    color: #485539;
    padding: 10px;
    height: 100px;
}

.card-box-food {
    font-size: 20px;
    display: flex;
    border-radius: 8px;
    text-decoration: none;
    background-color: #DBE0D3;
    padding: 8px;

}

.card-box-food-red {

    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
    width: 347px;
    height: 50px;
    text-decoration: none;
    padding: 10px;
    background-color: rgb(122, 2, 30);
    font-size: 20px;
    color: #DBE0D3;
}

/* -----wrapper-food----- */

.total-table-wrapper-food {
    direction: rtl;
    background-color: #354126;
    display: flex;
    justify-content: center;
    gap: 20px;

}

.table-wrapper-food {

    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    text-align: center;
}


.table-wrapper {

    margin: 40px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.table-food-wrapper {
    background-color: #2ecc71;
}

table {
    width: 100%;
    text-align: center;
    padding: 30px;
    overflow-x: scroll;

}

th,
td {

    width: 70px;
    height: 50px;

    border-bottom: 1px solid #ddd;
}

th {

    background: #fafafa;
}

tr:hover {
    background: #fafafa;
}

.tfood {
    display: flex;
    justify-content: space-between;
    border-radius: 6px;
    font-size: 13px;
    color: #2b2b2b;
    background-color: #DBE0D3;
    padding: 30px 30px 30px 30px;
    text-align: center;
}



.Admin {
    background: #e74c3c;
}

.warehouse {
    background: #3498db;
}

.food {
    background: #2ecc71;
}

.operator {
    background-color: #2ecccc;
}

.manager {
    background-color: #f1c40f;
}

/* ------warehouse_add_product------- */
.total-product {

    background-color: #354126;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.add_product {

    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.header-add {

    font-weight: 700;
    font-family: 20px;
}

.form-add {


    height: 500px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
}

.name-product input {
    background-color: #fff;
    padding: 17px 18px;
    border-radius: 8px;
    margin-right: 10px;
    width: 399px;
    font-size: 20px;
    font-weight: 700;
    border: #9e9f9d 2px solid;
}



.add-product select {
    font-size: 20px;
    font-weight: 700;
    padding: 17px 18px;
    width: 399px;
    margin-right: 10px;
    border-radius: 10px;
    border: #9e9f9d 2px solid;
    color: #9e9f9d;
}

.bu-product {
    background-color: #DBE0D3;
    width: 399px;
    padding: 10px 18px 10px 0;
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.bu-product-a {

    width: 399px;
    padding: 17px 18px;
    margin-right: 10px;
    border-radius: 10px;
    text-align: center;
    background-color: rgb(122, 2, 30);
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);

}

.exit {
    text-decoration: none;
    color: #EAEFE3;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
}


.back-products {
    background-color: #049d30;
    text-decoration: none;
    width: 400px;
    height: 60px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 60px;

}

.back-products a {
    text-decoration: none;

    font-size: 20px;
    font-weight: 700;
    color: #EAEFE3;
}

.back-products-in {
    background-color: #049d30;
    height: 60px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 60px;
}

.back-products-in a {
    text-decoration: none;
    color: #DBE0D3;
    font-size: 20px;
    font-weight: 700;
}

/* ----------------users-list----------- */
.users-list {
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    background-color: #DBE0D3;
}

/* -----------------login-box-reset------------------ */
.total-reset {
    direction: rtl;
    background-color: #354126;
    display: flex;
    justify-content: center;
    gap: 20px;

}

.login-box-reset {
    width: 400px;
    min-height: 100vh;
    background-color: #EAEFE3;
    display: flex;
    flex-direction: column;
    gap: 20px;

}


.reset-form {
    background-color: #DBE0D3;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
}

.reset-form input {
    padding: 15px;
    border-radius: 10px;
}

.reset-form-but {
    /* background-color: #2b2b2b; */
    width: 330px;
    box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.3);
}

/* -----------visitor_tickets--------- */


.visitor-login-box {
    font-family: Tahoma, Arial, sans-serif;
    background-color: #354126;
    margin: 0px auto;
    max-width: 500px;
    padding: 20px;
}

.form-container-visitor {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 100vh;
}

.form-container-visitor h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.form-group-visitor {
    margin-bottom: 15px;
}

.form-group-visitor label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #666;
}

.optional-visitor {
    font-size: 11px;
    color: #aaa;
    font-weight: 700;
    font-size: 20px;
    margin-top: 20px;
}

.optional-visitor input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.optional-visitor textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-visitor {
    width: 100%;
    padding: 12px;
    background-color: #2ecc71;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    margin: 20px auto;
    box-shadow: 10px 3px 10px rgba(0, 0, 0, 0.3);
}

.btn-visitor:hover {
    background-color: #249d56;
}

.alert {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: center;
}

.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}