html,
body{

    width:100%;

    margin:0;

    padding:0;

}


body {
    margin: 0;
    font-family: Arial;
    background: #f3f3f3;
}


/* HEADER */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: linear-gradient(90deg, #2e7d32, #66bb6a);
    padding: 15px 30px;
    text-align: center;
    color: black;
    z-index: 1000;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}
header h1 {
    font-size: 26px;
    letter-spacing: 1px;
    margin: 0;
}
/* TOP ROW */
.header-top {
    padding: 10px 30px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

/* BOTTOM ROW (NAV) */
.header-bottom {
    background: #232f3e; 
    padding: 10px 30px;
}

/* NAV LINKS */
.header-bottom nav {
    display: flex;
    gap: 20px;
}

.header-bottom nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.header-bottom nav a:hover {
    color: #ff9900;
}

/* CONTENT SPACING */
.main-content {
    margin-top: 10px;   /* adjust because header is taller now */
    padding: 15px;
    padding-top: 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
    width:100%;
}

/* PRODUCT GRID */

.products{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    width:100%;
    padding:10px;
    box-sizing:border-box;
}

/* PRODUCT CARD */


.card {

    background:white;

    padding:10px;

    border-radius:8px;

    font-size:15px;

    box-shadow:0 2px 8px rgba(0,0,0,0.1);

    overflow:hidden;

    width:280px;

    max-width:100%;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:space-between;
}

.card:hover {
    transform: scale(1.03);
}


.card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 6px;

    pointer-events: none;

    display:block;
}

button {
    background: #ff9900;
    border: none;
    padding: 10px;
    width: 100%;
    cursor: pointer;
}

@media only screen and (max-width:768px){

    .main-content{

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        width:100% !important;
    }

    .products{

        grid-template-columns:1fr !important;
    }


    .card{

        width:95% !important;

        max-width:350px !important;

        min-width:95% !important;

        margin:10px auto !important;

        display:block !important;
    }

    .card img{

         width:100% !important;

        height:220px !important;

        object-fit:cover !important;
    }

}


/* PRODUCT PAGE LAYOUT */
.product-page {
    display: flex;
    gap: 50px;
    padding: 30px;
}

/* IMAGE BOX */
.image-container {
    width: 400px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #ccc;
}

/* IMAGE */
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* ZOOM EFFECT */
.image-container:hover img {
    transform: scale(1.5);   /* 👈 zoom */
}

/* DETAILS */
.details {
    max-width: 400px;
}

.card a:hover h3 {
    color: #ff9900;
}

table {
    border-collapse: collapse;
}

th, td {
    text-align: center;
}

button {
    background: #ff9900;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
}

