/* ============================================================
   Local Market Platform — Global Styles
   โทนสี: เขียวมรกต(ธรรมชาติ) + ดินเผา(ท้องถิ่น) + ครีม(อบอุ่น)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&family=Prompt:wght@500;600;700&display=swap');

:root{
  --primary:#059669;        /* emerald-600 */
  --primary-dark:#047857;   /* emerald-700 */
  --primary-light:#d1fae5;  /* emerald-100 */
  --accent:#d97706;         /* amber-600 ดินเผา */
  --accent-light:#fef3c7;
  --cream:#fdfaf3;
  --bg:#f6f7f4;
  --surface:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --border:#e5e7eb;
  --danger:#dc2626;
  --radius:16px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 8px 30px rgba(0,0,0,.12);
}

*{font-family:'Sarabun',sans-serif;box-sizing:border-box}
h1,h2,h3,h4,.font-display{font-family:'Prompt','Sarabun',sans-serif}
body{background:var(--bg);color:var(--text);margin:0;-webkit-font-smoothing:antialiased}

/* ---------- ลวดลายพื้นบ้าน (ท้องถิ่น) ---------- */
.pattern-thai{
  background-image:radial-gradient(circle at 1px 1px, rgba(5,150,105,.14) 1px, transparent 0);
  background-size:22px 22px;
}
.hero-bg{
  background:linear-gradient(135deg,#065f46 0%,#059669 55%,#0d9488 100%);
  position:relative;overflow:hidden;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.08;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px);
}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:none;cursor:pointer;font-weight:600;font-size:1rem;line-height:1;
  padding:.9rem 1.5rem;border-radius:12px;transition:.2s;text-decoration:none;white-space:nowrap}
