@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@layer components {
  .auth-shell {
    @apply px-4 py-10 md:py-16;
  }

  .auth-shell-inner {
    @apply mx-auto max-w-6xl;
  }

  .auth-card {
    @apply mx-auto grid max-w-5xl overflow-hidden rounded-[32px] border border-white bg-white/60 shadow-[0_30px_80px_rgba(24,24,24,0.08)] backdrop-blur-xl lg:grid-cols-[1.1fr_0.9fr];
  }

  .auth-panel {
    @apply flex flex-col justify-between gap-6 bg-gradient-to-br from-[#181818] via-[#2b2546] to-[#10b8bd] px-6 py-8 text-white md:px-10 md:py-10;
  }

  .auth-panel-badge {
    @apply inline-flex w-fit items-center rounded-full border border-white/20 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-white/80;
  }

  .auth-panel-title {
    @apply max-w-md text-4xl font-bold leading-tight md:text-5xl;
  }

  .auth-panel-copy {
    @apply max-w-md text-base leading-6 text-white/75 md:text-lg;
  }

  .auth-panel-stat {
    @apply rounded-[24px] border border-white/15 bg-white/10 px-5 py-4 backdrop-blur;
  }

  .auth-panel-stat-label {
    @apply text-xs font-semibold uppercase tracking-[0.2em] text-white/60;
  }

  .auth-panel-stat-value {
    @apply mt-2 text-2xl font-bold text-white;
  }

  .auth-form-wrap {
    @apply px-6 py-8 md:px-10 md:py-10;
  }

  .auth-kicker {
    @apply text-sm font-semibold uppercase tracking-[0.18em] text-[#9a6db1];
  }

  .auth-title {
    @apply mt-3 text-3xl font-bold leading-tight text-neutral-900;
  }

  .auth-subtitle {
    @apply mt-3 max-w-md text-sm leading-6 text-neutral-600;
  }

  .auth-label {
    @apply mb-2 block text-sm font-semibold text-neutral-800;
  }

  .auth-input {
    @apply w-full rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-base text-neutral-900 outline-none transition placeholder:text-neutral-400 focus:border-[#f04fff] focus:ring-4 focus:ring-[#f04fff]/10;
  }

  .auth-checkbox {
    @apply h-4 w-4 rounded border-neutral-300 text-[#f04fff] focus:ring-[#f04fff]/25;
  }

  .auth-submit {
    @apply inline-flex w-full items-center justify-center rounded-2xl bg-[#f04fff] px-5 py-3 text-base font-semibold text-white transition hover:bg-[#de41ea] focus:outline-none focus:ring-4 focus:ring-[#f04fff]/20;
  }

  .auth-secondary-link {
    @apply text-sm font-medium text-neutral-600 transition hover:text-[#f04fff];
  }

  .auth-links {
    @apply flex flex-wrap gap-x-4 gap-y-2 text-sm;
  }

  .auth-divider {
    @apply my-6 h-px w-full bg-neutral-200;
  }

  .auth-alert {
    @apply mb-4 rounded-2xl border px-4 py-3 text-sm font-medium;
  }

  .auth-alert-error {
    @apply border-red-200 bg-red-50 text-red-700;
  }

  .auth-alert-success {
    @apply border-emerald-200 bg-emerald-50 text-emerald-700;
  }
}


@layer utilities {
  .noise-bg {
    @apply relative bg-no-repeat backdrop-blur-3xl;
    background-position: top;
    min-height: 100vh; /* Fallback */
    min-height: calc(100vh - var(--safe-area-inset-bottom, 0px));
  }

  .bg-main {
    @apply noise-bg;
    background-image: url("/assets/bg-655f083a.svg");
  }

  .bg-secondary {
    @apply noise-bg;
    background-image: url("/assets/bg-secondary-ea1a42b4.svg");
    background-position: top center;

  }

  .noise-bg::before {
    content: '';
    position: absolute; 
    inset: 0;
    min-height: 100%; 
    background-image: url("/assets/noise-tile-59d173f4.svg"); 
    background-repeat: repeat; 
    opacity: 0.9;
    pointer-events: none;
    z-index: -10;
  }
}

body {
  @apply text-neutral-900 text-[12px] font-normal leading-[15px] font-sans bg-white/0;
}

* {
  font-family: "DM Sans", serif;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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

/* Kaminari Pagination Styling */
.pagination {
  @apply inline-flex items-center -space-x-px rounded-md shadow-sm mt-10;
}

.pagination .page,
.pagination .prev,
.pagination .next,
.pagination .gap,
.pagination .first,
.pagination .last {
  @apply relative inline-flex items-stretch overflow-hidden border border-gray-300 bg-white text-sm font-medium text-gray-700;
}

.pagination .page a,
.pagination .prev a,
.pagination .next a,
.pagination .first a,
.pagination .last a {
  @apply flex h-full w-full items-center px-4 py-2 hover:bg-gray-50;
}

.pagination .prev,
.pagination .next {
  @apply text-gray-500;
}

.pagination .prev a,
.pagination .next a {
  @apply px-3;
}

.pagination .page.current {
  @apply border-[#F04FFF] bg-[#F04FFF] text-white;
}

.pagination .page.current,
.pagination .gap {
  @apply px-4 py-2;
}

.pagination .prev.disabled,
.pagination .next.disabled,
.pagination .first.disabled,
.pagination .last.disabled {
  @apply bg-gray-100 text-gray-400 cursor-not-allowed;
}

.pagination .first {
  @apply rounded-l-md;
}

.pagination .last {
  @apply rounded-r-md;
}

/* Round left corner of prev when first is not present */
.pagination span:first-child.prev {
  @apply rounded-l-md;
}

/* Round right corner of next when last is not present */
.pagination span:last-child.next {
  @apply rounded-r-md;
}