/**
 * QR Studio Pro - Custom Stylesheet
 * Bao gồm các định dạng hiển thị, pattern checkerboard trong suốt, custom scrollbar và in ấn
 */

/* Nền trong suốt dạng lưới ô cờ (Checkerboard) */
.bg-checkerboard {
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
                    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
                    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* Thanh cuộn mảnh thanh lịch (Custom Scrollbar) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Hỗ trợ scrollbar cho Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Tùy chỉnh ô chọn màu (Input color tròn đẹp mắt) */
input[type="color"] {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  padding: 0;
  background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
}

/* Đảm bảo canvas bên trong qrCodeWrapper luôn co giãn responsive tốt */
#qrCodeWrapper canvas,
#qrCodeWrapper svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Hiệu ứng nhún nhẹ khi click nút */
.btn-press:active {
  transform: scale(0.97);
}

/* Animation nhẹ nhàng */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

/* ==================== HIỆU ỨNG HƯỚNG DẪN TRỰC QUAN (VISUAL ONBOARDING) ==================== */

/* Hiệu ứng viền phát sáng chớp nhẹ khi highlight phần tử */
@keyframes pulseHighlight {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    border-color: #f59e0b;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    border-color: #d97706;
  }
}

.highlight-step-target {
  animation: pulseHighlight 1.5s ease-in-out infinite !important;
  border-color: #f59e0b !important;
  transition: all 0.3s ease;
}

/* Tour Spotlight Box (Khoanh vùng sáng bằng box-shadow khổng lồ) */
.tour-spotlight-box {
  position: fixed;
  z-index: 9991;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.78), 0 0 20px rgba(245, 158, 11, 0.6);
  border: 3px solid #f59e0b;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tour Tooltip Card */
#tourTooltipCard {
  position: fixed;
  z-index: 9995;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  filter: drop-shadow(0 20px 25px -5px rgba(0, 0, 0, 0.4));
}

/* Hiệu ứng đập nhẹ thu hút chú ý của nút trợ giúp */
@keyframes softBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.animate-soft-bounce {
  animation: softBounce 2.5s ease-in-out infinite;
}

/* Định dạng khi người dùng in trực tiếp ra giấy */
@media print {
  header,
  footer,
  .no-print,
  #toastContainer,
  #floatingHelpWidget,
  #tourContainer,
  #helpModal,
  #quickGuideBanner {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  #previewCard {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }
}