:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-light: #eff6ff;
  --ink: #1f2937;
}

body {
  background-color: #f5f6fa;
  color: var(--ink);
}

/* แก้ปัญหา modal-dialog-scrollable ไม่ทำงานเมื่อมี <form> ครอบ header/body/footer
   (form ไม่ได้เป็น flex item โดยตรงของ .modal-content ทำให้ .modal-body ไม่ถูกจำกัดความสูง) */
.modal-content > form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* ================= Navbar: ไล่เฉดสีขาว-เทาจากซ้ายไปขวา ================= */
.navbar-modern {
  background: linear-gradient(90deg, #ffffff 0%, #eef0f4 55%, #dfe3ea 100%);
  border-bottom: 1px solid #e2e5ea;
}
.navbar-modern .navbar-brand {
  color: var(--ink) !important;
  font-weight: 700;
}
.navbar-modern .btn-outline-light {
  color: var(--ink);
  border-color: #c9cdd6;
}
.navbar-modern .btn-outline-light:hover {
  color: var(--ink);
}
.navbar-modern .btn-link-icon {
  color: var(--ink);
}

.cart-count-badge {
  position: absolute;
  top: 62%;
  left: 62%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ================= ปุ่มทุกปุ่ม: เหลี่ยมคม + hover เฟดสีขาวจากซ้ายไปขวา ================= */
.btn {
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color .3s ease, box-shadow .25s ease, transform .2s ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .28);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: -1;
  pointer-events: none;
}
.btn:hover::before {
  transform: scaleX(1);
}
.btn:active {
  transform: translateY(1px);
}
.btn-check:checked + .btn {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

/* ================= การ์ดสินค้า ================= */
.product-card {
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
  border: 1px solid #eceef2;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.1);
}
.product-card .card-img-top {
  height: 220px;
  width: 100%;
  object-fit: cover;
  background: #e9ecef;
  cursor: pointer;
}
.product-card .no-image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: #adb5bd;
  font-size: 2.5rem;
  cursor: pointer;
}

/* ปุ่มสั่งซื้อ (การ์ดสินค้า) */
.btn-order {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .55rem 1rem;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}
.btn-order:hover {
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .35);
}

.product-price {
  font-size: 1.15rem;
}
.sold-count-text {
  font-size: .78rem;
  color: #6b7280;
  white-space: nowrap;
}

.no-results-box {
  background: rgba(220, 53, 69, .08);
  border: 1px solid rgba(220, 53, 69, .2);
  color: #b02a37;
  font-weight: 600;
}

/* ปุ่มนำทางรอง (กลับ / เลือกสินค้าต่อ) */
.btn-soft {
  border-radius: 0 !important;
  border: 1px solid #d7dbe3;
  background: #fff;
  color: #374151;
  font-weight: 600;
}
.btn-soft:hover {
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ================= Sidebar หมวดหมู่สินค้า ================= */
.category-sidebar-card {
  position: sticky;
  top: 80px;
}

/* หน้าจอเล็ก: ซ่อน sidebar หมวดหมู่ไว้ก่อน เปิด/ปิดด้วยปุ่มสามขีดที่ navbar แบบอนิเมชันเฟด */
@media (max-width: 991.98px) {
  #productSidebarCol {
    display: block;
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: opacity .35s ease, max-height .4s ease, transform .35s ease, margin-bottom .35s ease;
  }
  #productSidebarCol.sidebar-open {
    opacity: 1;
    max-height: 500px;
    margin-bottom: 1rem;
    transform: translateY(0);
  }
  .category-sidebar-card {
    position: static;
  }
}
.cat-sidebar-item {
  border: none;
  border-radius: 0 !important;
  border-left: 3px solid transparent;
  color: #4b5563;
  font-weight: 600;
  padding: .6rem .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: transparent;
}
.cat-sidebar-item:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
}
.cat-sidebar-item.active-cat {
  background: var(--brand-light);
  border-left-color: var(--brand);
  color: var(--brand-dark);
}
.cat-sidebar-item .badge {
  font-weight: 600;
}

