/* ============================================================
   Foodmapme — Card Border Library (ขอบการ์ด)
   ขอบทุกอันเป็น CSS ล้วน วาดบน ::after (ฉากหลังใช้ ::before) → สวมพร้อมฉากหลังบนการ์ดเดียวกันได้

   ใช้งาน: เติมคลาส .fm-bd .fm-bd--KEY ลงบนการ์ดของเจ้าของเนื้อหา
     (ดู includes/borders.php : bd_class) เช่น
       <div class="cmt fm-bd fm-bd--coral">…</div>

   เพิ่มขอบใหม่ = เพิ่ม 1 แถวใน FM_BORDERS (borders.php) + บล็อก CSS 1 ก้อนที่นี่
   * ::after เป็น "วงแหวน" ที่ขอบการ์ด: inset:0 + border-radius:inherit → โค้งตามการ์ด, pointer-events:none
   * นิ่ง = box-shadow inset (วงใน) หรือ gradient+mask (ขอบไล่สี) → วาดครั้งเดียว ~0
   * ขยับได้ = opacity (กะพริบ) หรือ --bd-angle (หมุน conic) → เบา (พื้นที่วงแหวนบางมาก)
   ============================================================ */

@property --bd-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

.fm-bd{ position:relative; }
.fm-bd::after{
  content:''; position:absolute; inset:0; border-radius:inherit; box-sizing:border-box;
  pointer-events:none; z-index:2;
}

/* ---- LINE (ฟรี) — เส้นบางเรียบ ---- */
.fm-bd.fm-bd--hair_gray::after{  box-shadow:inset 0 0 0 1.5px rgba(140,140,150,.45); }
.fm-bd.fm-bd--hair_peach::after{ box-shadow:inset 0 0 0 1.5px rgba(237,140,90,.55); }
.fm-bd.fm-bd--hair_mint::after{  box-shadow:inset 0 0 0 1.5px rgba(60,190,140,.55); }
.fm-bd.fm-bd--hair_sky::after{   box-shadow:inset 0 0 0 1.5px rgba(80,150,235,.55); }

/* ---- COLOR (สีล้วนหนาขึ้น) ---- */
.fm-bd.fm-bd--coral::after{  box-shadow:inset 0 0 0 2px #FF6B5E; }
.fm-bd.fm-bd--ocean::after{  box-shadow:inset 0 0 0 2px #2E6FB0; }
.fm-bd.fm-bd--grape::after{  box-shadow:inset 0 0 0 2px #8B5CD6; }
.fm-bd.fm-bd--forest::after{ box-shadow:inset 0 0 0 2px #2E8B57; }

/* ---- GRADIENT (ขอบไล่สี — gradient + mask แสดงเฉพาะวงแหวน) ---- */
.fm-bd--sunset::after, .fm-bd--aqua::after, .fm-bd--candy::after,
.fm-bd--rainbow::after, .fm-bd--gold_lux::after{
  padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.fm-bd.fm-bd--sunset::after{ background:linear-gradient(120deg,#FF8A3D,#FF5E8A); }
.fm-bd.fm-bd--aqua::after{   background:linear-gradient(120deg,#3DBEFF,#3DE0B0); }
.fm-bd.fm-bd--candy::after{  background:linear-gradient(120deg,#FF6FB5,#9B6BFF); }

/* ---- GLOW / NEON (วงในเข้ม + เรืองแสงรอบ, กะพริบด้วย opacity = GPU) ---- */
.fm-bd.fm-bd--neon_pink::after{ box-shadow:inset 0 0 0 2px #FF4D9D, 0 0 9px rgba(255,77,157,.7);
  animation:fm-bd-pulse 2.2s ease-in-out infinite; will-change:opacity; }
.fm-bd.fm-bd--neon_cyan::after{ box-shadow:inset 0 0 0 2px #3DE0FF, 0 0 9px rgba(61,224,255,.7);
  animation:fm-bd-pulse 2.2s ease-in-out infinite; will-change:opacity; }
.fm-bd.fm-bd--neon_lime::after{ box-shadow:inset 0 0 0 2px #8BFF3D, 0 0 9px rgba(139,255,61,.7);
  animation:fm-bd-pulse 2.2s ease-in-out infinite; will-change:opacity; }

/* ---- SPECIAL (ขอบ conic หมุน — พื้นที่วงแหวนบางมาก ต้นทุนต่ำ) ---- */
.fm-bd.fm-bd--rainbow::after{
  background:conic-gradient(from var(--bd-angle), #ff4d4d,#ffa500,#ffe24d,#4dff88,#4dd2ff,#a64dff,#ff4d4d);
  padding:2.5px; animation:fm-bd-spin 5s linear infinite;
}
.fm-bd.fm-bd--gold_lux::after{
  background:conic-gradient(from var(--bd-angle), #C8961E,#FFE9A8,#C8961E,#9C6B12,#FFE9A8,#C8961E);
  padding:2.5px; animation:fm-bd-spin 6s linear infinite;
}

@keyframes fm-bd-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes fm-bd-spin{ to{ --bd-angle:360deg; } }

/* เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของผู้ใช้ */
@media (prefers-reduced-motion: reduce){
  .fm-bd::after{ animation:none !important; }
}

/* ============================================================
   พรีวิวในหน้าร้าน (การ์ดตัวอย่างพร้อมแถบ "ข้อความ" จำลอง — ใช้ .bgp-line จาก backgrounds.css)
   ============================================================ */
.bdp-demo{ width:100%; height:108px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; display:flex; flex-direction:column; gap:9px; justify-content:center; }