/* =========================================================
   OnPlay CSS v1.1  —  Mobile-first, Bootstrap Friendly
   Brand: #00ABE4 (primary), White
   ========================================================= */

/* ---------- CSS Variables (Light) ---------- */
:root{
  /* brand */
  --onplay-primary: #00ABE4;
  --onplay-primary-600: #0899CB;
  --onplay-primary-soft: #E6F7FD;

  /* surface & text */
  --onplay-bg: #FFFFFF;
  --onplay-surface: #FFFFFF;
  --onplay-text: #0F172A;
  --onplay-muted: #6B7280;
  --onplay-border: #E5E7EB;

  /* status */
  --onplay-success: #22C55E;
  --onplay-warning: #F59E0B;
  --onplay-danger:  #EF4444;

  /* radii & shadows */
  --onplay-radius-12: 12px;
  --onplay-radius-16: 16px;
  --onplay-shadow-soft: 0 4px 16px rgba(15, 23, 42, .06);
  --bottom-bar: 0px; 
  --topbar: 0px;
}

/* ---------- Dark Mode (opt-in: html[data-theme="dark"]) ---------- */
html[data-theme="dark"]{
  --onplay-bg: #0B1220;
  --onplay-surface: #0F172A;
  --onplay-text: #E5E7EB;
  --onplay-muted: #94A3B8;
  --onplay-border: #1F2937;
  --onplay-primary-soft: rgba(0,171,228,.15);
  --onplay-shadow-soft: 0 4px 16px rgba(0,0,0,.25);
}

/* ---------- Base ---------- */
html, body{
  background: var(--onplay-bg);
  color: var(--onplay-text);
  font-family: 'Inter','Prompt',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--onplay-primary); text-decoration: none; }
a:hover { color: var(--onplay-primary-600); text-decoration: underline; }
a:focus { color: var(--onplay-primary-600); text-decoration: underline; }
.btn:focus { background-color: var(--onplay-primary-600);text-decoration: underline; }

/* Safe area (iOS) + space for bottom nav on mobile */
body{
  padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom));

}
@media (min-width:768px){
  body{ padding-bottom: 0; }
}

/* Focus states for accessibility */
:focus-visible{
  outline: 2px solid var(--onplay-primary);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */
.text-onplay    { color: var(--onplay-primary) !important; }
.bg-onplay-soft { background: var(--onplay-primary-soft) !important; }
.muted          { color: var(--onplay-muted) !important; }
.border-default { border-color: var(--onplay-border) !important; }
.rounded-12     { border-radius: var(--onplay-radius-12) !important; }
.rounded-16     { border-radius: var(--onplay-radius-16) !important; }
.shadow-soft    { box-shadow: var(--onplay-shadow-soft) !important; }

/* กันไม่ให้ content โดนทับ */
.div-content{
  padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom));
  padding-top: var(--topbar);
}

/* สไตล์แถบบน (ให้ดูเนียนเวลาลอย) */
.top-navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid #e5e7eb;
  z-index: 1045; /* มากกว่า content */
}

/* (ไม่บังคับ) ถ้าอยากมี spacer สำหรับ fallback */
#topbar-spacer{ height: var(--topbar); }

/* ถ้ามีแถบเมนูล่าง ให้ใส่คลาสนี้ใน navbar.html */
.mobile-tabbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  /* รองรับรอยบาก/ขอบโค้ง iPhone */
  padding-bottom: env(safe-area-inset-bottom);
  /* ตัวอย่างพื้นหลัง (ปรับตามธีม) */
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

/* กันเหนียว: ใส่ spacer จริง ๆ ไว้ท้ายหน้าด้วย (ดูข้อ 3) */
.bottom-safe {
  height: calc(var(--bottom-bar) + env(safe-area-inset-bottom));
}

/* ---------- Buttons ---------- */
/* make disabled buttons still visible, but not clickable */
.btn:disabled{
  background-color: #6B7280 !important;
}

.btn-onplay{
  background: var(--onplay-primary);
  color:#fff !important;
  border:none;
}

