/* =====================================
   NACHOSEN ONE
   10% FRONTEND PROTOTYPE
===================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f7f5f1;
  color: #181313;
}

.container {
  width: min(1180px, 90%);
  margin: auto;
}

/* =====================================
   NAVIGATION
===================================== */

.header {
  background: #ffffff;
  border-bottom: 1px solid #e4dfda;

  position: sticky;
  top: 0;

  z-index: 100;
}

.navbar {
  min-height: 76px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;

  gap: 10px;

  font-weight: 800;
}

.brand-logo {
  width: 55px;
  height: 55px;
  object-fit: contain;
  display: block;
}

nav {
  display: flex;
  align-items: center;

  gap: 25px;
}

nav a {
  text-decoration: none;

  color: #181313;

  font-size: 14px;
  font-weight: 700;
}

nav a:hover,
nav a.active {
  color: #970b0b;
}

.cart-btn {
  border: none;

  background: #970b0b;
  color: #ffffff;

  padding: 12px 18px;

  border-radius: 30px;

  font-weight: 700;

  cursor: pointer;
}

#cartCount {
  display: inline-block;

  margin-left: 5px;

  background: #ffc20a;
  color: #181313;

  padding: 3px 8px;

  border-radius: 20px;
}

/* =====================================
   HERO
===================================== */

.hero {
  min-height: 500px;

  display: flex;
  align-items: center;

  color: #ffffff;

  background: linear-gradient(120deg, #6f0505 0%, #970b0b 55%, #b8170c 100%);
}

.hero-content {
  padding: 80px 0;
}

.small-title {
  color: #ffc20a;

  font-size: 14px;
  font-weight: 900;

  letter-spacing: 2px;

  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(50px, 7vw, 82px);

  line-height: 0.95;

  max-width: 700px;
}

.hero-text {
  max-width: 520px;

  margin-top: 25px;

  font-size: 18px;
  line-height: 1.6;

  color: #f5eaea;
}

.hero-buttons {
  display: flex;

  gap: 12px;

  margin-top: 30px;
}

.btn {
  display: inline-block;

  padding: 14px 23px;

  border-radius: 30px;

  text-decoration: none;

  font-weight: 800;
}

.btn-yellow {
  background: #ffc20a;
  color: #181313;
}

.btn-white {
  background: #ffffff;
  color: #970b0b;
}

/* =====================================
   ORDER TYPES
===================================== */

.order-types {
  padding: 35px 0;
}

.type-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}

.type-card {
  background: #ffffff;

  padding: 25px;

  border: 1px solid #e5dfd8;
  border-radius: 16px;

  text-align: center;
}

.type-card span {
  display: block;

  font-size: 30px;

  margin-bottom: 10px;
}

.type-card h3 {
  margin-bottom: 6px;
}

.type-card p {
  color: #6d6662;

  font-size: 14px;
}

/* =====================================
   MENU
===================================== */

.menu-section {
  padding: 55px 0 90px;
}

.section-heading {
  margin-bottom: 30px;
}

.red-label {
  color: #970b0b;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: 1.5px;

  margin-bottom: 8px;
}

.section-heading h2 {
  font-size: 38px;

  margin-bottom: 8px;
}

.section-heading > p:last-child {
  color: #6d6662;
}

.product-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;
}

.product-card {
  background: #ffffff;

  border: 1px solid #e3ded8;

  border-radius: 18px;

  overflow: hidden;

  transition: 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.product-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #eeeeee;
}

.product-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

.product-details {
  padding: 20px;
}

.product-details small {
  color: #970b0b;

  font-weight: 900;

  letter-spacing: 1px;
}

.product-details h3 {
  margin: 8px 0;

  font-size: 21px;
}

.product-details p {
  min-height: 65px;

  color: #6d6662;

  font-size: 14px;

  line-height: 1.5;
}

.product-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 18px;
}

.product-bottom strong {
  font-size: 21px;
}

.add-btn {
  border: none;

  background: #970b0b;
  color: #ffffff;

  padding: 10px 18px;

  border-radius: 25px;

  font-weight: 800;

  cursor: pointer;
}

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

/* =====================================
   FOOTER
===================================== */

footer {
  background: #171011;

  color: #ffffff;

  padding: 45px 0;
}

.footer-grid {
  display: grid;

  grid-template-columns: 1.5fr 1fr 1fr;

  gap: 50px;
}

footer h3,
footer h4 {
  margin-bottom: 12px;
}

footer p {
  color: #c7bebe;

  line-height: 1.6;
}

footer a {
  display: block;

  color: #c7bebe;

  text-decoration: none;

  margin: 8px 0;
}

footer a:hover {
  color: #ffc20a;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 850px) {
  .brand span {
    display: none;
  }

  nav {
    gap: 12px;
  }

  nav a {
    font-size: 12px;
  }

  .hero {
    min-height: 420px;
  }

  .type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;

    padding: 12px 0;

    gap: 12px;
  }

  nav {
    flex-wrap: wrap;

    justify-content: center;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-buttons {
    flex-direction: column;

    align-items: flex-start;
  }
}
.full-menu {
  padding: 50px 0 90px;
}

.menu-page-heading {
  margin-bottom: 30px;
}

.menu-page-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.menu-page-heading > p:last-child {
  color: #6d6662;
}

.category-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.category-btn {
  border: 1px solid #d9d2cc;
  background: #fff;
  padding: 11px 18px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 700;
}

.category-btn:hover,
.category-btn.active {
  background: #ffc20a;
  border-color: #970b0b;
}

.menu-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

#menuSearch {
  width: 100%;
  max-width: 500px;
  padding: 14px 18px;
  border: 1px solid #d9d2cc;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
}

#menuSearch:focus {
  border-color: #970b0b;
}

#productCount {
  color: #6d6662;
  font-size: 14px;
}

.full-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.menu-product-card {
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  overflow: hidden;
  transition: 0.2s;
}

.menu-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.menu-product-card > img,
.image-placeholder,
.drink-placeholder {
  width: 100%;
  height: 220px;
}

.menu-product-card > img {
  object-fit: cover;
  display: block;
}

.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeae5;
  color: #8b817b;
  font-size: 13px;
}

.drink-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f4;
  color: #ffc20a;
  font-size: 45px;
  font-weight: 900;
}

.menu-product-info {
  padding: 18px;
}

.menu-product-info small {
  color: #970b0b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.menu-product-info h3 {
  margin: 8px 0;
  font-size: 19px;
}

.menu-product-info p {
  color: #6d6662;
  font-size: 13px;
  line-height: 1.5;
  min-height: 60px;
}

.menu-product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.menu-product-bottom strong {
  font-size: 19px;
}

.menu-add-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #970b0b;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.menu-add-btn:hover {
  background: #700606;
}

@media (max-width: 1000px) {
  .full-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 750px) {
  .full-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu-tools {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .full-product-grid {
    grid-template-columns: 1fr;
  }
}
.cart-btn {
  text-decoration: none;
}
.cart-page {
  padding: 55px 0 90px;
}

.cart-page-heading {
  margin-bottom: 35px;
}

.cart-page-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.cart-page-heading > p:last-child {
  color: #6d6662;
}

.cart-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

.cart-items-section {
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 25px;
}

.cart-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.cart-section-title h2 {
  font-size: 24px;
}

#cartItemText {
  color: #6d6662;
  font-size: 14px;
}

.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee8e3;
}

.cart-item-info h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.cart-item-info p {
  color: #970b0b;
  font-weight: 800;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quantity-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #d9d2cc;
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}

.quantity-btn:hover {
  background: #f3efeb;
}

.quantity-number {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
}

.cart-item-actions {
  text-align: right;
}

.item-total {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
}

.remove-btn {
  border: none;
  background: none;
  color: #970b0b;
  font-weight: 700;
  cursor: pointer;
}

.remove-btn:hover {
  text-decoration: underline;
}

.empty-cart {
  text-align: center;
  padding: 55px 20px;
}

.empty-cart h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.empty-cart p {
  color: #6d6662;
  margin-bottom: 25px;
}

.continue-shopping-btn {
  display: inline-block;
  padding: 12px 22px;
  background: #970b0b;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 800;
}

.order-summary {
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 25px;
  position: sticky;
  top: 100px;
}

.order-summary h2 {
  margin-bottom: 25px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.summary-divider {
  height: 1px;
  background: #e3ded8;
  margin: 20px 0;
}

.summary-total {
  font-size: 20px;
}

.summary-total strong {
  color: #970b0b;
  font-size: 24px;
}

.checkout-btn {
  display: block;
  width: 100%;
  margin-top: 25px;
  padding: 14px 20px;
  background: #970b0b;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-radius: 30px;
  font-weight: 800;
}

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

.checkout-btn.disabled {
  background: #aaa;
  pointer-events: none;
}

.back-menu-link {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: #970b0b;
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 800px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .order-summary {
    position: static;
  }
}

@media (max-width: 550px) {
  .cart-item {
    grid-template-columns: 1fr;
  }

  .cart-item-actions {
    text-align: left;
  }
}
.checkout-page {
  padding: 55px 0 90px;
}

.checkout-heading {
  margin-bottom: 35px;
}

.checkout-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.checkout-heading > p:last-child {
  color: #6d6662;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 30px;
  align-items: start;
}

.checkout-form-card {
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 30px;
}

.checkout-section {
  margin-bottom: 35px;
}

.checkout-section h2 {
  font-size: 21px;
  margin-bottom: 18px;
}

.order-type-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.order-type-option {
  position: relative;
  border: 2px solid #e3ded8;
  border-radius: 14px;
  padding: 18px 10px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.order-type-option:hover {
  border-color: #970b0b;
}

.order-type-option input {
  position: absolute;
  opacity: 0;
}

.order-type-option span {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}

.order-type-option strong {
  font-size: 14px;
}

.order-type-option:has(input:checked) {
  border-color: #970b0b;
  background: #fff5e5;
}

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #d9d2cc;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #970b0b;
}

.form-group textarea {
  resize: vertical;
}

.optional-text {
  color: #8b817b;
  font-weight: 400;
}

.delivery-section {
  display: none;
}

.place-order-btn {
  width: 100%;
  border: none;
  padding: 15px 20px;
  background: #970b0b;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.place-order-btn:hover {
  background: #700606;
}

.checkout-summary {
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 25px;
  position: sticky;
  top: 100px;
}

.checkout-summary h2 {
  margin-bottom: 20px;
}

.checkout-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #eee8e3;
}

.checkout-item-name {
  font-weight: 700;
}

.checkout-item-quantity {
  color: #6d6662;
  font-size: 13px;
  margin-top: 4px;
}

.checkout-item-price {
  font-weight: 800;
  white-space: nowrap;
}

.edit-cart-link {
  display: block;
  margin-top: 20px;
  color: #970b0b;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 850px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
  }
}

@media (max-width: 650px) {
  .order-type-options {
    grid-template-columns: repeat(2, 1fr);
  }
}
.confirmation-page {
  min-height: 75vh;
  padding: 60px 0 90px;
}

