:root{
  --brand:#f05a00;
  --brand-2:#ffb703;
  --bg:#fffaf5;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --success:#16a34a;
  --danger:#dc2626;
}

html,body{height:100%;}
body{
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(1200px 600px at 100% 0%, rgba(240,90,0,.12), transparent 60%),
              radial-gradient(900px 500px at 0% 100%, rgba(255,183,3,.18), transparent 55%),
              var(--bg);
  color: var(--text);
}

.brand-text{color:var(--brand) !important;}

.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:#d94c00;
  --bs-btn-hover-border-color:#d94c00;
  --bs-btn-active-bg:#c74400;
  --bs-btn-active-border-color:#c74400;
}

.badge-brand{background:rgba(240,90,0,.12); color:var(--brand); border:1px solid rgba(240,90,0,.2);}

.card{
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(31,41,55,.06);
}

.table{border-color:var(--border);}
.table thead th{
  background: linear-gradient(135deg, rgba(240,90,0,.92), rgba(255,183,3,.92));
  color:#fff;
  border-color: rgba(255,255,255,.15);
}

.form-control:focus, .form-select:focus{
  border-color: rgba(240,90,0,.55);
  box-shadow: 0 0 0 .25rem rgba(240,90,0,.18);
}

.product-card{
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(31,41,55,.10);
}

.product-img{
  height: 92px;
  object-fit: cover;
  border-radius: 12px;
}

.cart-list{max-height: 52vh; overflow:auto;}

