/* ==========================================================================
   BẢNG HƯỚNG DẪN SỬ DỤNG - RABBITOWO
   Dark Frosted Glass (Khung Đen Mờ Gương Trong Suốt), Floating & Ambient Lights
   ========================================================================== */

.rabbit-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), visibility 380ms ease;
  will-change: opacity, visibility;
}

.rabbit-guide-overlay[hidden] {
  display: none !important;
}

.rabbit-guide-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rabbit-guide-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

/* ==========================================================================
   Backdrop: Hiệu ứng mờ đằng sau khi khung hiện ra
   ========================================================================== */
.rabbit-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 12, 0.48);
  backdrop-filter: blur(32px) saturate(160%) brightness(0.75);
  -webkit-backdrop-filter: blur(32px) saturate(160%) brightness(0.75);
  transition: opacity 600ms ease;
}

/* ==========================================================================
   Card: Khung Back Màu Trong Suốt Giống Menu, Rộng Hơn & Lơ Lửng
   "nền cẩm nang trang web nền cho thành màu trong suốt đi + mờ toàn bộ phía sau khung"
   ========================================================================== */
.rabbit-guide-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 28px));
  max-height: min(85vh, 820px);
  max-height: min(85dvh, 820px);
  box-sizing: border-box;
  /* Kính mờ trong suốt (Transparent Glass) */
  background: rgba(14, 18, 36, 0.28);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow:
    0 28px 70px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.30);
  overflow: hidden;
  color: #f1f5f9;
  animation: rabbitGuideFloat 5.4s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

/* Lắc nhẹ khi đang khóa 5s mà cố tình bấm ra ngoài */
.rabbit-guide-card.is-shake {
  animation: rabbitGuideShake 400ms ease-in-out;
}

@keyframes rabbitGuideShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.rabbit-guide-overlay.is-visible .rabbit-guide-card {
  animation: rabbitGuidePopIn 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards, rabbitGuideFloat 5.4s ease-in-out 680ms infinite;
}

.rabbit-guide-overlay.is-closing .rabbit-guide-card {
  animation: rabbitGuidePopOut 450ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes rabbitGuidePopIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rabbitGuidePopOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
  }
}

/* Floating animation cho khung ("khung bạn cho lơ lửng nhes") */
@keyframes rabbitGuideFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(0.15deg);
  }
}

/* Shimmer light sweep viền trên */
.rabbit-guide-card__shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: rabbitGuideShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes rabbitGuideShimmer {
  0% { left: -60%; opacity: 0; }
  15% { opacity: 1; }
  60% { left: 140%; opacity: 1; }
  100% { left: 140%; opacity: 0; }
}

/* Close Button (X) */
.rabbit-guide-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rabbit-guide-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  transform: rotate(90deg) scale(1.06);
}

.rabbit-guide-close:active {
  transform: rotate(90deg) scale(0.92);
}

/* ==========================================================================
   Header & Tiêu Đề Nhấn Mạnh Viết To
   "Tiêu Đề Bảng Hướng Dẫn Sử Dụng Khi Vào Web Của Mình viết to ra nhấn mạnh để mn có thể đọc nhấn mạnh hơn đoạn văn phía dưới"
   ========================================================================== */
.rabbit-guide-header {
  position: relative;
  z-index: 2;
  padding: 24px 28px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.rabbit-guide-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rabbit-guide-tag__icon {
  color: #38bdf8;
  animation: rabbitPulse 1.8s ease-in-out infinite alternate;
}

@keyframes rabbitPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* Tiêu đề to rõ nhấn mạnh - CHỈ DÙNG CHỮ 1 MÀU TRẮNG TINH KHIẾT, KHÔNG PHA 2 MÀU */
.rabbit-guide-title {
  margin: 0 0 10px;
  font-family: 'Plus Jakarta Sans', 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.35);
}

/* Khối Chào Mừng Đầu Tiên */
.rabbit-guide-welcome {
  margin: 4px auto 0;
  max-width: 680px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-align: left;
}

.rabbit-guide-welcome__heading {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rabbit-guide-welcome__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.88);
}

.rabbit-guide-welcome__desc strong {
  color: #ffffff;
  font-weight: 700;
}

/* ==========================================================================
   Body: Cuộn Mượt Mà & Danh Sách Các Mục
   ========================================================================== */
.rabbit-guide-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  padding: 16px 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.rabbit-guide-body::-webkit-scrollbar {
  width: 6px;
}