/* ================= กล่องค้นหา + เรียงสินค้า ================= */
.filter-toolbar {
  background: linear-gradient(90deg, var(--brand-light) 0%, #eef4ff 100%);
  border: 1px solid #dbe6ff;
}
.filter-toolbar .form-select,
.filter-toolbar .form-control {
  border-radius: 0;
}

/* ================= ตัวเลือกสินค้า (modal) ================= */
.option-btn {
  border-radius: 0 !important;
}
.option-btn.active {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ================= Gallery รูปสินค้า ================= */
.gallery-carousel .carousel-item img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  background: #f1f2f5;
}
.gallery-carousel .carousel-control-prev,
.gallery-carousel .carousel-control-next {
  filter: drop-shadow(0 0 3px rgba(0,0,0,.6));
}

/* ================= ตะกร้าสินค้า ================= */
.cart-item {
  display: flex;
  gap: .75rem;
}
.cart-item + .cart-item {
  border-top: 1px solid #eee;
  padding-top: .75rem;
  margin-top: .75rem;
}
.cart-item-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: #e9ecef;
  flex: 0 0 auto;
  border: 1px solid #eceef2;
}
.cart-item-thumb-placeholder {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: #adb5bd;
  flex: 0 0 auto;
  border: 1px solid #eceef2;
}
.cart-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* ปุ่ม "ดำเนินการสั่ง" */
.btn-cta-checkout {
  background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .95rem;
  padding: .75rem 1rem;
  box-shadow: 0 6px 14px rgba(22, 163, 74, .3);
}
.btn-cta-checkout:hover:not(:disabled) {
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .4);
}
.btn-cta-checkout:disabled {
  background: #adb5bd;
  box-shadow: none;
}

/* ปุ่ม "ยืนยันการสั่ง" */
.btn-cta-confirm {
  background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .85rem 1rem;
  font-size: 1rem;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .3);
}
.btn-cta-confirm:hover {
  color: #fff;
  box-shadow: 0 10px 22px rgba(22, 163, 74, .4);
}

#slipPreview {
  max-width: 100%;
}

/* ================= อนิเมชันไอคอนหน้าสั่งซื้อสำเร็จ ================= */
@keyframes successPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes successRing {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .35); }
  100% { box-shadow: 0 0 0 20px rgba(22, 163, 74, 0); }
}
.success-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  animation: successPop .55s cubic-bezier(.34,1.56,.64,1) both, successRing 1.4s ease-out .55s 2;
}
.success-icon-wrap i {
  font-size: 3.2rem;
}

/* ================= หน้าเช็คสถานะคำสั่งซื้อ ================= */
.status-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 1.5rem 0;
}
.status-step {
  flex: 1;
  text-align: center;
  position: relative;
}
.status-step .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .4rem;
  font-size: .9rem;
  border: 2px solid #e5e7eb;
}
.status-step .label {
  font-size: .78rem;
  color: #9ca3af;
}
.status-step::before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #e5e7eb;
  z-index: -1;
}
.status-step:first-child::before {
  display: none;
}
.status-step.done .dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.status-step.done .label {
  color: var(--ink);
  font-weight: 600;
}
.status-step.done::before {
  background: var(--brand);
}
.status-step.cancelled .dot {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.status-step.cancelled .label {
  color: #dc3545;
  font-weight: 600;
}

.badge-status-awaiting_slip { background: #fd7e14; }
.badge-status-pending_payment { background: #ffc107; color: #212529; }
.badge-status-paid { background: #0dcaf0; color: #212529; }
.badge-status-shipped { background: #6610f2; }
.badge-status-completed { background: #198754; }
.badge-status-cancelled { background: #dc3545; }

/* ================= SweetAlert2: ธีมสี + ย่อขนาดลง ~20% ================= */
.app-swal-popup {
  font-size: .8rem !important;
  border-radius: 0 !important;
}
.app-swal-title {
  color: var(--ink) !important;
}
.app-swal-btn {
  border-radius: 0 !important;
  font-weight: 600;
}

@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { position: absolute; top: 0; left: 0; width: 100%; }
}