/* ปุ่มกำลังโหลด: กันคลิกซ้ำ แต่ยังมองเห็น */
.btn-onplay.is-loading{
  pointer-events: none;
  opacity: .75;
}
.btn-onplay:hover{ background: var(--onplay-primary-600); color:#fff !important; }
.btn-outline-onplay{
  background: transparent;
  color: var(--onplay-primary) !important;
  border:1px solid var(--onplay-primary);
}
.btn-outline-onplay:hover{
  background: var(--onplay-primary-soft);
  color: var(--onplay-primary-600) !important;
}

/* ---------- Top Navbar (Desktop) ---------- */
.onplay-topbar{
  background: var(--onplay-surface);
  box-shadow: var(--onplay-shadow-soft);
}
.onplay-topbar .nav-link{
  color: var(--onplay-text) !important;
  font-weight: 500;
}
.onplay-topbar .nav-link:hover{ color: var(--onplay-primary-600) !important; }
.onplay-brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.onplay-brand img.img-brand{ height: 50px; }
.onplay-brand span{ color: var(--onplay-text); font-weight: 700; }

/* ---------- Bottom Navigation (Mobile) ---------- */
.onplay-bottom-nav{
  position: fixed; bottom:0; left:0; right:0; z-index:1030;
  background: var(--onplay-surface);
  border-top:1px solid var(--onplay-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.onplay-bottom-nav .bn-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.5rem 0; font-size:.8rem; text-decoration:none;
  color: var(--onplay-primary);
  flex:1;
}
.onplay-bottom-nav .bn-item i{ font-size:1.2rem; line-height:1; }
.onplay-bottom-nav .bn-item.active{
  color: var(--onplay-primary-600);
  font-weight:600;
}

/* ---------- Sections / Bars ---------- */
.section-bar{
  padding: .75rem 1rem;
  background: var(--onplay-surface);
  border-bottom: 1px solid var(--onplay-border);
}
.section-title{ margin:0; font-weight:700; }

/* ทำการ์ดเป็นคอลัมน์ และดัน footer ไปชิดล่าง */
@media (max-width: 767.98px){
  .card.onplay-card .card-title{
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* min-height: calc(1.25em * 3); */
  }
}


.card.onplay-card{
  display: flex;
  flex-direction: column;
}
.card.onplay-card .card-body{
  display: flex;
  flex-direction: column;
  /* gap: .25rem; */

  padding: 5px 5px 0px 5px;
}
.card.onplay-card .card-footer{
  margin-top: auto;                /* ดัน footer ลงล่าง */
  background: var(--onplay-surface);
  border-top: 1px solid var(--onplay-border);
}

/* ตัดชื่อสินค้าให้สูงเท่ากัน (2 บรรทัด) */
.card.onplay-card .card-title{
  font-size: .95rem;
  /* line-height: 1.25; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;           /* ตัดที่ 2 บรรทัด */
  line-clamp: 2;                   /* Standard property for compatibility */
  overflow: hidden;
 /* min-height: calc(1.25em * 2);     กันดีดกรณีมีบรรทัดเดียว */
}

/* เผื่อมีแถว meta ใต้ราคาให้สูงเท่ากันทุกใบ */
.card.onplay-card .meta{
  min-height: 1rem;                /* ปรับตามดีไซน์คุณ */
}

/* ทำให้รูปสูงเท่ากันทุกการ์ด (ออปชัน แต่ช่วยให้งานเนี้ยบ) */
.card.onplay-card .card-img-top{
  aspect-ratio: 1 / 1;             /* สี่เหลี่ยมจัตุรัส */
  object-fit: cover;
}

/* Badges on image corners */
.badge-top-left{
  position:absolute; top:.5rem; left:.5rem;
}
.badge-top-right{
  position:absolute; top:.5rem; right:.5rem;
}

/* ---------- Filter Chips ---------- */
.chip{
  /* display:inline-flex; align-items:center; gap:.25rem;
  padding:.375rem .625rem;
  border:1px solid var(--onplay-border);
  border-radius: 999px;
  cursor:pointer; user-select:none;
  font-size:.9rem; background: var(--onplay-surface); color: var(--onplay-text);
  transition: background .12s ease, border-color .12s ease, color .12s ease; */

  display:inline-flex; 
  align-items:center; 
  gap:.35rem; 
  padding:.2rem .6rem; 
  background:#f4fbfe; 
  border:1px solid var(--onplay-border); 
  border-radius:999px; 
  font-size:.8rem;
}
.chip:hover{ border-color: var(--onplay-primary); }
.chip:focus-within{ outline: 2px solid var(--onplay-primary); outline-offset: 2px; }
.chip input{ display:none; } /* we rely on :checked via server-state */
.chip-active{
  border-color: var(--onplay-primary);
  background: var(--onplay-primary-soft);
  color: var(--onplay-text);
}

/* ---------- Timeline (Orders) ---------- */
.timeline{ position:relative; margin-left: .75rem; }
.timeline:before{
  content:""; position:absolute; left:7px; top:0; bottom:0; width:2px; background: var(--onplay-border);
}
.timeline-item{ position:relative; display:flex; gap:.75rem; margin:.5rem 0 .75rem 0; }
.timeline-item .dot{
  width:14px; height:14px; background: var(--onplay-surface);
  border:2px solid var(--onplay-border);
  border-radius:50%; position:relative; z-index:1; margin-top:.2rem;
}
.timeline-item.done .dot{
  background: var(--onplay-primary);
  border-color: var(--onplay-primary);
}
.timeline-item .content{ margin-left:.25rem; }

/* ---------- Carousel tweaks ---------- */
.carousel-indicators [data-bs-target]{ background-color: var(--onplay-primary); }
.carousel-control-next-icon,
.carousel-control-prev-icon{ filter: invert(1) grayscale(100%); }

/* ---------- Offcanvas (Filter Sheet) ---------- */
.offcanvas.offcanvas-bottom{
  border-top-left-radius: var(--onplay-radius-16);
  border-top-right-radius: var(--onplay-radius-16);
  background: var(--onplay-surface);
}
.offcanvas .offcanvas-header{ border-bottom:1px solid var(--onplay-border); }

/* ---------- Forms / Search ---------- */
.form-control::placeholder{ color: var(--onplay-muted); }
.form-control:focus{
  border-color: var(--onplay-primary);
  box-shadow: 0 0 0 .2rem rgba(0,171,228,.15);
}
.input-search{
  min-width: 260px;
}

/* ---------- Footer ---------- */
.div-footerblock{
  border-top:1px solid var(--onplay-border);
  background: var(--onplay-surface);
}
footer{ font-size:.9rem; }

/* ---------- Helpers for images ---------- */
.img-brand { height:40px; }

/* ---------- Small animations ---------- */
.fade-in { animation: fadeIn .18s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive refinements ---------- */
@media (min-width:992px){
  .input-search{ min-width: 360px; }
}

/* === Category tiles (Home) === */
.cat-tile{ aspect-ratio: 2 / 1; background: var(--onplay-surface); }
.cat-img{ width:100%; height:100%; object-fit:cover; display:block; }
.cat-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%);
}
.cat-label{
  position:absolute; left:12px; bottom:10px;
  color:#fff; font-weight:700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cat-fallback{ width:100%; height:100%; min-height:110px; }

/* Quantity input ใน cart */
.input-group .form-control.js-item-qty{ padding-left: .25rem; padding-right: .25rem; }

/* คอนเทนเนอร์: ให้ตัดขึ้นบรรทัดใหม่ */
.onplay-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;     /* row-gap col-gap */
}

/* ปรับการ์ดให้ยืดหยุ่นและตัดบรรทัดได้ */
.cat-card{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  /* background: #fff; */
  border: 1px solid var(--onplay-border);
  border-radius: 12px;
  padding: .5rem .6rem;
  min-width: 110px;           /* ไม่แคบเกินไป */
  max-width: 140px;           /* กันยาวเกิน */
  box-shadow: var(--onplay-shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cat-chip{ /* ปุ่ม All ให้สูงใกล้เคียงการ์ด */
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--onplay-border);
   text-decoration: none; color: inherit;
  height: 56px; min-width: 80px;
}

.cat-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cat-card.active, .cat-chip.active{ border-color: #00abe4; box-shadow: 0 0 0 2px rgba(0,171,228,.15) inset; }

.cat-thumb{ width:90px;  border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cat-thumb img{ width:100%; height:100%; object-fit:cover; }
.cat-name{ font-size:.85rem; text-align:center; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }

/* บนจอแคบ ลด min-width เพื่อให้ wrap ง่ายขึ้น */
@media (max-width: 576px){
  .cat-card{ min-width: 88px; }
}

/* เฉพาะ Section ที่เป็นกริดสินค้า ให้เผื่อเพิ่มอีกนิดเพื่อไม่ให้ปุ่ม/เงาการ์ดชนขอบ */
.section-new-arrivals {
  padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom) + 16px);
}

/* ถ้ากริดมี container ที่เคยตั้ง overflow ไว้ ให้เปิดเป็น visible */
.section-new-arrivals,
.section-new-arrivals .container,
.section-new-arrivals .row {
  overflow: visible !important;
}

.img-payment-logo{ max-width: 150px;height:auto; margin-left:2px; }

.coin{
  max-width: 25px;
  margin-top: -2px;
}

.product-title{
  font-size: 14px;
  font-weight: bold;
}