.rabbit-guide-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.rabbit-guide-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.rabbit-guide-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.rabbit-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   Khung Màu Nhưng Màu Trong Suốt
   "khung màu nhưng màu trong suốt nhé"
   ========================================================================== */
.rabbit-guide-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Mục 1: Desktop mode - Khung Xanh Biển Trong Suốt */
.rabbit-guide-item:nth-child(1) {
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.20);
}
.rabbit-guide-item:nth-child(1):hover {
  background: rgba(56, 189, 248, 0.09);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(3px);
}

/* Mục 2: Nhạc Hoài Niệm - Khung Tím Trong Suốt */
.rabbit-guide-item:nth-child(2) {
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.20);
}
.rabbit-guide-item:nth-child(2):hover {
  background: rgba(168, 85, 247, 0.09);
  border-color: rgba(168, 85, 247, 0.35);
  transform: translateX(3px);
}

/* Mục 3: Chibi - Khung Trong Suốt */
.rabbit-guide-item:nth-child(3) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.rabbit-guide-item:nth-child(3):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateX(3px);
}

/* Mục 4: Community - Khung Hổ Phách Trong Suốt */
.rabbit-guide-item:nth-child(4) {
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.20);
}
.rabbit-guide-item:nth-child(4):hover {
  background: rgba(251, 191, 36, 0.09);
  border-color: rgba(251, 191, 36, 0.35);
  transform: translateX(3px);
}

/* Mục 5: Kết Nối Fb - Khung Cyan Trong Suốt */
.rabbit-guide-item:nth-child(5) {
  background: rgba(45, 212, 191, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.20);
}
.rabbit-guide-item:nth-child(5):hover {
  background: rgba(45, 212, 191, 0.09);
  border-color: rgba(45, 212, 191, 0.35);
  transform: translateX(3px);
}

/* Number Badges */
.rabbit-guide-item__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rabbit-guide-item__num {
  font-weight: 850;
  font-size: 13.5px;
  line-height: 1;
}

.rabbit-guide-item__badge i {
  font-size: 11px;
  opacity: 0.9;
}

.rabbit-guide-item__badge--blue {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.rabbit-guide-item__badge--purple {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.rabbit-guide-item__badge--pink {
  background: rgba(129, 140, 248, 0.16);
  color: #818cf8;
  border: 1px solid rgba(129, 140, 248, 0.35);
}

.rabbit-guide-item__badge--amber {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.rabbit-guide-item__badge--cyan {
  background: rgba(45, 212, 191, 0.16);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.35);
}

.rabbit-guide-item__content {
  flex: 1;
  min-width: 0;
}

/* Tiêu đề từng mục */
.rabbit-guide-item__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rabbit-guide-item__lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #e2e8f0;
}

/* Danh sách gạch đầu dòng chi tiết */
.rabbit-guide-bullets {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rabbit-guide-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.88);
}

.rabbit-guide-bullets li::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: -1px;
  color: #38bdf8;
  font-size: 16px;
}

