/* ============================================================
   ALLOVE — ธีมสีเลือดหมู (Maroon) + ทอง (Gold)
   ออกแบบให้ใช้งานง่าย เรียบสะอาด รองรับมือถือ (responsive)
   ============================================================ */

:root{
  --maroon:        #6d0e1a;   /* สีเลือดหมูหลัก */
  --maroon-dark:   #540a14;
  --maroon-light:  #8c1626;
  --gold:          #d4af37;   /* ทอง */
  --gold-soft:     #e7c766;
  --gold-line:     #b8941f;
  --ink:           #232026;   /* สีตัวอักษรหลัก */
  --muted:         #6b6b6b;
  --bg:            #f6f4f2;
  --card:          #ffffff;
  --line:          #e7e3df;
  --ok:            #1c7c3b;
  --danger:        #b3261e;
  --radius:        12px;
  --shadow:        0 2px 10px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Sarabun","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{ color:var(--maroon); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 16px; }

/* ---------------- HEADER (แถบสีเลือดหมู ขอบทอง) ---------------- */
.site-header{
  background:linear-gradient(180deg,var(--maroon-light),var(--maroon));
  border-bottom:3px solid var(--gold);
  color:#fff;
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50;
}
.header-row{
  display:flex; align-items:center; gap:16px;
  padding:12px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:22px; letter-spacing:1px;
  color:#fff;
}
.brand:hover{ text-decoration:none; }
.brand .logo-badge{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--gold); color:var(--maroon-dark);
  font-weight:900; font-size:18px;
  border:2px solid var(--gold-soft);
}
.brand-logo{ height:50px; width:auto; display:block; }
.search-box{ flex:1; display:flex; }
.search-box input{
  flex:1; border:2px solid var(--gold); border-right:none;
  border-radius:8px 0 0 8px; padding:9px 14px; font-size:15px; outline:none;
}
.search-box button{
  border:2px solid var(--gold); background:var(--gold); color:var(--maroon-dark);
  border-radius:0 8px 8px 0; padding:0 18px; font-weight:700; cursor:pointer;
}
.search-box button:hover{ background:var(--gold-soft); }

.header-nav{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.header-nav .nav-greet{ color:#fff; font-size:13px; opacity:.9; }
.nav-link{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:14px; padding:6px 10px; border-radius:8px; }
.nav-link:hover{ color:var(--gold-soft); text-decoration:none; background:rgba(255,255,255,.08); }
.nav-link.nav-primary{ background:var(--gold); color:var(--maroon-dark)!important; font-weight:700; }
.nav-link.nav-primary:hover{ background:var(--gold-soft); }
.nav-ico{ width:20px; height:20px; flex:0 0 auto; }
.btn-gold{
  background:var(--gold); color:var(--maroon-dark)!important;
  padding:8px 16px; border-radius:8px; font-weight:700; border:none; cursor:pointer;
}
.btn-gold:hover{ background:var(--gold-soft); text-decoration:none!important; }

/* ---------------- เนื้อหา ---------------- */
main{ flex:1 0 auto; padding:24px 0; }
.page-title{ font-size:22px; font-weight:800; margin:0 0 16px; color:var(--maroon); }

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}
.card + .card{ margin-top:18px; }

/* ฟอร์ม */
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-weight:600; margin-bottom:6px; font-size:14px; }
.form-control{
  width:100%; padding:11px 13px; border:1px solid #cfcac4; border-radius:9px;
  font-size:15px; font-family:inherit; outline:none; transition:border-color .15s;
}
.form-control:focus{ border-color:var(--maroon); box-shadow:0 0 0 3px rgba(109,14,26,.12); }
textarea.form-control{ min-height:110px; resize:vertical; }

.btn{
  display:inline-block; border:none; cursor:pointer; font-family:inherit;
  background:var(--maroon); color:#fff; padding:11px 22px; border-radius:9px;
  font-size:15px; font-weight:700; transition:background .15s;
}
.btn:hover{ background:var(--maroon-dark); text-decoration:none; }
.btn-block{ width:100%; }
.btn-outline{ background:transparent; color:var(--maroon); border:2px solid var(--maroon); }
.btn-success{ background:var(--ok); }
.btn-danger{ background:var(--danger); }
.btn-sm{ padding:6px 12px; font-size:13px; }

