:root {
  --coin: #f3b400;
}

.pill-coin {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.pill-coin i {
  color: var(--coin);
  margin-right: 0.35rem;
}

.card {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.card-claim .btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.6rem 1rem;
}

.badge-coin {
  background: var(--coin);
  color: #222;
}

.tab-pane {
  padding-top: 1rem;
}

.list-group-item {
  border: 0;
  border-bottom: 1px solid #eee;
}

.locked {
  opacity: 0.6;
  pointer-events: none;
}

.small-muted {
  color: #6c757d;
  font-size: 0.9rem;
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Streak */
.streak-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #dee2e6;
}

/* กรณี check-in แล้ว */
.streak-dot.done {
  /* background-image: url("/assets/img/btn-logo-b-sm.svg"); */
  background-image: url("/images/hammer_red.png");
  border-color: #ce0002;

  background-size: 80% auto;
  background-repeat: no-repeat;
  background-position: 30% 30%;
}

/* กรณียังไม่ check-in */
.streak-dot.pending {
  background-color: #e9ecef;
  /* เทาอ่อน */
}

.streak-line {
  height: 2px;
  background: #eee;
  margin: 0 0.25rem;
}

.modal-header,
.modal-body,
.modal-footer {
  position: relative;
  z-index: 1;
  /* Higher z-index than the ::before element */
  background-color: transparent;
  /* Makes content areas see-through to the background */
}

/* --- Animation Keyframes --- */
/* This animation slowly shifts the background position of the coin pattern */
@keyframes falling-coins {
  0% {
    background-position: center center, 0 0;
  }

  100% {
    /* Moves the coins down and to the right to simulate falling */
    background-position: center center, 180px 360px;
  }
}

/* Custom styles for the celebration modal */
.modal-cele .modal-content {
  position: relative;
  overflow: visible;
  border: 3px solid #ffc700;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
}

/* The ::before pseudo-element creates the animated background layer */
.modal-cele .modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 30px;
  /* Places it behind the modal content */

  /* --- Background layers --- */
  /* 1. A soft radial gradient for a central glow effect */
  /* 2. A repeating SVG coin pattern (encoded to avoid external files) */
  background-image: radial-gradient(
      circle at center,
      rgba(255, 199, 0, 0.3),
      rgba(255, 199, 0, 0) 70%
    ),
    /* Glow updated to IKEA yellow */
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="50" height="50" opacity="0.1"><circle cx="50" cy="50" r="40" fill="%23FFC700" stroke="%23F5B800" stroke-width="5"/><text x="50" y="65" font-size="45" text-anchor="middle" fill="%23F5B800" font-family="Arial, sans-serif">฿</text></svg>');

  background-size: 100% 100%, 90px 90px;
  /* Sizing for the gradient and the coin pattern */
  opacity: 0.7;
  /* Make the background subtle */

  /* --- Animation --- */
  /* Applies the 'falling-coins' animation */
  animation: falling-coins 20s linear infinite;
}

.modal-cele .modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

.modal-cele .coin-big {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ffc700, #f5b800);
  /* Gradient updated to IKEA yellow shades */
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px #ffc700, inset 0 5px 10px rgba(0, 0, 0, 0.2);
  /* Outer shadow updated to IKEA yellow */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 4rem;
  margin-top: -65px;
  /* Pulls the icon up to overlap the modal's top edge */
  position: relative;
  z-index: 2;
  /* Ensures the icon is above the content and background */
}

.modal-cele .modal-body {
  padding-top: 1rem;
}

.modal-cele .modal-footer {
  border-top: none;
  padding-bottom: 1.5rem;
}

.btn-line-checkin {
  background-color: #ffffff;
  /* พื้นขาว */
  border: 1px solid #06c755;
  /* ขอบเขียว LINE */
  color: #06c755;
  /* ตัวอักษรเขียว */
  font-weight: 600;
  border-radius: 999px;
  padding: 0.6rem 1rem;
}

.btn-line-checkin img {
  width: 18px;
  height: 18px;
}

/* ให้ไอคอนกับตัวหนังสือเป็นสีเขียวกลมกลืน */
.btn-line-checkin img {
  filter: none;
}

.btn-line-checkin:hover {
  background-color: #06c755;
  border-color: #06c755;
  color: #ffffff;
}

.btn-line-checkin:focus,
.btn-line-checkin:active,
.btn-line-checkin.focus {
  background-color: #05b349;
  border-color: #05b349;
  color: #ffffff;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(6, 199, 85, 0.35);
}

.btn-line-checkin:disabled,
.btn-line-checkin.disabled {
  background-color: #f4f4f4;
  border-color: #b5e8c9;
  color: #b5e8c9;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 568px) {
  .streak-dot {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 376px) {
  .streak-dot {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 360px) {
  .streak-line {
    display: none;
  }
}