/* ====================================
   Global Styles
   ==================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%);
  /* ใช้ fixed เพื่อล็อกหน้าจอไม่ให้ Chrome เลื่อน Address Bar ไปมา */
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* ป้องกันการดึงจอ (Pull-to-refresh) ที่ทำให้เลื่อนไม่ได้ */
  overscroll-behavior-y: none;
  font-size: 20px;
}

.header {
  background: #dbeafe;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-section {
  flex: 1;
  min-width: 250px;
}

.header-box {
  background: white;
  border: 2px solid #1d4ed8;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.logo-box {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: contain;
}

.company-details {
  flex: 1;
}

.company-name {
  font-weight: 700;
  font-size: 18px;
  color: #1f2937;
  margin-bottom: 5px;
}

.company-address {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.branch-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-box .info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 16px;
}

.info-box .info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-weight: 600;
  color: #6b7280;
}

.info-row .value {
  font-weight: 700;
  color: #1f2937;
}

.customer-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.btn-logout {
  width: 100%;
  padding: 10px;
  background: #fca5a5;
  color: #7f1d1d;
  border: 2px solid #dc2626;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.2s;
}

.btn-logout:hover {
  background: #dc2626;
  color: white;
}

.main-container {
  display: flex;
  height: calc(100vh - 100px);
  gap: 15px;
  padding: 15px;
}

/* --- Modal Grid Buttons --- */
.modal-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin: 20px 0;
}

.modal-grid-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  border-radius: 12px;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  text-decoration: none;
  color: #374151;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  min-height: 90px;
  transition: background-color 0.2s, transform 0.2s;
}

.modal-grid-button:active {
  transform: scale(0.96);
}

.modal-grid-button .icon {
  font-size: 36px;
  margin-bottom: 8px;
  line-height: 1;
}

.modal-grid-button span {
  font-size: 12px;
}

/* Colors */
.btn-line {
  background-color: #06C755;
  color: white;
}

.btn-fb {
  background-color: #0084FF;
  color: white;
}

.btn-gmail {
  background-color: #EA4335;
  color: white;
}

.btn-share {
  background-color: #3b82f6;
  color: white;
}

.btn-print {
  background-color: #2563eb;
  color: white;
}

.btn-doc {
  background-color: #f9fafb;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-delete {
  background-color: #ef4444;
  color: white;
}

.btn-close-modal {
  background-color: #6b7280;
  color: white;
}

.btn-doc .icon {
  font-size: 28px;
  font-weight: bold;
  color: #3b82f6;
  border: 3px solid #93c5fd;
  padding: 5px 8px;
  border-radius: 8px;
  background: #eff6ff;
}

.btn-doc.qim .icon {
  color: #1e3a8a;
  border-color: #93c5fd;
  background: #dcfce7;
}

.btn-doc.so .icon {
  color: #78350f;
  border-color: #3b82f6;
  background: #dbeafe;
}

/* ====================================
   Left Panel - Cart Section
   ==================================== */