.auth-wrap{ max-width:440px; margin:30px auto; }

/* flash / alert */
.alert{ padding:12px 16px; border-radius:9px; margin-bottom:16px; font-size:14px; border:1px solid transparent; }
.alert-success{ background:#e7f6ec; color:#155f2c; border-color:#bfe6cd; }
.alert-danger{ background:#fdeceb; color:#8c1a14; border-color:#f5c6c3; }
.alert-info{ background:#fef6e0; color:#7a5a07; border-color:#f0dca0; }

/* badge สถานะ */
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge-pending{ background:#fef6e0; color:#8a6d00; }
.badge-approved{ background:#e7f6ec; color:#155f2c; }
.badge-rejected{ background:#fdeceb; color:#8c1a14; }
.badge-suspended{ background:#eee; color:#555; }

/* ตาราง */
.table{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.table th,.table td{ padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
.table th{ background:var(--maroon); color:#fff; font-weight:700; }
.table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* กริดสินค้า */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.product{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .12s; }
.product:hover{ transform:translateY(-3px); }
.product .thumb{ aspect-ratio:1/1; background:#efeae6; display:grid; place-items:center; color:#bbb; }
.product .info{ padding:12px; }
.product .name{ font-size:14px; color:var(--ink); height:42px; overflow:hidden; }
.product .price{ color:var(--maroon); font-weight:800; font-size:17px; margin-top:6px; }

/* ป้ายสินค้า: COD / PRO / ส่งฟรี (แสดงเมื่อผู้ขายเปิดใช้) */
.prod-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.pbadge{ font-size:10px; font-weight:800; padding:2px 7px; border-radius:5px; line-height:1.5; letter-spacing:.3px; }
.pbadge-free{ background:#e7f6ec; color:#157a35; border:1px solid #bfe6cd; }
.pbadge-cod{  background:#e9f0fb; color:#1857a8; border:1px solid #c4d6f2; }
.pbadge-pro{  background:var(--gold); color:var(--maroon-dark); border:1px solid var(--gold-line); }

/* ตัวเลือกป้ายสินค้าในฟอร์มผู้ขาย */
.flag-options{ display:flex; flex-direction:column; gap:10px; }
.flag-check{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:400; cursor:pointer; }
.flag-check input{ width:18px; height:18px; cursor:pointer; }

/* แถบตัวกรอง: ปุ่มหมวดหมู่ (กดเพื่อเปิด) + ประเทศ */
.filter-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }

/* เมนูหมวดหมู่แบบกดเปิด (ใช้ <details> ไม่ต้องใช้ JavaScript) */
.cat-menu{ position:relative; }
.cat-menu summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--maroon); color:#fff; font-weight:700; font-size:14px;
  padding:9px 18px; border-radius:9px; border:1px solid var(--gold-line);
}
.cat-menu summary::-webkit-details-marker{ display:none; }
.cat-menu summary:hover{ background:var(--maroon-dark); }
.cat-menu-icon{ font-size:15px; }
.cat-menu-caret{ font-size:12px; transition:transform .15s; }
.cat-menu[open] .cat-menu-caret{ transform:rotate(180deg); }

.cat-panel{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0;
  min-width:240px; max-width:88vw;
  background:#fff; border:1px solid var(--gold-line); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px;
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
}
.cat-panel a{
  display:block; padding:8px 12px; border-radius:7px; font-size:13.5px;
  color:var(--maroon); background:#faf7f5;
}
.cat-panel a:hover{ background:var(--maroon); color:#fff; text-decoration:none; }
.cat-panel a.active{ background:var(--gold); color:var(--maroon-dark); font-weight:700; }

.country-filter{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.country-filter label{ font-size:13px; font-weight:600; color:var(--maroon); white-space:nowrap; }
.country-filter select{ width:auto; min-width:150px; padding:8px 12px; }

.hero{ background:linear-gradient(135deg,var(--maroon),var(--maroon-dark)); color:#fff; border-radius:var(--radius); padding:30px; margin-bottom:22px; border:2px solid var(--gold); }
.hero h1{ margin:0 0 8px; font-size:26px; }
.hero p{ margin:0; opacity:.92; }

.help-text{ font-size:13px; color:var(--muted); margin-top:5px; }

/* ---------------- FOOTER (แถบเลือดหมู ขอบทอง / ข้อความบรรทัดเดียว) ---------------- */
.site-footer{
  flex-shrink:0;
  background:linear-gradient(0deg,var(--maroon-dark),var(--maroon));
  border-top:3px solid var(--gold);
  margin-top:30px;
}
.footer-copyright{
  color:#ffffff;                      /* ตัวหนังสือสีขาว */
  text-align:center;
  /* บังคับให้อยู่ "บรรทัดเดียว" ทั้งคอมและมือถือ */
  white-space:nowrap;
  overflow:hidden;
  padding:16px 8px;
  /* ปรับขนาดอักษรอัตโนมัติตามจอ เพื่อไม่ให้ตกบรรทัดบนมือถือ */
  font-size:clamp(8.5px, 3vw, 14px);
  letter-spacing:.5px;
  font-weight:600;
}

/* ---------------- มือถือ ---------------- */
/* ---------- แถบเมนูล่างสำหรับมือถือ (ซ่อนบนคอม) ---------- */
.mobile-bottom-nav{ display:none; }

@media (max-width:760px){
  .header-row{ flex-wrap:wrap; gap:10px; justify-content:center; }
  .brand{ font-size:20px; order:1; margin:0 auto; }      /* โลโก้อยู่กลาง header */
  .brand-logo{ height:46px; }
  .header-nav{ display:none; }                            /* ย้ายเมนูไปแถบล่าง */
  .search-box{ order:3; flex-basis:100%; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .card{ padding:16px; }
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .cat-menu summary{ width:100%; justify-content:center; }
  .cat-panel{ grid-template-columns:1fr; left:0; right:0; min-width:0; max-width:100%; }
  .country-filter{ width:100%; }
  .country-filter select{ flex:1; min-width:0; }

  /* เผื่อที่ว่างด้านล่างไม่ให้แถบเมนูบังเนื้อหา/ฟุตเตอร์ */
  body{ padding-bottom:66px; }
  .site-footer{ margin-bottom:0; }

  .mobile-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:linear-gradient(0deg,var(--maroon-dark),var(--maroon));
    border-top:3px solid var(--gold);
    box-shadow:0 -2px 10px rgba(0,0,0,.18);
  }
  .mbn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 4px; color:#fff; font-size:11px; font-weight:600; text-align:center;
  }
  .mbn-item:hover{ text-decoration:none; color:var(--gold-soft); }
  .mbn-item .nav-ico{ width:24px; height:24px; }
  .mbn-item.mbn-primary{ color:var(--gold); }
  .mbn-item.mbn-primary .nav-ico{ color:var(--gold); }
}

/* ---------- สมัครร้านค้า: รหัสผ่าน show/hide, อัปโหลดรูป, แกลเลอรี ---------- */
.req{ color:var(--danger); }
.password-wrap{ position:relative; display:flex; align-items:center; }
.password-wrap .form-control{ padding-right:64px; }
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--gold); color:var(--maroon-dark); border:none; cursor:pointer;
  font-size:13px; font-weight:700; padding:6px 12px; border-radius:7px;
}
.pw-toggle:hover{ background:var(--gold-soft); }

input[type="file"].form-control{ padding:9px; background:#faf7f5; cursor:pointer; }

.img-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.img-thumb{ width:74px; height:74px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* แกลเลอรีรูปสินค้าในแดชบอร์ดร้าน */
.shop-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.gallery-img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line); }

/* รูปสินค้าในหน้าแอดมิน (ดูประกอบการอนุมัติ) */
.admin-thumbs{ display:flex; flex-wrap:wrap; gap:5px; max-width:240px; }
.admin-thumb{ width:48px; height:48px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }