/*
 * MK STORE - Icon Fix CSS
 * LAYOUT-SAFE: ตั้งเฉพาะ vertical-align และไม่เปลี่ยน display ของ Bootstrap elements
 */

/* ── ICON VERTICAL ALIGN (safe: ใช้แค่ vertical-align ไม่เปลี่ยน display) ── */
i.fa, i.fas, i.far, i.fab, i.fal, i.fat,
i[class^='fa-'], i[class*=' fa-'] {
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: -1px;   /* offset เล็กน้อยเพื่อให้ตรงกว่าตัวอักษร */
}

/* ── IN BUTTONS: icon ตรงกับตัวอักษร ── */
.btn i,
button i,
a.btn i {
  vertical-align: middle;
  position: relative;
  top: -1px;
  line-height: 1;
}

/* ── IN TABLES: ✓ สีเขียว / ✗ สีแดง ── */
td .fa-check,
td [class*='fa-check'],
td .fa-circle-check {
  color: #4ade80;
  font-size: .9rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
td .fa-xmark,
td .fa-times,
td [class*='fa-xmark'],
td [class*='fa-times'],
td .fa-circle-xmark {
  color: #f87171;
  font-size: .9rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── STATUS BADGE ── */
.icon-badge-success,
.icon-badge-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
}
.icon-badge-success {
  background: linear-gradient(135deg,#22c55e,#16a34a);
  color: #fff;
  box-shadow: 0 0 7px rgba(34,197,94,.4);
}
.icon-badge-danger {
  background: linear-gradient(135deg,#ef4444,#dc2626);
  color: #fff;
  box-shadow: 0 0 7px rgba(239,68,68,.4);
}

/* ── STATUS PILL ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .77rem;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}
.status-pill.success { background:rgba(34,197,94,.13); color:#4ade80; border:1px solid rgba(34,197,94,.28); }
.status-pill.danger  { background:rgba(239,68,68,.13); color:#f87171; border:1px solid rgba(239,68,68,.28); }
.status-pill.warning { background:rgba(234,179,8,.13); color:#facc15; border:1px solid rgba(234,179,8,.28); }
.status-pill.info    { background:rgba(0,85,255,.10);  color:#60a5fa; border:1px solid rgba(0,85,255,.22);  }

/* ── SWEETALERT2: tick ✓ และ X ตรงกลาง ── */
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: #22c55e !important;
}
.swal2-icon.swal2-success {
  border-color: #22c55e !important;
  color: #22c55e !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(34,197,94,.25) !important;
}
.swal2-icon.swal2-error {
  border-color: #ef4444 !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #ef4444 !important;
}

/* ── TOASTR ICON ALIGNMENT ── */
#toast-container > div::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  margin-right: 2px;
  vertical-align: middle;
}

/* ── TOAST CORNER POSITION ── */
.toast-container {
  z-index: 9999 !important;
}
#toast-container {
  top: 20px !important;
  right: 20px !important;
}
#toast-container > div {
  border-radius: 10px !important;
  padding: 12px 16px !important;
  min-height: 48px;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