.left-panel {
  flex: 1;
  background: white;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Search Section */
.search-section {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.search-input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  font-size: 16px;
  outline: none;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.search-input:focus {
  border-color: #93c5fd;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

/* Cart Table */
/* Cart Table */
.cart-container {
  flex: 1;
  overflow-y: auto;
  border: 2px solid #f3f4f6;
  border-radius: 20px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 18px;
}

.cart-table thead {
  background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
  color: #1e3a8a;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.cart-table th {
  padding: 14px 10px;
  text-align: left;
  font-weight: 700;
  border-bottom: 2px solid #60a5fa;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cart-table th:first-child {
  border-radius: 18px 0 0 0;
}

.cart-table th:last-child {
  border-radius: 0 18px 0 0;
}

.cart-table tbody tr {
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.cart-table tbody tr:hover {
  background: #f9fafb;
}

.cart-table tbody tr.selected {
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.cart-table td {
  padding: 12px 10px;
}

/* ใช้สไตล์นี้กับแถว (tr) แทนที่จะเป็นช่อง (td) */
.cart-table[id="mobileCartListTable"] .cart-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  /* ใช้ขอบมนกับทั้งแถว */
}

/* ลบพื้นหลังและเส้นขอบออกจากช่อง (td) */
.cart-table[id="mobileCartListTable"] .cart-row td {
  background: none;
  border: none;
}

/* กำหนด padding ให้ช่องแรกและช่องสุดท้ายเหมือนเดิม */
.cart-table[id="mobileCartListTable"] .cart-row td:first-child {
  padding-left: 16px;
  border-radius: 12px 0 0 12px;
}

.cart-table[id="mobileCartListTable"] .cart-row td:last-child {
  padding-right: 16px;
  border-radius: 0 12px 12px 0;
}

/* Style for the selected row (FIXED) */
.cart-table[id="mobileCartListTable"] .cart-row.selected {
  background: #dbeafe;
  /* สีฟ้าอ่อนทั้งแถว */
  border-color: #93c5fd;
  /* เส้นขอบสีฟ้าเข้ม */
}

/* Ensure selected TDs also get the background (for override) */
.cart-table[id="mobileCartListTable"] .cart-row.selected td {
  background: #dbeafe;
}

/* Style for the selected row */
.cart-table[id="mobileCartListTable"] tr.selected td {
  background: #dbeafe;
  border-color: #93c5fd;
}

.cart-table tbody tr.empty-cart {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
}

.cart-item-line {
  color: #6b7280;
  font-weight: 600;
}

.cart-item-name {
  color: #1f2937;
  font-weight: 500;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 5px;
}

.qty-btn {
  background: #93c5fd;
  color: #1e3a8a;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-btn:active {
  background: #60a5fa;
}

.qty-input {
  width: 50px;
  padding: 4px;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

.btn-delete {
  background: #fca5a5;
  color: #7f1d1d;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.btn-delete:active {
  background: #f87171;
}

/* Total Section */
/* Total Section Wrapper */
.total-section-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.btn-total-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 2px solid #d1d5db;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 70px;
  min-width: 100px;
}

.btn-print-bill {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
}

.btn-payment-quick {
  background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
  color: #1e3a8a;
}

.btn-total-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-total-action:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.action-icon {
  font-size: 24px;
}

.action-text {
  font-size: 16px;
  font-weight: 700;
}

/* Quick Payment Menu */
.quick-payment-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px;
  min-width: 400px;
  z-index: 2000;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.quick-payment-menu.active {
  display: grid;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-payment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 2px solid #e5e7eb;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  min-height: 100px;
}

.quick-payment-item .payment-icon {
  font-size: 32px;
}

.quick-payment-item:hover {
  background: #f0fdf4;
  transform: translateX(4px);
}

.payment-icon {
  font-size: 20px;
}

/* Total Section */
.total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #93c5fd 0%, #2563eb 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  flex: 1;
  margin-left: auto;
}

.total-label {
  font-size: 28px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.total-amount {
  font-size: 42px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Summary Section */
/* Summary Section */
.summary-section {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.summary-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 8px;
  transition: all 0.2s;
}

.summary-row:hover {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.summary-row span:first-child {
  color: #6b7280;
  font-weight: 600;
}

.summary-row span:last-child {
  font-weight: 700;
  color: #1e3a8a;
}

/* ====================================
   Right Panel - Buttons & Numpad
   ==================================== */
.right-panel {
  width: 450px;
  display: flex;
  flex-direction: column;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 8px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 12px;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Function Buttons */
/* Function Buttons */
.btn-func {
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
  padding: 10px 8px;
  min-height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-func:hover {
  transform: none;
}

.btn-func:active {
  transform: none;
}

.btn-icon {
  font-size: 28px;
  opacity: 0.6;
}

.btn-text {
  text-align: center;
  line-height: 1.3;
  font-size: 11px;
  opacity: 0.6;
}

/* Button Colors with Beautiful Gradients */
.btn-green {
  background: #93c5fd;
  color: #1e3a8a;
  box-shadow: 0 3px 6px rgba(59, 130, 246, 0.3);
}

.btn-green:hover {
  background: #15803d !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.btn-blue {
  background: #93c5fd;
  color: #1e3a8a;
  box-shadow: 0 3px 6px rgba(147, 197, 253, 0.3);
}

.btn-blue:hover {
  box-shadow: 0 5px 12px rgba(147, 197, 253, 0.4);
}

.btn-orange {
  background: #fdba74;
  color: #7c2d12;
  box-shadow: 0 3px 6px rgba(253, 186, 116, 0.3);
}

.btn-orange:hover {
  box-shadow: 0 5px 12px rgba(253, 186, 116, 0.4);
}

.btn-yellow {
  background: #fde047;
  color: #713f12;
  box-shadow: 0 3px 6px rgba(253, 224, 71, 0.3);
}

.btn-yellow:hover {
  box-shadow: 0 5px 12px rgba(253, 224, 71, 0.4);
}

.btn-purple {
  background: #d8b4fe;
  color: #581c87;
  box-shadow: 0 3px 6px rgba(216, 180, 254, 0.3);
}

.btn-purple:hover {
  box-shadow: 0 5px 12px rgba(216, 180, 254, 0.4);
}

.btn-red {
  background: #fca5a5;
  color: #7f1d1d;
  box-shadow: 0 3px 6px rgba(252, 165, 165, 0.3);
}

.btn-red:hover {
  box-shadow: 0 5px 12px rgba(252, 165, 165, 0.4);
}

.btn-pink {
  background: #f9a8d4;
  color: #831843;
  box-shadow: 0 3px 6px rgba(249, 168, 212, 0.3);
}

.btn-pink:hover {
  box-shadow: 0 5px 12px rgba(249, 168, 212, 0.4);
}

.btn-cyan {
  background: #a5f3fc;
  color: #164e63;
  box-shadow: 0 3px 6px rgba(165, 243, 252, 0.3);
}

.btn-cyan:hover {
  box-shadow: 0 5px 12px rgba(165, 243, 252, 0.4);
}

.btn-teal {
  background: #99f6e4;
  color: #134e4a;
  box-shadow: 0 3px 6px rgba(153, 246, 228, 0.3);
}

.btn-teal:hover {
  box-shadow: 0 5px 12px rgba(153, 246, 228, 0.4);
}

.btn-darkgray {
  background: #d1d5db;
  color: #1f2937;
  box-shadow: 0 3px 6px rgba(209, 213, 219, 0.3);
}

.btn-darkgray:hover {
  box-shadow: 0 5px 12px rgba(209, 213, 219, 0.4);
}

.btn-gray {
  background: #e5e7eb;
  color: #374151;
  box-shadow: 0 3px 6px rgba(229, 231, 235, 0.3);
}

.btn-gray:hover {
  box-shadow: 0 5px 12px rgba(229, 231, 235, 0.4);
}

.btn-lightblue {
  background: #bfdbfe;
  color: #1e3a8a;
  box-shadow: 0 3px 6px rgba(191, 219, 254, 0.3);
}

.btn-lightblue:hover {
  box-shadow: 0 5px 12px rgba(191, 219, 254, 0.4);
}

.btn-white {
  background: #f9fafb;
  color: #1f2937;
  border: 2px solid #d1d5db;
  box-shadow: 0 3px 6px rgba(249, 250, 251, 0.3);
}

.btn-white:hover {
  box-shadow: 0 5px 12px rgba(209, 213, 219, 0.4);
}

.btn-black {
  background: #9ca3af;
  color: #ffffff;
  box-shadow: 0 3px 6px rgba(156, 163, 175, 0.3);
}

.btn-black:hover {
  box-shadow: 0 5px 12px rgba(156, 163, 175, 0.4);
}

/* Beautiful Numpad Buttons */
.btn-numpad {
  background: #f0fdf4;
  color: #1e3a8a;
  border: 2px solid #bbf7d0;
  border-radius: 12px;
  font-size: 32px;
  font-weight: 800;
  cursor: pointer;
  min-height: 70px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-numpad:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  background: #dcfce7;
}

.btn-numpad:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-ok {
  background: #93c5fd;
  color: #1e3a8a;
  border: none;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-ok:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-func:disabled,
.btn-numpad:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  margin: 3% auto;
  padding: 35px;
  border-radius: 24px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4),
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  /* แก้ไข: จำกัดความสูงและเปิดให้เลื่อนได้ */
  max-height: 85vh;
  overflow-y: auto;
}

/* เพิ่ม: ปรับแต่งสำหรับหน้าจอมือถือ */
@media (max-width: 768px) {
  .modal-content {
    padding: 20px;
    margin: 10px auto;
    width: 95%;
    max-height: 80vh;
    /* เผื่อพื้นที่ให้คีย์บอร์ด */
  }
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 50%, #93c5fd 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-80px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.modal-content h2 {
  color: #1f2937;
  margin-bottom: 25px;
  font-size: 32px;
  text-align: center;
  font-weight: 800;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
  position: relative;
  padding-bottom: 15px;
}

.modal-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #93c5fd 0%, #2563eb 100%);
  border-radius: 2px;
}

/* Payment Modal */
.payment-summary {
  background: #f9fafb;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.payment-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.payment-row:last-child {
  border-bottom: none;
}

.payment-total {
  font-size: 24px;
  font-weight: bold;
  color: #1e3a8a;
  padding-top: 15px;
  margin-top: 10px;
  border-top: 2px solid #93c5fd;
}

.payment-value {
  font-weight: 600;
  color: #1f2937;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.btn-payment {
  padding: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-payment:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.btn-cash {
  border-color: #93c5fd;
  color: #1e3a8a;
  background: #f0fdf4;
}

.btn-card {
  border-color: #93c5fd;
  color: #1e3a8a;
  background: #eff6ff;
}

.btn-qr {
  border-color: #fde047;
  color: #713f12;
  background: #fefce8;
}

.btn-split {
  border-color: #d8b4fe;
  color: #581c87;
  background: #faf5ff;
}

.payment-icon {
  font-size: 36px;
}

/* Cash Modal */
.cash-payment {
  background: #f9fafb;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.cash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: 18px;
}

.cash-amount {
  font-size: 28px;
  font-weight: bold;
  color: #1e3a8a;
}

.cash-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.cash-input-row label {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.cash-input {
  width: 200px;
  padding: 12px;
  border: 2px solid #93c5fd;
  border-radius: 8px;
  font-size: 24px;
  font-weight: bold;
  text-align: right;
  outline: none;
}

.cash-input:focus {
  border-color: #60a5fa;
}

.change-row {
  border-top: 2px solid #93c5fd;
  padding-top: 15px;
  margin-top: 15px;
}

.cash-change {
  font-weight: bold;
  color: #dc2626;
  font-size: 28px;
}

/* Quick Cash Buttons */
.quick-cash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.btn-quick-cash {
  padding: 15px;
  border: 2px solid #93c5fd;
  background: #f0fdf4;
  color: #1e3a8a;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.btn-quick-cash:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
  background: #dcfce7;
}

.btn-quick-cash:active {
  transform: translateY(0);
  background: #bbf7d0;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.btn-confirm {
  flex: 1;
  padding: 15px 30px;
  background: #93c5fd;
  color: #1e3a8a;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
  background: #60a5fa;
}

.btn-confirm:active {
  transform: translateY(0);
  background: #93c5fd;
}

.btn-cancel {
  flex: 1;
  padding: 15px 30px;
  background: #d1d5db;
  color: #1f2937;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.btn-cancel:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(156, 163, 175, 0.3);
  background: #9ca3af;
}

.btn-cancel:active {
  transform: translateY(0);
  background: #d1d5db;
}

/* Customer Modal */
.customer-search {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.customer-list {
  max-height: 300px;
  overflow-y: auto;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
}

.customer-item {
  padding: 15px;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}

.customer-item:active {
  background: #f0fdf4;
}

.customer-item:last-child {
  border-bottom: none;
}

.customer-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 5px;
}

.customer-info {
  font-size: 14px;
  color: #6b7280;
}

/* Product Results */
.product-results {
  position: absolute;
  top: 150px;
  left: 25px;
  right: 475px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  padding: 10px;
}

.product-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 1px solid #e5e7eb;
}

.product-item:active {
  background: #f0fdf4;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 5px;
}

.product-details {
  font-size: 14px;
  color: #6b7280;
}

.product-price {
  font-size: 18px;
  font-weight: bold;
  color: #1e3a8a;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #93c5fd;
  border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .right-panel {
    width: 380px;
  }

  .btn-func {
    font-size: 10px;
    padding: 6px;
  }

  .btn-icon {
    font-size: 20px;
  }
}

@media (max-width: 1200px) {
  .button-grid {
    gap: 6px;
    padding: 10px;
  }
}

/* Loading Spinner */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #d1fae5;
  border-radius: 50%;
  border-top-color: #93c5fd;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success/Error Messages */
.message {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 2000;
  animation: slideDown 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.message-success {
  background: #93c5fd;
  color: #1e3a8a;
}

.message-error {
  background: #fca5a5;
  color: #7f1d1d;
}

.message-info {
  background: #93c5fd;
  color: #1e3a8a;
}

/* Member Tabs */
.member-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.member-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.member-tab:active {
  transform: translateY(0);
}

.message {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 18px 35px;
  border-radius: 16px;
  font-weight: 700;
  z-index: 2500;
  animation: messageSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 18px;
  min-width: 300px;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.message-success {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4),
    0 4px 12px rgba(59, 130, 246, 0.3);
}

.message-error {
  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
  color: #7f1d1d;
  box-shadow: 0 10px 30px rgba(252, 165, 165, 0.4),
    0 4px 12px rgba(252, 165, 165, 0.3);
}

.message-info {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  box-shadow: 0 10px 30px rgba(147, 197, 253, 0.4),
    0 4px 12px rgba(147, 197, 253, 0.3);
}

.message-warning {
  background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
  color: #713f12;
  box-shadow: 0 10px 30px rgba(253, 224, 71, 0.4),
    0 4px 12px rgba(253, 224, 71, 0.3);
}

.btn-confirm {
  flex: 1;
  padding: 16px 32px;
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-confirm:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.btn-confirm:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-cancel {
  flex: 1;
  padding: 16px 32px;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  color: #1f2937;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.3);
}

.btn-cancel:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(156, 163, 175, 0.5);
  background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
}

.btn-cancel:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.4);
}

/* Modern Green Buttons */
.btn-green {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  border: none !important;
  /* ✅ เพิ่ม !important เพื่อบังคับลบขอบ */
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3),
    0 2px 4px rgba(59, 130, 246, 0.2);
  /* border: 1px solid rgba(255, 255, 255, 0.3); <-- เอาออก */
}

.btn-green:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.btn-blue {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  border: none !important;
  /* ✅ เพิ่ม !important */
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(147, 197, 253, 0.3),
    0 2px 4px rgba(147, 197, 253, 0.2);
  /* border: 1px solid rgba(255, 255, 255, 0.3); <-- เอาออก */
}

.btn-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(147, 197, 253, 0.4),
    0 4px 8px rgba(147, 197, 253, 0.3);
}

.btn-icon:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-icon:active {
  transform: translateY(0) scale(0.98);
}

/* Member Tabs Modern */
.member-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.member-tab {
  padding: 10px 18px;
  border: 2px solid #93c5fd;
  background: white;
  color: #374151;
  border-radius: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.member-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.main-container {
  display: grid;
  gap: 15px;
  padding: 15px;
  height: calc(100vh - 120px);
}

.main-container.mobile-mode {
  padding: 0;
  gap: 0;
  /* ใช้ dvh เพื่อให้ความสูงพอดีกับหน้าจอจริง ไม่รวม address bar */
  height: 100dvh;
  min-height: 100dvh;
  background-color: #f9fafb;
  overflow-y: auto;
  /* เพิ่ม -webkit-overflow-scrolling เพื่อให้การเลื่อนบน Safari/iOS ลื่นไหล */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.left-panel {
  width: 100%;
  max-width: 100%;
}

.cart-container {
  height: calc(100vh - 420px);
}

/* ====================================
   Inspection List Modal (ข้อ 2)
   ==================================== */
.inspection-modal {
  max-width: 700px;
}

.inspection-item {
  border: 2px solid #e5e7eb;
  padding: 15px;
  margin: 10px 0;
  border-radius: 12px;
  background: white;
  transition: all 0.2s;
}

.inspection-item:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.inspection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}

.inspection-id {
  font-weight: 700;
  color: #1f2937;
  font-size: 16px;
}

.inspection-status {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.status-pending {
  background: #dbeafe;
  color: #92400e;
}

.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.inspection-body {
  display: grid;
  gap: 8px;
  font-size: 16px;
}

.inspection-row {
  display: flex;
  justify-content: space-between;
  color: #6b7280;
}

.inspection-row strong {
  color: #1f2937;
}

.inspection-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.btn-load-inspection {
  flex: 1;
  padding: 10px;
  background: #93c5fd;
  color: #1e3a8a;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-load-inspection:hover {
  background: #60a5fa;
  transform: translateY(-2px);
}

/* Barcode Verification (ข้อ 2) */
.verification-panel {
  background: #f0fdf4;
  border: 2px solid #93c5fd;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
}

.verification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.verification-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
}

.verification-progress {
  font-size: 16px;
  color: #6b7280;
}

.verification-input {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.barcode-input {
  flex: 1;
  padding: 14px;
  border: 2px solid #93c5fd;
  border-radius: 8px;
  font-size: 18px;
  outline: none;
}

.barcode-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.verified-items {
  max-height: 200px;
  overflow-y: auto;
}

.verified-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid #d1fae5;
}

.verified-item.complete {
  background: #d1fae5;
  border-color: #93c5fd;
}

/* Print Options Modal (ข้อ 5) */
.print-options-modal {
  max-width: 500px;
}

.print-option-card {
  border: 2px solid #e5e7eb;
  padding: 20px;
  margin: 10px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.print-option-card:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(147, 197, 253, 0.3);
}

.print-option-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.print-option-desc {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* User Management Modal (ข้อ 6) */
.user-management-modal {
  max-width: 900px;
}

.user-list {
  max-height: 400px;
  overflow-y: auto;
}

.user-card {
  display: grid;
  grid-template-columns: 1fr 150px 150px 120px;
  gap: 15px;
  padding: 15px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 10px;
  align-items: center;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.user-name {
  font-weight: 700;
  color: #1f2937;
  font-size: 16px;
}

.user-username {
  color: #6b7280;
  font-size: 14px;
}

.user-role {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.role-admin {
  background: #dbeafe;
  color: #92400e;
}

.role-cashier {
  background: #dbeafe;
  color: #1e40af;
}

.role-salesperson {
  background: #d1fae5;
  color: #065f46;
}

.user-status {
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.status-active {
  background: #d1fae5;
  color: #065f46;
}

.status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.user-actions {
  display: flex;
  gap: 5px;
}

.btn-edit-user,
.btn-delete-user {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-edit-user {
  background: #dbeafe;
  color: #1e40af;
}

.btn-edit-user:hover {
  background: #93c5fd;
}

.btn-delete-user {
  background: #fee2e2;
  color: #991b1b;
}

.btn-delete-user:hover {
  background: #fca5a5;
}

/* Member Discount Display (ข้อ 4) */
.member-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #dbeafe;
  color: #92400e;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
}

.discount-indicator {
  background: linear-gradient(135deg, #dbeafe 0%, #fde047 100%);
  border: 2px solid #3b82f6;
  padding: 10px 15px;
  border-radius: 8px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discount-label {
  font-weight: 600;
  color: #92400e;
}

.discount-value {
  font-weight: 700;
  font-size: 20px;
  color: #92400e;
}

/* ========================================
   Mobile Salesperson Styles
   ======================================== */

.mobile-salesperson-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  margin: 0 auto;
  background: #f9fafb;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .mobile-salesperson-view {
    max-width: 100%;
    height: 100vh;
  }
}

@media (min-width: 1024px) {
  .mobile-salesperson-view {
    max-width: 100%;
  }
}

/* Mobile Tabs */
.mobile-tabs {
  display: flex;
  background: white;
  border-bottom: 2px solid #e5e7eb;
  padding: 8px;
  gap: 4px;
}

.mobile-tab {
  flex: 1;
  padding: 12px 8px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-tab.active {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e40af;
}

.mobile-tab:hover {
  background: #f3f4f6;
}

.tab-icon {
  font-size: 24px;
}

.tab-label {
  font-size: 18px;
}

.tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  padding-top: 0px !important;
  /* ✅ เพิ่มบรรทัดนี้ เพื่อลบช่องว่างด้านบนสุดของเนื้อหา */
}

.tab-content.active {
  display: flex;
  flex-direction: column;
}

.btn-add-customer:active {
  transform: scale(0.95);
}

.mobile-cart-header {
  background: white;
  padding: 20px 16px;
  border-radius: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  position: relative;
}

.cart-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.cart-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.header-center-group {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-emoji {
  font-size: 32px;
  line-height: 1;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }
}

.btn-add-customer-circle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 2px solid #a7f3d0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #10b981;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.btn-add-customer-circle:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #60a5fa;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  transform: scale(1.08);
}

.btn-add-customer-circle:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

.btn-add-customer-circle svg {
  filter: drop-shadow(0 1px 2px rgba(5, 150, 105, 0.2));
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  }

  50% {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
  }

  100% {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
  }
}

.btn-add-customer-circle:focus {
  outline: none;
  animation: pulse-green 1.5s ease-in-out infinite;
}

.btn-add-customer-circle svg {
  filter: drop-shadow(0 1px 2px rgba(5, 150, 105, 0.2));
}

.mobile-customer-cart {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-customer-cart:hover {
  border-color: #3b82f6;
  background: #f9fafb;
}

.mobile-customer-cart.active {
  border-color: #3b82f6;
  background: #dbeafe;
}

.customer-cart-icon {
  font-size: 32px;
}

.customer-cart-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-cart-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.customer-item-count {
  background: #3b82f6;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
}

.customer-cart-total {
  font-size: 24px;
  font-weight: 700;
  color: #1e40af;
}

.mobile-cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-cart-item {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.item-remove {
  background: #fee2e2;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 16px;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  color: #6b7280;
  font-size: 16px;
}

.item-total {
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.empty-cart {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
  font-size: 18px;
}

.mobile-add-buttons {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.mobile-add-btn-single {
  width: 80%;
  max-width: 300px;
  height: 80px;
  background: #93c5fd;
  border: 3px solid #2563eb;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
  font-size: 18px;
  font-weight: 600;
  color: #1e3a8a;
}

.mobile-add-btn-single:active {
  transform: scale(0.98);
}

.mobile-add-btn-single .add-icon {
  font-size: 48px;
}

.add-icon {
  font-size: 48px;
  color: #1e3a8a;
}

.mobile-search-header {
  background: #dbeafe;
  padding: 5px 10px;
  /* ลดความสูงส่วนหัว */
  border-radius: 12px;
  margin-bottom: 5px;
  /* ลดช่องว่างระหว่างส่วนหัวกับงบประมาณ */
}

.mobile-search-input {
  width: 100%;
  padding: 14px;
  border: 2px solid #93c5fd;
  border-radius: 8px;
  font-size: 18px;
  background: white;
  outline: none;
}

.mobile-search-input:focus {
  border-color: #3b82f6;
}

.mobile-search-tools {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.search-tool-btn {
  flex: 1;
  padding: 16px 8px;
  background: #dbeafe;
  border: 2px solid #93c5fd;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-tool-btn:active {
  background: #93c5fd;
}

.tool-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tool-icon {
  font-size: 28px;
}

.tool-label {
  font-size: 12px;
  font-weight: 600;
  color: #1e40af;
}

.qr-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.qr-box {
  width: 28px;
  height: 28px;
  border: 3px solid #1e40af;
  border-radius: 4px;
  position: relative;
}

.mobile-cart-products {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.mobile-product-item {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
}

.product-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.product-item-number {
  font-size: 16px;
  font-weight: 700;
  color: #6b7280;
}

.product-item-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
  margin-left: 8px;
}

.product-item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6b7280;
  font-size: 14px;
}

.product-item-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-item-discount {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-item-price {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.mobile-product-detail {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.product-main-info {
  margin-bottom: 12px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 16px;
}

.product-qty {
  color: #6b7280;
}

.product-price {
  color: #6b7280;
}

.product-total {
  font-weight: 700;
  color: #1f2937;
  font-size: 18px;
}

.product-variant {
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
  margin-top: 8px;
}

.variant-name {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.mobile-discount-section {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.discount-title {
  font-size: 18px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 12px;
}

.discount-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.discount-item {
  font-size: 16px;
  color: #1f2937;
  padding-left: 16px;
  position: relative;
}

.discount-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: 700;
}

.mobile-summary-bar {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.summary-label {
  font-size: 16px;
  color: #6b7280;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.summary-row.total-row {
  border-top: 2px solid #e5e7eb;
  padding-top: 8px;
  margin-top: 4px;
}

.summary-row.total-row .summary-label {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.summary-row.total-row .summary-value {
  font-size: 24px;
  font-weight: 700;
  color: #1e40af;
}

.mobile-note-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #93c5fd;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  outline: none;
  resize: vertical;
  font-family: inherit;
  min-height: 60px;
}

.mobile-note-input:focus {
  border-color: #3b82f6;
}

#qr-reader {
  border: 2px solid #3b82f6;
  border-radius: 12px;
  overflow: hidden;
}

#qr-reader video {
  width: 100%;
  height: auto;
  display: block;
}

#qr-reader__dashboard {
  display: none !important;
}

#qr-reader__scan_region {
  border: none !important;
}

#qr-reader__camera_permission_button {
  background: #3b82f6 !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#qr-reader__camera_selection {
  padding: 8px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  margin: 10px 0 !important;
}

#qr-reader-results {
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#qr-reader video,
#barcode-camera-reader video {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 8px;
}

#qr-reader__dashboard,
#barcode-camera-reader__dashboard {
  display: none !important;
}

#qr-reader__camera_permission_button,
#barcode-camera-reader__camera_permission_button {
  background: #3b82f6 !important;
  color: white !important;
  border: none !important;
  padding: 15px 30px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin: 20px auto !important;
  display: block !important;
}

#qr-reader__scan_region,
#barcode-camera-reader__scan_region {
  border: none !important;
}

@media (max-width: 768px) {

  #qrScannerModal .modal-content,
  #barcodeScannerModal .modal-content {
    margin: 10px !important;
    max-height: 95vh !important;
  }

  #qr-reader,
  #barcode-camera-reader {
    max-height: 50vh !important;
  }
}

.mobile-action-btn {
  flex: 1;
  padding: 14px 12px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 70px;
}

.mobile-action-btn:active {
  transform: scale(0.97);
}

.mobile-action-btn .btn-icon {
  font-size: 28px;
  line-height: 1;
}

.mobile-action-btn .btn-label {
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.btn-send {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  border: 2px solid #3b82f6;
}

.btn-send:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

.btn-copy {
  background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
  color: #713f12;
  border: 2px solid #eab308;
}

.btn-copy:hover {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.4);
  transform: translateY(-2px);
}

.btn-add-cart {
  background: linear-gradient(135deg, #a5f3fc 0%, #67e8f9 100%);
  color: #164e63;
  border: 2px solid #06b6d4;
}

.btn-add-cart:hover {
  background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
  transform: translateY(-2px);
}

.btn-logout-mobile {
  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
  color: #7f1d1d;
  border: 2px solid #dc2626;
}

.btn-logout-mobile:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  transform: translateY(-2px);
}

.mobile-product-result-item:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

.mobile-product-result-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

.customer-name-display {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
}

/* === Styles for Cart Actions Modal === */
.modal-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 columns */
  gap: 15px;
  /* Space between buttons */
  padding: 10px 0;
}

.modal-grid-button {
  display: flex;
  flex-direction: column;
  /* Icon on top, text below */
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  border-radius: 12px;
  /* Softer corners */
  text-decoration: none;
  font-weight: 700;
  /* Bold text */
  font-size: 14px;
  /* Clear text size */
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* Base shadow for depth */
  transition: all 0.2s ease-out;
  /* Smooth transition for hover */
  min-height: 120px;
  /* Give buttons a consistent height */
  color: white;
  /* Default text color */
}

/* Hover Effect */
.modal-grid-button:hover {
  transform: translateY(-4px);
  /* "Lift" the button */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  /* Stronger shadow */
  opacity: 0.95;
  /* Slight brightness change */
}

/* Icon Container */
.modal-grid-button .icon {
  width: 64px;
  /* New, larger size */
  height: 64px;
  /* New, larger size */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  /* Space between icon and text */
  border-radius: 12px;
  /* Match button's rounded corners */
  background-color: rgba(255, 255, 255, 0.2);
  /* Slight glass effect */
  position: relative;
  /* For docIcon text */
}

/* Icon Sizing */
.modal-grid-button .icon img {
  width: 56px;
  /* New, larger image size */
  height: 56px;
  /* New, larger image size */
  border-radius: 8px;
  object-fit: cover;
}

.modal-grid-button .icon svg {
  width: 36px;
  /* New, larger SVG size */
  height: 36px;
  /* New, larger SVG size */
}

/* Specific Button Colors */
.modal-grid-button.btn-line {
  background-color: #06C755;
  color: white;
}

.modal-grid-button.btn-fb {
  background-color: #0084FF;
  color: white;
}

.modal-grid-button.btn-gmail {
  background-color: #EA4335;
  color: white;
}

.modal-grid-button.btn-share {
  background-color: #3b82f6;
  color: white;
}

.modal-grid-button.btn-share .icon {
  background: #eff6ff;
}

.modal-grid-button.btn-share .icon svg {
  stroke: #3b82f6;
}

.modal-grid-button.btn-print {
  background-color: #f97316;
  color: white;
}

.modal-grid-button.btn-print .icon {
  color: white;
}

.modal-grid-button.btn-doc {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.modal-grid-button.btn-doc .icon {
  background-color: white;
  color: #3b82f6;
}

.modal-grid-button.btn-delete {
  background-color: #fecaca;
  color: #b91c1c;
}

.modal-grid-button.btn-delete .icon {
  background-color: white;
  color: #ef4444;
}

.modal-grid-button.btn-close-modal {
  background-color: #6b7280;
  color: white;
}

/* New button style for adding cart */
.btn-add-new-cart {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  border: none;
  border-radius: 16px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3),
    0 2px 4px rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 80%;
  max-width: 250px;
}

.btn-add-new-cart:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4),
    0 4px 8px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.btn-add-new-cart:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.format-modal-content {
  max-width: 500px;
  text-align: center;
}

.format-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.btn-format {
  padding: 25px;
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.btn-format:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

.btn-format .format-icon {
  font-size: 48px;
  line-height: 1;
}

.btn-format-pdf {
  color: #dc2626;
}

.btn-format-pdf:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.btn-format-txt {
  color: #1d4ed8;
}

.btn-format-txt:hover {
  background: #eff6ff;
  border-color: #1d4ed8;
}

#mobileCartTable {
  display: none;
}

#mobileCartTable.has-items {
  display: table;
}

.customer-info-section {
  background: #f0fdf4;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
  border-left: 4px solid #10b981;
}

#scannedProductsModal .modal-content>div>div:hover {
  background: #f3f4f6 !important;
}

#noteSection button:hover {
  background: #2563eb !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2) !important;
}

