body {font-family: Arial, sans-serif; background: #f9f9f9; margin:0; padding:10px;}
form {max-width: 1000px; margin:auto; background:#fff; border:2px solid #800080; border-radius:6px; padding:10px; box-shadow:0 0 8px rgba(0,0,0,0.2);}
.page-title {display:none; text-align:center; font-size:22px; font-weight:bold; color:#000; margin-bottom:5px;}
.order_form {width:100%; font-family:"Playfair", serif; font-size:26px; color:#195905; text-align:center; margin-bottom:15px; font-weight:bold;}
.form-group {display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.form-group input {width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; font-size:15px; box-sizing:border-box;}
.form-inline {display:flex; gap:8px; flex-wrap:wrap;}
.form-inline input {flex:1; min-width:180px;}
.search-box {width:100%; padding:10px; border:2px solid #336600; border-radius:6px; margin-top:8px; font-size:16px;}
.buy {display:flex; justify-content:space-between; align-items:center; gap:8px; margin:15px 0; flex-wrap:wrap;}
.porder {flex:1; text-align:center; border:#A52A2A 2px solid; border-radius:4px; font-size:16px; padding:6px; font-weight:600; color:#FFFF00; background:#336600;}
.pdorder {min-width:120px; text-align:center; font-family:"PT Serif", serif; background:#FFF600; color:#C71585; border:2px solid #C0362C; font-size:16px; font-weight:bold; border-radius:4px; padding:6px 10px;}
.category-title {font-size:18px; font-weight:bold; color:#800000; margin:12px 0 6px;}
.product-container { display: flex; gap: 10px; padding-bottom: 8px;overflow-x: auto; scroll-behavior: smooth; flex-wrap: nowrap;height: 300px; }
.product-card { flex: 0 0 180px;height: 260px; background: #fff;border: 1px solid #ddd;border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 0;text-align: center;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;}
.product-info {background: #0000FF;color: #fff;font-weight: bold;border-radius: 6px 6px 0 0;padding: 6px;font-size: 15px; transition: background 0.3s, color 0.3s;width: 100%; flex-shrink: 0;}
.product-info.selected {background:#003366; color:#fff;}
.product-img {width: 100%;height: 120px; object-fit: contain; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin: 0;}
.product-name {display:block; font-size:15px; color:#FFF8E7;margin-bottom:4px;}
.product-unit {display:block; font-size:12px; color:#ADFF2F;}
.quantity-options { display: flex; gap: 5px; justify-content: center; padding: 6px 4px;  transition: all 0.2s ease; overflow-x: auto; scrollbar-width: thin;}
.quantity-options::-webkit-scrollbar { height: 6px;}
.quantity-options::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 3px;}
.quantity-options.one-btn {justify-content: center;margin: 5px;}
.quantity-options.two-btn { justify-content: space-between;margin:5px;}
.quantity-options.many-btn {flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin:5px;}
.quantity-btn {background:rgba(255,255,255,1); border:2px solid #ccc; padding:6px; cursor:pointer; border-radius:5px; font-size:13px; position:relative; color:#040D54; min-width:70px; flex:0 0 auto; transition:background 0.3s, color 0.3s;}
.quantity-btn.selected {background:#B284BE; color:#FFFF; }
.quantity-btn.aqua-selected {background:aqua !important; color:#000 !important;}
.count-label {position:absolute; top:4px; right:6px; font-size:13px; font-weight:bold; color:#fff;}
table {width:100%; color:#882D17; border-collapse:collapse; background:#F4F5F0; margin-top:8px; font-size:13px;}
th, td {border:1px solid #ccc; padding:5px; text-align:center;}
.remove-btn {background:red; color:white; border:none; padding:3px 6px; cursor:pointer;}
.total-row td {font-weight:bold; color:#8B0000; background:#FFF5F5;}
.submit-btn {width:100%; background:#007bff; color:white; padding:8px; margin-top:8px; border:none; border-radius:4px; cursor:pointer;}
.action-buttons {display:flex; justify-content:space-between; margin-top:16px; gap:10px;}
.action-buttons button {flex:1; padding:8px; border:none; border-radius:4px; cursor:pointer; color:#fff; font-size:15px; display:none;}
#printBtn {background:green;}
#resetBtn {background:crimson;}
@media(max-width:600px){.product-container{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;}
  .product-card{flex:0 0 160px; scroll-snap-align: start;}}
@media print{.no-print{display:none !important;} .page-title{display:block !important;}}