.btn-lg{padding:1.05rem 1.8rem;font-size:1.06rem}
.btn-sm{padding:.5rem .9rem;font-size:.875rem;border-radius:10px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(5,150,105,.35)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(.95)}
.btn-outline{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary-light)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:#f1f5f9;color:var(--text)}
.btn-danger{background:#fee2e2;color:var(--danger)}
.btn-block{width:100%}

/* ---------- การ์ด ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #f0f1ee}
.card-hover{transition:.2s;cursor:pointer}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* ---------- Inputs (เน้นเลือก) ---------- */
.input,.select,.textarea{width:100%;padding:.85rem 1rem;border:2px solid var(--border);
  border-radius:12px;font-size:1rem;background:#fff;transition:.2s;color:var(--text)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(5,150,105,.15)}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:1.1rem;padding-right:2.5rem}
.input-sm,.select-sm{padding:.45rem .7rem;font-size:.875rem;border-radius:8px}
.label{display:block;font-weight:600;margin-bottom:.45rem;color:var(--text)}

/* ---------- Chips (ตัวเลือกแบบกด) ---------- */
.chip-group{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.55rem 1.1rem;border:2px solid var(--border);border-radius:999px;
  background:#fff;cursor:pointer;font-size:.95rem;font-weight:500;transition:.15s;user-select:none}
button.chip{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;line-height:inherit}
button.chip:focus{outline:none}
.chip:hover{border-color:var(--primary)}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(5,150,105,.3)}
button.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- Selection Cards (การ์ดตัวเลือกใหญ่ สำหรับผู้สูงอายุ) ---------- */
.sel-card{border:2px solid var(--border);border-radius:var(--radius);padding:1.1rem;cursor:pointer;
  transition:.2s;background:#fff;display:flex;align-items:center;gap:.9rem}
.sel-card:hover{border-color:var(--primary);background:#f0fdf7}
.sel-card.active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 3px rgba(5,150,105,.15)}
.sel-card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;background:#f1f5f9;flex-shrink:0}
.sel-card.active .ic{background:#fff}
.sel-card .check{margin-left:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;flex-shrink:0}
.sel-card.active .check{background:var(--primary);border-color:var(--primary)}

/* ---------- Role Card (หน้า Login) ---------- */
.role-card{text-align:center;padding:1.6rem 1rem}
.role-card .ic{width:64px;height:64px;margin:0 auto .7rem;border-radius:20px;font-size:2rem;
  display:flex;align-items:center;justify-content:center}
.role-card.active{border-color:var(--primary);background:#f0fdf7;box-shadow:0 0 0 3px rgba(5,150,105,.2)}

/* ---------- Sidebar / Nav ---------- */
.nav-item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:12px;
  color:#cbd5e1;text-decoration:none;font-weight:500;transition:.15s;margin-bottom:.2rem}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(5,150,105,.4)}
.nav-item .n-ic{width:22px;text-align:center}

/* ---------- Stat Cards ---------- */
.stat-card{display:flex;align-items:center;gap:1rem}
.stat-card .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600}
.b-green{background:#d1fae5;color:#047857}
.b-amber{background:#fef3c7;color:#b45309}
.b-blue{background:#dbeafe;color:#1d4ed8}
.b-red{background:#fee2e2;color:#b91c1c}
.b-gray{background:#f1f5f9;color:#475569}
.b-purple{background:#ede9fe;color:#6d28d9}
.b-open{background:#d1fae5;color:#047857;border:1px solid #10b981}
.b-closed{background:#ffe4e6;color:#be123c;border:1px solid #fb7185}

/* ---------- ตาราง ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th{text-align:left;padding:.85rem 1rem;color:var(--muted);font-weight:600;font-size:.85rem;
  border-bottom:2px solid var(--border);white-space:nowrap}
.tbl td{padding:.95rem 1rem;border-bottom:1px solid #f1f2f0;vertical-align:middle}
.tbl tr:hover td{background:#fafbf8}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:#1e293b;color:#fff;padding:.9rem 1.5rem;border-radius:12px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:.3s;z-index:100;font-weight:500}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Product Grid ---------- */
.prod-img{height:130px;display:flex;align-items:center;justify-content:center;font-size:3.4rem;border-radius:12px 12px 0 0}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .4s ease both}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .sidebar{position:fixed;z-index:50;height:100vh;transform:translateX(-100%);transition:.3s}
  .sidebar.open{transform:translateX(0)}
}


/* ===== Settings Page ===== */
.tab-btn{padding:.7rem 1.2rem;border-radius:12px;font-weight:600;color:var(--muted);
  cursor:pointer;border:none;background:transparent;transition:.15s;white-space:nowrap;font-size:.95rem}
.tab-btn:hover{background:#f1f5f9;color:var(--text)}
.tab-btn.active{background:var(--primary);color:#fff;box-shadow:0 3px 10px rgba(5,150,105,.3)}

/* Toggle Switch */
.switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s}
.switch .slider::before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--primary)}
.switch input:checked + .slider::before{transform:translateX(24px)}

/* Upload Box */
.upload-box{border:2px dashed var(--border);border-radius:var(--radius);cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:1.4rem;color:var(--muted);background:#fafbf8;overflow:hidden;position:relative}
.upload-box:hover{border-color:var(--primary);background:#f0fdf7;color:var(--primary)}
.upload-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.upload-circle{width:110px;height:110px;border-radius:50%;padding:0}

/* Setting row */
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid #f1f2f0}
.setting-row:last-child{border-bottom:none}

/* Social input group */
.social-input{display:flex;align-items:center;gap:.6rem}
.social-input .si-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}

/* ============================================================
   Progressive Consent Flow — Banner + Modal
   ============================================================ */

/* ---------- Banner ---------- */
.lm-consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--surface);border-top:1px solid var(--border);
  box-shadow:0 -4px 24px rgba(0,0,0,.12);padding:.75rem 1rem;
  animation:lm-slide-up .35s ease-out;
}
.lm-consent-banner--hiding{
  animation:lm-slide-down .3s ease-in forwards;
}
.lm-consent-banner__content{
  max-width:960px;margin:0 auto;
  display:flex;flex-direction:column;gap:.75rem;
}
.lm-consent-banner__title{font-family:'Prompt','Sarabun',sans-serif;font-size:1rem;font-weight:700;color:var(--text)}
.lm-consent-banner__subtitle{font-size:.875rem;color:var(--muted);line-height:1.4}
.lm-consent-banner__actions{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;
}
@media (min-width:640px){
  .lm-consent-banner__content{flex-direction:row;align-items:center;justify-content:space-between}
  .lm-consent-banner__actions{flex-shrink:0}
}

@keyframes lm-slide-up{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes lm-slide-down{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(100%);opacity:0}
}

/* ---------- Modal ---------- */
.lm-consent-modal{
  position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
}
.lm-consent-modal__overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
}
.lm-consent-modal__dialog{
  position:relative;background:var(--surface);border-radius:var(--radius);
  width:min(560px,calc(100% - 1.5rem));max-height:calc(100vh - 2rem);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:lm-fade-in .25s ease-out;
}
.lm-consent-modal--hiding .lm-consent-modal__dialog{
  animation:lm-fade-out .2s ease-in forwards;
}
.lm-consent-modal__header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.25rem;border-bottom:1px solid var(--border);
}
.lm-consent-modal__title{font-size:1.15rem;font-weight:700;margin:0}
.lm-consent-modal__subtitle{font-size:.85rem;color:var(--muted);margin:.25rem 0 0}
.lm-consent-modal__close{
  width:34px;height:34px;border-radius:50%;border:none;background:#f1f5f9;color:#64748b;
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lm-consent-modal__close:hover{background:#e2e8f0}
.lm-consent-modal__body{
  overflow-y:auto;padding:1.25rem;flex:1;
}
.lm-consent-modal__footer{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  padding:1rem 1.25rem;border-top:1px solid var(--border);background:#fafbf8;
  border-radius:0 0 var(--radius) var(--radius);
}

@keyframes lm-fade-in{
  from{transform:scale(.96);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes lm-fade-out{
  from{transform:scale(1);opacity:1}
  to{transform:scale(.96);opacity:0}
}

/* ---------- Modal Sections ---------- */
.lm-consent-section{
  background:#fafbf8;border:1px solid var(--border);border-radius:14px;
  padding:1rem;margin-bottom:1rem;
}
.lm-consent-section__title{font-size:1rem;font-weight:700;margin:0}
.lm-consent-section__version{font-size:.8rem;color:var(--muted);font-weight:400}
.lm-consent-section__summary{
  font-size:.9rem;color:var(--text);line-height:1.6;margin:.5rem 0;
  padding:.75rem;background:#fff;border-radius:10px;border:1px solid #eef0ec;
}
.lm-consent-section__link{
  display:inline-block;font-size:.85rem;color:var(--primary);font-weight:600;
  text-decoration:none;margin-bottom:.75rem;
}
.lm-consent-section__link:hover{text-decoration:underline}

/* Checkbox */
.lm-consent-checkbox{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.9rem;
}
.lm-consent-checkbox__input{display:none}
.lm-consent-checkbox__check{
  width:22px;height:22px;border:2px solid #cbd5e1;border-radius:6px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:.2s;background:#fff;
}
.lm-consent-checkbox__check::after{
  content:"✓";color:#fff;font-size:.8rem;font-weight:700;opacity:0;
}
.lm-consent-checkbox__input:checked + .lm-consent-checkbox__check{
  background:var(--primary);border-color:var(--primary);
}
.lm-consent-checkbox__input:checked + .lm-consent-checkbox__check::after{opacity:1}

/* Cookie toggles */
.lm-cookie-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}
.lm-cookie-item{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:#fff;border:1px solid #eef0ec;border-radius:12px;padding:.75rem;
}
.lm-cookie-item__title{font-size:.9rem;font-weight:600}
.lm-cookie-item__desc{font-size:.78rem;color:var(--muted);margin-top:.15rem}

.lm-toggle-switch{
  position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0;
}
.lm-toggle-switch input{opacity:0;width:0;height:0}
.lm-toggle-slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background-color:#cbd5e1;transition:.3s;border-radius:28px;
}
.lm-toggle-slider:before{
  position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;
  background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.lm-toggle-switch input:checked + .lm-toggle-slider{background-color:var(--primary)}
.lm-toggle-switch input:checked + .lm-toggle-slider:before{transform:translateX(24px)}
.lm-toggle-switch input:disabled + .lm-toggle-slider{opacity:.6;cursor:not-allowed}

/* Return-to-consent banner (legal pages) */
.lm-consent-return{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:#fff;border-top:2px solid var(--primary);box-shadow:0 -4px 20px rgba(0,0,0,.1);
  padding:.75rem 1rem;
}
.lm-consent-return__content{
  max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.75rem;
  align-items:center;justify-content:space-between;
}
.lm-consent-return__text{font-size:.9rem;color:var(--text)}
.lm-consent-return__actions{display:flex;gap:.5rem}