.confirmation-card {
  width: min(650px, 100%);
  margin: auto;
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 20px;
  padding: 45px;
  text-align: center;
}

.confirmation-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #970b0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  font-weight: 900;
}

.confirmation-card h1 {
  font-size: 34px;
  margin: 8px 0 10px;
}

.confirmation-message {
  color: #6d6662;
  margin-bottom: 30px;
}

.reference-box {
  background: #fff5e5;
  border: 2px dashed #ffc20a;
  border-radius: 15px;
  padding: 22px;
  margin-bottom: 30px;
}

.reference-box span {
  display: block;
  color: #6d6662;
  font-size: 13px;
  margin-bottom: 7px;
}

.reference-box strong {
  color: #970b0b;
  font-size: 28px;
  letter-spacing: 2px;
}

.confirmation-details {
  border-top: 1px solid #e3ded8;
  border-bottom: 1px solid #e3ded8;
  padding: 10px 0;
  margin-bottom: 25px;
}

.confirmation-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  text-align: left;
}

.confirmation-row span {
  color: #6d6662;
}

.confirmation-row strong {
  text-align: right;
}

.reference-reminder {
  color: #6d6662;
  line-height: 1.6;
  margin-bottom: 25px;
}

.confirmation-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.confirmation-primary-btn,
.confirmation-secondary-btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 800;
}

.confirmation-primary-btn {
  background: #970b0b;
  color: #fff;
}

.confirmation-secondary-btn {
  background: #ffc20a;
  color: #181313;
}

@media (max-width: 600px) {
  .confirmation-card {
    padding: 30px 20px;
  }

  .confirmation-card h1 {
    font-size: 28px;
  }

  .confirmation-buttons {
    flex-direction: column;
  }
}
.track-page {
  min-height: 75vh;
  padding: 60px 0 90px;
}

.track-heading {
  text-align: center;
  margin-bottom: 30px;
}

.track-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.track-heading > p:last-child {
  color: #6d6662;
}

.track-card {
  width: min(700px, 100%);
  margin: auto;
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 30px;
}

.track-card label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.track-search {
  display: flex;
  gap: 10px;
}

.track-search input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid #d9d2cc;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
}

.track-search input:focus {
  border-color: #970b0b;
}

.track-search button {
  border: none;
  background: #970b0b;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.track-search button:hover {
  background: #700606;
}

.track-help {
  color: #6d6662;
  font-size: 13px;
  margin-top: 10px;
}

.track-error {
  display: none;
  margin-top: 25px;
  padding: 15px;
  background: #fff1f1;
  border: 1px solid #e7baba;
  color: #970b0b;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
}

.track-result {
  display: none;
  margin-top: 30px;
  border-top: 1px solid #e3ded8;
  padding-top: 25px;
}

.track-success {
  color: #970b0b;
  font-weight: 900;
  margin-bottom: 20px;
}

.track-reference {
  background: #fff5e5;
  border: 1px dashed #ffc20a;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin-bottom: 20px;
}

.track-reference span {
  display: block;
  color: #6d6662;
  font-size: 12px;
  margin-bottom: 5px;
}

.track-reference strong {
  color: #970b0b;
  font-size: 23px;
}

.track-details {
  border-top: 1px solid #eee8e3;
  border-bottom: 1px solid #eee8e3;
  padding: 8px 0;
}

.track-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
}

.track-row span {
  color: #6d6662;
}

.order-status {
  color: #970b0b;
}

.track-items {
  margin-top: 25px;
}

.track-items h3 {
  margin-bottom: 12px;
}

.track-product {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee8e3;
}

.track-product p {
  color: #6d6662;
  font-size: 13px;
  margin-top: 3px;
}

@media (max-width: 550px) {
  .track-search {
    flex-direction: column;
  }

  .track-search button {
    width: 100%;
  }
}
/* =====================================
   STAFF LOGIN
===================================== */

.staff-login-page {
  min-height: 75vh;
  padding: 60px 0 90px;
}

.staff-login-card {
  width: min(500px, 100%);
  margin: auto;
  background: #fff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 35px;
}

.staff-login-card h1 {
  font-size: 34px;
  margin: 8px 0 10px;
}

.staff-login-message {
  color: #6d6662;
  line-height: 1.6;
  margin-bottom: 30px;
}

.login-error {
  display: none;
  margin-bottom: 18px;
  padding: 12px;
  background: #fff1f1;
  border: 1px solid #e7baba;
  color: #970b0b;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
}

.staff-login-btn {
  width: 100%;
  border: none;
  padding: 15px 20px;
  background: #970b0b;
  color: #fff;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.staff-login-btn:hover {
  background: #700606;
}

.staff-back-link {
  display: block;
  margin-top: 20px;
  text-align: center;
  color: #970b0b;
  text-decoration: none;
  font-weight: 700;
}

.staff-back-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .staff-login-card {
    padding: 30px 20px;
  }

  .staff-login-card h1 {
    font-size: 28px;
  }
}
/* =====================================
   STAFF DASHBOARD
===================================== */

.staff-dashboard-page {
  padding: 55px 0 90px;
}

.dashboard-heading {
  margin-bottom: 35px;
}

.dashboard-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.dashboard-heading > p:last-child {
  color: #6d6662;
}

.staff-logout-btn {
  border: none;
  background: #970b0b;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 30px;
  font-weight: 700;
  cursor: pointer;
}

.staff-logout-btn:hover {
  background: #700606;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 35px;
}

.dashboard-stat-card {
  min-width: 0;
  overflow-wrap: anywhere;
  background: #ffffff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 25px;
}

.dashboard-stat-card span {
  display: block;
  color: #6d6662;
  font-size: 14px;
  margin-bottom: 10px;
}

.dashboard-stat-card strong {
  color: #970b0b;
  font-size: 32px;
}

.dashboard-overview-heading { font-size: 22px; margin-bottom: 16px; color: #970b0b; }
.dashboard-stat-card strong[data-stat-state="loading"],
.dashboard-stat-card strong[data-stat-state="error"] { font-size: 18px; }
.dashboard-stat-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: #6d6662; }

.dashboard-section {
  background: #ffffff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 30px;
}

.dashboard-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.dashboard-section-heading h2 {
  font-size: 24px;
}

.dashboard-view-link {
  color: #970b0b;
  text-decoration: none;
  font-weight: 700;
}

.dashboard-view-link:hover {
  text-decoration: underline;
}

.dashboard-empty {
  padding: 50px 20px;
  text-align: center;
  border-top: 1px solid #eee8e3;
}

.dashboard-empty h3 {
  margin-bottom: 8px;
}

.dashboard-empty p {
  color: #6d6662;
}

@media (max-width: 900px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }

  .dashboard-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-heading h1 {
    font-size: 34px;
  }
}
/* =====================================
   STAFF ORDERS
===================================== */

.staff-orders-page {
  padding: 55px 0 90px;
}

.orders-heading {
  margin-bottom: 35px;
}

.orders-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.orders-heading > p:last-child {
  color: #6d6662;
}

.orders-card {
  background: #ffffff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 30px;
}

.orders-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.orders-card-heading h2 {
  font-size: 24px;
}

#staffOrderCount {
  color: #6d6662;
  font-size: 14px;
}

.staff-orders-empty {
  padding: 50px 20px;
  text-align: center;
  border-top: 1px solid #eee8e3;
}

.staff-orders-empty h3 {
  margin-bottom: 8px;
}

.staff-orders-empty p {
  color: #6d6662;
}

.staff-order-item {
  border-top: 1px solid #eee8e3;
  padding: 22px 0;
}

.staff-order-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.staff-order-reference {
  color: #970b0b;
  font-size: 18px;
  margin-bottom: 6px;
}

.staff-order-customer {
  color: #6d6662;
  font-size: 14px;
}

.staff-order-total {
  font-size: 18px;
}

.staff-order-details {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eee8e3;
}

.staff-order-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
}

.staff-order-row span {
  color: #6d6662;
}

.staff-status-select {
  width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #d9d2cc;
  border-radius: 10px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.staff-status-select:focus {
  border-color: #970b0b;
}

@media (max-width: 600px) {
  .staff-order-top {
    flex-direction: column;
  }

  .staff-order-row {
    flex-direction: column;
    gap: 4px;
  }

  .orders-heading h1 {
    font-size: 34px;
  }
}
/* =====================================
   STAFF PRODUCT MANAGEMENT
===================================== */

.staff-products-page {
  padding: 55px 0 90px;
}

.products-heading {
  margin-bottom: 35px;
}

.products-heading h1 {
  font-size: 42px;
  margin-bottom: 8px;
}

.products-heading > p:last-child {
  color: #6d6662;
}

.products-management-card {
  background: #ffffff;
  border: 1px solid #e3ded8;
  border-radius: 18px;
  padding: 30px;
}

.products-management-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

.products-management-heading h2 {
  font-size: 24px;
  margin-bottom: 5px;
}

#adminProductCount {
  color: #6d6662;
  font-size: 14px;
}

.add-product-btn {
  border: none;
  background: #970b0b;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 30px;
  font-weight: 800;
  cursor: pointer;
}

.add-product-btn:hover {
  background: #700606;
}

.admin-products-list {
  border-top: 1px solid #eee8e3;
}

.admin-product-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #eee8e3;
}

.admin-product-info h3 {
  margin-bottom: 5px;
}

.admin-product-info p {
  color: #6d6662;
  font-size: 14px;
}

.admin-product-price {
  color: #970b0b;
  font-size: 18px;
  font-weight: 800;
}

.admin-product-actions {
  display: flex;
  gap: 8px;
}

.product-edit-btn,
.product-delete-btn {
  border: none;
  padding: 9px 14px;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
}

.product-edit-btn {
  background: #ffc20a;
  color: #181313;
}

.product-delete-btn {
  background: #970b0b;
  color: #ffffff;
}

.admin-products-empty {
  padding: 50px 20px;
  text-align: center;
}

.admin-products-empty h3 {
  margin-bottom: 8px;
}

.admin-products-empty p {
  color: #6d6662;
}

@media (max-width: 650px) {
  .products-management-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-product-item {
    grid-template-columns: 1fr;
  }

  .products-heading h1 {
    font-size: 34px;
  }
}
/* =====================================
   ORDER STATUS PROGRESS
===================================== */

.order-progress {
  margin: 18px 0 20px;
  padding: 20px 12px;

  background: #f7f5f1;

  border: 1px solid #e3ded8;
  border-radius: 14px;

  overflow: hidden;
}

.order-progress[hidden], .order-progress-steps[hidden] { display: none; }
.order-progress h3 { color: #970b0b; font-size: 16px; margin-bottom: 8px; }
#orderProgressSummary { color: #6d6662; font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.order-progress-state { display: block; margin-top: 4px; font-size: 12px; color: #6d6662; }
.order-progress-step.current .order-progress-state { color: #970b0b; font-weight: 800; }

.order-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;

  align-items: flex-start;

  width: 100%;
}

.order-progress-step {
  position: relative;

  flex: 1 1 0;
  min-width: 0;

  text-align: center;
}

.order-progress-step:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 17px;
  left: 50%;

  width: 100%;
  height: 3px;

  background: #d9d2cc;

  z-index: 0;
}

