.f-modal-overlay {
  @apply fixed inset-0 z-[9999] flex flex-col;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease-out forwards;
}

.f-modal-close {
  @apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
  @apply text-[--f-text] opacity-70;
}

.f-modal-close:hover {
  @apply opacity-100;
}

.f-modal-panel {
  @apply w-full h-full overflow-y-auto bg-[--f-background] text-[--f-text];
  @apply px-6 py-8 md:px-12 md:py-12;
}


.f-modal-panel.f-modal-panel--compact {
  @apply flex justify-center items-start;
}

.f-modal-inner {
  @apply w-full max-w-4xl mx-auto;
}

.f-modal-title {
  @apply text-3xl md:text-4xl font-bold mb-8 text-center text-[--f-text];
}

.f-modal-content p {
  @apply leading-relaxed text-2xl text-center;
}

.f-modal-content p img {
  @apply mt-2;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

