/* Bible Reader - Modern Beautiful Design */

.verse-line {
  @apply mb-4 py-3 px-2 transition-all duration-200 border-l-2 border-transparent rounded-r-lg cursor-pointer;
  line-height: 2;
  font-size: 1.05rem;
  color: #1f2937;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.verse-line:hover {
  @apply bg-amber-50/50 border-l-amber-400;
}

.verse-line.annotated {
  @apply border-l-amber-500 bg-amber-50/40;
  border-left-width: 3px;
}

.verse-number {
  @apply inline-flex items-center justify-center min-w-[2.5rem] h-7 rounded-lg bg-neutral-100 text-neutral-600 font-bold text-sm flex-shrink-0;
}

.verse-line.annotated .verse-number {
  @apply bg-amber-500 text-white;
}

.verse-text {
  flex: 1;
  padding-top: 0.125rem;
}

.annotation-indicator {
  @apply flex-shrink-0 text-lg ml-2;
  margin-top: 0.125rem;
}

.annotate-btn {
  @apply ml-2 inline-flex h-7 w-7 items-center justify-center rounded-md bg-transparent text-neutral-400 hover:bg-amber-50 hover:text-amber-600 transition-all duration-200 cursor-pointer opacity-0;
}

.verse-line:hover .annotate-btn {
  @apply opacity-100;
}

.annotate-btn:hover {
  transform: scale(1.1);
}

.search-result-item {
  @apply rounded-xl border-2 border-neutral-100 bg-white p-4 mb-3 hover:border-amber-300 hover:shadow-md transition-all duration-200 cursor-pointer;
}

.search-result-item:hover {
  transform: translateY(-2px);
}

.search-result-ref {
  @apply inline-flex items-center gap-2 font-bold text-transparent bg-clip-text bg-gradient-to-r from-amber-600 to-rose-600 text-sm mb-2;
}

.search-result-ref::before {
  content: "📍";
  @apply text-amber-500;
}

#compare-text-1 p,
#compare-text-2 p {
  @apply mb-3 p-3 rounded-lg hover:bg-white transition-colors;
  line-height: 1.7;
}

#compare-text-1 .verse-number,
#compare-text-2 .verse-number {
  @apply inline-flex items-center justify-center w-7 h-7 text-xs;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Loading animation */
@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Print styles */
@media print {
  .sticky,
  button,
  #annotation-section,
  #search-results,
  #compare-panel {
    display: none !important;
  }
  
  .verse-line {
    page-break-inside: avoid;
  }
}