body, button, input, textarea {
    font-family: 'Inter', sans-serif;
}

body{
	font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto; margin:0; background:#f7f7fb;}
.nav{display:flex; gap:12px; padding:12px; background:#111; color:#fff; align-items:center; flex-wrap:wrap;}
.nav a{color:#fff; text-decoration:none; padding:6px 10px; background:#222; border-radius:8px;}
.container{max-width:1100px; margin:24px auto; background:#fff; padding:24px; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{padding:16px; border:1px solid #eee; border-radius:12px;}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; background:#0d6efd; color:#fff; text-decoration:none; border:0;}
.btn-secondary{background:#6c757d}
.badge{display:inline-block; padding:3px 8px; background:#efefef; border-radius:12px; font-size:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee; padding:8px}
input,select{padding:10px; border:1px solid #ddd; border-radius:8px; width:100%}
label{font-weight:bold; margin-top:10px; display:block}
.alert{padding:10px; background:#fff3cd; border:1px solid #ffeeba; border-radius:10px}
.success{background:#d1e7dd; border-color:#badbcc}
.error{background:#f8d7da; border-color:#f5c2c7}
footer{color:#777; text-align:center; padding:24px}

/* Shop cards nicer UI */

.shop-card {
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  border: 1px solid #eee;
  background: #fff;
}

.shop-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LOGO */
.shop-logo-wrap {
  flex: 0 0 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shop-logo-placeholder {
  font-weight: 700;
  font-size: 16px;
  color: #9ca3af;
}

/* TEXT */
.shop-info {
  flex: 1;
  min-width: 0;
}

.shop-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-rate {
  font-size: 12px;
  color: #6b7280;
}

.shop-rate span {
  font-weight: 700;
  color: #16a34a;
  margin-left: 4px;
}

/* BUTTON */
.shop-action {
  flex: 0 0 auto;
}

.shop-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(79,70,229,0.3);
}

.shop-btn:hover {
  filter: brightness(1.05);
}

/* Mobile layout tweak */
@media (max-width: 640px) {
  .grid.grid-2 {
    grid-template-columns: 1fr;
  }
  .shop-card-row {
    gap: 10px;
  }
}

.shop-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.shop-badge span.icon {
  font-size: 11px;
}

/* สีตาม Theme */
.badge-hot {
  background: linear-gradient(135deg, #ef4444, #b91c1c); /* แดง */
}
.badge-top {
  background: linear-gradient(135deg, #3b82f6, #6366f1); /* ฟ้า-ม่วง */
}
.badge-new {
  background: linear-gradient(135deg, #22c55e, #16a34a); /* เขียว */
}
.badge-default {
  background: linear-gradient(135deg, #6b7280, #4b5563); /* เทา */
}

.top-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    padding: 12px 4px;
    margin-bottom: 8px;
}

.top-back-btn .arrow {
    font-size: 18px;
    line-height: 1;
}

.top-back-btn:active {
    opacity: 0.6;
}

.redirect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease; /* เอฟเฟกต์ fade */
}

.redirect-overlay.fade-out {
    opacity: 0; /* ค่อย ๆ จาง */
    pointer-events: none;
}

/* FIX: อย่าให้ input global ไปทำ checkbox/radio กลายเป็น 100% */
input[type="checkbox"],
input[type="radio"]{
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-block !important;
  vertical-align: top;
}

input[type="checkbox"]{
  transform: scale(1.05);
  margin-top: 3px;
}