html{font-size:16px}
*{box-sizing:border-box}
body{margin:0;background:#f7f7f8;color:#222;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{transition:.18s ease}
button,input,select,textarea{font:inherit}
.public-shell{width:100%;margin:0;padding:0}
.public-alert{width:calc(100% - 28px);max-width:520px;margin:12px auto}
.app-shell{max-width:760px;margin:0 auto;padding:18px 14px 28px}
.app-shell.with-nav{padding-bottom:100px}
.app-alert{border-radius:14px;padding:10px 12px;font-size:12px;margin-bottom:12px}
.app-topbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid #eee;padding:9px max(14px,calc((100vw - 760px)/2 + 14px));display:flex;align-items:center;justify-content:space-between}
.app-brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.app-brand-logo{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply}
.app-product-name{font-size:10px;color:#f47b20;font-weight:900;letter-spacing:.5px;text-transform:uppercase}
.restaurant-name{font-size:16px;font-weight:900;color:#17324d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.logout-btn{border:0;background:#fff3e9;color:#f47b20;width:38px;height:38px;border-radius:12px;font-size:20px;font-weight:900}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:760px;background:rgba(255,255,255,.98);border-top:1px solid #e8e8e8;display:grid;grid-template-columns:repeat(4,1fr);z-index:1050;padding:7px 4px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -5px 20px rgba(0,0,0,.04)}
.bottom-nav a{text-decoration:none;color:#666;text-align:center;font-size:10px;font-weight:700}
.bottom-nav span{display:block;font-size:20px;line-height:22px;color:#f47b20;margin-bottom:2px}
.btn-brand,.primary-action{background:#f47b20;border:0;color:#fff;font-weight:800;border-radius:13px}
.btn-brand:hover,.btn-brand:focus,.primary-action:hover{background:#df6915;color:#fff}
.btn-outline-brand{border-color:#f47b20;color:#f47b20}.btn-outline-brand:hover{background:#f47b20;color:#fff}
.app-card,.panel-card{border:0;border-radius:18px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.eyebrow{font-size:9px;color:#f47b20;font-weight:900;letter-spacing:.8px;text-transform:uppercase}
.back-link,.manage-link{color:#f47b20;text-decoration:none;font-size:10px;font-weight:900}
.section-page{padding-bottom:18px}
.page-hero{display:flex;align-items:flex-start;justify-content:space-between;margin:2px 0 15px}
.page-hero h1{margin:2px 0 0;color:#17324d;font-size:24px;font-weight:900}
.page-hero p{margin:3px 0 0;color:#888;font-size:10px}
.list-title{display:flex;align-items:end;justify-content:space-between;margin:20px 2px 10px}
.list-title h2{margin:0;color:#17324d;font-size:19px;font-weight:900}
.list-title span{color:#888;font-size:9px}
.panel-card{padding:16px}
.panel-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.panel-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#fff1e7;font-size:20px}
.panel-title strong{display:block;color:#17324d;font-size:15px;font-weight:900}
.panel-title span{display:block;color:#888;margin-top:2px;font-size:9px}
.quick-add-form{display:grid;grid-template-columns:1fr auto;gap:8px}
.soft-input{min-height:50px;border:1.5px solid #e1e5e8;border-radius:14px;display:flex;align-items:center;overflow:hidden;background:#fff}
.soft-input:focus-within{border-color:#f47b20;box-shadow:0 0 0 4px rgba(244,123,32,.08)}
.soft-input>span{width:45px;min-width:45px;text-align:center;font-size:17px;color:#f47b20;font-weight:800}
.soft-input .form-control{height:48px;border:0;box-shadow:none!important;padding-left:0;font-size:13px;background:transparent}
.primary-action{min-height:46px;padding:0 16px;font-size:12px}
.app-field,.app-select{border:1.5px solid #e1e5e8;border-radius:13px;min-height:48px;font-size:13px;box-shadow:none!important}
.app-field:focus,.app-select:focus{border-color:#f47b20;box-shadow:0 0 0 4px rgba(244,123,32,.08)!important}
.inline-note{background:#fff8f2;border-radius:12px;padding:12px;color:#95613c;font-size:11px}
.soft-empty{padding:32px 18px;border:1.5px dashed #ddd;background:#fff;border-radius:18px;text-align:center}
.soft-empty>div{font-size:31px}.soft-empty strong{display:block;margin-top:8px;color:#17324d;font-size:15px}.soft-empty span{display:block;margin-top:3px;color:#888;font-size:9px}.soft-empty.compact{padding:22px 15px}
.login-page{min-height:100vh;background:radial-gradient(circle at 10% 10%,rgba(244,123,32,.10),transparent 30%),radial-gradient(circle at 90% 30%,rgba(239,45,92,.08),transparent 32%),linear-gradient(180deg,#fffaf6 0%,#fff 60%,#fff7f3 100%);padding:18px 14px 28px}
.login-container{width:100%;max-width:520px;margin:0 auto}.company-brand{text-align:center;margin-bottom:4px}.company-logo{width:115px;max-height:78px;object-fit:contain;mix-blend-mode:multiply}
.product-brand{text-align:center;margin-top:5px}.product-brand h1{margin:0;color:#102a43;font-size:29px;font-weight:900;letter-spacing:-.8px}.product-brand h1 span{color:#f47b20}.product-tagline{font-size:16px;font-weight:700;color:#4d4d4d;margin-top:4px}.price-badge{display:inline-block;margin-top:10px;padding:7px 21px;border-radius:999px;background:linear-gradient(135deg,#ff8b25,#f4670b);color:#fff;font-size:17px;font-weight:900;box-shadow:0 7px 18px rgba(244,123,32,.22)}.product-desc{margin:9px auto 13px;color:#777;font-size:11px;line-height:1.5}
.login-card{background:rgba(255,255,255,.97);border-radius:22px;padding:18px 16px;box-shadow:0 18px 50px rgba(34,34,34,.08),0 3px 12px rgba(244,123,32,.05);border:1px solid rgba(244,123,32,.08)}
.login-card-heading{display:flex;align-items:center;gap:10px;margin-bottom:14px}.login-user-icon{width:44px;height:44px;min-width:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff8c28,#f3650e);font-size:19px;box-shadow:0 6px 16px rgba(244,123,32,.22)}.login-card-heading h2{margin:0;font-size:16px;color:#12314e;font-weight:900}.login-card-heading p{margin:3px 0 0;color:#888;font-size:10px}
.login-input-group{display:flex;align-items:center;height:50px;background:#fff;border:1.5px solid #e3e6ea;border-radius:14px;overflow:hidden;transition:.2s}.login-input-group:focus-within{border-color:#f47b20;box-shadow:0 0 0 4px rgba(244,123,32,.09)}.input-icon{width:46px;text-align:center;font-size:18px}.login-input{height:100%;border:0!important;box-shadow:none!important;padding-left:0;font-size:14px;background:transparent}.login-btn{width:100%;margin-top:14px;border:0;border-radius:14px;padding:11px 14px;background:linear-gradient(135deg,#ff8b25,#f3670d);color:#fff;font-size:16px;font-weight:900;box-shadow:0 8px 20px rgba(244,123,32,.24)}.login-btn:hover{background:linear-gradient(135deg,#f47b20,#db5b05);color:#fff}.login-divider{display:flex;align-items:center;gap:12px;margin:12px 0;color:#999;font-size:11px}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:#e7e7e7}
.register-btn{min-height:60px;border:1.5px solid #f47b20;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:11px;color:#f26911;text-decoration:none}.register-btn:hover{background:#fff5ed;color:#e65f0c}.register-icon{font-size:22px}.register-btn strong{display:block;font-size:14px}.register-btn small{display:block;text-align:center;color:#777;font-size:9px;margin-top:2px}
.login-features{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:14px}.login-feature{min-width:0;background:rgba(255,255,255,.92);border-radius:13px;text-align:center;padding:8px 2px;box-shadow:0 5px 15px rgba(0,0,0,.045)}.login-feature .feature-icon{font-size:19px;line-height:21px;margin-bottom:3px}.login-feature strong{display:block;color:#17324d;font-size:9px;font-weight:900}.login-feature span{display:block;margin-top:2px;color:#858585;font-size:7px}.login-feature.whatsapp strong{color:#128c4b}.login-footer{text-align:center;margin-top:16px;padding-top:10px;border-top:1px solid rgba(0,0,0,.05)}.login-footer>span{display:block;color:#777;font-size:9px}.login-footer>strong{display:block;color:#ef2f5c;font-size:11px;margin-top:3px}.login-footer>small{display:block;color:#888;margin-top:3px;font-size:8px}.made-india{margin-top:8px;font-size:9px;color:#555;font-weight:700}
.register-page{min-height:100vh;padding:14px 12px 25px;background:radial-gradient(circle at 12% 10%,rgba(244,123,32,.10),transparent 30%),radial-gradient(circle at 90% 30%,rgba(239,45,92,.07),transparent 32%),linear-gradient(180deg,#fffaf6 0%,#fff 55%,#fff7f3 100%)}.register-container{width:100%;max-width:520px;margin:0 auto}.register-brand{text-align:center;margin-bottom:13px}.register-logo{width:105px;max-height:72px;object-fit:contain;mix-blend-mode:multiply}.register-brand h1{margin:5px 0 0;color:#102a43;font-size:24px;font-weight:900}.register-brand h1 span{color:#f47b20}.register-brand p{margin:3px 0 0;color:#777;font-size:11px}.register-card{background:rgba(255,255,255,.97);border-radius:20px;padding:17px 14px;border:1px solid rgba(244,123,32,.09);box-shadow:0 18px 50px rgba(0,0,0,.08)}.register-card-head{display:flex;gap:10px;align-items:center;margin-bottom:15px}.register-head-icon{width:44px;height:44px;min-width:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ff8b25,#f3670d);font-size:19px;box-shadow:0 7px 18px rgba(244,123,32,.20)}.register-card-head h2{margin:0;color:#12314e;font-size:16px;font-weight:900}.register-card-head p{margin:3px 0 0;color:#888;font-size:10px}.register-field{margin-bottom:11px}.register-field label,.small-label{display:block;margin:0 0 5px 2px;color:#384b5d;font-size:11px;font-weight:800}.register-input-wrap{min-height:48px;display:flex;align-items:center;background:#fff;border:1.5px solid #e4e7ea;border-radius:13px;overflow:hidden}.register-input-wrap:focus-within{border-color:#f47b20;box-shadow:0 0 0 4px rgba(244,123,32,.08)}.register-input-wrap>span{width:44px;min-width:44px;text-align:center;font-size:17px}.register-input-wrap .form-control{min-height:46px;border:0;box-shadow:none!important;background:transparent;padding-left:0;font-size:13px}.register-input-wrap textarea.form-control{padding-top:11px;padding-bottom:9px;resize:none}.textarea-wrap{align-items:flex-start}.textarea-wrap>span{padding-top:11px}.register-input-wrap .no-icon-input{padding-left:13px}.register-two-column{display:grid;grid-template-columns:1fr 1fr;gap:9px}.register-submit-btn{width:100%;margin-top:5px;padding:11px 14px;border:0;border-radius:14px;background:linear-gradient(135deg,#ff8b25,#f3670d);color:#fff;font-size:15px;font-weight:900;box-shadow:0 8px 20px rgba(244,123,32,.23)}.register-login-link{text-align:center;margin-top:14px;font-size:11px;color:#777}.register-login-link a{color:#f47b20;font-weight:800;text-decoration:none}.register-price-box{margin-top:14px;padding:11px;text-align:center;border-radius:14px;background:#fff3e9}.register-price-box strong{display:block;color:#f26911;font-size:15px}.register-price-box span{display:block;margin-top:2px;color:#777;font-size:8px}.register-footer{text-align:center;margin-top:17px}.register-footer span{display:block;color:#888;font-size:8px}.register-footer strong{display:block;margin-top:3px;color:#ef2f5c;font-size:10px}.register-footer small{display:block;margin-top:6px;color:#666;font-size:8px}
.dashboard-page{padding-bottom:15px}.dashboard-welcome{display:flex;justify-content:space-between;align-items:center;margin:2px 0 13px}.dashboard-welcome h1{margin:3px 0 0;color:#132d46;font-size:22px;font-weight:900}.dashboard-welcome p{margin:2px 0 0;color:#8a8a8a;font-size:10px}.dashboard-badge{display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;background:#eaf8ed;color:#237438;font-size:10px;font-weight:900}.dashboard-badge span{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#32a852;color:#fff;font-size:9px}
.dashboard-plan-strip{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;margin-bottom:12px;border-radius:16px;background:linear-gradient(135deg,#fff0e4,#fff7f1);border:1px solid #ffe1cb}.dashboard-plan-strip strong{display:block;color:#b95008;font-size:12px}.dashboard-plan-strip span{display:block;margin-top:2px;color:#8b8b8b;font-size:8px}.plan-price{padding:6px 10px;border-radius:999px;background:#f47b20;color:#fff;font-size:10px;font-weight:900}
.dashboard-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.dash-stat{min-width:0;background:#fff;border-radius:16px;padding:12px 10px;box-shadow:0 4px 14px rgba(0,0,0,.045);border:1px solid #f1f1f1}.dash-stat-icon{width:29px;height:29px;display:grid;place-items:center;margin-bottom:8px;border-radius:9px;background:#fff2e8;color:#f47b20;font-size:13px;font-weight:900}.dash-stat>span{display:block;color:#888;font-size:8px}.dash-stat strong{display:block;margin-top:3px;color:#172b3e;font-size:18px;font-weight:900}.table-section{margin-top:20px}.table-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.table-section-head h2{margin:0;color:#182d42;font-size:20px;font-weight:900}.table-section-head p{margin:2px 0 0;color:#888;font-size:9px}.table-filter-strip{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}.table-filter-strip::-webkit-scrollbar{display:none}.table-filter{white-space:nowrap;border:1px solid #e4e4e4;background:#fff;color:#747474;border-radius:999px;padding:6px 10px;font-size:9px;font-weight:800}.table-filter.active{border-color:#f47b20;background:#f47b20;color:#fff}.dashboard-table-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.dashboard-table-card{background:#fff;border:1.5px solid #edf0f2;border-radius:17px;padding:12px;box-shadow:0 4px 13px rgba(0,0,0,.035)}.dashboard-table-card.running{background:linear-gradient(180deg,#fff9f5,#fff);border-color:#ffcba8}.table-card-top{display:flex;justify-content:space-between;align-items:flex-start}.dashboard-table-name{color:#17324d;font-size:18px;font-weight:900}.table-big-icon{font-size:23px}.dashboard-status-pill,.mini-status{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:4px 8px;border-radius:999px;background:#ebf8ee;color:#24743a;font-size:8px;font-weight:900}.dashboard-status-pill span,.mini-status span{width:6px;height:6px;border-radius:50%;background:#36a653}.dashboard-table-card.running .dashboard-status-pill,.manage-card.running .mini-status{background:#fff0e7;color:#c45910}.dashboard-table-card.running .dashboard-status-pill span,.manage-card.running .mini-status span{background:#f47b20}.free-info{min-height:30px;display:flex;align-items:end;padding-top:9px;color:#999;font-size:8px}.running-info{padding-top:9px;min-height:39px}.running-info small{display:block;color:#999;font-size:7px}.running-info strong{display:block;margin-top:1px;color:#e96a13;font-size:11px}.table-action-btn{display:block;width:100%;margin-top:8px;border:0;border-radius:11px;padding:8px 6px;background:#f47b20;color:#fff;text-decoration:none;text-align:center;font-size:9px;font-weight:900}.running-action{background:#fff;border:1px solid #f47b20;color:#f47b20}.dashboard-empty{padding:32px 18px;background:#fff;border:1.5px dashed #ddd;border-radius:18px;text-align:center}.empty-table-icon{font-size:31px}.dashboard-empty h3{margin:9px 0 3px;color:#17324d;font-size:16px;font-weight:900}.dashboard-empty p{max-width:270px;margin:0 auto 13px;color:#888;font-size:9px}.dashboard-main-btn{display:inline-block;padding:9px 16px;background:#f47b20;border-radius:11px;color:#fff;text-decoration:none;font-size:10px;font-weight:900}
.manage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.manage-card{padding:13px;background:#fff;border:1.5px solid #edf0f2;border-radius:17px;box-shadow:0 4px 12px rgba(0,0,0,.035)}.manage-card.running{border-color:#ffcba8;background:#fffaf6}.manage-card-top{display:flex;justify-content:space-between;align-items:flex-start}.manage-name{font-size:18px;color:#17324d;font-weight:900}.manage-icon{font-size:22px}.manage-meta{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:9px;border-top:1px solid #f0f0f0;font-size:8px;color:#888}.manage-meta strong{font-size:8px}.manage-meta .on{color:#268345}.manage-meta .off{color:#b54c4c}
.setup-grid{display:grid;grid-template-columns:1fr;gap:10px}.menu-entry-row{display:grid;grid-template-columns:1.6fr .8fr;gap:8px}.rate-input>span{width:34px;min-width:34px}.menu-category-block{margin-top:14px}.menu-category-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.menu-category-head h3{margin:0;color:#17324d;font-size:15px;font-weight:900}.menu-category-head span{font-size:8px;color:#888}.menu-admin-list{display:grid;gap:7px}.menu-admin-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:12px 13px;border:1px solid #f0f0f0}.menu-admin-row strong{display:block;font-size:12px;color:#17324d}.menu-admin-row small{display:block;margin-top:2px;color:#888;font-size:8px}.menu-rate{color:#f47b20;font-size:13px;font-weight:900}.category-empty{background:#fff;border-radius:12px;padding:11px;color:#999;font-size:9px}
.order-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:13px}.order-top h1{margin:2px 0 0;color:#17324d;font-size:24px;font-weight:900}.order-top p{margin:2px 0 0;color:#888;font-size:9px}.order-total-chip{text-align:right;background:#fff1e7;border-radius:14px;padding:8px 11px;min-width:90px}.order-total-chip small{display:block;color:#a96a3b;font-size:8px}.order-total-chip strong{display:block;color:#f47b20;font-size:19px;font-weight:900}.order-cart{padding:6px 12px}.cart-heading{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee}.cart-heading strong{font-size:11px;color:#17324d}.cart-heading span{font-size:8px;color:#888}.order-line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.order-line:last-child{border-bottom:0}.order-item-info strong{display:block;color:#17324d;font-size:11px}.order-item-info small{display:block;color:#888;font-size:8px}.qty-box{display:flex;align-items:center;gap:7px}.qty-box form{margin:0}.qty-box button{width:31px;height:31px;border-radius:9px;border:0;background:#fff0e8;color:#f47b20;font-size:18px;font-weight:900}.qty-box span{min-width:18px;text-align:center;font-size:11px;font-weight:900}.menu-picker-head{margin:18px 2px 8px}.menu-picker-head h2{margin:0;color:#17324d;font-size:18px;font-weight:900}.menu-picker-head span{font-size:8px;color:#888}.search-box{display:flex;align-items:center;height:48px;background:#fff;border:1.5px solid #e1e5e8;border-radius:13px;overflow:hidden}.search-box>span{width:42px;text-align:center}.search-box .form-control{border:0;box-shadow:none!important;font-size:12px;padding-left:0}.category-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;scrollbar-width:none}.category-chips::-webkit-scrollbar{display:none}.chip{white-space:nowrap;border:1px solid #ddd;background:#fff;border-radius:999px;padding:6px 11px;font-size:9px}.chip.active{background:#f47b20;color:#fff;border-color:#f47b20}.menu-pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.menu-pick button{position:relative;width:100%;min-height:74px;border:0;background:#fff;border-radius:14px;padding:11px;text-align:left;box-shadow:0 2px 9px rgba(0,0,0,.05)}.menu-pick span{display:block;font-size:11px;color:#17324d;font-weight:900;padding-right:20px}.menu-pick strong{display:block;color:#f47b20;margin-top:4px;font-size:11px}.menu-pick em{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#fff1e7;color:#f47b20;font-style:normal;font-weight:900}.sticky-action{position:sticky;bottom:78px;margin-top:14px;z-index:20}.generate-bill-btn{width:100%;border:0;border-radius:15px;padding:12px 15px;background:#f47b20;color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 22px rgba(244,123,32,.24)}.generate-bill-btn span{font-size:12px;font-weight:800}.generate-bill-btn strong{font-size:15px}.app-modal{border:0;border-radius:20px;overflow:hidden}.app-modal .modal-header,.app-modal .modal-footer{border-color:#eee}.app-modal .modal-title{font-size:16px;color:#17324d;font-weight:900}.app-modal .modal-header small{font-size:8px;color:#888}
.bill-paper{background:#fff;border-radius:18px;padding:17px;box-shadow:0 3px 15px rgba(0,0,0,.06)}.bill-brand{text-align:center}.bill-logo{max-width:75px;max-height:65px;object-fit:contain}.bill-brand h2{font-size:20px;color:#17324d;font-weight:900;margin:4px 0}.bill-brand p{font-size:9px;color:#777;margin-bottom:10px}.bill-meta{border-top:1px dashed #ccc;border-bottom:1px dashed #ccc;padding:9px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:9px}.bill-row{display:grid;grid-template-columns:1fr 42px 75px;gap:5px;padding:9px 0;border-bottom:1px solid #eee;font-size:10px}.bill-row>span:nth-child(2),.bill-row>span:nth-child(3){text-align:right}.bill-row small{display:block;color:#888;font-size:8px}.bill-row-head{font-weight:900;font-size:9px;color:#555}.bill-total{padding-top:9px}.bill-total>div{display:flex;justify-content:space-between;padding:3px 0;font-size:10px}.bill-total .grand{font-size:17px;border-top:2px solid #222;margin-top:5px;padding-top:7px}.payment-state{text-align:center;border-radius:10px;padding:8px;margin-top:11px;font-size:10px;font-weight:900}.payment-state.paid{background:#eaf8ed;color:#237438}.payment-state.pending{background:#fff0e8;color:#b94f00}.thankyou{text-align:center;font-size:9px;color:#777;margin:10px 0 0}.payment-panel{margin-top:12px}.pay-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.pay-modes label{position:relative;border:1px solid #ddd;border-radius:12px;padding:9px 4px;text-align:center;font-size:10px;cursor:pointer}.pay-modes label input{position:absolute;opacity:0}.pay-modes label:has(input:checked){border-color:#f47b20;background:#fff4ec;color:#f47b20;font-weight:900}.bill-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.whatsapp-btn,.print-btn{min-height:44px;border-radius:13px;border:0;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}.whatsapp-btn{background:#21a366;color:#fff}.print-btn{background:#fff;border:1px solid #ddd;color:#444}
.history-filter label{font-size:8px;color:#888;margin:0 0 4px 2px}.history-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.history-filter-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.bill-history-list{display:grid;gap:7px}.bill-history-card{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid #f0f0f0;border-radius:15px;padding:11px 12px;text-decoration:none;color:inherit}.history-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff1e7}.history-main strong{display:block;font-size:11px;color:#17324d}.history-main span{display:block;margin-top:2px;font-size:8px;color:#888}.history-amount{text-align:right}.history-amount strong{display:block;font-size:12px;color:#17324d}.history-amount span{display:block;margin-top:2px;font-size:8px;font-weight:900}.history-amount .paid{color:#268345}.history-amount .pending{color:#c45910}
.setting-switch-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0 13px;margin-bottom:12px;border-bottom:1px solid #eee}.setting-switch-row strong{display:block;color:#17324d;font-size:12px}.setting-switch-row span{display:block;color:#888;font-size:8px;margin-top:2px}.form-check-input:checked{background-color:#f47b20;border-color:#f47b20}.settings-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.settings-links{display:grid;gap:8px;margin-top:12px}.settings-links a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:15px;padding:12px 13px;text-decoration:none;color:inherit;border:1px solid #f0f0f0}.settings-links>a>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff1e7}.settings-links strong{display:block;color:#17324d;font-size:11px}.settings-links small{display:block;color:#888;font-size:8px;margin-top:2px}.settings-links em{font-size:20px;color:#aaa;font-style:normal}
@media(min-width:650px){
.dashboard-summary{grid-template-columns:repeat(4,1fr)}
.dashboard-table-grid,.manage-grid{grid-template-columns:repeat(3,1fr)}
.menu-pick-grid{grid-template-columns:repeat(3,1fr)}
.setup-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
.app-shell{padding:14px 12px 24px}.restaurant-name{max-width:210px}
.dashboard-summary{grid-template-columns:repeat(2,1fr)}
.quick-add-form{grid-template-columns:1fr}.quick-add-form .primary-action{width:100%}
.menu-entry-row{grid-template-columns:1.45fr .8fr}
}
@media print{
body{background:#fff}.app-topbar,.bottom-nav,.no-print,.app-alert{display:none!important}
.app-shell{max-width:none;padding:0}.bill-paper{box-shadow:none;border-radius:0;padding:0}
}
/* ======================================================
VIBRANT PREMIUM DASHBOARD OVERRIDE
====================================================== */
:root {
--rs-orange: #ff6a00;
--rs-orange-2: #ff8a1f;
--rs-orange-soft: #fff0e3;
--rs-pink-soft: #fff1f6;
--rs-navy: #0f2f4d;
--rs-green: #20a45b;
--rs-border: #eceff2;
}
/* overall logged-in background */
body {
background: radial-gradient(circle at 8% 10%, rgba(255,106,0,.06), transparent 26%), radial-gradient(circle at 95% 22%, rgba(239,45,92,.05), transparent 28%), #f8f9fb;
}
/* top bar */
.app-topbar {
background: rgba(255,255,255,.98);
border-bottom: 1px solid rgba(255,106,0,.12);
box-shadow: 0 4px 18px rgba(17, 45, 70, .05);
}
.app-product-name {
color: var(--rs-orange);
font-weight: 900;
}
.restaurant-name {
color: var(--rs-navy);
}
/* dashboard greeting */
.dashboard-welcome {
position: relative;
padding: 18px;
border-radius: 22px;
background: linear-gradient(135deg, #fff7ef 0%, #fff1e6 55%, #fff8fb 100%);
border: 1px solid #ffd8bb;
box-shadow: 0 10px 30px rgba(255,106,0,.10);
overflow: hidden;
}
.dashboard-welcome::after {
content: "🍽️";
position: absolute;
right: 18px;
bottom: -6px;
font-size: 56px;
opacity: .08;
transform: rotate(-10deg);
}
.dashboard-welcome .eyebrow {
color: var(--rs-orange);
}
.dashboard-welcome h1 {
color: var(--rs-navy);
font-size: 25px;
}
.dashboard-welcome p {
color: #6f7680;
font-size: 11px;
}
/* active badge */
.dashboard-badge {
background: linear-gradient(135deg, #e8f9ef, #f3fff7);
color: #188544;
border: 1px solid #ccefd9;
box-shadow: 0 5px 12px rgba(32,164,91,.08);
}
.dashboard-badge span {
background: var(--rs-green);
}
/* active account strip */
.dashboard-plan-strip {
margin-top: 12px;
background: linear-gradient(135deg, #fff1e5 0%, #fff8f1 100%);
border: 1px solid #ffcfa9;
box-shadow: 0 7px 20px rgba(255,106,0,.08);
}
.dashboard-plan-strip strong {
color: #d95a00;
}
.plan-price {
background: linear-gradient(135deg, var(--rs-orange-2), var(--rs-orange));
box-shadow: 0 5px 14px rgba(255,106,0,.22);
}
/* summary cards */
.dashboard-summary {
gap: 10px;
}
.dash-stat {
position: relative;
overflow: hidden;
border: 1px solid #edf0f2;
box-shadow: 0 8px 24px rgba(17,45,70,.07);
transition: transform .18s ease, box-shadow .18s ease;
}
.dash-stat:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(17,45,70,.10);
}
.dash-stat:nth-child(1) {
background: linear-gradient(135deg, #fff9f4, #fff1e7);
border-color: #ffd8ba;
}
.dash-stat:nth-child(2) {
background: linear-gradient(135deg, #f5f9ff, #eef5ff);
border-color: #dce8ff;
}
.dash-stat:nth-child(3) {
background: linear-gradient(135deg, #f5fff8, #ebfaef);
border-color: #d8f0df;
}
.dash-stat:nth-child(4) {
background: linear-gradient(135deg, #fbf7ff, #f4edff);
border-color: #e6dafc;
}
.dash-stat:nth-child(1) .dash-stat-icon {
background: #ffe9d7;
color: #ff6a00;
}
.dash-stat:nth-child(2) .dash-stat-icon {
background: #e7f0ff;
color: #2d7ff0;
}
.dash-stat:nth-child(3) .dash-stat-icon {
background: #ddf6e6;
color: #1d9b52;
}
.dash-stat:nth-child(4) .dash-stat-icon {
background: #eee3ff;
color: #7f45d8;
}
.dash-stat > span {
color: #666f78;
font-weight: 600;
}
.dash-stat strong {
color: var(--rs-navy);
font-size: 20px;
}
/* tables heading */
.table-section-head h2 {
color: var(--rs-navy);
font-size: 22px;
}
.table-section-head h2::before {
content: "🍴";
margin-right: 6px;
font-size: 18px;
}
.manage-link {
color: var(--rs-orange);
font-weight: 900;
}
/* filter chips */
.table-filter {
background: #fff;
color: #59636d;
border: 1px solid #e2e6ea;
box-shadow: 0 3px 10px rgba(0,0,0,.03);
}
.table-filter.active {
color: #fff;
background: linear-gradient(135deg, var(--rs-orange-2), var(--rs-orange));
border-color: var(--rs-orange);
box-shadow: 0 5px 14px rgba(255,106,0,.20);
}
/* table cards */
.dashboard-table-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #ffffff, #fffdfb);
border: 1px solid #eceff2;
box-shadow: 0 9px 24px rgba(17,45,70,.07);
transition: transform .18s ease, box-shadow .18s ease;
}
.dashboard-table-card:hover {
transform: translateY(-2px);
box-shadow: 0 13px 28px rgba(17,45,70,.10);
}
.dashboard-table-card.free::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, #34b36b, #7bd89e);
}
.dashboard-table-card.running::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, #ff8a1f, #ff5e00);
}
.dashboard-table-card.running {
background: linear-gradient(180deg, #fff9f4, #fffdfb);
border-color: #ffc9a2;
}
.dashboard-table-name {
color: var(--rs-navy);
font-size: 19px;
}
.table-big-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: #fff0e3;
font-size: 22px;
}
.dashboard-status-pill {
background: #eaf8ef;
color: #168346;
border: 1px solid #d7f1df;
}
.dashboard-table-card.running .dashboard-status-pill {
background: #fff0e6;
color: #d55a00;
border-color: #ffd4b8;
}
.free-info,
.running-info small {
color: #8a9299;
}
/* order buttons */
.table-action-btn {
background: linear-gradient(135deg, var(--rs-orange-2), var(--rs-orange));
box-shadow: 0 7px 16px rgba(255,106,0,.18);
transition: transform .15s ease, box-shadow .15s ease;
}
.table-action-btn:hover {
background: linear-gradient(135deg, #ff7d12, #e95d00);
box-shadow: 0 9px 20px rgba(255,106,0,.24);
transform: translateY(-1px);
}
.running-action {
background: #fff;
color: var(--rs-orange);
border: 1.5px solid var(--rs-orange);
box-shadow: none;
}
.running-action:hover {
color: #fff;
background: var(--rs-orange);
}
/* empty state */
.dashboard-empty {
background: linear-gradient(180deg, #fff, #fffbf7);
border: 1.5px dashed #ffc89f;
box-shadow: 0 7px 20px rgba(255,106,0,.05);
}
.dashboard-empty h3 {
color: var(--rs-navy);
}
.dashboard-main-btn {
background: linear-gradient(135deg, var(--rs-orange-2), var(--rs-orange));
box-shadow: 0 7px 16px rgba(255,106,0,.18);
}
/* bottom nav */
.bottom-nav {
border-top: 1px solid #f0e6de;
box-shadow: 0 -8px 24px rgba(17,45,70,.06);
}
.bottom-nav a {
color: #67717b;
}
.bottom-nav span {
color: var(--rs-orange);
}
.bottom-nav a:hover {
color: var(--rs-orange);
}
/* desktop spacing */
@media (min-width: 650px) {
.dashboard-page {
padding-top: 4px;
}
.dashboard-welcome {
min-height: 110px;
}
.dashboard-summary {
margin-top: 2px;
}
}
/* mobile tuning */
@media (max-width: 480px) {
.dashboard-welcome {
padding: 15px;
border-radius: 18px;
}
.dashboard-welcome h1 {
font-size: 22px;
}
.dashboard-plan-strip {
border-radius: 14px;
}
.dash-stat {
padding: 12px;
border-radius: 15px;
}
.dash-stat strong {
font-size: 18px;
}
.dashboard-table-card {
border-radius: 16px;
}
.table-action-btn {
min-height: 38px;
}
}
/* =====================================================
RESTAURANT SAATHI - SHARP TYPOGRAPHY FIX
===================================================== */
/* Better rendering */
html {
font-size: 16px !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: "Segoe UI", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 500;
line-height: 1.45;
color: #132b40 !important;
}
/* Header */
.brand-mini,
.app-product-name {
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .5px;
}
.restaurant-name {
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.2;
}
/* Dashboard greeting */
.dashboard-welcome .eyebrow {
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 1px;
}
.dashboard-welcome h1 {
font-size: 27px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: -.4px;
color: #102f4b !important;
}
.dashboard-welcome p {
font-size: 14px !important;
font-weight: 500 !important;
color: #687582 !important;
margin-top: 4px;
}
.dashboard-badge {
font-size: 12px !important;
font-weight: 800 !important;
}
/* Account strip */
.dashboard-plan-strip strong {
font-size: 15px !important;
font-weight: 800 !important;
}
.dashboard-plan-strip small {
font-size: 12px !important;
font-weight: 500 !important;
}
.plan-price {
font-size: 13px !important;
font-weight: 900 !important;
}
/* Sales cards */
.dash-stat > span {
font-size: 13px !important;
font-weight: 600 !important;
color: #596a78 !important;
}
.dash-stat strong {
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
color: #102f4b !important;
}
.dash-stat-icon {
font-size: 17px !important;
font-weight: 800 !important;
}
/* TABLE heading */
.table-section-head h2,
.section-head h2 {
font-size: 25px !important;
font-weight: 800 !important;
letter-spacing: -.3px;
color: #102f4b !important;
}
.table-section-head small,
.section-head span {
font-size: 12px !important;
font-weight: 600 !important;
color: #75818c !important;
}
.manage-link,
.small-link {
font-size: 13px !important;
font-weight: 800 !important;
}
/* Filter buttons */
.table-filter {
font-size: 12px !important;
font-weight: 800 !important;
padding: 8px 14px !important;
}
/* Table cards */
.dashboard-table-name,
.table-name {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: -.3px;
color: #102f4b !important;
}
.dashboard-status-pill,
.status-pill {
font-size: 11px !important;
font-weight: 800 !important;
}
.free-info,
.running-info,
.running-info small {
font-size: 12px !important;
font-weight: 500 !important;
color: #697985 !important;
}
.dashboard-table-card strong {
font-weight: 800 !important;
}
/* Order number */
.dashboard-table-card .order-number,
.dashboard-table-card .order-no {
font-size: 13px !important;
font-weight: 800 !important;
color: #e95f00 !important;
}
/* Buttons */
.table-action-btn,
.dashboard-main-btn,
.btn-brand {
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: .05px;
}
/* Bottom navigation */
.bottom-nav a {
font-size: 12px !important;
font-weight: 700 !important;
}
.bottom-nav span {
font-size: 23px !important;
line-height: 25px !important;
}
/* General forms */
.form-label {
font-size: 14px !important;
font-weight: 700 !important;
color: #18344d;
}
.form-control,
.form-select {
font-size: 15px !important;
font-weight: 500 !important;
}
.btn {
font-weight: 700;
}
/* Page titles - Menu / Tables / Bills / Settings */
.page-title h1,
.order-head h1 {
font-size: 26px !important;
font-weight: 800 !important;
letter-spacing: -.4px;
color: #102f4b !important;
}
.page-title p,
.order-head small {
font-size: 13px !important;
font-weight: 500 !important;
}
/* Lists */
.list-card strong {
font-size: 16px !important;
font-weight: 800 !important;
}
.list-card small {
font-size: 12px !important;
font-weight: 500 !important;
}
/* Bill */
.bill-brand h2 {
font-size: 25px !important;
font-weight: 800 !important;
}
.bill-meta,
.bill-row,
.bill-row-head,
.thankyou {
font-size: 13px !important;
}
.bill-total {
font-size: 14px !important;
font-weight: 600;
}
.bill-total .grand {
font-size: 23px !important;
font-weight: 900 !important;
}
/* ================================
MOBILE
================================ */
@media (max-width: 480px) {
body {
font-size: 15px !important;
}
.dashboard-welcome h1 {
font-size: 25px !important;
}
.dashboard-welcome p {
font-size: 13px !important;
}
.dash-stat > span {
font-size: 12px !important;
}
.dash-stat strong {
font-size: 21px !important;
}
.table-section-head h2,
.section-head h2 {
font-size: 23px !important;
}
.dashboard-table-name,
.table-name {
font-size: 21px !important;
}
.table-action-btn {
font-size: 13px !important;
min-height: 42px !important;
}
.bottom-nav a {
font-size: 11px !important;
}
}
/* =====================================================
DESKTOP WIDTH / SPACING POLISH
Mobile layout unchanged
===================================================== */
@media (min-width: 900px) {
.app-shell {
max-width: 980px !important;
padding-left: 22px !important;
padding-right: 22px !important;
}
.app-topbar {
padding-left: max(22px, calc((100vw - 980px) / 2 + 22px)) !important;
padding-right: max(22px, calc((100vw - 980px) / 2 + 22px)) !important;
}
.bottom-nav {
max-width: 980px !important;
}
.dashboard-summary {
gap: 12px !important;
}
.dash-stat {
padding: 16px 14px !important;
}
.dashboard-table-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
.dashboard-table-card {
padding: 15px !important;
}
.dashboard-welcome {
padding: 20px !important;
}
.table-section {
margin-top: 24px !important;
}
.manage-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
.menu-pick-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
}
/* =====================================================
RESTAURANT SAATHI - ORDER SCREEN V2
===================================================== */
.order-page {
padding-bottom: 125px;
}
.order-hero-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 18px 20px;
margin-bottom: 15px;
border: 1px solid #ffd0ad;
border-radius: 20px;
background: radial-gradient( circle at 95% 10%, rgba(255,106,0,.15), transparent 30% ), linear-gradient( 135deg, #fff8f2, #fff1e5 );
box-shadow: 0 10px 25px rgba(255,106,0,.08);
}
.order-hero-left .eyebrow {
font-size: 11px !important;
font-weight: 900;
color: #f26700;
}
.order-hero-left h1 {
margin: 4px 0 0;
font-size: 30px;
line-height: 1;
color: #102f4b;
font-weight: 900;
}
.order-hero-left p {
margin: 6px 0 0;
color: #647381;
font-size: 13px;
font-weight: 500;
}
.order-total-box {
min-width: 110px;
padding: 12px 14px;
text-align: right;
border-radius: 17px;
background: linear-gradient( 135deg, #ff8a1f, #ff6300 );
color: #fff;
box-shadow: 0 8px 20px rgba(255,106,0,.20);
}
.order-total-box small {
display: block;
font-size: 11px;
opacity: .9;
font-weight: 600;
}
.order-total-box strong {
display: block;
margin-top: 1px;
font-size: 25px;
line-height: 1.1;
font-weight: 900;
}
/* CURRENT ORDER */
.current-order-card {
margin-bottom: 19px;
padding: 5px 16px 7px;
background: #fff;
border-radius: 19px;
border: 1px solid #edf0f2;
box-shadow: 0 8px 24px rgba(17,45,70,.06);
}
.current-order-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid #edf0f2;
}
.current-order-head h2 {
margin: 0;
font-size: 18px;
color: #102f4b;
font-weight: 900;
}
.current-order-head span {
display: block;
margin-top: 2px;
font-size: 11px;
color: #7a8790;
}
.current-order-total {
font-size: 18px;
color: #f26700;
font-weight: 900;
}
.current-order-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid #eef1f3;
}
.current-order-row:last-child {
border-bottom: 0;
}
.current-item-main {
min-width: 0;
flex: 1;
}
.current-item-main strong {
display: block;
color: #15344f;
font-size: 15px;
font-weight: 800;
}
.current-item-main span {
display: block;
margin-top: 3px;
color: #798691;
font-size: 11px;
font-weight: 500;
}
.current-item-main em {
display: block;
margin-top: 2px;
color: #f26700;
font-size: 12px;
font-style: normal;
font-weight: 800;
}
/* QUANTITY */
.order-qty-control {
display: flex;
align-items: center;
gap: 8px;
}
.order-qty-control form {
margin: 0;
}
.qty-btn {
width: 38px;
height: 38px;
border: 0;
border-radius: 12px;
font-size: 21px;
font-weight: 900;
display: grid;
place-items: center;
}
.qty-btn.minus {
background: #fff0e8;
color: #e86200;
}
.qty-btn.plus {
background: #ff6a00;
color: #fff;
box-shadow: 0 5px 12px rgba(255,106,0,.20);
}
.qty-value {
min-width: 23px;
text-align: center;
font-size: 15px;
color: #102f4b;
font-weight: 900;
}
/* ADD ITEMS */
.order-menu-head {
margin: 3px 2px 10px;
}
.order-menu-head h2 {
margin: 0;
color: #102f4b;
font-size: 24px;
font-weight: 900;
}
.order-menu-head span {
display: block;
margin-top: 2px;
color: #78858f;
font-size: 11px;
font-weight: 500;
}
/* SEARCH */
.order-search {
height: 54px;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #dfe4e8;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(17,45,70,.035);
}
.order-search:focus-within {
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255,106,0,.08);
}
.order-search > span {
width: 50px;
min-width: 50px;
text-align: center;
font-size: 19px;
}
.order-search .form-control {
height: 100%;
border: 0 !important;
box-shadow: none !important;
padding-left: 0;
font-size: 14px !important;
font-weight: 500;
}
/* CATEGORIES */
.order-category-strip {
display: flex;
gap: 7px;
overflow-x: auto;
padding: 10px 1px 12px;
scrollbar-width: none;
}
.order-category-strip::-webkit-scrollbar {
display: none;
}
.order-category-chip {
border: 1px solid #dfe3e7;
border-radius: 999px;
padding: 8px 15px;
background: #fff;
color: #566672;
white-space: nowrap;
font-size: 12px;
font-weight: 800;
box-shadow: 0 3px 10px rgba(0,0,0,.025);
}
.order-category-chip.active {
border-color: #ff6a00;
background: linear-gradient( 135deg, #ff891e, #ff6200 );
color: #fff;
box-shadow: 0 6px 15px rgba(255,106,0,.20);
}
/* MENU GRID */
.order-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.order-menu-item button {
position: relative;
width: 100%;
height: 100%;
min-height: 92px;
border: 1px solid #edf0f2;
border-radius: 17px;
padding: 13px;
display: flex;
align-items: center;
gap: 11px;
text-align: left;
background: linear-gradient( 180deg, #fff, #fffdfb );
box-shadow: 0 7px 20px rgba(17,45,70,.055);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.order-menu-item button:hover {
transform: translateY(-2px);
border-color: #ffcba4;
box-shadow: 0 11px 25px rgba(17,45,70,.085);
}
.menu-food-icon {
width: 44px;
height: 44px;
min-width: 44px;
display: grid;
place-items: center;
border-radius: 14px;
background: #fff0e3;
font-size: 21px;
}
.menu-food-content {
min-width: 0;
flex: 1;
}
.menu-food-content strong {
display: block;
color: #15344f;
font-size: 14px;
font-weight: 800;
line-height: 1.25;
}
.menu-food-content span {
display: block;
margin-top: 5px;
color: #f26700;
font-size: 14px;
font-weight: 900;
}
.menu-add-icon {
width: 30px;
height: 30px;
min-width: 30px;
border-radius: 10px;
display: grid;
place-items: center;
background: #ff6a00;
color: #fff;
font-size: 20px;
font-weight: 900;
}
/* EMPTY MENU */
.order-empty-menu {
padding: 37px 20px;
text-align: center;
background: linear-gradient( 180deg, #fff, #fffaf6 );
border: 1.5px dashed #ffc59b;
border-radius: 19px;
}
.order-empty-icon {
font-size: 38px;
}
.order-empty-menu h3 {
margin: 11px 0 3px;
font-size: 18px;
color: #102f4b;
font-weight: 900;
}
.order-empty-menu p {
margin: 0 auto 14px;
color: #7b8790;
font-size: 11px;
}
.order-menu-setup-btn {
display: inline-block;
padding: 10px 17px;
border-radius: 12px;
background: #ff6a00;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 800;
}
/* GENERATE BILL STICKY */
.order-bill-sticky {
position: fixed;
left: 50%;
bottom: 76px;
transform: translateX(-50%);
width: calc(100% - 28px);
max-width: 930px;
z-index: 100;
}
.order-generate-bill {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border: 0;
border-radius: 17px;
padding: 13px 17px;
background: linear-gradient( 135deg, #ff8418, #ff5f00 );
color: #fff;
box-shadow: 0 12px 30px rgba(255,106,0,.32);
}
.order-generate-bill small {
display: block;
text-align: left;
font-size: 9px;
font-weight: 600;
opacity: .85;
}
.order-generate-bill span {
display: block;
margin-top: 1px;
font-size: 15px;
font-weight: 900;
}
.order-generate-bill strong {
font-size: 20px;
font-weight: 900;
}
.order-generate-bill b {
margin-left: 5px;
}
/* BILL MODAL */
.order-bill-modal {
border: 0;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.order-bill-modal .modal-header {
padding: 17px 18px;
border-bottom: 1px solid #edf0f2;
}
.order-bill-modal .modal-title {
color: #102f4b;
font-size: 19px;
font-weight: 900;
}
.order-bill-modal .modal-header small {
color: #78858e;
font-size: 10px;
}
.order-bill-modal .modal-body {
padding: 18px;
}
.order-modal-label {
margin: 0 0 6px 2px;
display: block;
color: #415667;
font-size: 12px;
font-weight: 800;
}
.order-modal-input {
min-height: 50px;
border: 1.5px solid #dfe4e8;
border-radius: 13px;
font-size: 14px !important;
box-shadow: none !important;
}
.order-modal-input:focus {
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255,106,0,.08) !important;
}
.order-bill-modal .modal-footer {
padding: 12px 18px 18px;
border-top: 0;
}
.order-create-bill-btn {
width: 100%;
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
border: 0;
border-radius: 14px;
padding: 0 16px;
background: linear-gradient( 135deg, #ff8418, #ff5f00 );
color: #fff;
font-size: 14px;
font-weight: 900;
}
.order-create-bill-btn strong {
font-size: 18px;
}
/* TABLET */
@media (max-width: 850px) {
.order-menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* MOBILE */
@media (max-width: 480px) {
.order-page {
padding-bottom: 115px;
}
.order-hero-card {
padding: 14px;
border-radius: 17px;
}
.order-hero-left h1 {
font-size: 25px;
}
.order-hero-left p {
font-size: 11px;
}
.order-total-box {
min-width: 92px;
padding: 10px 11px;
}
.order-total-box strong {
font-size: 21px;
}
.order-menu-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.order-menu-item button {
min-height: 86px;
padding: 10px;
gap: 8px;
}
.menu-food-icon {
width: 37px;
height: 37px;
min-width: 37px;
font-size: 18px;
}
.menu-food-content strong {
font-size: 12px;
}
.menu-food-content span {
font-size: 13px;
}
.menu-add-icon {
width: 27px;
height: 27px;
min-width: 27px;
font-size: 18px;
}
.current-item-main strong {
font-size: 13px;
}
.qty-btn {
width: 35px;
height: 35px;
}
.order-bill-sticky {
bottom: 74px;
width: calc(100% - 24px);
}
}
/* =====================================================
MENU SETUP - PREMIUM UI
===================================================== */
.menu-page {
padding-bottom: 30px;
}
.menu-setup-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.menu-setup-card {
background: #fff;
border: 1px solid #edf0f2;
border-radius: 20px;
padding: 18px;
box-shadow: 0 9px 25px rgba(17,45,70,.07);
}
.category-card {
background: linear-gradient( 145deg, #fffaf6, #fff );
}
.item-card {
background: linear-gradient( 145deg, #fff, #fffaf6 );
}
.menu-setup-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.menu-setup-icon {
width: 48px;
height: 48px;
min-width: 48px;
display: grid;
place-items: center;
border-radius: 15px;
background: linear-gradient( 135deg, #fff0e4, #ffe5d1 );
font-size: 22px;
}
.menu-setup-head h2 {
margin: 0;
color: #102f4b;
font-size: 18px;
font-weight: 900;
}
.menu-setup-head p {
margin: 3px 0 0;
color: #78858f;
font-size: 11px;
font-weight: 500;
}
/* CATEGORY ADD */
.menu-input-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 9px;
}
.menu-input {
min-height: 52px;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #dfe4e8;
border-radius: 14px;
overflow: hidden;
}
.menu-input:focus-within {
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255,106,0,.08);
}
.menu-input > span {
width: 46px;
min-width: 46px;
text-align: center;
color: #f26700;
font-size: 19px;
font-weight: 900;
}
.menu-input .form-control {
height: 50px;
border: 0 !important;
box-shadow: none !important;
padding-left: 0;
background: transparent;
font-size: 14px !important;
font-weight: 500;
}
.menu-add-btn {
min-width: 92px;
border: 0;
border-radius: 14px;
background: linear-gradient( 135deg, #ff861b, #ff6100 );
color: #fff;
font-size: 13px;
font-weight: 900;
box-shadow: 0 7px 18px rgba(255,106,0,.22);
}
/* ITEM FORM */
.menu-form-field {
margin-bottom: 11px;
}
.menu-form-field label {
display: block;
margin: 0 0 5px 2px;
color: #42596b;
font-size: 12px;
font-weight: 800;
}
.menu-select {
min-height: 52px;
border: 1.5px solid #dfe4e8;
border-radius: 14px;
font-size: 14px !important;
font-weight: 500;
box-shadow: none !important;
}
.menu-select:focus {
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255,106,0,.08) !important;
}
.menu-item-entry {
display: grid;
grid-template-columns: 1.5fr .75fr;
gap: 9px;
}
.menu-input.rate > span {
width: 38px;
min-width: 38px;
}
.menu-item-add-btn {
width: 100%;
min-height: 49px;
margin-top: 3px;
border: 0;
border-radius: 14px;
background: linear-gradient( 135deg, #ff861b, #ff6100 );
color: #fff;
font-size: 13px;
font-weight: 900;
box-shadow: 0 7px 18px rgba(255,106,0,.20);
}
/* FIRST CATEGORY NOTE */
.menu-category-note {
display: flex;
align-items: center;
gap: 11px;
padding: 14px;
border-radius: 14px;
background: linear-gradient( 135deg, #fff4ea, #fff9f4 );
border: 1px solid #ffd6b8;
}
.menu-category-note > span {
font-size: 22px;
}
.menu-category-note strong {
display: block;
color: #b6500a;
font-size: 13px;
font-weight: 900;
}
.menu-category-note small {
display: block;
margin-top: 2px;
color: #8d755f;
font-size: 9px;
}
/* YOUR MENU HEADING */
.menu-list-head {
display: flex;
justify-content: space-between;
align-items: end;
margin: 25px 2px 11px;
}
.menu-list-head h2 {
margin: 0;
color: #102f4b;
font-size: 24px;
font-weight: 900;
}
.menu-list-head p {
margin: 2px 0 0;
color: #78858f;
font-size: 11px;
font-weight: 600;
}
.menu-category-count {
padding: 6px 10px;
border-radius: 999px;
background: #fff0e4;
color: #e86200;
font-size: 10px;
font-weight: 800;
}
/* EMPTY */
.menu-empty-state {
padding: 42px 20px;
text-align: center;
background: linear-gradient( 180deg, #fff, #fffaf6 );
border: 1.5px dashed #ffc79d;
border-radius: 20px;
}
.menu-empty-icon {
font-size: 42px;
}
.menu-empty-state h3 {
margin: 11px 0 3px;
color: #102f4b;
font-size: 19px;
font-weight: 900;
}
.menu-empty-state p {
margin: 0;
color: #7c8993;
font-size: 11px;
}
/* CATEGORY LIST */
.menu-category-list {
display: grid;
gap: 14px;
}
.menu-category-card {
overflow: hidden;
background: #fff;
border: 1px solid #edf0f2;
border-radius: 19px;
box-shadow: 0 7px 22px rgba(17,45,70,.055);
}
.menu-category-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: linear-gradient( 135deg, #fff6ee, #fff );
border-bottom: 1px solid #eef0f2;
}
.menu-category-title h3 {
margin: 0;
color: #102f4b;
font-size: 17px;
font-weight: 900;
}
.menu-category-title span {
display: block;
margin-top: 2px;
color: #798691;
font-size: 10px;
}
.category-status {
padding: 5px 9px;
border-radius: 999px;
font-size: 9px;
font-weight: 900;
}
.category-status.active {
background: #e9f8ee;
color: #208348;
}
.category-status.inactive {
background: #fff0ee;
color: #bc4b3c;
}
/* ITEMS */
.menu-items-list {
display: grid;
}
.menu-item-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-bottom: 1px solid #eef0f2;
}
.menu-item-row:last-child {
border-bottom: 0;
}
.menu-item-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 13px;
background: #fff0e4;
font-size: 20px;
}
.menu-item-info {
min-width: 0;
}
.menu-item-info strong {
display: block;
color: #15344f;
font-size: 14px;
font-weight: 800;
}
.menu-item-info span {
display: block;
margin-top: 2px;
font-size: 9px;
font-weight: 800;
}
.menu-item-info span.active {
color: #279151;
}
.menu-item-info span.inactive {
color: #bd5043;
}
.menu-item-price {
color: #f26700;
font-size: 16px;
font-weight: 900;
}
.menu-category-empty {
padding: 16px;
color: #7f8a92;
font-size: 11px;
}
/* TABLET / MOBILE */
@media (max-width: 760px) {
.menu-setup-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.menu-page {
padding-bottom: 20px;
}
.menu-setup-card {
padding: 15px;
border-radius: 17px;
}
.menu-setup-head h2 {
font-size: 16px;
}
.menu-input-row {
grid-template-columns: 1fr;
}
.menu-add-btn {
min-height: 46px;
width: 100%;
}
.menu-item-entry {
grid-template-columns: 1fr .7fr;
}
.menu-list-head h2 {
font-size: 21px;
}
.menu-item-row {
padding: 11px 12px;
}
.menu-item-icon {
width: 38px;
height: 38px;
font-size: 18px;
}
.menu-item-info strong {
font-size: 13px;
}
.menu-item-price {
font-size: 14px;
}
}
.order-hero-actions {
display: flex;
align-items: center;
gap: 10px;
}
.order-menu-link {
min-height: 44px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 13px;
background: #fff;
border: 1.5px solid #ff6a00;
color: #ff6a00;
text-decoration: none;
font-size: 12px;
font-weight: 900;
}
.order-menu-link:hover {
background: #fff2e8;
color: #e85f00;
}
@media (max-width: 480px) {
.order-hero-card {
align-items: flex-start;
}
.order-hero-actions {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.order-menu-link {
min-height: 38px;
font-size: 11px;
}
}
/* =====================================================
GLOBAL MOBILE BACK BUTTON
===================================================== */
.topbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.global-back-btn {
width: 40px;
height: 40px;
min-width: 40px;
display: grid;
place-items: center;
border: 0;
border-radius: 12px;
background: #fff1e7;
color: #f26700;
font-size: 23px;
line-height: 1;
font-weight: 900;
cursor: pointer;
}
.global-back-btn:hover {
background: #ffe3cf;
color: #df5d00;
}
.global-back-btn:active {
transform: scale(.96);
}
@media (max-width:480px) {
.global-back-btn {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 11px;
font-size: 21px;
}
.app-brand-logo {
width: 37px;
height: 37px;
}
.restaurant-name {
max-width: 150px;
}
}
/* =====================================================
PREMIUM BILL + PAYMENT SCREEN
===================================================== */
.bill-page {
padding-bottom: 30px;
}
.bill-screen-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.bill-screen-head h1 {
margin: 2px 0 0;
color: #102f4b;
font-size: 27px;
font-weight: 900;
}
.bill-screen-head p {
margin: 3px 0 0;
color: #78858f;
font-size: 11px;
font-weight: 500;
}
.bill-head-status {
padding: 7px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
}
.bill-head-status.paid {
background: #e8f8ed;
color: #218348;
}
.bill-head-status.pending {
background: #fff0e4;
color: #d85a00;
}
/* BILL CARD */
.bill-premium-card {
background: #fff;
border: 1px solid #edf0f2;
border-radius: 22px;
padding: 20px;
box-shadow: 0 10px 28px rgba(17,45,70,.07);
}
.bill-restaurant-head {
display: flex;
align-items: center;
gap: 13px;
padding-bottom: 15px;
margin-bottom: 14px;
border-bottom: 1px dashed #d9dee2;
}
.bill-restaurant-logo-wrap {
width: 62px;
height: 62px;
min-width: 62px;
display: grid;
place-items: center;
border-radius: 17px;
background: #fff4eb;
}
.bill-restaurant-logo {
max-width: 52px;
max-height: 52px;
object-fit: contain;
}
.bill-logo-fallback {
font-size: 27px;
}
.bill-restaurant-info h2 {
margin: 0;
color: #102f4b;
font-size: 22px;
font-weight: 900;
}
.bill-restaurant-info p {
margin: 4px 0 0;
color: #74818b;
font-size: 10px;
}
.bill-restaurant-info span {
display: block;
margin-top: 3px;
color: #596975;
font-size: 10px;
font-weight: 600;
}
/* META */
.bill-meta-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding-bottom: 14px;
margin-bottom: 4px;
border-bottom: 1px solid #edf0f2;
}
.bill-meta-grid div {
min-width: 0;
}
.bill-meta-grid span {
display: block;
color: #8a949d;
font-size: 8px;
font-weight: 600;
}
.bill-meta-grid strong {
display: block;
margin-top: 2px;
color: #17344d;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ITEMS */
.bill-item-table {
margin-top: 4px;
}
.bill-item-head,
.bill-item-row {
display: grid;
grid-template-columns: 1fr 55px 90px;
gap: 8px;
align-items: center;
}
.bill-item-head {
padding: 9px 0;
color: #657582;
font-size: 9px;
font-weight: 800;
border-bottom: 1px solid #e9edef;
}
.bill-item-head span:nth-child(2),
.bill-item-head span:nth-child(3) {
text-align: right;
}
.bill-item-row {
padding: 12px 0;
border-bottom: 1px solid #eef1f3;
}
.bill-item-name strong {
display: block;
color: #15344f;
font-size: 13px;
font-weight: 800;
}
.bill-item-name span {
display: block;
margin-top: 2px;
color: #89939b;
font-size: 9px;
}
.bill-item-qty {
text-align: right;
color: #334c60;
font-size: 12px;
font-weight: 700;
}
.bill-item-amount {
text-align: right;
color: #102f4b;
font-size: 13px;
font-weight: 900;
}
/* TOTAL */
.bill-summary {
padding-top: 13px;
}
.bill-summary > div {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 4px 0;
color: #596975;
font-size: 11px;
}
.bill-summary > div strong {
color: #17344d;
font-weight: 800;
}
.bill-summary .bill-grand-total {
margin-top: 8px;
padding-top: 12px;
border-top: 2px solid #17344d;
color: #102f4b;
font-size: 21px;
font-weight: 900;
}
.bill-summary .bill-grand-total strong {
color: #f26700;
font-size: 24px;
font-weight: 900;
}
/* PAYMENT STATUS */
.bill-payment-banner {
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-radius: 14px;
}
.bill-payment-banner.pending {
background: #fff2e7;
border: 1px solid #ffd5b6;
}
.bill-payment-banner.paid {
background: #eaf8ef;
border: 1px solid #d2efdc;
}
.bill-payment-banner strong {
display: block;
color: #17344d;
font-size: 12px;
font-weight: 900;
}
.bill-payment-banner span {
display: block;
margin-top: 2px;
color: #79858f;
font-size: 9px;
}
.bill-payment-balance {
text-align: right;
}
.bill-payment-balance small {
display: block;
color: #8a949c;
font-size: 8px;
}
.bill-payment-banner.pending .bill-payment-balance strong {
color: #f26700;
font-size: 17px;
}
.bill-payment-banner.paid .bill-payment-balance strong {
color: #218348;
font-size: 14px;
}
.bill-thankyou {
margin-top: 13px;
text-align: center;
color: #78858f;
font-size: 10px;
font-weight: 500;
}
/* PAYMENT CARD */
.payment-premium-card {
margin-top: 14px;
padding: 18px;
background: #fff;
border: 1px solid #edf0f2;
border-radius: 20px;
box-shadow: 0 9px 25px rgba(17,45,70,.06);
}
.payment-premium-head {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 16px;
}
.payment-head-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 14px;
background: #fff0e4;
font-size: 21px;
}
.payment-premium-head h2 {
margin: 0;
color: #102f4b;
font-size: 18px;
font-weight: 900;
}
.payment-premium-head p {
margin: 3px 0 0;
color: #f26700;
font-size: 11px;
font-weight: 800;
}
/* AMOUNT */
.payment-form-field {
margin-bottom: 13px;
}
.payment-form-field label,
.payment-mode-title {
display: block;
margin: 0 0 6px 2px;
color: #41586a;
font-size: 12px;
font-weight: 800;
}
.payment-amount-wrap {
min-height: 52px;
display: flex;
align-items: center;
overflow: hidden;
border: 1.5px solid #dfe4e8;
border-radius: 14px;
background: #fff;
}
.payment-amount-wrap:focus-within {
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255,106,0,.08);
}
.payment-amount-wrap > span {
width: 45px;
min-width: 45px;
text-align: center;
color: #f26700;
font-size: 18px;
font-weight: 900;
}
.payment-amount-wrap .form-control {
height: 50px;
border: 0 !important;
box-shadow: none !important;
padding-left: 0;
font-size: 16px !important;
font-weight: 800;
}
/* PAYMENT MODES */
.payment-mode-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.payment-mode-card {
position: relative;
min-height: 105px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 6px;
cursor: pointer;
background: #fff;
border: 1.5px solid #e1e6e9;
border-radius: 15px;
text-align: center;
}
.payment-mode-card input {
position: absolute;
opacity: 0;
}
.payment-mode-card:has(input:checked) {
border-color: #ff6a00;
background: #fff4eb;
box-shadow: 0 6px 16px rgba(255,106,0,.10);
}
.payment-mode-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
margin-bottom: 6px;
border-radius: 12px;
font-size: 18px;
}
.payment-mode-icon.cash {
background: #e8f8ee;
}
.payment-mode-icon.upi {
background: #eef4ff;
}
.payment-mode-icon.other {
background: #f5efff;
}
.payment-mode-card strong {
display: block;
color: #17344d;
font-size: 12px;
font-weight: 900;
}
.payment-mode-card span {
display: block;
margin-top: 2px;
color: #89939b;
font-size: 8px;
}
/* REFERENCE */
.payment-reference-input {
min-height: 50px;
border: 1.5px solid #dfe4e8;
border-radius: 14px;
font-size: 13px !important;
box-shadow: none !important;
}
.payment-reference-input:focus {
border-color: #ff6a00;
box-shadow: 0 0 0 4px rgba(255,106,0,.08) !important;
}
/* SAVE PAYMENT */
.payment-save-btn {
width: 100%;
min-height: 52px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
padding: 0 16px;
border: 0;
border-radius: 14px;
background: linear-gradient( 135deg, #ff861b, #ff6000 );
color: #fff;
font-size: 13px;
font-weight: 900;
box-shadow: 0 8px 20px rgba(255,106,0,.22);
}
.payment-save-btn strong {
font-size: 17px;
}
/* SHARE ACTIONS */
.bill-share-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 13px;
}
.bill-whatsapp-btn,
.bill-print-btn {
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 15px;
text-decoration: none;
text-align: left;
}
.bill-whatsapp-btn {
background: linear-gradient( 135deg, #27b267, #159750 );
color: #fff;
border: 0;
box-shadow: 0 7px 18px rgba(25,160,82,.18);
}
.bill-print-btn {
background: #fff;
color: #17344d;
border: 1.5px solid #dfe4e8;
}
.bill-whatsapp-btn > span,
.bill-print-btn > span {
font-size: 21px;
}
.bill-whatsapp-btn strong,
.bill-print-btn strong {
display: block;
font-size: 12px;
font-weight: 900;
}
.bill-whatsapp-btn small,
.bill-print-btn small {
display: block;
margin-top: 1px;
font-size: 8px;
opacity: .8;
}
/* MOBILE */
@media (max-width: 480px) {
.bill-premium-card {
padding: 15px;
border-radius: 18px;
}
.bill-screen-head h1 {
font-size: 22px;
}
.bill-restaurant-logo-wrap {
width: 52px;
height: 52px;
min-width: 52px;
}
.bill-restaurant-info h2 {
font-size: 18px;
}
.bill-meta-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.bill-item-head,
.bill-item-row {
grid-template-columns: 1fr 42px 70px;
}
.bill-summary .bill-grand-total {
font-size: 18px;
}
.bill-summary .bill-grand-total strong {
font-size: 21px;
}
.payment-premium-card {
padding: 15px;
}
.payment-mode-card {
min-height: 92px;
}
.bill-share-actions {
grid-template-columns: 1fr;
}
}
/* PRINT */
@media print {
.bill-page {
padding: 0 !important;
}
.bill-premium-card {
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
.bill-payment-banner {
border: 1px solid #ccc !important;
}
}
/* ===== PENDING PAYMENT DASHBOARD CARD ===== */
.dashboard-summary {
grid-template-columns: repeat(5, 1fr);
}
.dash-stat {
text-decoration: none;
color: inherit;
}
.pending-stat {
background: linear-gradient(135deg, #fff9ec, #fff3d6) !important;
border-color: #ffe1a1 !important;
}
.pending-stat .dash-stat-icon {
background: #fff0bf !important;
color: #dc8400 !important;
}
.pending-stat strong {
color: #d87900 !important;
}
.pending-stat:hover {
color: inherit;
}
@media (max-width: 650px) {
.dashboard-summary {
grid-template-columns: repeat(2, 1fr);
}
.pending-stat {
grid-column: span 2;
}
}
/* =========================================================
SUBSCRIPTION / TRIAL - HIGH VISIBILITY
========================================================= */
.dashboard-plan-strip {
min-height: 92px !important;
padding: 18px 22px !important;
border: 2px solid #ff8a32 !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #fff7ed, #ffead7) !important;
box-shadow: 0 8px 24px rgba(244, 123, 32, 0.16) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 15px !important;
}
.dashboard-plan-strip > div:first-child {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.dashboard-plan-strip strong {
display: block !important;
font-size: 21px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
color: #e65f00 !important;
}
.dashboard-plan-strip span {
display: block !important;
font-size: 15px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
color: #344054 !important;
}
.dashboard-plan-strip .plan-price {
min-width: 90px !important;
min-height: 44px !important;
padding: 10px 17px !important;
border-radius: 24px !important;
background: #ff6b00 !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 900 !important;
letter-spacing: .5px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 5px 14px rgba(255, 107, 0, .25) !important;
}
/* Expired subscription */
.dashboard-plan-strip.subscription-expired {
background: linear-gradient(135deg, #fff1f1, #ffe1e1) !important;
border-color: #e5484d !important;
}
.dashboard-plan-strip.subscription-expired strong {
color: #c62828 !important;
}
.dashboard-plan-strip.subscription-expired .plan-price {
background: #c62828 !important;
}
/* Mobile */
@media (max-width: 650px) {
.dashboard-plan-strip {
min-height: 86px !important;
padding: 15px 16px !important;
}
.dashboard-plan-strip strong {
font-size: 18px !important;
}
.dashboard-plan-strip span {
font-size: 13px !important;
font-weight: 700 !important;
}
.dashboard-plan-strip .plan-price {
min-width: 74px !important;
min-height: 40px !important;
padding: 8px 12px !important;
font-size: 13px !important;
}
}
/* =========================================================
SUBSCRIPTION PAGE
========================================================= */
.subscription-page {
padding-bottom: 90px;
}
.subscription-status-card {
margin-bottom: 24px;
padding: 22px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border: 2px solid #ffb37d;
background: linear-gradient(135deg, #fff8f0, #ffead9);
box-shadow: 0 10px 28px rgba(244, 123, 32, .12);
}
.subscription-status-card.expired {
border-color: #ef9a9a;
background: linear-gradient(135deg, #fff5f5, #ffe5e5);
}
.subscription-status-card small {
display: block;
margin-bottom: 5px;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
color: #f06a0b;
}
.subscription-status-card h2 {
margin: 0 0 6px;
font-size: 24px;
font-weight: 900;
color: #172b4d;
}
.subscription-status-card p {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #667085;
}
.subscription-status-badge {
min-width: 92px;
padding: 11px 14px;
border-radius: 24px;
text-align: center;
background: #ff6b00;
color: #fff;
font-size: 13px;
font-weight: 900;
letter-spacing: .6px;
}
.subscription-status-card.expired .subscription-status-badge {
background: #c62828;
}
.subscription-heading {
margin-bottom: 14px;
}
.subscription-heading h2 {
margin-bottom: 3px;
font-size: 23px;
font-weight: 900;
color: #172b4d;
}
.subscription-heading p {
margin: 0;
color: #667085;
font-weight: 600;
}
.subscription-plan-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.subscription-plan-card {
position: relative;
padding: 24px 18px 20px;
border-radius: 20px;
border: 1px solid #e5e7eb;
background: #fff;
box-shadow: 0 8px 22px rgba(16, 24, 40, .07);
text-align: center;
}
.subscription-plan-card.recommended {
border: 2px solid #ff7a1a;
background: linear-gradient(180deg, #fffaf5, #fff);
}
.recommended-badge {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
padding: 5px 14px;
border-radius: 20px;
background: #ff6b00;
color: white;
font-size: 10px;
font-weight: 900;
letter-spacing: .8px;
}
.plan-name {
margin-bottom: 12px;
font-size: 17px;
font-weight: 900;
color: #172b4d;
}
.plan-amount {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2px;
color: #f4670a;
}
.plan-amount span {
margin-top: 7px;
font-size: 18px;
font-weight: 900;
}
.plan-amount strong {
font-size: 42px;
line-height: 1;
font-weight: 900;
}
.plan-days {
margin-top: 8px;
font-size: 14px;
font-weight: 800;
color: #344054;
}
.subscription-plan-card p {
margin: 7px 0;
font-size: 13px;
color: #667085;
}
.plan-per-day {
margin: 14px 0;
padding: 7px;
border-radius: 10px;
background: #fff5eb;
color: #e76308;
font-size: 12px;
font-weight: 900;
}
.select-plan-btn {
width: 100%;
min-height: 46px;
border: 0;
border-radius: 13px;
background: #f46f13;
color: white;
font-size: 14px;
font-weight: 900;
box-shadow: 0 6px 14px rgba(244, 111, 19, .2);
}
.select-plan-btn:active {
transform: scale(.98);
}
.subscription-note {
margin-top: 20px;
padding: 17px;
border-radius: 16px;
display: flex;
gap: 13px;
background: #f8fafc;
border: 1px solid #eaecf0;
}
.subscription-note-icon {
font-size: 22px;
}
.subscription-note strong {
display: block;
margin-bottom: 3px;
color: #172b4d;
}
.subscription-note p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #667085;
}
.subscription-modal {
border: 0;
border-radius: 20px;
}
.selected-plan-summary {
padding: 20px;
border-radius: 16px;
background: #fff7ee;
text-align: center;
}
.selected-plan-summary span,
.selected-plan-summary small {
display: block;
}
.selected-plan-summary span {
font-weight: 800;
color: #344054;
}
.selected-plan-summary strong {
display: block;
margin: 7px 0;
font-size: 34px;
color: #ef690d;
}
.selected-plan-summary small {
color: #667085;
}
.payment-next-message {
margin-top: 14px;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #667085;
}
@media (max-width: 650px) {
.subscription-plan-grid {
grid-template-columns: 1fr;
}
.subscription-status-card {
padding: 17px;
}
.subscription-status-card h2 {
font-size: 19px;
}
.subscription-status-card p {
font-size: 12px;
}
.subscription-status-badge {
min-width: 72px;
padding: 9px 10px;
font-size: 11px;
}
.subscription-plan-card {
padding: 22px 18px 18px;
}
.plan-amount strong {
font-size: 38px;
}
}