*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#22262f;color:#fff}.topbar{background:#293446;color:#fff;padding:14px 5%;display:flex;align-items:center;justify-content:space-between}.topbar h1{margin:0;font-size:24px}.topbar p{margin:4px 0 0;color:#bbb}.cart-btn,.linkbtn{color:#fff;text-decoration:none;padding:10px 16px;border-radius:8px;background:#ff3366}.container{max-width:1100px;margin:25px auto;padding:0 18px}.hero{height:190px;background:#293446;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:bold;position:relative;overflow:hidden}.slide{display:none;text-align:center}.slide.active{display:block}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 3px 15px #00000012}.food-placeholder{height:120px;border-radius:10px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:55px}.card h3{margin-bottom:6px}.card p{color:#999999;min-height:38px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.button,button{border:0;border-radius:8px;padding:10px 15px;cursor:pointer;background:#111;color:#fff}.primary{background:#ff3366!important}.cart-list{display:grid;gap:12px}.cart-item{background:#293446;padding:15px;border-radius:10px;display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center}.cart-item h3{margin:0}.cart-item p{margin:5px 0;color:#bbbbbb}.qty{display:flex;gap:5px}.qty input{width:65px;padding:9px}.danger{background:#b00020}.total{font-size:24px;font-weight:bold;text-align:right;margin:20px 0}.checkout{text-align:right}.empty,.success-box,.login-box{background:#293446;padding:35px;border-radius:14px;text-align:center;box-shadow:0 3px 15px #0001}.success{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.check{font-size:60px;color:#159957}.linkbtn{display:inline-block;margin-top:20px}.login{min-height:30vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-box{width:100%;max-width:400px}.login-box input{display:block;width:100%;padding:13px;margin:12px 0;border:1px solid #ddd;border-radius:8px}.error{background:#ffe2e2;color:#a00;padding:10px;border-radius:8px}.admin-table{overflow:auto;background:#293446;border-radius:12px}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #2D3C53;text-align:left;vertical-align:top}select{padding:8px;border-radius:7px}@media(max-width:700px){.cart-item{grid-template-columns:1fr}.hero{height:150px;font-size:22px}}