.rabbit-guide-item:nth-child(2) .rabbit-guide-bullets li::before { color: #c084fc; }
.rabbit-guide-item:nth-child(3) .rabbit-guide-bullets li::before { color: #818cf8; }
.rabbit-guide-item:nth-child(4) .rabbit-guide-bullets li::before { color: #fbbf24; }
.rabbit-guide-item:nth-child(5) .rabbit-guide-bullets li::before { color: #2dd4bf; }

/* Khối Hướng Dẫn Từng Bước / Cách Làm */
.rabbit-guide-steps {
  margin: 10px 0 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

.rabbit-guide-steps ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rabbit-guide-steps li {
  font-size: 13px;
  line-height: 1.55;
  color: #e2e8f0;
}

.rabbit-guide-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #38bdf8;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(241, 245, 249, 0.88);
}

.rabbit-guide-note--cyan { border-left-color: #38bdf8; }
.rabbit-guide-note--amber { border-left-color: #fbbf24; }
.rabbit-guide-note--purple { border-left-color: #c084fc; }

/* Phân mục Community (Bài viết & Hình ảnh) */
.rabbit-guide-subcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 10px;
}

.rabbit-guide-subcard {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.rabbit-guide-subcard strong {
  display: block;
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 4px;
}

.rabbit-guide-subcard p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.82);
}

.rabbit-guide-item__content strong {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.rabbit-guide-item__content code {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
}

/* ==========================================================================
   Khung Xanh Cho [ Link Fb ]
   "Đoạn Nào có [ Link Fb ] bạn thêm khung xanh chỗ đó để mn click vô có thể ra fb của tôi"
   ========================================================================== */
.rabbit-guide-fb-row {
  margin: 10px 0 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.rabbit-guide-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #1877f2 0%, #0d62cc 100%);
  color: #ffffff !important;
  font-weight: 750;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(191, 219, 254, 0.5);
  box-shadow:
    0 4px 16px rgba(24, 119, 242, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  user-select: none;
}

.rabbit-guide-fb-btn i.fa-facebook {
  font-size: 14px;
}

.rabbit-guide-fb-btn i.fa-arrow-up-right-from-square {
  font-size: 11px;
  opacity: 0.85;
}

.rabbit-guide-fb-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 6px 22px rgba(24, 119, 242, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.12);
  color: #ffffff !important;
}

.rabbit-guide-fb-btn:active {
  transform: scale(0.97);
}

/* ==========================================================================
   Lời Cảm Ơn Chân Thành Cuối Trang
   ========================================================================== */
.rabbit-guide-closing-box {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  text-align: center;
}

.rabbit-guide-closing-box h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.rabbit-guide-closing-box p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226, 232, 240, 0.9);
}

.rabbit-guide-closing-box p.rabbit-guide-closing-farewell {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   5-Second Reading Lock (Lock Close & Action Buttons)
   ========================================================================== */

/* Khi đang khóa 5s */
.rabbit-guide-overlay.is-locked .rabbit-guide-close {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.rabbit-guide-overlay.is-locked .rabbit-guide-btn,
.rabbit-guide-btn:disabled {
  opacity: 0.50 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(35%) !important;
}

/* ==========================================================================
   Footer: 2 Khung Nhỏ (1. Oki Nà , 2. Tắt trong 3h)
   ========================================================================== */
.rabbit-guide-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rabbit-guide-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  user-select: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* Nút 1: Oki Nà */
.rabbit-guide-btn--ok {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.32), rgba(99, 102, 241, 0.45));
  border: 1px solid rgba(147, 197, 253, 0.42);
  color: #ffffff;
  box-shadow:
    0 6px 20px rgba(56, 189, 248, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.rabbit-guide-btn--ok:hover:not(:disabled) {
  transform: translateY(-1.5px);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.42), rgba(99, 102, 241, 0.58));
  border-color: rgba(147, 197, 253, 0.6);
  box-shadow:
    0 8px 26px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.rabbit-guide-btn--ok:active:not(:disabled) {
  transform: scale(0.97);
}

/* Nút 2: Tắt trong 3h (Tắt trong 3h thật nha má) */
.rabbit-guide-btn--snooze {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(226, 232, 240, 0.9);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rabbit-guide-btn--snooze:hover:not(:disabled) {
  transform: translateY(-1.5px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rabbit-guide-btn--snooze:active:not(:disabled) {
  transform: scale(0.97);
}

/* Khóa nút trong 5 giây đầu */
.rabbit-guide-overlay.is-locked .rabbit-guide-btn,
.rabbit-guide-btn.is-locked,
.rabbit-guide-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(20%);
  transform: none !important;
  box-shadow: none !important;
}

.rabbit-guide-overlay.is-locked .rabbit-guide-close {
  opacity: 0.35;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.rabbit-guide-btn__label {
  display: inline-block;
}

.rabbit-guide-btn__count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.88);
}

/* Footer Trigger */
.footer-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 160ms ease, color 160ms ease;
}

.footer-guide-link:hover {
  opacity: 1;
  color: #38bdf8;
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 640px) {
  .rabbit-guide-overlay {
    padding: 10px;
  }

  .rabbit-guide-card {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 20px;
  }

  .rabbit-guide-header {
    padding: 20px 16px 12px;
  }

  .rabbit-guide-title {
    font-size: 1.28rem;
  }

  .rabbit-guide-welcome {
    padding: 10px 12px;
  }

  .rabbit-guide-body {
    padding: 12px 14px 16px;
  }

  .rabbit-guide-item {
    gap: 12px;
    padding: 12px 12px;
  }

  .rabbit-guide-item__badge {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .rabbit-guide-subcards {
    grid-template-columns: 1fr;
  }

  .rabbit-guide-footer {
    padding: 12px 14px 16px;
    gap: 10px;
  }

  .rabbit-guide-btn {
    height: 42px;
    font-size: 13.5px;
    padding: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rabbit-guide-card,
  .rabbit-guide-orb,
  .rabbit-guide-particle,
  .rabbit-guide-card__shimmer {
    animation: none !important;
  }

  .rabbit-guide-overlay {
    transition-duration: 0.01ms !important;
  }
}