.order-progress-step.completed:not(:last-child)::after {
  background: #970b0b;
}

.order-progress-circle {
  position: relative;

  z-index: 1;

  width: 36px;
  height: 36px;

  margin: 0 auto 9px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 3px solid #d9d2cc;
  border-radius: 50%;

  background: #ffffff;

  color: #6d6662;

  font-size: 14px;
  font-weight: 800;
}

.order-progress-step.completed .order-progress-circle {
  border-color: #970b0b;

  background: #970b0b;

  color: #ffffff;
}

.order-progress-step.current .order-progress-circle {
  border-color: #970b0b;

  background: #ffc20a;

  color: #181313;
}

.order-progress-label {
  display: block;

  padding: 0 3px;

  color: #6d6662;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.25;

  overflow-wrap: normal;
  word-break: normal;
}

.order-progress-step.completed .order-progress-label,
.order-progress-step.current .order-progress-label {
  color: #181313;
}


/* =====================================
   ORDER STATUS PROGRESS - MOBILE
===================================== */

@media (max-width: 600px) {
  .order-progress { margin: 14px 0 18px; padding: 18px 16px; }
  .order-progress-steps { flex-direction: column; gap: 0; }
  .order-progress-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: none;
    width: 100%;
    min-height: 68px;
    text-align: left;
  }
  .order-progress-step:last-child { min-height: 36px; }
  .order-progress-circle { flex: 0 0 36px; margin: 0; }
  .order-progress-step:not(:last-child)::after {
    top: 36px;
    left: 17px;
    width: 3px;
    height: calc(100% - 36px);
  }
  .order-progress-label { padding: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
}
/* =====================================
   STAFF ORDERS - SEARCH AND FILTER
===================================== */

.orders-tools {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;

  margin-bottom: 25px;
  padding: 20px;

  background: #f7f5f1;

  border: 1px solid #e3ded8;
  border-radius: 14px;
}

.orders-search,
.orders-filter {
  min-width: 0;
}

.orders-tool-label {
  display: block;

  margin-bottom: 8px;

  color: #181313;

  font-size: 13px;
  font-weight: 800;
}

#orderSearch,
#orderStatusFilter {
  width: 100%;
  height: 46px;

  padding: 0 14px;

  border: 1px solid #d9d2cc;
  border-radius: 10px;

  background: #ffffff;
  color: #181313;

  font-family: inherit;
  font-size: 14px;

  outline: none;
}

#orderSearch:focus,
#orderStatusFilter:focus {
  border-color: #970b0b;
}

#orderStatusFilter {
  cursor: pointer;
}


/* =====================================
   DELETE ORDER BUTTON
===================================== */

.staff-order-delete-btn {
  width: 100%;

  margin-top: 10px;
  padding: 12px 16px;

  border: 1px solid #970b0b;
  border-radius: 10px;

  background: #ffffff;
  color: #970b0b;

  font-family: inherit;
  font-size: 14px;
  font-weight: 800;

  cursor: pointer;
}

.staff-order-delete-btn:hover {
  background: #970b0b;
  color: #ffffff;
}

.staff-order-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* =====================================
   STAFF ORDERS - MOBILE
===================================== */

@media (max-width: 600px) {

  /* PAGE */

  .staff-orders-page {
    padding: 30px 0 60px;
  }

  .staff-orders-page .container {
    width: 92%;
  }


  /* HEADING */

  .orders-heading {
    margin-bottom: 22px;
  }

  .orders-heading h1 {
    font-size: 30px;
    line-height: 1.1;

    margin-bottom: 7px;
  }

  .orders-heading > p:last-child {
    font-size: 14px;
    line-height: 1.4;
  }


  /* MAIN ORDERS CARD */

  .orders-card {
    padding: 18px 14px;

    border-radius: 14px;
  }

  .orders-card-heading {
    gap: 10px;

    margin-bottom: 18px;
  }

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

  #staffOrderCount {
    font-size: 12px;
  }


  /* SEARCH AND FILTER */

  .orders-tools {
    grid-template-columns: 1fr;

    gap: 14px;

    margin-bottom: 20px;
    padding: 14px;

    border-radius: 12px;
  }

  .orders-tool-label {
    margin-bottom: 6px;

    font-size: 12px;
  }

  #orderSearch,
  #orderStatusFilter {
    height: 44px;

    padding: 0 12px;

    font-size: 16px;
  }


  /* INDIVIDUAL ORDER */

  .staff-order-item {
    padding: 20px 0;
  }

  .staff-order-top {
    display: grid;

    grid-template-columns: 1fr auto;

    align-items: start;

    gap: 12px;
  }

  .staff-order-reference {
    font-size: 18px;

    margin-bottom: 4px;
  }

  .staff-order-customer {
    font-size: 13px;
  }

  .staff-order-total {
    font-size: 18px;

    white-space: nowrap;
  }


  /* ORDER INFORMATION */

  .staff-order-details {
    margin-top: 14px;
    padding-top: 14px;
  }

  .staff-order-row {
    display: grid;

    grid-template-columns: 110px minmax(0, 1fr);

    gap: 10px;

    padding: 7px 0;

    font-size: 14px;
  }

  .staff-order-row span {
    font-size: 13px;
  }

  .staff-order-row strong {
    min-width: 0;

    text-align: right;

    overflow-wrap: anywhere;
  }


  /* STATUS AND DRIVER SELECTS */

  .staff-status-select {
    width: 100%;

    min-height: 46px;

    margin-top: 12px;
    padding: 11px 12px;

    border: 1px solid #d9d2cc;
    border-radius: 10px;

    background: #ffffff;
    color: #181313;

    font-size: 16px;
  }


  /* DELETE */

  .staff-order-delete-btn {
    width: 100%;

    min-height: 46px;

    margin-top: 10px;
    padding: 11px 14px;

    border: none;
    border-radius: 10px;

    background: #970b0b;
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
  }


  /* EMPTY RESULTS */

  .staff-orders-empty {
    padding: 35px 15px;
  }


  /* STAFF NAVIGATION */

  .staff-orders-page + * {
    max-width: 100%;
  }

  

  

  

  

  

}
/* =====================================
   HOME MENU PREVIEW
===================================== */

.home-menu-preview {
  padding-top: 60px;
}

.home-category-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;
}

.home-category-card {
  position: relative;
  min-width: 0;

  display: flex;
  flex-direction: column;

  min-height: 310px;

  padding: 28px;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e3ded8;
  border-radius: 18px;

  color: #181313;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.home-category-card:hover {
  transform: translateY(-5px);

  border-color: #ffc20a;

  box-shadow:
    0 14px 30px
    rgba(0, 0, 0, 0.08);
}

.home-category-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 200px;
  flex-shrink: 0;
  margin-bottom: 20px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
}

.home-category-card:nth-child(1) .home-category-image,
.home-category-card:nth-child(3) .home-category-image {
  object-position: center 70%;
}

.home-category-icon {
  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 25px;

  background: #fff5e5;

  border-radius: 18px;

  font-size: 34px;
}

.home-category-content {
  display: flex;
  flex-direction: column;

  flex: 1;
}

.home-category-content > span {
  margin-bottom: 8px;

  color: #970b0b;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1px;
}

.home-category-content h3 {
  margin-bottom: 10px;

  font-size: 23px;
}

.home-category-content p {
  margin-bottom: 25px;

  color: #6d6662;

  font-size: 14px;
  line-height: 1.6;
}

.home-category-content strong {
  margin-top: auto;

  color: #970b0b;

  font-size: 14px;
}

.home-menu-action {
  display: flex;

  justify-content: center;

  margin-top: 35px;
}

.home-full-menu-btn {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 14px 25px;

  background: #970b0b;
  color: #ffffff;

  border-radius: 30px;

  text-decoration: none;

  font-weight: 800;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.home-full-menu-btn:hover {
  background: #700606;

  transform: translateY(-2px);
}

.home-full-menu-btn span {
  font-size: 18px;
}


/* =====================================
   HOME MENU PREVIEW - TABLET
===================================== */

@media (max-width: 850px) {

  .home-category-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .home-category-card:last-child {
    grid-column: 1 / -1;
  }

}


/* =====================================
   HOME MENU PREVIEW - PHONE
===================================== */

@media (max-width: 600px) {

  .home-menu-preview {
    padding:
      40px 0 60px;
  }

  .home-menu-preview
  .section-heading {
    margin-bottom: 22px;
  }

  .home-menu-preview
  .section-heading h2 {
    font-size: 30px;
  }

  .home-category-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .home-category-card,
  .home-category-card:last-child {
    grid-column: auto;

    min-height: 0;

    padding: 20px;
  }

  .home-category-image {
    height: 180px;
    margin-bottom: 16px;
  }

  .home-category-icon {
    width: 55px;
    height: 55px;

    margin-bottom: 16px;

    border-radius: 14px;

    font-size: 27px;
  }

  .home-category-content h3 {
    font-size: 20px;
  }

  .home-category-content p {
    margin-bottom: 18px;

    font-size: 13px;
  }

  .home-menu-action {
    margin-top: 25px;
  }

  .home-full-menu-btn {
    width: 100%;

    justify-content: center;
  }

}
/* =====================================
   HOME PREVIEW - MORE COLOR
===================================== */

.home-menu-preview {
  position: relative;

  background:
    linear-gradient(
      135deg,
      #fff8e8 0%,
      #fff3d2 50%,
      #f9eee8 100%
    );

  border-top: 1px solid #f0dfc8;
}


/* SECTION HEADING */

.home-menu-preview .red-label {
  color: #970b0b;
}

.home-menu-preview .section-heading h2 {
  color: #181313;
}


/* CATEGORY CARDS */

.home-category-card {
  border: 2px solid transparent;

  box-shadow:
    0 8px 24px
    rgba(80, 40, 20, 0.06);
}


/* NACHOS */

.home-category-card:nth-child(1) {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff5d6 100%
    );

  border-color: #f3d98a;
}

.home-category-card:nth-child(1)
.home-category-icon {
  background: #ffc20a;
}


/* CHICKEN */

.home-category-card:nth-child(2) {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff0e9 100%
    );

  border-color: #efc5b5;
}

.home-category-card:nth-child(2)
.home-category-icon {
  background: #970b0b;
}


/* LEMONADE */

.home-category-card:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f5f8d9 100%
    );

  border-color: #dfe3a1;
}

.home-category-card:nth-child(3)
.home-category-icon {
  background: #fff0a8;
}


/* MAKE EMOJI VISIBLE ON RED */

.home-category-card:nth-child(2)
.home-category-icon {
  box-shadow:
    0 5px 15px
    rgba(151, 11, 11, 0.15);
}


/* HOVER */

.home-category-card:hover {
  border-color: #970b0b;

  box-shadow:
    0 16px 35px
    rgba(151, 11, 11, 0.12);
}