/* CART CONTAINER */
.cart-container {
    max-width: 900px;
    margin: auto;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* TABLE */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.cart-table th {
    background: #f4f4f4;
    padding: 12px;
    text-align: left;
}

.cart-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

/* PRODUCT NAME */
.product-name {
    font-weight: bold;
}

/* SUMMARY */
.cart-summary {
    margin-top: 20px;
    text-align: right;
}

/* CHECKOUT BUTTON */
.checkout-btn {
    background: #ff9900;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.checkout-btn:hover {
    background: #e68a00;
}

/* EMPTY CART */
.empty-cart {
    text-align: center;
    padding: 40px;
}



/* PRICE */
.card p {
    font-weight: bold;
    color: #b12704;
    margin-bottom: 10px;
}

/* QUANTITY BOX */
.card input[type="number"] {
    width: 60px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

/* BUTTON */
.card button {
    background: #ff9900;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.card button:hover {
    background: #e68a00;
}

.price {
    font-weight: bold;
    color: #b12704;
    font-size: 18px;
}

.price span {
    font-size: 14px;
    color: #555;
}

select {
    width: 100%;
    padding: 6px;
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.total-price {
    font-weight: bold;
    color: #b12704;
}
.qty-box {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0;
}

.qty-box input {
    width: 50px;
    text-align: center;
    padding: 5px;
}

.qty-box button {
    width: 30px;
    height: 30px;
    background: #ddd;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.qty-box button:hover {
    background: #bbb;
}

.qty-box {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0;
}

.qty-box input {
    width: 50px;
    text-align: center;
    padding: 5px;
}

.qty-box button {
    width: 30px;
    height: 30px;
    background: #2874f0;   /* bright blue */
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.qty-box button:hover {
    background: #bbb;
}

select {
    width: 100%;
    padding: 6px;
    margin: 8px 0;
    border-radius: 5px;
}

/* CONTENT SPACING */
.main-content {
    margin-top: 10px;   /* adjust because header is taller now very imp*/
    padding: 15px;
    padding-top: 10;
}

.page-container {
    max-width: 1100px;   /* increase from 800 */
    margin: 80px auto;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Images */
img {
    display: block;
    margin-top: 0;
    pointer-events: none;
}

.login-container {
    width: 350px;
    margin: 120px auto;   /* pushes below fixed header */
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.login-container input {
    width: 100%;
    padding: 8px;
    margin: 8px 0 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 10px;
    background: #2e7d32;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-container button:hover {
    background: #1b5e20;
}

/* GENERAL */
body {
    margin: 0;
    font-family: Arial;
}

/* CARD IMPROVEMENT */
.card {
    border-radius: 12px;
    transition: 0.3s;
}

.card:hover {
    transform: scale(1.03);
}

/* BUTTON */
button {
    padding: 10px 20px;
    background: #2e7d32;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #1b5e20;
}

/* TABLE */
table {
    background: white;
    border-radius: 8px;
}

/* DASHBOARD CARDS */
.dashboard-cards {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.card-box {
    flex: 1;
    background: white;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.card-box h3 {
    margin-bottom: 10px;
}

.card-box p {
    font-size: 20px;
    font-weight: bold;
    color: #2e7d32;
}

.page-container {
    max-width: 900px;
    margin: 120px auto;
    background: white;
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
}

.page-container h2 {
    margin-bottom: 10px;
    margin-top: 5px;
}

.page-container h3 {
    margin-top: 20px;
}

.page-container input,
.page-container textarea {
    width: 100%;
    padding: 8px;
    margin: 8px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.about-images {
    display: flex;
    flex-wrap: wrap;   /* ✅ THIS FIXES ISSUE */
    gap: 15px;
}

.about-images img {
    width: 48%;        /* 2 images per row */
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
}


video {
    margin-top: 20px;
    border-radius: 10px;
}

.page-container p {
    line-height: 1.6;
    margin-bottom: 10px;
}

.about-page {
    margin-top: 20px;   /* adjust as needed */
}

nav {
    background: #263238;
    padding: 10px 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
}
nav a:hover {
    background: #66bb6a;
    color: black;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.logo {

    height:80px;

    width:auto;

    border-radius:12px;

    object-fit:contain;

    filter:drop-shadow(
        0 2px 6px rgba(0,0,0,0.2)
    );

}

.site-logo{

    height:80px;

    width:auto;

    border-radius:12px;

    object-fit:contain;

    filter:drop-shadow(
        0 2px 6px rgba(0,0,0,0.2)
    );

}

.logout {
    display: inline-block;   /* prevent full width */
    width: auto;             /* shrink to content */
    padding: 5px 10px;        /* reduce space */
    font-size: 16px;
    border-radius: 5px;
    background: red;
    color: white;
    text-decoration: none;
}


/* HEADER */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2874f0;
    padding: 10px 15px;
    color: yellow;
    
}

/* LEFT */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* SEARCH CENTER */
.header-center {
    flex: 1;
    max-width: 350px;
    display: flex;
    margin: 0 20px;
}

.header-center input {
    width: 100%;
    padding: 7px;
    border: none;
    font-size: 15px;
}

.header-center button {
    background: orange;
    border: none;
    padding: 7px 10px;
}

/* RIGHT LOGOUT */
.header-right {
    flex-shrink: 0;   /* 🔥 PREVENT HIDING */
}

.logout {
    background: red;
    padding: 6px 30px;
    border-radius: 2px;
    color: white;
    text-decoration: none;
}


/* LOGO */
.logo-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    width: 40px;
}

.brand {
    font-size: 20px;
    font-weight: bold;
}

/* SEARCH */
.search-section {
    flex: 1;
    max-width: 250px;
    display: flex;
}


.search-section input {
    width: 100%;
    padding: 10px;
    border: none;
    font-size: 20px;
    font-weight: bold;
}

.search-section button {
    background: #ff9f00;
    border: none;
    padding: 10px;
    font-size: 5px;      /* bigger icon */
}

.search-box button {
    background: none;
    border: none;
    padding: 5px;
    font-size: 16px;
}
/* Search container */
.search-box {
    display: flex;
    align-items: center;
    width: 300px;   /* increase width */
}

/* Input field */
.search-box input {
    flex: 1;
    padding: 10px 12px;
    font-size: 16px;      /* bigger text */
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.menu-links {
    display: flex;
    gap: 5px;
}

.menu-links a {
    font-size: 16px;         /* increase from 13px */
    font-weight: 600;        /* slightly bold */
    color: white;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 5px;
}

.menu-links a:hover {
    background: #ffcc00;
    color: black;
}

.menu-section {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;   /* 🔥 pushes menu to right */
}

.menu-section a {
    color: white;
    text-decoration: none;
}

/* DROPDOWN */
.dropdown {
    position: relative;
}

.dropbtn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 35px;
    background: white;
    min-width: 150px;
    z-index: 9999;
}

.dropdown-content a {
    display: block;
    padding: 10px;
    color: black;
}

.dropdown-content a:hover {
    background: #eee;
}

.show {
    display: block;
}

/* FOOTER MAIN */
.footer {
    background: #131A22;   /* Amazon dark */
    color: #ddd;
    padding: 25px 20px 10px;
    margin-top: 20px;
}

/* CONTAINER */
.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1100px;
    margin: auto;
    gap: 30px;
}

/* COLUMNS */
.footer-col h3,
.footer-col h4 {
    color: #fff;
    margin-bottom: 10px;
}

/* LINKS */
.footer-col a {
    display: block;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 6px;
    font-size: 14px;
}

.footer-col a:hover {
    color: #fff;
    text-decoration: underline;
}

/* TEXT */
.footer-col p {
    margin: 4px 0;
    font-size: 14px;
}

/* BOTTOM BAR */
.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 20px;
    padding-top: 10px;
    font-size: 13px;
    color: #aaa;
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* Hide GST only while printing */
@media print {
    .gst-section {
        display: none;
    }
}

.back-to-top {
    background: #37475a;
    color: white;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}
.back-to-top:hover {
    background: #485769;
}

.remove-btn {
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.remove-btn:hover {
    background: darkred;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th {
    background: #f2f2f2;
    padding: 8px;
}

.cart-table td {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

/* Remove button */
.remove-btn {
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
}

.remove-btn:hover {
    background: darkred;
}

/* Order button */
.order-btn {
    background: green;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.order-btn:hover {
    background: darkgreen;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    min-width: 160px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    list-style: none;
    padding: 0;
}

.dropdown-menu li {
    padding: 10px;
}

.dropdown-menu li a {
    color: black;
    text-decoration: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.submenu {
    display: none;
    list-style: none;
    padding-left: 15px;
}

.submenu li a {
    font-size: 15px;
    padding: 6px;
}

.menu-item.active .submenu {
    display: block;
}

.form-container {
    width: 400px;
    margin: 40px auto;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}

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

.product-form {
    display: flex;
    flex-direction: column;
}

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

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

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-group input:focus {
    border-color: #2d6cdf;
    outline: none;
}

.btn-submit {
    background: #2d6cdf;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.btn-submit:hover {
    background: #1e4fbf;
}


/* Full screen center */
.login-wrapper {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Card */
.login-card {
    width: 430px;              /* increase size */
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
}

/* Heading */
.login-card h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Inputs */
.login-card input {
    width: 100%;
    height: 40px;
    font-size: 16px;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Button */
.login-btn {
    width: 100%;
    height: 45px;
    font-size: 18px;
    font-weight: bold;
    background: #2e7d32;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-btn:hover {
    background: #1b5e20;
}

.product-form input::placeholder {
    font-size: 18px;     /* increase size */
    color: #888;         /* optional: better visibility */
}
form input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
form {
  max-width: 400px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
form {
  max-width: 400px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.main-content {
  margin-top: 10px;
  padding: 15px;
  padding-top: 0;
}
.main-content {
  margin-top: 10px;
  padding: 15px;
  padding-top: 10;
}

body {
  margin: 0;
  font-family: Arial;
  background: #f4f6f9;
}

form {
  max-width: 400px;
  margin: 20px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.main-content {
  margin-top: 10px;
  padding: 15px;
  padding-top: 10px; /* from the last rule */f
}

.admin-container {
    width: 95%;
    margin: 20px auto;
}

.card {
    background: white;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}


.row {
    display: flex;
    gap: 10px;
}


.row input, .row textarea {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    min-width: 200px;   /* prevents shrinking */
}

.order-table th {
    background: #2d6cdf;
    color: white;
    padding: 10px;
}

.order-table td {
    padding: 8px;
}

.order-table {
    width: 100%;
}

.order-table input,
.order-table select {
    width: 100%;
    padding: 6px;
}

.btn-add {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: #ff9800;
    border-radius: 6px;
}


.btn-delete {
    background: red;
    color: white;
    border: none;
    padding: 5px 8px;
}

.btn-submit {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background: green;
    color: white;
}

.admin-container {
    width: 95%;
    margin: 20px auto;
}

.admin-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.main-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}


.left-section {
    flex: 3;   /* more space for table */
}

.right-section {
    flex: 1.2;
    min-width: 250px;
    position: sticky;
    top: 80px;   /* push below navbar */
}
.card {
    background: white;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.row input {
    flex: 1;
    min-width: 180px;
}

.row textarea {
    flex: 2;   /* bigger address box */
    min-width: 500px;
}
.order-table {
    width: 100%;
    border-collapse: collapse;
}

.order-table th {
    background: #2d6cdf;
    color: white;
    padding: 10px;
}

.order-table td {
    padding: 8px;
}

.order-table input,
.order-table select {
    width: 100%;
}

.btn-add {
    width: 100%;
    padding: 12px;
    background: orange;
    color: white;
    border-radius: 5px;
}

.btn-delete {
    background: red;
    color: white;
    border: none;
    padding: 5px 8px;
}

.btn-submit {
    width: 100%;
    padding: 12px;
    background: green;
    color: white;
    border-radius: 5px;
}

.summary {
    font-size: 14px;
}

.summary p {
    margin: 6px 0;
}

.summary h3 {
    margin-top: 10px;
}

.btn-edit {
    background: #0288d1;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}

.btn-delete {
    background: red;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
}

.product-img {
    width: 120px;        /* fixed width */
    height: 100px;       /* fixed height */
    object-fit: cover;   /* keeps aspect ratio */
    border-radius: 8px;
}

.product-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

.order-table td {
    vertical-align: middle;
    text-align: center;
}

.product-img {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.order-table tr:hover {
    background-color: #f5f7fa;
}

.order-table th {
    background: #2d6cdf;
    color: white;
    padding: 12px;
    font-size: 15px;
}

.btn-edit {
    background: #0288d1;
    padding: 6px 10px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
}

.btn-delete {
    background: #e53935;
    padding: 6px 10px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
}

.btn-edit:hover {
    background: #026aa7;
}

.btn-delete:hover {
    background: #c62828;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

.order-table th:nth-child(1),
.order-table td:nth-child(1) {
    width: 50px;   /* ID */
}

.order-table th:nth-child(3),
.order-table td:nth-child(3) {
    width: 100px;  /* Price */
}

.order-table th:nth-child(4),
.order-table td:nth-child(4) {
    width: 120px;  /* Image */
}

.order-table th:nth-child(5),
.order-table td:nth-child(5),
.order-table th:nth-child(6),
.order-table td:nth-child(6) {
    width: 110px;  /* 25kg / 50kg */
}

.order-table th:nth-child(7),
.order-table td:nth-child(7) {
    width: 130px;  /* Action */
}

.order-table {
    table-layout: fixed;
}

.order-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-img {
    width: 150px;
    height: 80px;
}

.order-table td, .order-table th {
    padding: 8px;
}

.order-table {
    width: 100%;
    table-layout: fixed;
}

/* ID */
.order-table th:nth-child(1),
.order-table td:nth-child(1) {
    width: 60px;
}

/* Name */
.order-table th:nth-child(2),
.order-table td:nth-child(2) {
    width: 60px;
}

/* Price */
.order-table th:nth-child(3),
.order-table td:nth-child(3) {
    width: 100px;
}

/* Image */
.order-table th:nth-child(4),
.order-table td:nth-child(4) {
    width: 110px;
    align-self: auto;
}

/* 25kg */
.order-table th:nth-child(5),
.order-table td:nth-child(5) {
    width: 60px;
}

/* 50kg */
.order-table th:nth-child(6),
.order-table td:nth-child(6) {
    width: 60px;
}

/* Action */
.order-table th:nth-child(7),
.order-table td:nth-child(7) {
    width: 150px;
}

.order-table td, .order-table th {
    padding: 8px 6px;
    text-align: center;
}

.order-table td:nth-child(2) {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.products-card {
    width: 100%;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
}

.products-table th,
.products-table td {
    padding: 12px 10px;   /* 👈 more spacing */
    text-align: center;
    font-size: 15px;
}
.products-table input,
.products-table select {
    width: 100%;
    padding: 8px 10px;   /* 👈 bigger input */
    font-size: 14px;
    border-radius: 6px;
}

.products-table th:nth-child(1),
.products-table td:nth-child(1) {
    width: 25%;   /* Product */
}

.products-table th:nth-child(2),
.products-table td:nth-child(2) {
    width: 15%;   /* Price */
}

.products-table th:nth-child(3),
.products-table td:nth-child(3) {
    width: 10%;   /* Qty */
}

.products-table th:nth-child(4),
.products-table td:nth-child(4) {
    width: 15%;   /* Bag */
}

.products-table th:nth-child(5),
.products-table td:nth-child(5) {
    width: 20%;   /* Total */
}

.products-table th:nth-child(6),
.products-table td:nth-child(6) {
    width: 15%;   /* Action */
}

.products-table button {
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
}

.add-item-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
}

.products-card {
    max-width: 900px;   /* 👈 increases size */
    margin: 20px auto;
}

.order-table td:nth-child(1),
.order-table th:nth-child(1) {
    width: 200px;   /* or any width you prefer */
}
.order-table td,
.order-table th {
    min-width: 150px;
}

.order-table {
    table-layout: auto;
}


.order-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.order-table {
    table-layout: auto;
}

.order-table td,
.order-table th {
    min-width: 150px;
    white-space: normal;
}

.products-card {
    margin-left: auto;
    margin-right: auto;
}

.products-card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.mis-container {
    width: 80%;
    margin: auto;
}

.mis-title {
    text-align: center;
    margin: 10px;
}

.cards {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.card {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.mis-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.mis-table th {
    background: #2f6fdf;
    color: white;
    padding: 10px;
}

.mis-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.mis-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 15px;
}

.card {
    background: linear-gradient(135deg, #2f6fdf, #4f8dfd);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    opacity: 0.8;
    text-align: center;
}

.card p {
    font-size: 16px;
    font-weight: bold;
    color:gold;
    text-align: center;
    
}

.mis-table {
    width: 100%;
    margin-top: 30px;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

.mis-table th {
    background: #2f6fdf;
    color: white;
    padding: 12px;
}

.mis-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.mis-table tr:hover {
    background: #f5f8ff;
}

.top-actions {
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
}

.add-btn {
    background: #28a745;
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.add-btn:hover {
    background: #218838;
}

/* PAGE LAYOUT */
.admin-container {
    margin: 20px auto;
}

/* PAGE TITLE */
.page-title {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: bold;
}

/* CARD DESIGN */
.card {
    background: linear-gradient(135deg, #2f6fdf, #4f8dfd);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    color: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* INPUTS */
.card input,
.card select,
.card textarea {
    padding: 8px;
    border-radius: 6px;
    border: none;
    outline: none;
    width: 80%;
}

/* CUSTOMER ROW */
.customer-row {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 15px;
}

/* PRODUCTS TABLE */
.products-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.products-table th {
    background: rgba(0,0,0,0.2);
    padding: 10px;
    text-align: center;
    color: white;
}

.products-table td {
    padding: 8px;
    text-align: center;
}

/* INPUT SIZES IN TABLE */
.products-table select {
    width: 140px;
}

.products-table input {
    width: 70px;
}

/* ADD ITEM BUTTON */
.add-item-btn {
    width: 100%;
    margin-top: 10px;
    background: orange;
    border: none;
    padding: 10px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.add-item-btn:hover {
    background: darkorange;
}

/* DELETE BUTTON */
.delete-btn {
    background: orange;
    border: none;
    padding: 6px 10px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

/* RIGHT SIDE SUMMARY */
.summary-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 260px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.summary-box p {
    margin: 8px 0;
}

.summary-box .total {
    color: green;
    font-weight: bold;
}

/* PAYMENT BOX */
.payment-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* CREATE ORDER BUTTON */
.create-btn {
    width: 100%;
    background: orange;
    padding: 12px;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.create-btn:hover {
    background: darkorange;
}

/* MAIN FLEX LAYOUT */
.main-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
}

/* LEFT SIDE (FORM) */
.left-section {
    flex: 1;
}

/* RIGHT SIDE */
.right-section {
    width: 280px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .main-layout {
        flex-direction: column;
    }

    .right-section {
        width: 100%;
    }

    .customer-row {
        grid-template-columns: 1fr;
    }
}

.btn-danger {
    background: red;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
}

.btn-danger:hover {
    background: darkred;
}

.btn-primary {
    background: #007bff;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    width: 100%;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-success {
    background: #2e7d32;
    color: white;
}

.btn-primary {
    background: #1976d2;
    color: white;
}

.btn-danger {
    background: #d32f2f;
    color: white;
}

.btn-success:hover { background: #1b5e20; }
.btn-primary:hover { background: #0d47a1; }
.btn-danger:hover { background: #b71c1c; }

.order-buttons button,
.order-buttons a {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.order-buttons button,
.order-buttons a {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
    display: block;
    text-align: center;
    box-sizing: border-box;
}

.card {
    flex: 0 0 22%;          /* reduce width */
    padding: 12px;          /* smaller padding */
    border-radius: 10px;
    color: white;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: 0.3s;
}

.card h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.card p {
    font-size: 18px;
    font-weight: bold;
}

.card-container {
    display: flex;
    gap: 10px;      /* was 20px */
    margin: 15px 0;
}

.card {
    flex: 0 0 20%;
    padding: 10px;
}

.card {
    text-align: center;
}

.payment-select {
    width: 100%;
    height: 50px;
    font-size: 16px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    transition: 0.3s;
    text-align: center;
}

.payment-select:focus {
    border-color: #1976d2;
    background: white;
    outline: none;
}

/* ===== FILTER FORM FIX ===== */
.filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Date inputs */
.filter-form input {
    height: 40px;
    padding: 5px;
}

/* ✅ FIX SELECT */
.payment-select {
    height: 40px;
    min-width: 150px;   /* prevents shrinking */
    padding: 5px;
    font-size: 14px;
}

/* Button */
.apply-btn {
    height: 40px;
    padding: 0 15px;
    background: green;
    color: white;
    border: none;
    border-radius: 5px;
}

.payment-select {
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
}

.logout {
    background: #e53935;
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
}

.logout:hover {
    background: #c62828;
}

.alert.success {
    background: #d4edda;
    color: #155724;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.delivery-section{
    margin-top:20px;
    padding:20px;
    background:#f8f9fa;
    border-radius:12px;
}

.delivery-section h3{
    margin-bottom:15px;
    color:#2c3e50;
}

.delivery-section select,
.delivery-section textarea{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:8px;
    margin-top:10px;
    font-size:15px;
}

/* ===================================== */
/* LEFT ALIGN PLACEHOLDER + INPUT TEXT */
/* ===================================== */

input,
select,
textarea{

    text-align:left;

}


/* PLACEHOLDER */

input::placeholder,
textarea::placeholder{

    text-align:left;

    color:#777;

}

/* ========================================= */
/* USER MANAGEMENT PAGE */
/* ========================================= */

.user-card {

    width: 100% !important;

    max-width: 100% !important;

    margin: auto;

}

.user-form .form-control,
.user-form .form-select {

    width: 100% !important;

    height: 45px;

    font-size: 15px;

}

.user-form .btn {

    height: 45px;

    font-size: 16px;

    font-weight: bold;

}

.user-table {

    width: 100%;

}

.user-table td,
.user-table th {

    vertical-align: middle;

}

/* FIX CARD SHRINK ISSUE */

.card {

    overflow: hidden;

}

/* RESPONSIVE */

@media (max-width: 768px) {

    .user-form .btn {

        width: 100%;

    }

}

body{
    margin:0;
    padding:0;
}

@media screen and (max-width: 768px){

    .container{
        width:100%;
        padding:10px;
    }

    table{
        font-size:12px;
    }

    .btn{
        width:100%;
        margin-bottom:10px;
    }

    h1,h2,h3{
        font-size:20px;
    }
}
@media(max-width:768px){

    .navbar{
        flex-direction:column;
    }

}

@media screen and (max-width:768px){

    .products-container{

        flex-direction:column;

        align-items:center;
    }

    .product-card{

        width:95%;

        margin-bottom:20px;
    }

    .navbar{

        flex-direction:column;

        gap:10px;
    }

    .search-box{

        width:100%;
    }

    .search-box input{

        width:100%;
    }

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    width:100%;

    background:#f5f5f5;
}

.container,
.main-container,
.wrapper{

    width:100%;

    max-width:1400px;

    margin:auto;
}

.navbar{

    position:relative;

    left:0;

    right:0;

    width:100vw;

    margin:0;

    padding:15px;

    background:#1565ff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-sizing:border-box;


    min-height:85px;



    
}

.footer{

    width:100vw;

    margin:0;

    padding:20px;

    background:#1565ff;

    color:white;

    text-align:center;

    box-sizing:border-box;
}

@media only screen and (max-width:768px){

    html,
    body{

        overflow-x:auto !important;

        width:100% !important;
    }

    .navbar{

        overflow-x:auto !important;

        white-space:nowrap !important;

        -webkit-overflow-scrolling:touch;

        min-width:max-content !important;

        background:#1565ff !important;
    }

    .navbar a{

        display:inline-block !important;

        white-space:nowrap !important;
    }

}

@media only screen and (max-width:768px){

    .navbar{

        background:#1565ff !important;

        display:inline-flex !important;

        min-width:100vw !important;

        width:max-content !important;

        white-space:nowrap !important;

        overflow-x:visible !important;

        padding:10px !important;

        box-sizing:border-box !important;
    }

    body{

        overflow-x:auto !important;
    }

}


@media only screen and (max-width:768px){

    .main-header{

        display:flex !important;

        align-items:center !important;

        gap:15px !important;

        padding:10px !important;

        background:#1565ff !important;

        width:max-content !important;

        min-width:100vw !important;

        overflow-x:auto !important;

        white-space:nowrap !important;

        box-sizing:border-box !important;

        -webkit-overflow-scrolling:touch;
    }

    .header-left,
    .header-right,
    .menu-links{

        display:flex !important;

        align-items:center !important;

        gap:10px !important;

        white-space:nowrap !important;
    }

    .menu-links a{

        display:inline-block !important;

        white-space:nowrap !important;

        padding:6px 8px !important;
    }

    .search-box{

        min-width:220px !important;
    }

    body{

        overflow-x:auto !important;
    }

}

@media only screen and (max-width:768px){

    .footer{

        background:#1565ff !important;

        width:max-content !important;

        min-width:100vw !important;

        overflow-x:auto !important;

        padding:20px 15px !important;

        box-sizing:border-box !important;
    }

    .footer-container{

        display:flex !important;

        flex-wrap:nowrap !important;

        gap:40px !important;

        min-width:max-content !important;
    }

    .footer-col{

        min-width:180px !important;

        white-space:nowrap !important;
    }

    .footer-bottom{

        min-width:max-content !important;

        white-space:nowrap !important;
    }

}