#noteSection button:active {
  transform: translateY(0);
}

/* บังคับให้ noteSection อยู่กลาง */
#noteSection {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}

#noteSection>div {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.mobile-search-header {
  background: transparent !important;
  padding: 0px 5px !important;
  /* บังคับลด Padding ให้เหลือน้อยที่สุด */
  margin-bottom: 0px !important;
  /* ลบช่องว่างด้านล่างทั้งหมด */
}

/* งบให้ตัวเลขอยู่กลาง */
#mobileBudgetRemaining {
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

#mobileBudget {
  text-align: center !important;
}

/* ====================================
   Floating Product Search Button
   ==================================== */
.floating-search-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 1000;
  transition: all 0.3s ease;
}

.floating-search-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.floating-search-btn:active {
  transform: scale(0.95);
}

/* Product Search Modal */
.product-search-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
}

.product-search-modal.active {
  display: flex;
}

.product-search-content {
  background: white;
  border-radius: 16px;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
}

.product-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e7eb;
}

.product-search-header h2 {
  margin: 0;
  color: #1f2937;
  font-size: 20px;
}

.search-close-btn {
  width: 32px;
  height: 32px;
  background: white;
  border: 2px solid #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.search-close-btn:hover {
  background: #fee2e2;
}

/* Search Input Row */
.search-input-row {
  margin-bottom: 15px;
}

.search-input-row input {
  width: 100%;
  padding: 15px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.search-input-row input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Search Icons Row */
.search-icons-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.search-icon-btn {
  flex: 1;
  padding: 15px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  transition: all 0.2s;
}

.search-icon-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  transform: translateY(-2px);
}

.search-icon-btn:active {
  transform: translateY(0);
}

.search-icon-btn .icon {
  font-size: 28px;
}

.search-icon-btn.voice-btn .icon {
  color: #3b82f6;
}

.search-icon-btn.qr-btn .icon {
  color: #10b981;
}

/* Create Product Button */
.create-product-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #1e3a8a;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.create-product-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.create-product-btn:active {
  transform: translateY(0);
}