/* FULL MENU BUTTON */

.home-full-menu-btn {
  box-shadow:
    0 8px 20px
    rgba(151, 11, 11, 0.18);
}


/* =====================================
   PHONE
===================================== */

@media (max-width: 600px) {

  .home-menu-preview {
    background:
      linear-gradient(
        180deg,
        #fff8e8 0%,
        #fff1d4 55%,
        #f9eee8 100%
      );
  }

  .home-category-card {
    box-shadow:
      0 6px 18px
      rgba(80, 40, 20, 0.07);
  }

}
/* =====================================
   NACHOSEN ONE - NEW CUSTOMER THEME
===================================== */

:root {
  --nacho-red: #a90d0d;
  --nacho-dark-red: #7d0707;
  --nacho-yellow: #ffc20a;
  --nacho-cream: #fff8e8;
  --nacho-soft-yellow: #fff1bd;
  --nacho-soft-red: #fff0ec;
  --nacho-white: #ffffff;
  --nacho-dark: #211818;
  --nacho-muted: #746967;
}


/* =====================================
   CUSTOMER PAGE BACKGROUND
===================================== */

body {
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 194, 10, 0.12),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #fffaf0 0%,
      #fff6df 100%
    );

  color: var(--nacho-dark);
}


/* =====================================
   NEW CUSTOMER HEADER
===================================== */

.header {
  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #fffaf0 55%,
      #fff3cc 100%
    );

  border-bottom: 3px solid var(--nacho-yellow);

  box-shadow:
    0 6px 22px rgba(80, 20, 10, 0.08);

  position: sticky;
  top: 0;
  z-index: 100;
}


/* SMALL RED ACCENT LINE */

.header::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--nacho-red) 0%,
      var(--nacho-red) 65%,
      var(--nacho-yellow) 65%,
      var(--nacho-yellow) 100%
    );
}


/* =====================================
   BRAND
===================================== */

.navbar {
  min-height: 86px;
}

.brand {
  position: relative;

  gap: 12px;

  color: var(--nacho-red);

  font-size: 18px;
  font-weight: 900;
}

.brand-logo {
  width: 62px;
  height: 62px;

  padding: 4px;

  background: #ffffff;

  border: 2px solid rgba(169, 13, 13, 0.12);
  border-radius: 15px;

  box-shadow:
    0 5px 14px rgba(93, 18, 12, 0.12);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.brand:hover .brand-logo {
  transform: rotate(-3deg) scale(1.04);

  box-shadow:
    0 8px 18px rgba(93, 18, 12, 0.18);
}


/* =====================================
   CUSTOMER NAVIGATION
===================================== */

nav {
  gap: 8px;
}

nav a {
  position: relative;

  padding: 10px 12px;

  border-radius: 10px;

  color: var(--nacho-dark);

  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

nav a:hover {
  color: var(--nacho-red);

  background:
    rgba(255, 194, 10, 0.15);

  transform: translateY(-1px);
}

nav a.active {
  color: var(--nacho-red);

  background:
    rgba(255, 194, 10, 0.2);
}

nav a.active::after {
  content: "";

  position: absolute;

  left: 12px;
  right: 12px;
  bottom: 4px;

  height: 3px;

  background: var(--nacho-red);

  border-radius: 10px;
}


/* =====================================
   CART BUTTON
===================================== */

.cart-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 12px 18px;

  background:
    linear-gradient(
      135deg,
      var(--nacho-red),
      var(--nacho-dark-red)
    );

  color: #ffffff;

  border: 2px solid transparent;
  border-radius: 30px;

  box-shadow:
    0 6px 15px rgba(151, 11, 11, 0.18);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cart-btn:hover {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #bd1111,
      #850707
    );

  transform: translateY(-2px);

  box-shadow:
    0 9px 20px rgba(151, 11, 11, 0.25);
}

#cartCount {
  min-width: 25px;

  text-align: center;

  background: var(--nacho-yellow);

  color: var(--nacho-dark);

  font-weight: 900;

  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}


/* =====================================
   CARDS - WARMER LOOK
===================================== */

.type-card,
.product-card,
.menu-product-card,
.cart-items-section,
.order-summary,
.checkout-form-card,
.checkout-summary,
.confirmation-card,
.track-card,
.staff-login-card {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffdf7 100%
    );

  border-color:
    rgba(169, 13, 13, 0.12);

  box-shadow:
    0 8px 24px rgba(83, 34, 15, 0.05);
}


/* =====================================
   MOBILE CUSTOMER HEADER
===================================== */

@media (max-width: 600px) {

  .header {
    border-bottom-width: 2px;
  }

  .navbar {
    min-height: auto;

    padding: 14px 0 12px;

    gap: 10px;
  }

  .brand-logo {
    width: 58px;
    height: 58px;

    border-radius: 14px;
  }

  nav {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 3px;

    flex-wrap: wrap;
  }

  nav a {
    padding: 8px 7px;

    font-size: 11px;

    border-radius: 8px;
  }

  nav a.active::after {
    left: 7px;
    right: 7px;
    bottom: 2px;

    height: 2px;
  }

  .cart-btn {
    padding: 9px 12px;

    font-size: 11px;
  }

  #cartCount {
    min-width: 21px;

    padding: 2px 6px;

    font-size: 10px;
  }
}
/* =====================================
   NACHOSEN HOME BANNER
===================================== */

.home-banner-hero {
  position: relative;

  min-height: 430px;

  display: flex;
  align-items: flex-end;

  padding: 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(80, 0, 0, 0.10),
      transparent 55%
    ),
    url("../assets/nachosen-banner.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.home-banner-content {
  width: 100%;

  display: flex;
  align-items: flex-end;

  padding-bottom: 28px;
}

.home-banner-buttons {
  display: flex;
  gap: 10px;

  padding: 10px;

  background:
    rgba(90, 0, 0, 0.68);

  border:
    1px solid rgba(255, 255, 255, 0.22);

  border-radius: 40px;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.18);

  backdrop-filter: blur(5px);
}

.home-banner-buttons .btn {
  margin: 0;
}


/* =====================================
   HOME BANNER - PHONE
===================================== */

@media (max-width: 600px) {

  .home-banner-hero {
    min-height: 0;

    aspect-ratio: 3 / 1;

    align-items: flex-end;

    background-size: cover;
    background-position: center;
  }

  .home-banner-content {
    padding-bottom: 10px;
  }

  .home-banner-buttons {
    margin-left: 8px;

    padding: 5px;

    gap: 5px;

    border-radius: 25px;
  }

  .home-banner-buttons .btn {
    padding: 8px 11px;

    font-size: 10px;
  }

}
/* =====================================
   HOME BANNER - FINAL RESPONSIVE DESIGN
===================================== */

.home-banner-section {
  width: 100%;

  background: #fff8e8;

  border-bottom: 1px solid #ead9b8;
}


/* BANNER IMAGE */

.home-banner-image {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #a90d0d;

  box-shadow:
    0 10px 28px
    rgba(91, 22, 10, 0.14);
}

.home-banner-image img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}


/* =====================================
   ACTION BAR
===================================== */

.home-banner-action-bar {
  position: relative;

  background:
    linear-gradient(
      90deg,
      #fff7dc 0%,
      #fffdf7 50%,
      #fff2c6 100%
    );

  border-bottom: 1px solid #ead9b8;
}

.home-banner-actions {
  min-height: 90px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;
}


/* TEXT */