/* V1 improved menu/cart UX */
.menu-container{padding-bottom:110px}
.product-card{position:relative}
.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.quantity-control{display:flex;align-items:center;gap:7px}
.quantity-control form{margin:0}
.qty-btn{width:38px;height:38px;padding:0;border-radius:10px;font-size:22px;line-height:1;background:#111;color:#fff}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.qty-number{min-width:28px;text-align:center;font-size:18px;font-weight:700}
.added-label{margin-top:10px;color:#159957;font-size:14px;font-weight:600}
.top-cart-count{display:inline-flex;min-width:22px;height:22px;padding:0 6px;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:#111;font-size:12px;margin-left:4px}
.sticky-cart{position:fixed;z-index:50;left:50%;bottom:16px;transform:translateX(-50%);width:min(680px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;background:#2D3C53;color:#fff;text-decoration:none;border-radius:14px;box-shadow:0 8px 30px #0004}
.sticky-cart strong{background:#e85d04;padding:9px 12px;border-radius:9px;white-space:nowrap}
@media(max-width:500px){.product-bottom{align-items:flex-start;flex-direction:column}.quantity-control{width:100%;justify-content:flex-end}.sticky-cart{bottom:10px}.sticky-cart strong{padding:8px 10px}}

/* =========================================================
   MOBILE OPTIMIZATION ONLY
   Existing desktop layout, PHP logic, database and settings
   remain unchanged. These rules apply only to smaller screens.
========================================================= */
@media (max-width: 700px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .topbar {
        padding: 12px 14px;
        gap: 12px;
        align-items: flex-start;
    }

    .topbar h1 {
        font-size: 19px;
        line-height: 1.2;
    }

    .topbar p {
        font-size: 13px;
        line-height: 1.35;
        word-break: break-word;
    }

    .cart-btn,
    .linkbtn {
        padding: 9px 11px;
        font-size: 16px;
        white-space: nowrap;
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin: 18px auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .card {
        padding: 14px;
    }

    .food-placeholder {
        height: 180px;
    }

    .row {
        flex-wrap: wrap;
    }

    .row > * {
        min-width: 0;
    }

    button,
    .button,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .qty {
        align-items: center;
    }

    .qty input {
        width: 72px;
    }

    .total {
        font-size: 21px;
        text-align: left;
    }

    .checkout {
        text-align: left;
    }

    .checkout .button,
    .checkout button,
    .payment-box button {
        width: 100%;
    }

    .empty,
    .success-box,
    .login-box {
        padding: 24px 16px;
    }

    .admin-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table table {
        min-width: 620px;
    }

    .sticky-cart {
        width: calc(100% - 20px);
        max-width: none;
        bottom: 8px;
        padding: 12px 13px;
        gap: 10px;
        border-radius: 12px;
    }

    .sticky-cart strong {
        padding: 8px 9px;
        font-size: 13px;
    }

    /* Admin dashboard / reports */
    .dashboard-stats,
    .summary-grid {
        grid-template-columns: 1fr !important;
    }

    .status-table,
    .table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .status-table table,
    .table-wrapper table {
        min-width: 650px;
    }

    .filter-form {
        width: 100%;
    }

    .filter-form input,
    .filter-form select,
    .filter-form button,
    .filter-form .btn,
    .filter-form a {
        width: 100%;
        min-height: 42px;
    }

    .topbar-actions,
    .notification-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .topbar-actions > *,
    .notification-controls > * {
        max-width: 100%;
    }

    /* Product manager */
    .pm-container {
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .pm-header {
        padding: 14px 12px;
    }

    .pm-header-actions {
        width: 100%;
    }

    .pm-header-actions a {
        flex: 1 1 auto;
        text-align: center;
    }

    .pm-form-card,
    .pm-category {
        border-radius: 11px;
    }

    .pm-form-card {
        padding: 15px;
    }

    .pm-product {
        gap: 10px;
    }

    .pm-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .pm-actions form,
    .pm-actions a,
    .pm-actions button {
        max-width: 100%;
    }

    /* Branch management */
    .branch-wrap {
        width: 100%;
        max-width: 100%;
        margin: 18px auto;
        padding: 10px 12px;
    }

    .branch-card {
        padding: 16px;
        overflow: hidden;
    }

    .branch-card h1 {
        font-size: 24px;
        line-height: 1.2;
    }

    .branch-card h2 {
        font-size: 20px;
    }

    .branch-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Table / QR management */
    .tables-grid {
        grid-template-columns: 1fr !important;
    }

    .add-form,
    .edit-form {
        width: 100%;
    }

    .add-form input,
    .edit-form input,
    .add-form select,
    .edit-form select {
        width: 100%;
        max-width: 100%;
    }

    .table-card {
        width: 100%;
        overflow: hidden;
    }

    .qr-box {
        max-width: 100%;
    }

    .qr-box canvas,
    .qr-box img {
        max-width: 100%;
        height: auto !important;
    }

    .card-actions,
    .top-actions {
        flex-wrap: wrap;
    }

    .card-actions > *,
    .top-actions > * {
        max-width: 100%;
    }

    /* Admin login / setup / password screens */
    .login {
        min-height: 30dvh;
        padding: 14px;
    }

    .login-box {
        max-width: 100%;
    }

    /* Sales report */
    .report {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .report-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .summary-card {
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .topbar {
        padding: 10px 11px;
    }

    .topbar h1 {
        font-size: 17px;
    }

    .cart-btn,
    .linkbtn {
        padding: 8px 9px;
        font-size: 12px;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .food-placeholder {
        height: 160px;
    }

    .sticky-cart {
        width: calc(100% - 14px);
        padding: 10px 11px;
        font-size: 13px;
    }
}