/* Cart tabs (1..10) */
/* Show all 10 carts horizontally in the cart header */
.cart-tabs{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap: 4px;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.cart-tabs .btn{
  /* Make 10 tabs always fit in one row by letting them share the available width */
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  padding: 0;
  line-height: 28px;
  font-size: .82rem;
  border-radius: .6rem !important;
}

/* Allow the header to wrap on very small screens if needed */
.cart-head{min-width: 0;}
.cart-head .fw-bold{white-space: nowrap;}

@media (min-width: 992px){
  /* Ensure the tabs stay inside the header and do not overflow */
  .cart-head{gap: .5rem !important;}
  .cart-tabs{justify-content: space-between;}
}

/* Responsive helpers */
@media (min-width: 992px){
  .position-lg-sticky{ position: sticky; }
}

@media (max-width: 991.98px){
  /* Give more room to the cart on mobile */
  .cart-list{max-height: 38vh;}

  /* Prevent brand from overflowing on small screens */
  .navbar .navbar-brand{flex-wrap:wrap; max-width: 78vw;}
  .navbar .navbar-brand .badge{margin-top:.35rem;}

  /* Cart header may wrap on smaller screens */
  .cart-head{flex-wrap: wrap !important;}
  .cart-tabs{width: 100%; justify-content: space-between;}
}

.kbd-like{font-size:.8rem; padding:.1rem .4rem; border:1px solid var(--border); border-bottom-width:2px; border-radius:.4rem; background:#fff; color:var(--muted);}

@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  .card{box-shadow:none;}
}


/* POS layout improvements */
.cat-list{max-height: 72vh; overflow:auto; padding-inline: 2px;}
#catList .btn{padding:.45rem .55rem; font-size:.92rem; border-radius:.85rem; text-align:start;}

/* Slightly denser product cards */
.product-card .btn{padding:.45rem .65rem; font-size:.95rem; border-radius: 14px;}
.product-card .fw-bold{font-size: .98rem;}
.product-card .text-muted.small{font-size:.78rem;}

/* Cart item layout (better on POS / narrow cart column) */
.cart-item{border-bottom:1px solid rgba(229,231,235,.9); padding:.55rem 0;}
.cart-item:last-child{border-bottom:none;}
.cart-item .cart-qty{width: 92px; font-weight:700;}
.cart-item .cart-btn{width: 36px; height: 36px; padding:0; font-size:1.15rem; line-height:36px;}
.cart-item .cart-remove{font-size:.85rem;}

@media (max-width: 1199.98px){
  /* Give the cart a bit more space in typical POS resolutions */
  .cart-list{max-height: 58vh;}
  #catList .btn{font-size:.88rem; padding:.4rem .5rem;}
  .product-img{height: 104px;}
}

@media (max-width: 991.98px){
  /* Mobile stacking */
  .cat-list{max-height: 34vh;}
}



/* ===========================
   POS v8 (Professional layout)
   =========================== */

/* ===========================
   POS Reference Layout (match screenshot)
   =========================== */

.pos-layout-ref .pos-products-card{
  overflow: hidden;
}

.pos-products-top{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pos-products-search .input-group-text{
  background:#fff;
}

/* Horizontal category tabs (colored) */
.pos-layout-ref .pos-cats{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  padding: 2px 2px 8px;
}
.pos-layout-ref .pos-cats::-webkit-scrollbar{height:10px;}
.pos-layout-ref .pos-cats::-webkit-scrollbar-thumb{background:rgba(31,41,55,.22); border-radius:999px;}
.pos-layout-ref .pos-cats::-webkit-scrollbar-track{background:transparent;}

.pos-layout-ref .cat-chip{
  background: var(--chip-bg, #64748b) !important;
  color:#fff !important;
  border:none !important;
  border-radius: 10px !important;
  padding: .6rem 1.1rem !important;
  font-weight: 800 !important;
  min-width: 130px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  box-shadow: 0 8px 16px rgba(31,41,55,.08);
}
.pos-layout-ref .cat-chip.active{
  outline: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 22px rgba(31,41,55,.12);
}

/* Product tiles (match POS reference: more items visible) */
.products-grid-tiles{
  display:grid;
  /* 5 columns on typical POS desktops (1366px) */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

@media (max-width: 1199.98px){
  .products-grid-tiles{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px){
  .products-grid-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
  .products-grid-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.product-tile{
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 14px;
  background:#fff;
  padding: 8px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.product-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(31,41,55,.10);
}

.product-tile-img{
  height: 76px;
  border-radius: 12px;
  background: #f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.product-tile-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-tile-name{
  margin-top: 8px;
  font-weight: 800;
  font-size: .86rem;
  line-height: 1.15;
  height: 2.3em;
  overflow:hidden;
}
.product-tile-price{
  margin-top: 6px;
  font-weight: 900;
  color: #64748b;
  font-size: .86rem;
}

/* Cart: practical like POS screenshot */
.pos-cart-card{ overflow:hidden; }
.pos-cart{
  /* closer to full-height so footer sits lower */
  height: calc(100vh - 96px);
}
.pos-cart-top{ background: rgba(255,255,255,.85); }
.pos-cart-body{ flex: 1 1 auto; overflow:hidden; display:flex; flex-direction:column; }
.pos-cart-body .cart-list{ flex: 1 1 auto; }
.pos-cart .cart-list{ max-height:none; overflow:auto; padding-bottom: 8px; }

.pos-cart-footer{
  background: #fff;
  border-top: 1px solid rgba(229,231,235,.9);
}

/* Grid-like cart lines */
.cart-item{
  display:grid;
  grid-template-columns: 148px 1fr 96px 34px;
  gap: 10px;
  align-items:center;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(229,231,235,.9);
}
.cart-item:last-child{ border-bottom:none; }
.cart-item .cart-qty{ width: 92px; font-weight: 900; font-size: 1.02rem; }
.cart-item .cart-btn{ width: 36px; height: 36px; padding:0; font-size:1.2rem; border-radius: 10px; }
.cart-item .cart-name{ font-weight: 800; line-height: 1.1; }
.cart-item .cart-unit{ color: var(--muted); font-size: .82rem; margin-top: 2px; }
.cart-item .cart-total{ font-weight: 900; text-align:end; }
.cart-item .cart-remove{ font-size:0; }
.cart-item .cart-remove::before{ content:"✕"; font-size:1.05rem; font-weight:900; color: var(--danger); }

.cart-item .price-edit{
  grid-column: 1 / -1;
  margin-top: 6px;
}
.cart-item .price-edit .form-control{
  font-weight: 900;
}

/* Pay bar (big green button) */
.pos-paybar{
  display:grid;
  grid-template-columns: 1fr 56px 56px;
  gap: 10px;
  align-items:center;
}
.btn-pay{
  background: #22c55e;
  border: 1px solid #16a34a;
  color:#fff;
  height: 50px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.1rem;
}
.btn-pay:hover{ background:#16a34a; color:#fff; }
.btn-pay-print{
  height: 50px;
  border-radius: 12px;
  border: 1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.08);
  color: #1d4ed8;
  font-size: 1.2rem;
}
.btn-clear{
  height: 50px;
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  color: #b91c1c;
  font-size: 1.15rem;
}

/* Products panel should scroll while keeping search + categories visible */
.pos-products-card{
  height: calc(100vh - 96px);
  display:flex;
  flex-direction:column;
}
.pos-products-body{
  flex: 1 1 auto;
  overflow:auto;
  padding-top: 8px;
}

/* Compact footer (shrink the rectangle like user screenshot) */
.compact-footer .form-label{ margin-bottom: .25rem; font-size: .95rem; }
.compact-footer .pos-input{ height: 42px; font-size: 1.05rem; }
.compact-footer .input-group-text{ font-weight: 800; }
.compact-footer .form-text{ margin-top: .25rem; font-size: .78rem; }
.compact-footer .fs-4{ font-size: 1.45rem !important; }

/* Improve usability on typical POS resolutions */
@media (max-width: 1366px){
  .products-grid-tiles{ gap: 10px; }
  .product-tile-img{ height: 72px; }
  .pos-layout-ref .cat-chip{ min-width: 118px; height: 42px; padding:.55rem 1rem !important; }
}

@media (max-width: 991.98px){
  .pos-cart{ height:auto; }
  .pos-paybar{ grid-template-columns: 1fr 56px 56px; }
}

/* Horizontal categories bar */
.pos-cats{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding: 2px 2px 6px;
  scroll-behavior:smooth;
}
.pos-cats::-webkit-scrollbar{height:8px;}
.pos-cats::-webkit-scrollbar-thumb{background:rgba(31,41,55,.16); border-radius:999px;}
.pos-cats::-webkit-scrollbar-track{background:transparent;}

.cat-chip{
  border:1px solid rgba(229,231,235,.9) !important;
  background:#fff !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  padding:.35rem .7rem !important;
  font-weight:700 !important;
  white-space:nowrap;
  font-size:.92rem;
}
.cat-chip.active{
  background: rgba(240,90,0,.12) !important;
  border-color: rgba(240,90,0,.35) !important;
  color: var(--brand) !important;
}
.cat-chip.cat-fav{
  background: rgba(255,183,3,.16) !important;
  border-color: rgba(255,183,3,.35) !important;
}

/* Compact product cards */
.products-grid-compact .product-card{
  border-radius: 16px;
}
.products-grid-compact .product-img{
  height: 86px;
  border-radius: 12px;
}
.product-name{
  font-size: .95rem;
}
.btn-add-icon{
  width: 44px;
  height: 40px;
  padding:0;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.product-card:hover{ transform: translateY(-2px); }

/* Remove visual noise on small POS screens */
@media (max-width: 1199.98px){
  .products-grid-compact .product-img{ height: 80px; }
  .cat-chip{ font-size:.86rem; padding:.3rem .6rem !important; }
}

/* Cart: make it practical (scroll list, sticky totals) */
.pos-cart-card{ overflow: hidden; }
.pos-cart{
  height: calc(100vh - 96px);
}
.pos-cart .cart-list{
  max-height: none;
  overflow:auto;
}
.pos-cart-footer{
  border-top:1px solid rgba(229,231,235,.9);
  padding-top:.65rem;
}

/* Cart items: clearer and touch-friendly */
.cart-item{
  border-bottom:1px solid rgba(229,231,235,.9);
  padding:.6rem 0;
}
.cart-item .cart-remove{
  font-size: 0;
}
.cart-item .cart-remove::before{
  content: "✕";
  font-size: 1.05rem;
  font-weight: 800;
}
.cart-item .cart-qty{
  width: 110px;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 12px;
}
.cart-item .cart-btn{
  width: 40px;
  height: 40px;
  padding:0;
  font-size:1.25rem;
  line-height:40px;
  border-radius: 12px;
}

/* On small screens, let cart adapt */
@media (max-width: 991.98px){
  .pos-cart{ height: auto; }
  .pos-cart .cart-list{ max-height: 38vh; }
}


/* ===== POS Centering tweaks (v12) ===== */
.pos-discount-center{
  max-width: 520px;
  margin: 0 auto;
}
.pos-discount-center .form-label{
  width: 100%;
  text-align: center;
}
.pos-discount-center .input-group{
  justify-content: center;
}
#discount{
  text-align: center;
}

.price-edit{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.price-edit .form-label{
  text-align: center;
}
.price-edit .input-group{
  justify-content: center;
}