.home-banner-action-text {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.home-banner-action-text strong {
  color: #970b0b;

  font-size: 20px;
  font-weight: 900;
}

.home-banner-action-text span {
  color: #6d6662;

  font-size: 13px;
}


/* =====================================
   BUTTON AREA
===================================== */

.home-banner-action-buttons {
  display: flex;
  align-items: center;

  gap: 10px;
}

.home-banner-primary,
.home-banner-secondary {
  min-height: 45px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 21px;

  border-radius: 30px;

  font-size: 13px;
  font-weight: 900;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


/* RED BUTTON */

.home-banner-primary {
  gap: 9px;

  background:
    linear-gradient(
      135deg,
      #ae0c0c,
      #850707
    );

  color: #ffffff;

  box-shadow:
    0 7px 16px
    rgba(151, 11, 11, 0.20);
}

.home-banner-primary span {
  color: #ffc20a;

  font-size: 17px;
}

.home-banner-primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 22px
    rgba(151, 11, 11, 0.27);
}


/* WHITE BUTTON */

.home-banner-secondary {
  background: #ffffff;

  color: #970b0b;

  border: 1px solid
    rgba(151, 11, 11, 0.25);

  box-shadow:
    0 5px 14px
    rgba(70, 20, 10, 0.07);
}

.home-banner-secondary:hover {
  background: #fff7e2;

  transform: translateY(-2px);
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 850px) {

  .home-banner-actions {
    padding-top: 16px;
    padding-bottom: 16px;
  }

}


/* =====================================
   PHONE
===================================== */

@media (max-width: 600px) {

  .home-banner-image {
    box-shadow:
      0 6px 18px
      rgba(91, 22, 10, 0.12);
  }

  .home-banner-image img {
    width: 100%;
    height: auto;

    object-fit: contain;
  }


  .home-banner-actions {
    min-height: 0;

    padding-top: 16px;
    padding-bottom: 18px;

    flex-direction: column;
    align-items: stretch;

    gap: 13px;
  }


  .home-banner-action-text {
    text-align: center;
  }

  .home-banner-action-text strong {
    font-size: 18px;
  }

  .home-banner-action-text span {
    font-size: 12px;
  }


  .home-banner-action-buttons {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap: 8px;
  }


  .home-banner-primary,
  .home-banner-secondary {
    width: 100%;

    min-height: 43px;

    padding: 0 10px;

    font-size: 11px;
  }

}


/* =====================================
   VERY SMALL PHONES
===================================== */

@media (max-width: 380px) {

  .home-banner-action-buttons {
    grid-template-columns: 1fr;
  }

}
.staff-order-print-btn,
.staff-driver-invitation-btn {
  padding: 10px 16px;
  margin-bottom: 18px;
  min-height: 44px;
  border: 1px solid #970b0b;
  border-radius: 10px;
  background: #fffaf0;
  color: #970b0b;
  font-weight: 700;
  cursor: pointer;
}
.staff-order-print-btn:focus-visible { outline: 2px solid #970b0b; outline-offset: 2px; }
.order-receipt-print { display: none; }
.customer-live-location { margin-top: 24px; padding: 18px; border: 1px solid #ead9b8; border-radius: 12px; background: #fffaf0; min-width: 0; overflow-wrap: anywhere; }
.customer-live-location[hidden], #customerDriverMap[hidden], #customerLocationVerify[hidden], #forgetLocationAccess[hidden] { display: none; }
.customer-live-location h3 { color: #970b0b; margin-bottom: 12px; }
.customer-live-location p { line-height: 1.5; margin: 12px 0; }
.customer-live-location label { display: block; margin: 12px 0 6px; font-weight: 700; }
.customer-live-location input { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #d9d2cc; border-radius: 8px; font: inherit; }
.customer-live-location button { min-height: 44px; margin-top: 14px; padding: 10px 16px; border: 1px solid #970b0b; border-radius: 10px; background: #970b0b; color: #fff; font: inherit; cursor: pointer; }
.customer-live-location button:disabled { opacity: 0.6; cursor: wait; }
#customerDriverMap { width: 100%; height: 300px; max-height: 55vh; z-index: 0; border-radius: 10px; }
.driver-sharing-page { width: min(640px, 92%); margin: 32px auto; }
.driver-sharing-card { padding: 24px; background: #fffaf0; border: 1px solid #ead9b8; border-radius: 18px; overflow-wrap: anywhere; }
.driver-sharing-card h1 { color: #970b0b; font-size: clamp(24px, 6vw, 32px); margin: 12px 0; }
.driver-sharing-card p { margin-bottom: 16px; line-height: 1.6; }
.driver-sharing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.driver-sharing-actions button { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #970b0b; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
#startSharing { background: #970b0b; color: #ffffff; }
#stopSharing { background: #ffc20a; color: #181313; }
.driver-sharing-actions button:disabled, .staff-driver-invitation-btn:disabled { opacity: 0.6; cursor: default; }
.driver-sharing-actions button:focus-visible, .staff-driver-invitation-btn:focus-visible { outline: 3px solid #970b0b; outline-offset: 3px; }
@media print {
  body.printing-order-receipt { background: #ffffff; color: #000000; padding: 0; }
  body.printing-order-receipt > :not(.order-receipt-print) { display: none !important; }
  body.printing-order-receipt .order-receipt-print {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 4mm;
    font: 11pt/1.35 Arial, Helvetica, sans-serif;
    overflow-wrap: anywhere;
  }
  .order-receipt-print h1 { font-size: 18pt; text-align: center; margin: 0 0 1mm; }
  .order-receipt-print .order-receipt-title { text-align: center; margin: 0 0 4mm; font-weight: 700; }
  .order-receipt-print .staff-order-details { margin: 0; padding: 0; border: 0; }
  .order-receipt-print .order-detail-section { margin-bottom: 3mm; }
  .order-receipt-print .order-detail-section h4 {
    color: #000000;
    font-size: 11pt;
    margin: 0 0 1.5mm;
    break-after: avoid;
    page-break-after: avoid;
  }
  .order-receipt-print .order-detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5mm 5mm; }
  .order-receipt-print .order-detail-fields dt { margin-bottom: 0; font-size: 10pt; }
  .order-receipt-print .order-detail-fields dd { line-height: 1.35; }
  .order-receipt-print .order-detail-fields > div,
  .order-receipt-print tr,
  .order-receipt-print .order-detail-total { break-inside: avoid; page-break-inside: avoid; }
  /* Keep the items heading/caption/header attached to the first item, not the whole table. */
  .order-receipt-print .order-detail-items { font-size: 10pt; break-before: avoid; page-break-before: avoid; }
  .order-receipt-print .order-detail-items caption { margin-bottom: 1mm; break-after: avoid; page-break-after: avoid; }
  .order-receipt-print .order-detail-items th,
  .order-receipt-print .order-detail-items td { padding: 1.5mm 1mm; }
  .order-receipt-print thead { display: table-header-group; background: #ffffff; break-after: avoid; page-break-after: avoid; }
  .order-receipt-print tbody,
  .order-receipt-print tbody tr:first-child { break-before: avoid; page-break-before: avoid; }
  .order-receipt-print tbody tr:last-child { break-after: avoid; page-break-after: avoid; }
  .order-receipt-print .order-detail-notes-section { border: 0; border-top: 1px solid #777777; background: #ffffff; padding: 2mm 0; }
  .order-receipt-print .order-detail-notes { line-height: 1.35; }
  .order-receipt-print .order-detail-total {
    color: #000000;
    font-size: 12pt;
    font-weight: 700;
    padding: 2mm 0 0;
    gap: 2mm;
    break-before: avoid;
    page-break-before: avoid;
  }
  .order-receipt-print button,
  .order-receipt-print select,
  .order-receipt-print input,
  .order-receipt-print textarea { display: none !important; }
}

/* Staff order details: scoped to the Orders list, leaving dashboard summaries intact. */
.staff-order-item { min-width: 0; overflow-wrap: anywhere; }
.staff-order-item .staff-order-top > div { min-width: 0; }
.order-detail-section { margin-bottom: 20px; }
.order-detail-section h4 { color: #970b0b; font-size: 15px; margin-bottom: 12px; }
.order-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.order-detail-fields dt { color: #6d6662; font-size: 13px; margin-bottom: 4px; }
.order-detail-fields dd { margin: 0; line-height: 1.5; font-weight: 600; white-space: pre-wrap; }
.order-detail-status { color: #970b0b; }
.order-detail-items { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.order-detail-items caption { text-align: left; color: #6d6662; margin-bottom: 8px; }
.order-detail-items th, .order-detail-items td { padding: 10px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3ded8; overflow-wrap: anywhere; }
.order-detail-items thead { background: #fff3cc; }
.order-detail-items th:first-child { width: 42%; }
.order-detail-items th:nth-child(2) { width: 12%; }
.order-detail-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 14px 0; color: #970b0b; }
.order-detail-notes-section {
  padding: 16px;
  border-left: 4px solid #970b0b;
  border-radius: 8px;
  background: #fffaf0;
  min-width: 0;
}
.order-detail-notes { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; color: #181313; }
.order-detail-note { color: #6d6662; line-height: 1.5; }
@media (max-width: 600px) {
  .order-detail-fields { grid-template-columns: minmax(0, 1fr); }
  .order-detail-items th, .order-detail-items td { padding: 10px 3px; }
}

/* Search controls reuse the existing list-page palette. */
.list-search-tools { margin-bottom: 20px; }
.list-search-tools label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.list-search-tools input {
  width: 100%;
  max-width: 500px;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #d9d2cc;
  border-radius: 10px;
  background: #ffffff;
  color: #181313;
  font: inherit;
}
.list-search-tools input:focus-visible,
.clear-filters-btn:focus-visible { outline: 2px solid #970b0b; outline-offset: 2px; }
.clear-filters-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #970b0b;
  border-radius: 10px;
  background: #fffaf0;
  color: #970b0b;
  font-weight: 700;
  cursor: pointer;
}
.clear-filters-btn:disabled { opacity: 0.55; cursor: default; }
.orders-clear-filters { margin-bottom: 20px; }
#orderStatusFilter.filter-active { border-color: #970b0b; background: #fff3cc; }
.menu-tools { flex-wrap: wrap; }
.admin-product-item[hidden] { display: none; }

/* Pending add/edit actions retain their existing button colors. */
.add-product-btn:disabled,
.product-edit-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* Empty results are static panels, separate from loading and errors. */
.empty-state {
  padding: 32px 20px;
  margin: 16px 0;
  border: 1px dashed #d8c9ae;
  border-radius: 12px;
  background: #fffaf0;
  text-align: center;
  overflow-wrap: anywhere;
}
.empty-state h3 { color: #970b0b; margin-bottom: 8px; }
.empty-state p { color: #6d6662; line-height: 1.6; }
.empty-state[hidden], .menu-load-error[hidden] { display: none; }
.empty-state--error {
  border: 1px solid #970b0b;
  background: #fff4f4;
}
#staffOrdersList[aria-busy="true"] ~ #staffOrdersEmpty { display: none !important; }
.menu-load-error {
  padding: 24px 20px;
  margin: 16px 0;
  border-left: 4px solid #970b0b;
  background: #fff4f4;
  color: #970b0b;
  line-height: 1.6;
}

/* Loading states for menu, product and driver lists */
.section-loading {
  /* Keep request/empty-state hooks while suppressing their visual presentation. */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px;
  color: #970b0b;
  font-size: 14px;
  line-height: 1.5;
}
.section-loading[hidden] { display: none; }
.section-loading:not([hidden]) ~ .admin-products-empty {
  display: none !important;
}
.section-loading-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 3px solid #ffc20a;
  border-top-color: #970b0b;
  border-radius: 50%;
  animation: section-loading-spin 800ms linear infinite;
}
@keyframes section-loading-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .section-loading-spinner { animation: none; }
}

/* Optional navigation for long list pages */
body.has-back-to-top {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.back-to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 48px;
  height: 48px;
  border: 2px solid #ffc20a;
  border-radius: 50%;
  background: #970b0b;
  color: #ffffff;
  font: bold 26px/1 Arial, Helvetica, sans-serif;
  box-shadow: 0 3px 10px rgba(24, 19, 19, 0.18);
  cursor: pointer;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: #6f0505; }
.back-to-top:focus-visible {
  outline: 3px solid #970b0b;
  outline-offset: 3px;
}

/* Shared toast notifications */
.nachosen-toasts {
  position: fixed;
  top: max(var(--toast-top, 180px), env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right));
  z-index: 99;
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - max(var(--toast-top, 180px), env(safe-area-inset-top, 0px)) - 16px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.nachosen-toast {
  position: relative;
  padding: 16px 52px 16px 16px;
  border: 1px solid #e4dfda;
  border-left: 5px solid #970b0b;
  border-radius: 10px;
  background: #ffffff;
  color: #181313;
  box-shadow: 0 6px 24px rgba(24, 19, 19, 0.16);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  pointer-events: auto;
  animation: nachosen-toast-in 180ms ease-out both;
}

.nachosen-toast strong,
.nachosen-toast span { display: block; }
.nachosen-toast strong { color: #970b0b; margin-bottom: 3px; }
.nachosen-toast--success { border-left-color: #ffc20a; }
.nachosen-toast--warning { border-left-color: #ffc20a; background: #fff8e1; }
.nachosen-toast--info { background: #f7f5f1; }
.nachosen-toast--error { background: #fff4f4; }

.nachosen-toast-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #970b0b;
  font-size: 24px;
  cursor: pointer;
}
.nachosen-toast-close:focus-visible { outline: 2px solid #970b0b; }
.nachosen-toast--leaving { animation: nachosen-toast-out 180ms ease-in both; }

@keyframes nachosen-toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nachosen-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .nachosen-toast { animation: none; }
  .nachosen-toast--leaving { opacity: 0; }
}


/* Staff Orders presentation only. Receipt typography/layout stays independent. */
@media screen {
  .staff-orders-page #staffOrdersList { display: grid; gap: 24px; }
  .staff-orders-page .staff-order-item { padding: 24px; border: 1px solid #e3d8ca; border-top: 4px solid #970b0b; border-radius: 18px; background: #fffdf8; box-shadow: 0 4px 16px rgb(70 29 10 / 5%); }
  .staff-orders-page .staff-order-top { display: flex; gap: 20px; align-items: flex-start; }
  .staff-orders-page .staff-order-reference { margin-bottom: 6px; font-size: 20px; line-height: 1.3; font-weight: 800; }
  .staff-orders-page .staff-order-total { color: #970b0b; font-size: 20px; line-height: 1.3; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  .staff-orders-page .staff-order-customer { color: #51443d; font-size: 15px; line-height: 1.5; }
  .staff-orders-page .staff-order-summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; color: #51443d; font-size: 14px; }
  .staff-orders-page .staff-order-status-badge { display: inline-block; padding: 6px 12px; border: 1px solid #e7cc81; border-radius: 999px; background: #fff0bd; color: #74130b; font-weight: 800; line-height: 1.4; }
  .staff-orders-page .staff-order-created { margin-top: 10px; color: #62564d; font-size: 13px; line-height: 1.5; }
  .staff-orders-page .staff-order-details-organized { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 20px; padding-top: 0; border-top: 0; }
  .staff-orders-page .staff-order-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid #e3d8ca; }
  .staff-orders-page .staff-order-actions button { margin: 0; max-width: 100%; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .staff-orders-page .staff-order-summary-section { display: none; }
  .staff-orders-page .order-detail-section,
  .staff-orders-page .staff-order-management { min-width: 0; grid-column: 1 / -1; margin: 0; padding: 20px; border: 1px solid #e5ded4; border-radius: 12px; background: #ffffff; }
  .staff-orders-page .staff-order-customer-section { order: 1; }
  .staff-orders-page .staff-order-details--delivery .staff-order-customer-section { grid-column: 1; }
  .staff-orders-page .staff-order-delivery-section { order: 1; grid-column: 2; }
  .staff-orders-page .order-detail-notes-section { order: 2; border-left: 4px solid #b78716; background: #fff8e6; }
  .staff-orders-page .staff-order-items-section { order: 3; }
  .staff-orders-page .staff-order-management { order: 4; background: #fff8ed; }
  .staff-orders-page .order-detail-section h4,
  .staff-orders-page .staff-order-management h4 { margin: 0 0 18px; color: #861109; font-size: 17px; line-height: 1.4; font-weight: 800; }
  .staff-orders-page .order-detail-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .staff-orders-page .order-detail-fields dt { margin-bottom: 5px; color: #62564d; font-size: 13px; }
  .staff-orders-page .order-detail-fields dd,
  .staff-orders-page .order-detail-notes { color: #241d19; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
  .staff-orders-page .staff-order-items-scroll { max-width: 100%; overflow-x: auto; border-radius: 8px; }
  .staff-orders-page .staff-order-items-scroll:focus-visible { outline: 2px solid #970b0b; outline-offset: 3px; }
  .staff-orders-page .order-detail-items { min-width: 500px; font-size: 15px; }
  .staff-orders-page .order-detail-items th,
  .staff-orders-page .order-detail-items td { padding: 14px 10px; color: #241d19; line-height: 1.5; }
  .staff-orders-page .order-detail-items thead { background: #ffedb4; }
  .staff-orders-page .order-detail-items th:not(:first-child),
  .staff-orders-page .order-detail-items td { text-align: right; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
  .staff-orders-page .order-detail-total { justify-content: flex-end; align-items: baseline; margin-top: 8px; padding: 18px 0 0; gap: 12px 24px; }
  .staff-orders-page .order-detail-total span { font-size: 13px; font-weight: 700; text-transform: uppercase; }
  .staff-orders-page .order-detail-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
  .staff-orders-page .staff-order-control-label { display: block; margin-top: 16px; color: #51443d; font-size: 14px; font-weight: 700; }
  .staff-orders-page .staff-status-select { display: block; min-width: 0; min-height: 48px; margin-top: 7px; color: #241d19; font-size: 16px; }
  .staff-orders-page .staff-order-delete-btn { margin-top: 20px; min-height: 46px; }
  @media (max-width: 700px) {
    .staff-orders-page .staff-order-item { padding: 18px 14px; }
    .staff-orders-page .staff-order-details-organized { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .staff-orders-page .staff-order-details--delivery .staff-order-customer-section,
    .staff-orders-page .staff-order-delivery-section { grid-column: 1 / -1; }
    .staff-orders-page .order-detail-section,
    .staff-orders-page .staff-order-management { padding: 16px 12px; }
    .staff-orders-page .staff-order-actions button { width: 100%; min-height: 46px; }
  }
  @media (max-width: 380px) {
    .staff-orders-page .staff-order-top { flex-direction: column; gap: 12px; }
    .staff-orders-page .staff-order-total { text-align: left; }
  }
}
@media print {
  .order-receipt-print .staff-order-management { display: none !important; }
}


/* Authoritative phone Orders content layout; desktop and print remain independent. */
@media screen and (max-width: 600px) {
  .staff-orders-page {
    padding: 18px 0 32px;
  }
  .staff-orders-page > .container {
    width: 96%;
  }
  .staff-orders-page .orders-heading {
    margin-bottom: 14px;
  }
  .staff-orders-page .orders-heading h1 {
    font-size: 26px; margin-bottom: 5px;
  }
  .staff-orders-page .orders-heading > p:last-child {
    font-size: 14px;
  }
  .staff-orders-page .orders-card-heading {
    margin-bottom: 12px; gap: 8px;
  }
  .staff-orders-page .orders-card-heading h2 {
    font-size: 19px;
  }
  .staff-orders-page #staffOrderCount {
    font-size: 13px;
  }
  .staff-orders-page .orders-tool-label {
    margin-bottom: 4px;
  }
  .staff-orders-page #orderSearch, .staff-orders-page #orderStatusFilter {
    min-width: 0; width: 100%; min-height: 44px; font-size: 16px;
  }
  .staff-orders-page .orders-clear-filters {
    min-height: 44px; margin: 0 0 12px; padding: 8px 12px;
  }
  .staff-orders-page .staff-order-reference, .staff-orders-page .staff-order-total {
    font-size: 18px; line-height: 1.35; margin-bottom: 3px;
  }
  .staff-orders-page .order-detail-section h4, .staff-orders-page .staff-order-management h4 {
    margin-bottom: 9px; font-size: 15px; line-height: 1.4;
  }
  .staff-orders-page .order-detail-fields dd, .staff-orders-page .order-detail-notes {
    font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
  }
  .staff-orders-page .staff-order-items-scroll {
    overflow: visible;
  }
  .staff-orders-page .order-detail-items {
    display: block; width: 100%; min-width: 0; font-size: 14px;
  }
  .staff-orders-page .order-detail-items caption {
    display: block; margin-bottom: 6px; font-size: 12px;
  }
  .staff-orders-page .order-detail-items thead {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .staff-orders-page .order-detail-items tbody {
    display: block;
  }
  .staff-orders-page .order-detail-items tbody tr:first-child {
    padding-top: 0;
  }
  .staff-orders-page .order-detail-total strong {
    font-size: 18px;
  }
  .staff-orders-page .staff-order-control-label {
    margin-top: 10px; font-size: 13px;
  }
  .staff-orders-page .staff-status-select {
    margin-top: 5px; min-height: 44px; padding: 9px 10px; font-size: 16px;
  }
  .staff-orders-page .staff-order-item {
    padding: 0; border-radius: 14px; border: 1px solid #d6bdb0; background: #fffdf8; box-shadow: 0 4px 12px rgb(77 27 12 / 10%);
  }
  .staff-orders-page .staff-order-top > div {
    display: contents;
  }
  .staff-orders-page .staff-order-reference {
    grid-column: 1; grid-row: 1; margin: 0; color: #ffffff; font-size: 18px; font-weight: 800; overflow-wrap: anywhere;
  }
  .staff-orders-page .staff-order-customer {
    font-size: 14px; line-height: 1.4; grid-column: 1; grid-row: 2; margin: 4px 0 0; color: #fff5e7; overflow-wrap: anywhere;
  }
  .staff-orders-page .staff-order-status-badge[data-status="Delivered"], .staff-orders-page .staff-order-status-badge[data-status="Completed"] {
    background: #e3f0df; border-color: #aec9a5; color: #24512b;
  }
  .staff-orders-page .staff-order-actions {
    gap: 8px; padding-bottom: 10px;
  }
  .staff-orders-page .staff-order-actions button {
    flex: 1 1 180px; width: auto; min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 13px;
  }
  .staff-orders-page .order-detail-section, .staff-orders-page .staff-order-management {
    padding: 11px 10px; border-radius: 9px;
  }
  .staff-orders-page .order-detail-fields {
    gap: 7px;
  }
  .staff-orders-page .order-detail-fields > div {
    display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 8px; align-items: baseline;
  }
  .staff-orders-page .order-detail-fields dt {
    margin-bottom: 2px; font-size: 12px; margin: 0; line-height: 1.4;
  }
  .staff-orders-page .order-detail-fields dd {
    min-width: 0; font-size: 14px; line-height: 1.4;
  }
  .staff-orders-page .order-detail-notes-section {
    border-left-color: #970b0b; background: #fff7dc;
  }
  .staff-orders-page .order-detail-notes {
    line-height: 1.45;
  }
  .staff-orders-page .order-detail-items tbody th {
    display: block; width: 100%; padding: 0 0 2px; border: 0; font-size: 14px; text-align: left; white-space: normal; overflow-wrap: anywhere; grid-column: 1 / -1;
  }
  .staff-orders-page .order-detail-items tbody td:nth-child(2) {
    align-items: flex-start; text-align: left;
  }
  .staff-orders-page .order-detail-total {
    justify-content: space-between; gap: 6px 12px; margin-top: 4px; padding-top: 9px;
  }
  .staff-orders-page .staff-order-management h4 {
    margin-bottom: 8px;
  }
  .staff-orders-page .staff-order-delete-btn {
    width: 100%; min-height: 44px; margin-top: 12px; padding: 9px 12px; background: #970b0b; color: #ffffff;
  }
  .staff-orders-page .orders-card {
    padding: 0; border-radius: 0; border: 0; background: transparent; box-shadow: none;
  }
  .staff-orders-page .orders-tools {
    padding: 10px; gap: 10px; margin-bottom: 8px; background: #ffffff; border: 1px solid #e3d8ca;
  }
  .staff-orders-page #staffOrdersList {
    gap: 24px; display: grid; grid-template-columns: minmax(0,1fr); padding: 0 0 4px; background: transparent;
  }
  .staff-orders-page #staffOrdersList > .staff-order-item {
    display: block; width: 100%; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid #c9a797; border-radius: 14px; background: #fffdf8; box-shadow: 0 4px 12px rgb(77 27 12 / 12%);
  }
  .staff-orders-page #staffOrdersList > .staff-order-item > .staff-order-top {
    background: #970b0b; border-radius: 13px 13px 0 0;
  }
  .staff-orders-page .staff-order-top .staff-order-reference, .staff-orders-page .staff-order-top .staff-order-total {
    color: #ffffff;
  }
  .staff-orders-page .staff-order-top .staff-order-customer {
    color: #fff5e7;
  }
  .staff-orders-page .staff-order-summary-section {
    display: none;
  }
  .staff-orders-page .staff-order-details-organized {
    margin-top: 12px; gap: 10px; margin: 0; padding: 10px 10px 14px;
  }
  .staff-orders-page .staff-order-management {
    border-color: #dfc99f; border: 1px solid #d8bd8e; border-top: 3px solid #970b0b; background: #fff4df; margin-bottom: 0;
  }
  .staff-orders-page .order-detail-items tbody tr {
    display: grid; padding: 9px 0; border-bottom: 1px solid #e3d8ca; grid-template-columns: minmax(0,auto) minmax(0,1fr) minmax(0,1fr); gap: 4px 6px;
  }
  .staff-orders-page .order-detail-items tbody td {
    display: block; justify-content: flex-start; gap: 2px; width: 100%; padding: 0; border: 0; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; flex-direction: column; align-items: flex-end; min-width: 0; text-align: left;
  }
  .staff-orders-page .order-detail-items tbody td::before {
    content: none; flex: 0 0 auto; color: #62564d; font-weight: 400; text-align: left; font-size: 11px; line-height: 1.4;
  }
  .staff-orders-page .order-detail-items tbody td:nth-child(3)::before {
    content: "\00d7 "; font-size: 14px; color: #62564d;
  }
  .staff-orders-page .order-detail-items tbody td:last-child {
    color: #861109; font-weight: 700; text-align: right;
  }
  .staff-orders-page .staff-order-summary-meta {
    gap: 6px 8px; margin-top: 7px; font-size: 13px; grid-column: 1 / -1; grid-row: 3; margin: 10px -12px 0; padding: 10px 12px 6px; background: #fff5df; color: #51443d; display: contents;
  }
  .staff-orders-page .staff-order-status-badge {
    padding: 4px 8px; font-size: 12px; background: #ffedac; border-color: #dfbf5d; color: #68170d; grid-column: 2; grid-row: 2; justify-self: end; align-self: start; max-width: 130px; margin-top: 4px; text-align: center;
  }
  .staff-orders-page .staff-order-total {
    max-width: 130px; text-align: right; grid-column: 2; grid-row: 1; align-self: start; margin: 0; color: #ffffff; font-size: 18px; overflow-wrap: anywhere;
  }
  .staff-orders-page .staff-order-summary-meta > span:not(.staff-order-status-badge) {
    grid-column: 1 / -1; grid-row: 3; margin: 10px -12px 0; padding: 8px 12px 5px; color: #51443d; background: #fff5df; font-size: 12px;
  }
  .staff-orders-page .staff-order-created {
    margin-top: 0; font-size: 12px; line-height: 1.4; grid-column: 1 / -1; grid-row: 4; margin: 0 -12px -12px; padding: 0 12px 10px; background: #fff5df; color: #62564d; border-bottom: 1px solid #e5d6bf; overflow-wrap: anywhere;
  }
  .staff-orders-page .staff-order-top {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: 0 10px; padding: 12px; border-radius: 13px 13px 0 0; background: #970b0b;
  }
}

/* New driver detail content is phone-only; the existing desktop count remains. */
.dashboard-stat-drivers { display: block; color: inherit; text-decoration: none; }
.dashboard-stat-drivers:focus-visible { outline: 3px solid #970b0b; outline-offset: 3px; }
.dashboard-driver-list { display: none; }
@media screen and (max-width: 600px) {
  .staff-dashboard-page { padding: 22px 0 36px; }
  .staff-dashboard-page > .container { width: 94%; }
  .staff-dashboard-page .dashboard-heading { margin-bottom: 16px; }
  .staff-dashboard-page .dashboard-heading h1 { font-size: 27px; line-height: 1.2; margin-bottom: 6px; }
  .staff-dashboard-page .dashboard-heading > p:last-child { font-size: 14px; line-height: 1.4; }
  .staff-dashboard-page .dashboard-overview-heading { font-size: 16px; margin-bottom: 10px; }
  .staff-dashboard-page .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
  .staff-dashboard-page .dashboard-stat-card { padding: 14px 12px; border-radius: 12px; box-shadow: 0 3px 9px rgb(77 27 12 / 5%); }
  .staff-dashboard-page .dashboard-stat-card > span { margin-bottom: 6px; color: #51443d; font-size: 13px; line-height: 1.4; }
  .staff-dashboard-page .dashboard-stat-card > strong { display: block; font-size: 27px; line-height: 1.2; overflow-wrap: anywhere; }
  .staff-dashboard-page .dashboard-stat-card > strong[data-stat-state="error"],
  .staff-dashboard-page .dashboard-stat-card > strong[data-stat-state="loading"] { font-size: 16px; }
  .staff-dashboard-page .dashboard-stat-sales { order: 1; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #970b0b; border-color: #970b0b; }
  .staff-dashboard-page .dashboard-stat-sales > span,
  .staff-dashboard-page .dashboard-stat-sales > strong { color: #ffffff; margin: 0; }
  .staff-dashboard-page .dashboard-stat-sales > strong { font-size: 24px; text-align: right; }
  .staff-dashboard-page .dashboard-stat-drivers { order: 2; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; border-color: #d6b878; }
  .staff-dashboard-page .dashboard-stat-drivers > span { font-weight: 700; margin: 0; }
  .staff-dashboard-page .dashboard-stat-drivers > strong { font-size: 22px; }
  .staff-dashboard-page .dashboard-stat-drivers .dashboard-stat-note { grid-column: 1 / -1; margin: 0; line-height: 1.4; }
  .staff-dashboard-page .dashboard-driver-list { display: block; grid-column: 1 / -1; min-width: 0; }
  .staff-dashboard-page .dashboard-driver-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding-top: 9px; margin-top: 8px; border-top: 1px solid #e5ded4; }
  .staff-dashboard-page .dashboard-driver-row strong { min-width: 0; font-size: 14px; line-height: 1.4; color: #241d19; overflow-wrap: anywhere; }
  .staff-dashboard-page .dashboard-driver-row span { min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  .staff-dashboard-page .dashboard-driver-row .dashboard-driver-state { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 8px; border-radius: 99px; background: #e3f0df; color: #24512b; font-size: 12px; }
  .staff-dashboard-page .dashboard-stat-today { order: 3; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
  .staff-dashboard-page .dashboard-stat-today > span { margin: 0; }
  .staff-dashboard-page .dashboard-stat-today > strong { font-size: 22px; }
  .staff-dashboard-page .dashboard-section { padding: 16px 12px; border-radius: 12px; }
  .staff-dashboard-page .dashboard-section-heading { gap: 8px; margin-bottom: 12px; }
  .staff-dashboard-page .dashboard-section-heading h2 { font-size: 18px; }
  .staff-dashboard-page .dashboard-empty { padding: 14px 0 0; }
}

/* Customer-only phone navigation and compact homepage. No staff/print overrides. */
.customer-mobile-cart { display: none; }
@media screen and (max-width: 600px) {
  .customer-page .header { background: #fffdf7; border-bottom: 2px solid #e9c66a; }
  .customer-page .navbar { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 0; padding: 6px 0 0; gap: 0 10px; }
  .customer-page .brand { grid-row: 1; grid-column: 1; min-height: 44px; }
  .customer-page .brand-logo { width: 36px; height: 36px; border-radius: 8px; }
  .customer-page .brand span { display: none; }
  .customer-page nav { position: relative; grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; gap: 2px; padding: 0; }
  .customer-page nav a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 6px 2px; font-size: 12px; text-align: center; }
  .customer-page nav .cart-btn { position: absolute; right: 0; bottom: 100%; min-height: 44px; min-width: 80px; max-width: 160px; padding: 7px 12px; gap: 6px; font-size: 13px; }
  .customer-page #cartCount { margin: 0; padding: 3px 7px; font-size: 12px; }
  .customer-page .cart-page,
  .customer-page .checkout-page,
  .customer-page .track-page,
  .customer-page .confirmation-page,
  .customer-page .full-menu { padding-top: 22px; padding-bottom: 36px; }
  .customer-page .cart-page-heading,
  .customer-page .checkout-heading,
  .customer-page .track-heading,
  .customer-page .menu-page-heading { margin-bottom: 16px; }
  .customer-page .cart-page-heading h1,
  .customer-page .checkout-heading h1,
  .customer-page .track-heading h1,
  .customer-page .menu-page-heading h1 { font-size: 28px; line-height: 1.2; }
  .customer-home .home-banner-section { display: flex; flex-direction: column; }
  .customer-home .home-banner-action-bar { order: 0; }
  .customer-home .home-banner-image { order: 1; box-shadow: none; }
  .customer-home .home-banner-image img { width: 100%; height: auto; max-height: 220px; object-fit: contain; }
  .customer-home .home-banner-actions { padding: 12px 0; min-height: 0; gap: 9px; }
  .customer-home .home-banner-action-text { text-align: left; gap: 2px; }
  .customer-home .home-banner-action-text strong { font-size: 19px; line-height: 1.3; }
  .customer-home .home-banner-action-text span { font-size: 13px; line-height: 1.4; }
  .customer-home .home-banner-action-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .customer-home .home-banner-primary,
  .customer-home .home-banner-secondary { min-width: 0; min-height: 44px; padding: 8px; font-size: 13px; line-height: 1.4; }
  .customer-home .order-types { padding: 16px 0; }
  .customer-home .type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .customer-home .type-card { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 3px 7px; padding: 10px; border-radius: 10px; text-align: left; }
  .customer-home .type-card > span { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-size: 23px; }
  .customer-home .type-card h3 { margin: 0; font-size: 14px; line-height: 1.4; }
  .customer-home .type-card p { grid-column: 2; margin: 0; font-size: 12px; line-height: 1.4; }
  .customer-home .home-menu-preview { padding: 16px 0 24px; }
  .customer-home .section-heading { margin-bottom: 14px; text-align: left; }
  .customer-home .home-menu-preview .section-heading h2 { margin: 5px 0; font-size: 24px; line-height: 1.2; }
  .customer-home .section-heading > p:last-child { font-size: 14px; line-height: 1.4; }
  .customer-home .home-category-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .customer-home .home-category-card,
  .customer-home .home-category-card:last-child { display: grid; grid-template-columns: 90px minmax(0,1fr); grid-column: auto; min-height: 0; padding: 10px; gap: 12px; border-radius: 12px; }
  .customer-home .home-category-image { width: 90px; height: 110px; max-width: 100%; margin: 0; border-radius: 8px; object-fit: cover; }
  .customer-home .home-category-content { min-width: 0; }
  .customer-home .home-category-content > span { margin-bottom: 3px; font-size: 10px; letter-spacing: 0.4px; }
  .customer-home .home-category-content h3 { margin-bottom: 4px; font-size: 17px; line-height: 1.25; }
  .customer-home .home-category-content p { margin-bottom: 6px; font-size: 12px; line-height: 1.4; }
  .customer-home .home-category-content strong { margin-top: auto; font-size: 12px; line-height: 1.4; }
  .customer-home .home-menu-action { margin-top: 14px; }
  .customer-home .home-full-menu-btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .customer-home footer { padding: 24px 0; }
  .customer-home .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .customer-home .footer-grid > div:first-child { grid-column: 1 / -1; }
  .customer-home footer p,
  .customer-home footer a { font-size: 13px; line-height: 1.45; }
}

/* Icons supplement the original desktop text; phone layouts alone show icons. */
.customer-nav-icon { display: none; }
@media screen and (max-width: 600px) {
  .customer-page .navbar { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 4px; align-items: center; padding: 6px 0; }
  .customer-page .brand { grid-column: 1; grid-row: 1; }
  .customer-page nav { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; position: static; }
  .customer-page nav a,
  .customer-page nav .cart-btn { position: relative; inset: auto; display: flex; min-width: 0; width: 100%; max-width: none; min-height: 44px; padding: 8px 2px; margin: 0; border: 0; border-radius: 9px; background: transparent; color: #861109; box-shadow: none; }
  .customer-page nav a[href="cart.html"] { grid-column: 4; grid-row: 1; }
  .customer-page nav a[href="login.html"] { grid-column: 5; grid-row: 1; }
  .customer-page nav a.active, .customer-cart nav a[href="cart.html"] { background: #fff0bd; color: #970b0b; }
  .customer-cart nav a[href="cart.html"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: #970b0b; }
  .customer-page nav a.active::after { left: 8px; right: 8px; bottom: 2px; }
  .customer-page .customer-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .customer-page .customer-nav-icon { display: block; width: 23px; height: 23px; flex-shrink: 0; }
  .customer-page #cartCount { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 1px 3px; border-radius: 99px; background: #ffc20a; color: #241d19; font-size: 10px; line-height: 14px; font-weight: 800; }
  .customer-page nav a:focus-visible { outline: 2px solid #970b0b; outline-offset: 1px; }
  .customer-page .full-menu { padding-top: 14px; }
  .customer-page .menu-page-heading { margin-bottom: 12px; }
  .customer-page .menu-page-heading h1 { font-size: 27px; margin: 3px 0 5px; }
  .customer-page .menu-page-heading > p:last-child { font-size: 13px; line-height: 1.4; }
  .customer-page .category-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .customer-page .category-btn { flex: 1 1 85px; min-width: 0; min-height: 44px; padding: 7px 10px; font-size: 12px; line-height: 1.3; border-radius: 10px; }
  .customer-page .category-btn.active { background: #ffc20a; color: #7c1009; border-color: #970b0b; }
  .customer-page .menu-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 0; margin-bottom: 12px; }
  .customer-page #menuSearch { grid-column: 1 / -1; min-width: 0; width: 100%; height: 44px; font-size: 16px; }
  .customer-page #productCount { align-self: center; margin: 0; font-size: 13px; }
  .customer-page #clearMenuFilters { min-height: 44px; padding: 6px 10px; margin: 0; font-size: 12px; }
  .customer-page .full-product-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .customer-page .menu-product-card { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: stretch; padding: 10px; gap: 10px; min-width: 0; border-radius: 12px; }
  /* The existing filter sets visible cards to inline display:block. Override only that visible state. */
  .customer-page .menu-product-card[style*="display: block"] { display: grid !important; }
  .customer-page .menu-product-card > img,
  .customer-page .menu-product-card > .image-placeholder,
  .customer-page .menu-product-card > .drink-placeholder { width: 90px; height: 112px; min-height: 0; margin: 0; border-radius: 8px; object-fit: cover; }
  .customer-page .menu-product-info { min-width: 0; padding: 0; display: flex; flex-direction: column; }
  .customer-page .menu-product-info small { margin-bottom: 3px; font-size: 10px; }
  .customer-page .menu-product-info h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
  .customer-page .menu-product-info p { min-height: 0; margin-bottom: 8px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .customer-page .menu-product-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; }
  .customer-page .menu-product-bottom strong { font-size: 14px; overflow-wrap: anywhere; }
  .customer-page .menu-add-btn { min-height: 44px; max-width: 100%; padding: 8px 10px; font-size: 12px; line-height: 1.3; }
}

/* Customer cart phone density only; quantity/remove handlers and desktop stay intact. */
@media screen and (max-width: 600px) {
  .customer-page .cart-page { padding-top: 14px; padding-bottom: 28px; }
  .customer-page .cart-page-heading { margin-bottom: 12px; }
  .customer-page .cart-page-heading h1 { font-size: 25px; margin: 3px 0 5px; }
  .customer-page .cart-page-heading > p:last-child { font-size: 13px; line-height: 1.4; }
  .customer-page .cart-layout { gap: 14px; }
  .customer-page .cart-items-section { padding: 14px 12px; border-radius: 12px; min-width: 0; }
  .customer-page .cart-section-title { margin-bottom: 4px; gap: 8px; }
  .customer-page .cart-section-title h2 { font-size: 18px; }
  .customer-page #cartItemText { font-size: 12px; }
  .customer-page .cart-item {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 4px 8px; align-items: center; padding: 12px 0;
  }
  .customer-page .cart-item-info,
  .customer-page .cart-item-actions { display: contents; }
  .customer-page .cart-item-info h3 { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
  .customer-page .cart-item-info p { grid-column: 1; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  .customer-page .cart-item .item-total { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; text-align: right; overflow-wrap: anywhere; }
  .customer-page .cart-item .quantity-controls { grid-column: 2; grid-row: 2; justify-content: flex-end; gap: 5px; }
  .customer-page .cart-item .quantity-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; font-size: 18px; }
  .customer-page .cart-item .quantity-number { min-width: 20px; font-size: 14px; }
  .customer-page .cart-item .remove-btn { grid-column: 2; grid-row: 3; justify-self: end; min-height: 36px; padding: 6px 8px; font-size: 13px; }
  .customer-page .cart-page .order-summary { padding: 16px 12px; border-radius: 12px; min-width: 0; }
  .customer-page .cart-page .order-summary h2 { font-size: 19px; margin-bottom: 12px; }
  .customer-page .cart-page .summary-row { margin-bottom: 10px; gap: 10px; font-size: 14px; }
  .customer-page .cart-page .summary-divider { margin: 12px 0; }
  .customer-page .cart-page .checkout-btn { min-height: 46px; padding: 12px 10px; font-size: 14px; }
  .customer-page .cart-page .back-menu-link { margin-top: 10px; padding: 6px 0; min-height: 36px; font-size: 13px; }
}

/* Desktop/tablet adaptation of the approved customer icons; phones stay intact. */
@media screen and (min-width: 601px) {
  .customer-page .header { background: #fffdf7; border-bottom: 2px solid #e9c66a; }
  .customer-page .navbar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 68px; padding: 8px 0; gap: 24px; }
  .customer-page .brand-logo { width: 44px; height: 44px; border-radius: 10px; }
  .customer-page .brand span { display: none; }
  .customer-page nav { display: grid; grid-template-columns: repeat(5,48px); align-items: center; width: auto; gap: 8px; padding: 0; }
  .customer-page nav a,
  .customer-page nav .cart-btn { position: relative; inset: auto; display: flex; align-items: center; justify-content: center; min-width: 0; width: 48px; height: 48px; min-height: 48px; padding: 10px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: #861109; box-shadow: none; }
  .customer-page nav a[href="cart.html"] { grid-column: 4; grid-row: 1; }
  .customer-page nav a[href="login.html"] { grid-column: 5; grid-row: 1; }
  .customer-page .customer-nav-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
  .customer-page .customer-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .customer-page nav a:hover { background: #fff5db; color: #970b0b; }
  .customer-page nav a.active,
  .customer-cart nav a[href="cart.html"] { background: #fff0bd; color: #970b0b; }
  .customer-page nav a.active::after,
  .customer-cart nav a[href="cart.html"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px; background: #970b0b; }
  .customer-page #cartCount { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; margin: 0; padding: 1px 4px; border-radius: 99px; background: #ffc20a; color: #241d19; font-size: 11px; line-height: 16px; font-weight: 800; }
  .customer-page nav a:focus-visible { outline: 2px solid #970b0b; outline-offset: 3px; }
}

/* Shared staff dialog; scoped to avoid customer-page changes. */
.staff-modal { box-sizing: border-box; position: fixed; inset: calc(var(--staff-modal-top, 0px) + var(--staff-modal-height, 100dvh) / 2) 0 auto; margin: 0 auto; transform: translateY(-50%); width: calc(100% - 24px); max-width: 480px; max-height: calc(var(--staff-modal-height, 100dvh) - 24px); padding: 0; border: 1px solid #dfc99f; border-top: 5px solid var(--nacho-red); border-radius: 18px; background: var(--nacho-cream); color: var(--nacho-dark); box-shadow: 0 18px 60px #21181855; overflow: auto; overscroll-behavior: contain; }
.staff-modal::backdrop { background: rgb(25 12 8 / 65%); }
.staff-modal *, .staff-modal *::before, .staff-modal *::after { box-sizing: border-box; }
.staff-modal form { margin: 0; padding: 20px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); min-width: 0; }
.staff-modal h2 { margin: 0 0 10px; font-size: 23px; color: var(--nacho-red); }
.staff-modal p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.staff-modal label { display: block; margin: 14px 0 6px; font-weight: 700; }
.staff-modal input, .staff-modal textarea { display: block; width: 100%; min-width: 0; max-width: 100%; padding: 12px; min-height: 46px; border: 1px solid #bda88c; border-radius: 9px; background: #fff; color: var(--nacho-dark); font: inherit; font-size: 16px; }
.staff-modal textarea { min-height: 96px; resize: vertical; overflow-wrap: anywhere; }
.staff-modal .staff-modal-error { color: #970b0b; font-weight: 600; }
.staff-modal .staff-modal-error:empty { display: none; }
.staff-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 12px; border-top: 1px solid #dfc99f; }
.staff-modal-actions button { flex: 1 1 120px; min-width: 0; min-height: 46px; padding: 12px; border: 1px solid var(--nacho-red); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.staff-modal-cancel { background: var(--nacho-cream); color: var(--nacho-red); }
.staff-modal-primary { background: var(--nacho-red); color: #fff; }
.staff-modal-destructive { background: #880909; border-width: 2px; }
.staff-modal :focus-visible { outline: 3px solid #a16d00; outline-offset: 3px; }


/* Compact product forms only; other staff dialogs retain their spacing. */
.staff-modal select { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 12px; border: 1px solid #bda88c; border-radius: 9px; background: #fff; color: var(--nacho-dark); font: inherit; font-size: 16px; }
@media (max-width: 600px) {
  .staff-modal-product form { padding-top: 12px; }
  .staff-modal-product h2 { margin-bottom: 6px; font-size: 21px; }
  .staff-modal-product #staff-modal-description:empty { display: none; }
  .staff-modal-product label { margin: 8px 0 4px; }
  .staff-modal-product input, .staff-modal-product select { min-height: 44px; padding: 9px 10px; }
  .staff-modal-product textarea { min-height: 68px; height: 68px; padding: 8px 10px; }
  .staff-modal-product .staff-modal-error { margin: 8px 0; font-size: 16px; line-height: 1.3; }
  .staff-modal-product .staff-modal-actions { margin-top: 12px; padding-top: 10px; }
}