/*
 * MK STORE - Animated Border Beam #0055ff
 * LAYOUT-SAFE: ใช้ box-shadow + outline เท่านั้น ไม่ยุ่งกับ position/z-index/::before ของ Bootstrap
 * ใช้ ::after z-index:-1 สำหรับ element ที่ปลอดภัยเท่านั้น
 */

/* ── Keyframe: beam angle spin ── */
@property --mk-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes mk-angle-spin {
  to { --mk-angle: 360deg; }
}
@keyframes mk-glow-pulse {
  0%,100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   BEAM ELEMENTS
   ใช้เฉพาะ element ที่ปลอดภัย: modal-content, admin-card,
   swal2-popup — ไม่ใช้กับ .card ของ Bootstrap
   ════════════════════════════════════════════════════════════ */

/* กำหนด stacking context เฉพาะ element ที่เราควบคุมได้ */
.modal-content,
.admin-card,
.admin-inner-card,
.swal2-popup {
  position: relative;  /* จำเป็นสำหรับ ::after */
  overflow: hidden;    /* clip beam ให้อยู่ในกรอบ */
  isolation: isolate;  /* สร้าง stacking context ป้องกัน z-index leak */
}

/* ::after beam — z-index: -1 อยู่หลัง content เสมอ */
.modal-content::after,
.admin-card::after,
.admin-inner-card::after,
.swal2-popup::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--mk-angle, 0deg),
    transparent 0%,
    #0055ff 18%,
    #3385ff 30%,
    #0055ff 42%,
    transparent 60%
  );
  z-index: -1;           /* อยู่ด้านหลัง content ทั้งหมด */
  pointer-events: none;
  animation: mk-angle-spin 3s linear infinite;
  padding: 1.5px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
}

/* ── Glow shadow (ไม่กระทบ layout) ── */
.modal-content {
  box-shadow:
    0 0 0 1px rgba(0,85,255,.15),
    0 0 20px rgba(0,85,255,.1),
    0 8px 40px rgba(0,0,0,.55) !important;
}
.modal-content:hover {
  box-shadow:
    0 0 0 1px rgba(0,85,255,.3),
    0 0 30px rgba(0,85,255,.18),
    0 8px 40px rgba(0,0,0,.55) !important;
}
.admin-inner-card {
  box-shadow:
    0 0 0 1px rgba(0,85,255,.12),
    0 0 14px rgba(0,85,255,.07),
    0 4px 20px rgba(0,0,0,.4) !important;
}
.swal2-popup {
  box-shadow:
    0 0 0 1px rgba(0,85,255,.2),
    0 0 24px rgba(0,85,255,.12),
    0 12px 48px rgba(0,0,0,.6) !important;
}

/* ════════════════════════════════════════════════════════════
   GLOW-ONLY ELEMENTS (box-shadow เท่านั้น ไม่มี ::before/::after)
   ไม่ยุ่งกับ position หรือ z-index ของ Bootstrap
   ════════════════════════════════════════════════════════════ */

/* Modal header/footer border */
.modal-header {
  border-bottom: 1px solid rgba(0,85,255,.2) !important;
}
.modal-footer {
  border-top: 1px solid rgba(0,85,255,.2) !important;
}

/* Dropdown — glow only, ไม่มี beam animation (dropdown เสี่ยง layout) */
.dropdown-menu {
  border: 1px solid rgba(0,85,255,.22) !important;
  box-shadow:
    0 0 12px rgba(0,85,255,.1),
    0 4px 24px rgba(0,0,0,.5) !important;
}

/* Offcanvas */
.offcanvas {
  border-left: 1px solid rgba(0,85,255,.2) !important;
  box-shadow: -4px 0 30px rgba(0,85,255,.12) !important;
}

/* Navbar */
.navbar, nav.navbar {
  border-bottom: 1px solid rgba(0,85,255,.12);
  box-shadow: 0 2px 18px rgba(0,85,255,.06) !important;
}

/* Input focus — ปลอดภัย 100% ไม่กระทบ layout */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(0,85,255,.55) !important;
  box-shadow:
    0 0 0 3px rgba(0,85,255,.12),
    0 0 10px rgba(0,85,255,.15) !important;
  outline: none;
}

/* Table */
table tbody tr:hover {
  background: rgba(0,85,255,.04) !important;
}
table thead tr,
table.admin-table thead tr {
  border-bottom: 2px solid rgba(0,85,255,.18);
}

/* Product card — hover glow only (ไม่แก้ position) */
.product-card {
  transition: box-shadow .25s ease, border-color .25s ease;
  will-change: box-shadow;
}
.product-card:hover {
  border-color: rgba(0,85,255,.38) !important;
  box-shadow: 0 0 18px rgba(0,85,255,.18), 0 4px 20px rgba(0,0,0,.4) !important;
}

/* Buttons */
.btn-primary:hover,
.btn-info:hover {
  box-shadow: 0 0 12px rgba(0,85,255,.38) !important;
}

/* Sidebar */
[class*='sidebar'],
[class*='sidenav'] {
  border-right: 1px solid rgba(0,85,255,.15);
  box-shadow: 2px 0 18px rgba(0,85,255,.06);
}

/* ════════════════════════════════════════════════════════════
   TOAST / NOTIFICATION CORNER
   ใช้ box-shadow + border เท่านั้น
   ════════════════════════════════════════════════════════════ */

/* Bootstrap Toast */
.toast {
  border: 1px solid rgba(0,85,255,.25) !important;
  box-shadow: 0 0 12px rgba(0,85,255,.15), 0 4px 20px rgba(0,0,0,.5) !important;
}

/* Toastr */
#toast-container > div {
  border: 1px solid rgba(0,85,255,.28) !important;
  box-shadow: 0 0 14px rgba(0,85,255,.18), 0 4px 20px rgba(0,0,0,.5) !important;
}

/* ════════════════════════════════════════════════════════════
   ADMIN TABLE CARD WRAPPER (ถ้าใช้ class admin-card)
   ════════════════════════════════════════════════════════════ */
.admin-card {
  border: 1px solid rgba(0,85,255,.15) !important;
  box-shadow: 0 0 12px rgba(0,85,255,.07) !important;
}

/* ════════════════════════════════════════════════════════════
   PREVENT BEAM ON SMALL/INLINE ELEMENTS
   ════════════════════════════════════════════════════════════ */
.badge::after,
.btn::after,
input::after,
textarea::after,
select::after,
label::after,
span::after,
a::after,
td::after,
th::after,
tr::after,
li::after,
p::after,
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Bootstrap .card — glow border เท่านั้น ไม่มี beam animation ไม่ยุ่ง layout */
.card {
  border: 1px solid rgba(0,85,255,.13) !important;
}
.card:hover {
  border-color: rgba(0,85,255,.3) !important;
  box-shadow: 0 0 14px rgba(0,85,255,.1) !important;
}