/* ── BOOTSTRAP TOAST CORNER ── */
.toast .toast-header i,
.toast .toast-body i {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── CHECKBOX / RADIO ALIGN ── */
input[type='checkbox'],
input[type='radio'] {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── PREVENT ICON FIX FROM LEAKING INTO NAV/TABS ── */
.nav-link i,
.navbar-nav i,
.breadcrumb-item i {
  vertical-align: middle;
  position: relative;
  top: -1px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   MK STORE — SweetAlert2 success icon geometry fix
   ใช้ติ๊กเดียววาดด้วย CSS เพื่อไม่ให้เส้น tip/long ของ SweetAlert เบี้ยวบน iOS Safari
   ═══════════════════════════════════════════════════════════════ */
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success {
  position: relative !important;
  width: 5em !important;
  height: 5em !important;
  border-radius: 50% !important;
  transform: none !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-line-long,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success .swal2-success-circular-line-right {
  display: none !important;
  animation: none !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success::before {
  content: none !important;
  display: none !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-success::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: 22px !important;
  height: 39px !important;
  border: 0 !important;
  border-right: 7px solid #22c55e !important;
  border-bottom: 7px solid #22c55e !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  transform-origin: 50% 50% !important;
  animation: none !important;
  z-index: 2 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MK STORE — SweetAlert2 error X geometry fix
   Draw the X ourselves so Safari/iOS/Android/desktop render the
   exact same centered shape. Keeps the existing red theme.
   ═══════════════════════════════════════════════════════════════ */
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
  position: relative !important;
  width: 5em !important;
  height: 5em !important;
  border-radius: 50% !important;
  transform: none !important;
  overflow: visible !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error .swal2-x-mark,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  display: none !important;
  animation: none !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error::before,
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 43px !important;
  height: 7px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  transform-origin: 50% 50% !important;
  animation: none !important;
  z-index: 2 !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH + SWEETALERT ICONS — cross-browser geometry (iOS safe)
   Keep every check/X centered and independent from font glyphs.
   ═══════════════════════════════════════════════════════════════ */

/* Login / Register close button: draw X with CSS, not a text glyph. */
.auth-modal-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
.auth-modal-close-btn::before,
.auth-modal-close-btn::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 15px !important;
  height: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: 50% 50% !important;
  pointer-events: none !important;
}
.auth-modal-close-btn::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.auth-modal-close-btn::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }

/* Cloudflare Human Verified checkmark — CSS geometry, iOS/Safari safe. */
#g_cf_box {
  position: relative !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  box-sizing: border-box !important;
}
#g_cf_check_icon { display: none !important; }
#g_cf_box.cf-verified::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 7px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 3px solid #22c55e !important;
  border-bottom: 3px solid #22c55e !important;
  border-radius: 1px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -62%) rotate(45deg) !important;
  transform-origin: 50% 50% !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* SweetAlert toast icons: SweetAlert's animated line geometry can skew on
   iOS Safari. Hide it and draw fixed, pixel-stable shapes ourselves. */
.swal2-popup.swal2-toast .swal2-icon {
  position: relative !important;
  flex: 0 0 26px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  animation: none !important;
  overflow: visible !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-line-long,
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring,
.swal2-popup.swal2-toast .swal2-icon.swal2-error .swal2-x-mark,
.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  display: none !important;
  animation: none !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success::before {
  content: none !important;
  display: none !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: 7px !important;
  height: 13px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 3px solid #22c55e !important;
  border-bottom: 3px solid #22c55e !important;
  border-radius: 1px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -58%) rotate(45deg) !important;
  transform-origin: 50% 50% !important;
  animation: none !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error::before,
.swal2-popup.swal2-toast .swal2-icon.swal2-error::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 14px !important;
  height: 3px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  transform-origin: 50% 50% !important;
  animation: none !important;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-error::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
.swal2-popup.swal2-toast .swal2-icon.swal2-error::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }

/* Keep toast text in its own flexible column; prevents the icon from
   overlapping long Thai titles on narrow phones. */
.swal2-popup.swal2-toast .swal2-title,
.swal2-popup.swal2-toast .swal2-html-container {
  min-width: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   MK STORE v27 — GLOBAL ICON ↔ TEXT SPACING / ALIGNMENT
   ----------------------------------------------------------------
   The application uses Bootstrap 5 plus custom frontend/backend
   components. Some templates also use half-step gap utilities such as
   gap-1.5 / gap-2.5 / gap-3.5, which Bootstrap does not provide.
   These compatibility utilities restore the intended spacing without
   changing component colors, typography, dimensions, or database logic.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --mk-icon-text-gap: .5rem;
}

/* Bootstrap-compatible half-step gaps used by existing templates. */
.gap-1\.5 { gap: .375rem !important; }
.gap-2\.5 { gap: .625rem !important; }
.gap-3\.5 { gap: .875rem !important; }

/* Runtime-applied classes. They are intentionally layout-safe:
   - no global display override
   - logical margins work in LTR/RTL
   - flex/grid groups receive only column-gap; their intentional vertical alignment is preserved
   - icon-only buttons are untouched because the JS adds these classes
     only when visible adjacent text/content actually exists. */
.mk-icon-text-leading {
  margin-inline-end: var(--mk-icon-text-gap) !important;
  top: 0 !important;
  vertical-align: middle !important;
}
.mk-icon-text-trailing {
  margin-inline-start: var(--mk-icon-text-gap) !important;
  top: 0 !important;
  vertical-align: middle !important;
}
.mk-icon-text-group {
  column-gap: var(--mk-icon-text-gap) !important;
}

/* Prevent spacing helpers from changing dedicated icon geometry. */
:is(.swal2-icon, .icon-badge-success, .icon-badge-danger, .auth-modal-close-btn, #g_cf_box, .fa-stack)
  :is(.mk-icon-text-leading, .mk-icon-text-trailing) {
  margin-inline: 0 !important;
}