@font-face {font-family: vazir-1;  src: url('Vazirmatn-Medium.woff2')}
@font-face {font-family: vazir-2;  src: url('Vazirmatn-Bold.woff2')}
@font-face {font-family: vazir-3;  src: url('Vazirmatn-ExtraBold.woff2')}

*{font-family: vazir-1,sans-serif;text-decoration: none;}
.vazir1{font-family: vazir-1,sans-serif}
.vazir2{font-family: vazir-2,sans-serif}
.vazir3{font-family: vazir-3,sans-serif}

.control-button { background-color: #ff5050; color: white; border: none; border-radius: 5px; cursor: pointer; padding: 5px; width: 25px; height: 25px;}
.control-button:hover {background-color: #cc0000;}


body {direction: rtl;text-align: center;background-color: #fff3e6;}
#container {max-width: 1200px;margin: auto;display: flex;flex-direction: row-reverse;gap: 20px; justify-content: space-between;}
#name-container {display: flex; flex-direction: row; align-items: center;}
#products-container {flex: 2;display: flex;flex-wrap: wrap;justify-content: center;border: 1px solid #ffcc99;padding: 20px;border-radius: 10px;background-color: #ffebcc;}
.product-button {margin: 10px;padding: 15px;border: none;background-color: #ff8000;color: white;cursor: pointer;border-radius: 10px;font-size: 18px;position: relative;width: 150px;height: 100px;display: flex;flex-direction: column;justify-content: center;align-items: center;}

.product-button span.price {font-size: 12px;display: block;margin-top: 15px;}
.stock {font-size: 12px;display: block;margin-top: 15px;}
.product-button:hover {background-color: #cc6600;}

#selected-products-container {flex: 3;border: 1px solid #ffcc99;padding: 20px;border-radius: 10px;background-color: #ffebcc;max-height: 300px;max-width: 400px;white-space: nowrap;overflow-y: scroll;}
#selected-products ul {list-style-type: none;padding: 0;overflow-x: auto;}
#selected-products li {background-color: #ffcc99;margin: 5px 0;padding: 10px;border-radius: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: flex;justify-content: space-between;}

#print-button {padding: 8px;border: none;background-color: #ff5050;color: white;cursor: pointer;border-radius: 10px;}
#print-button svg {width: 35px;height: 35px;fill: white;display: flex;justify-content: center;align-items: center;}
#print-button:hover {background-color: #cc0000;}

#name-container {justify-content: space-evenly;border: 1px solid #ffcc99;padding: 20px;border-radius: 10px;background-color: #ffebcc;width: 1160px;margin: 20px auto;}
#name-container input {margin: 10px;padding: 15px;border: none;border-radius: 10px;background-color: #ffcc99;color: black;font-size: 18px;width: 400px;}

#clear-button{padding: 8px;border: none;background-color: #ff5050;color: white;cursor: pointer;border-radius: 10px;width: 35px;height: 35px;}
#clear-button svg{width: 20px;height: 20px;fill: white;display: flex;justify-content: center;align-items: center;}

::-webkit-scrollbar              {width: 0.5rem;height: 0.25rem;background: #ff8000;border-radius: 5px;}
::-webkit-scrollbar-thumb        {border-radius: 0.15rem;background: #ff5050;transition: all 0.5s ease-in-out;border-radius: 5px;}
::-webkit-scrollbar-thumb:hover  {background: #ff0000;}

#floating-total {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);padding: 20px;background-color: #ff8000;color: white;border-radius: 15px;box-shadow: 0px 4px 15px rgba(0,0,0,0.3);z-index: 1000;font-size: 20px;animation: bounce 1s ease infinite alternate;}
        
@keyframes bounce {0% {transform: translateX(-50%) translateY(0);}100% {transform: translateX(-50%) translateY(-10px);}}
@media (max-width: 768px) {#container {flex-direction: column;gap: 10px;}#products-container {flex: 1;width: 100%;}#selected-products-container {flex: 1;width: 100%;}#name-container {width: 90%;}#clear-button {width: 30px;height: 30px;}#print-button {margin-right: auto;margin-top: 10px;}.product-button {width: 100px;height: 70px;}}
@media (max-width: 480px) {#name-container input {width: 90%;}.product-button {width: 80px;height: 60px;}#floating-total {font-size: 16px;padding: 15px;}}

.disabled {background-color: #834100;pointer-events: none;color: #888;}

footer{width: fit-content;height: fit-content;padding: 15px;margin: 10px auto;border-radius: 15px;background-color: #1b1b1b;color: rgb(255, 255, 255);} 
nav {width: fit-content;height: fit-content;padding: 15px;margin: 10px auto;border-radius: 15px;background-color: #1b1b1b; display: flex; justify-content: center; align-items: center; text-align: center;font-size: 18px;}
.head{font-size: 30px;font-family: vazir-3, sans-serif;padding: 0 0 0 30px; color:white;}
.nav-link{padding-left: 20px;font: 20px;font-family: vazir-2; color:white;}
.nav-link-left{font: 20px;font-family: vazir-2; color:white;}