/*
 * Allium.nl - Modern Nature Design
 * Clean, professional design inspired by voedseluithetbos.nl
 * Forest greens, generous whitespace, card-based layouts
 */

@import "tailwindcss";

/* ========================================
   CUSTOM THEME - Tailwind v4
   ======================================== */

@theme {
  /* Font families */
  --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Forest Green - Primary */
  --color-forest-50: #EFFAF6;
  --color-forest-100: #D8F3E9;
  --color-forest-200: #B4E8D5;
  --color-forest-300: #82D7BB;
  --color-forest-400: #4EBF9C;
  --color-forest-500: #2BA37E;
  --color-forest-600: #1E8466;
  --color-forest-700: #186B53;
  --color-forest-800: #125744;
  --color-forest-900: #0F4839;
  --color-forest-950: #062A21;

  /* Mint - Accent */
  --color-mint-50: #ECFDF7;
  --color-mint-100: #D1FAEC;
  --color-mint-200: #A7F3DB;
  --color-mint-300: #6EE7C4;
  --color-mint-400: #34D3A6;
  --color-mint-500: #00C087;
  --color-mint-600: #00A070;
  --color-mint-700: #00805A;
  --color-mint-800: #006548;
  --color-mint-900: #00533C;
  --color-mint-950: #002F22;

  /* Allium Purple */
  --color-allium-50: #FAF5FF;
  --color-allium-100: #F3E8FF;
  --color-allium-200: #E9D5FF;
  --color-allium-300: #D8B4FE;
  --color-allium-400: #C084FC;
  --color-allium-500: #A855F7;
  --color-allium-600: #9333EA;
  --color-allium-700: #7E22CE;
  --color-allium-800: #6B21A8;
  --color-allium-900: #581C87;
  --color-allium-950: #3B0764;

  /* Custom font sizes */
  --text-display-2xl: 4rem;
  --text-display-2xl--line-height: 1.1;
  --text-display-xl: 3rem;
  --text-display-xl--line-height: 1.15;
  --text-display-lg: 2.25rem;
  --text-display-lg--line-height: 1.2;
  --text-display-md: 1.875rem;
  --text-display-md--line-height: 1.25;
  --text-display-sm: 1.5rem;
  --text-display-sm--line-height: 1.3;
  --text-body-lg: 1.125rem;
  --text-body-lg--line-height: 1.75;
  --text-body: 1rem;
  --text-body--line-height: 1.75;
  --text-body-sm: 0.875rem;
  --text-body-sm--line-height: 1.5;

  /* Custom shadows */
  --shadow-card: 0 2px 8px -2px rgb(0 0 0 / 0.08), 0 4px 16px -4px rgb(0 0 0 / 0.08);
  --shadow-card-hover: 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 12px 32px -8px rgb(0 0 0 / 0.1);

  /* Animations */
  --animate-fade-in: fade-in 0.5s ease-out forwards;
  --animate-fade-up: fade-up 0.6s ease-out forwards;
  --animate-slide-up: slide-up 0.5s ease-out forwards;
  --animate-scale-in: scale-in 0.4s ease-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ========================================
   GOOGLE FONTS IMPORT
   ======================================== */

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

/* ========================================
   BASE STYLES
   ======================================== */

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-gray-50 text-gray-800 font-sans;
  }

  ::selection {
    background-color: var(--color-mint-200);
    color: var(--color-forest-900);
  }

  :focus-visible {
    outline: 2px solid var(--color-mint-500);
    outline-offset: 2px;
  }

  /* Typography defaults */
  h1, h2, h3, h4, h5, h6 {
    @apply font-display text-gray-900;
  }

  p {
    @apply leading-relaxed;
  }

  a {
    @apply transition-colors duration-200;
  }
}

/* ========================================
   COMPONENTS
   ======================================== */

@layer components {
  /* Container */
  .container {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .container-narrow {
    @apply w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .container-wide {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  @media (min-width: 640px) {
    .container-wide { padding-left: 1.5rem; padding-right: 1.5rem; }
  }
  @media (min-width: 1024px) {
    .container-wide { padding-left: 2rem; padding-right: 2rem; }
  }

  /* ---- BUTTONS ---- */
  .btn {
    @apply inline-flex items-center justify-center gap-2
           px-6 py-3 font-medium text-sm
           rounded-full border-2 transition-all duration-200;
  }

  .btn:focus {
    outline: none;
  }

  .btn:focus-visible {
    @apply ring-2 ring-offset-2;
  }

  .btn-primary {
    background-color: var(--color-forest-800);
    color: white;
    border-color: var(--color-forest-800);
  }

  .btn-primary:hover {
    background-color: var(--color-forest-700);
    border-color: var(--color-forest-700);
  }

  .btn-primary:focus-visible {
    --tw-ring-color: var(--color-forest-500);
  }

  .btn-secondary {
    background-color: white;
    color: var(--color-forest-800);
    border-color: var(--color-forest-800);
  }

  .btn-secondary:hover {
    background-color: var(--color-forest-50);
  }

  .btn-secondary:focus-visible {
    --tw-ring-color: var(--color-forest-500);
  }

  .btn-mint {
    background-color: var(--color-mint-500);
    color: white;
    border-color: var(--color-mint-500);
  }

  .btn-mint:hover {
    background-color: var(--color-mint-600);
    border-color: var(--color-mint-600);
  }

  .btn-mint:focus-visible {
    --tw-ring-color: var(--color-mint-400);
  }

  .btn-ghost {
    @apply bg-transparent border-transparent;
    color: var(--color-gray-700);
  }

  .btn-ghost:hover {
    @apply bg-gray-100;
  }

  .btn-ghost:focus-visible {
    --tw-ring-color: var(--color-gray-400);
  }

  .btn-sm {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-8 py-4 text-base;
  }

  /* ---- CARDS ---- */
  .card {
    @apply bg-white rounded-2xl overflow-hidden transition-all duration-300;
    box-shadow: var(--shadow-card);
  }

  .card-hover {
    @apply bg-white rounded-2xl overflow-hidden transition-all duration-300;
    box-shadow: var(--shadow-card);
  }

  .card-hover:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  .card-bordered {
    @apply bg-white rounded-2xl overflow-hidden border border-gray-200;
    box-shadow: none;
  }

  /* ---- BADGES ---- */
  .badge {
    @apply inline-flex items-center gap-1 px-3 py-1 text-xs font-medium rounded-full;
  }

  .badge-forest {
    background-color: var(--color-forest-100);
    color: var(--color-forest-800);
  }

  .badge-mint {
    background-color: var(--color-mint-100);
    color: var(--color-mint-800);
  }

  .badge-allium {
    background-color: var(--color-allium-100);
    color: var(--color-allium-800);
  }

  .badge-gray {
    @apply bg-gray-100 text-gray-700;
  }

  /* ---- INPUTS ---- */
  .input {
    @apply w-full px-4 py-3 text-sm text-gray-900
           bg-white border border-gray-300 rounded-xl
           transition-all duration-200;
  }

  .input::placeholder {
    @apply text-gray-400;
  }

  .input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-forest-500);
  }

  .input-lg {
    @apply py-4 text-base;
  }

  .input-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  .input-hint {
    @apply mt-1.5 text-sm text-gray-500;
  }

  .input-error {
    @apply border-red-500;
  }

  .input-error:focus {
    box-shadow: 0 0 0 2px var(--color-red-500);
  }

  /* ---- SELECT ---- */
  select.input {
    @apply pr-10 bg-no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23737373'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-size: 1.25rem;
  }

  /* ---- NAVIGATION ---- */
  .nav-link {
    @apply font-medium transition-colors duration-200 relative;
    color: var(--color-gray-600);
  }

  .nav-link:hover {
    color: var(--color-forest-800);
  }

  .nav-link.active {
    color: var(--color-forest-800);
  }

  .nav-link.active::after {
    content: '';
    @apply absolute -bottom-1 left-0 right-0 h-0.5 rounded-full;
    background-color: var(--color-mint-500);
  }

  /* ---- SECTION ---- */
  .section {
    @apply py-16 md:py-24;
  }

  .section-header {
    @apply mb-12;
  }

  .section-title {
    @apply text-gray-900 mb-4;
    font-size: var(--text-display-lg);
    line-height: var(--text-display-lg--line-height);
  }
  @media (min-width: 768px) {
    .section-title {
      font-size: var(--text-display-xl);
      line-height: var(--text-display-xl--line-height);
    }
  }

  .section-subtitle {
    @apply text-gray-600 max-w-2xl;
    font-size: var(--text-body-lg);
    line-height: var(--text-body-lg--line-height);
  }

  /* ---- SPECIES CARD ---- */
  .species-card {
    @apply bg-white rounded-2xl overflow-hidden transition-all duration-300 cursor-pointer;
    box-shadow: var(--shadow-card);
  }

  .species-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  .species-card-image {
    @apply overflow-hidden bg-gray-100;
    aspect-ratio: 4/5;
  }

  .species-card-image img {
    @apply w-full h-full object-cover transition-transform duration-500;
  }

  .species-card:hover .species-card-image img {
    transform: scale(1.05);
  }

  .species-card-content {
    @apply p-5;
  }

  /* ---- SHOP CARD ---- */
  .shop-card {
    @apply bg-white rounded-2xl overflow-hidden transition-all duration-300 p-6;
    box-shadow: var(--shadow-card);
  }

  .shop-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
  }

  /* ---- HERO ---- */
  .hero {
    @apply relative text-white overflow-hidden;
    background-color: var(--color-forest-800);
  }

  .hero-gradient {
    @apply absolute inset-0;
    background: linear-gradient(135deg, #125744 0%, #0F4839 50%, #062A21 100%);
  }

  .hero-pattern {
    @apply absolute inset-0 opacity-10;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  /* ---- ALERT ---- */
  .alert {
    @apply flex items-start gap-3 p-4 rounded-xl text-sm;
  }

  .alert-success {
    background-color: var(--color-mint-50);
    color: var(--color-mint-800);
    border: 1px solid var(--color-mint-200);
  }

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

  .alert-warning {
    @apply bg-amber-50 text-amber-800 border border-amber-200;
  }

  .alert-info {
    @apply bg-blue-100 text-blue-700 border border-blue-200;
  }

  /* ---- AVATAR ---- */
  .avatar {
    @apply w-10 h-10 rounded-full flex items-center justify-center font-medium overflow-hidden;
    background-color: var(--color-forest-100);
    color: var(--color-forest-800);
  }

  .avatar-sm {
    @apply w-8 h-8 text-sm;
  }

  .avatar-lg {
    @apply w-14 h-14 text-lg;
  }

  /* ---- DROPDOWN ---- */
  .dropdown {
    @apply absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-lg
           border border-gray-100 py-2 z-50
           opacity-0 invisible translate-y-2
           transition-all duration-200;
  }

  .dropdown.open,
  .group:hover .dropdown {
    @apply opacity-100 visible translate-y-0;
  }

  .dropdown-item {
    @apply block px-4 py-2.5 text-sm text-gray-700
           hover:bg-gray-50 transition-colors;
  }

  .dropdown-item.active {
    background-color: var(--color-forest-50);
    color: var(--color-forest-800);
  }

  /* ---- TABS ---- */
  .tabs {
    @apply flex gap-1 p-1 bg-gray-100 rounded-xl;
  }

  .tab {
    @apply flex-1 px-4 py-2.5 text-sm font-medium text-gray-600
           rounded-lg transition-all duration-200
           hover:text-gray-900;
  }

  .tab.active {
    @apply bg-white text-gray-900 shadow-sm;
  }

  /* ---- STATS ---- */
  .stat {
    @apply text-center;
  }

  .stat-value {
    @apply font-bold;
    font-size: var(--text-display-md);
    line-height: var(--text-display-md--line-height);
    color: var(--color-forest-800);
  }

  .stat-label {
    @apply text-sm text-gray-500 mt-1;
  }

  /* ---- EMPTY STATE ---- */
  .empty-state {
    @apply text-center py-16;
  }

  .empty-state-icon {
    @apply w-16 h-16 mx-auto mb-4 text-gray-300;
  }

  .empty-state-title {
    @apply text-lg font-medium text-gray-900 mb-2;
  }

  .empty-state-text {
    @apply text-gray-500 mb-6;
  }

  /* ---- DIVIDER ---- */
  .divider {
    @apply border-t border-gray-200;
  }

  /* ---- FEATURE CARD ---- */
  .feature-card {
    @apply p-6 rounded-2xl bg-white border border-gray-100;
  }

  .feature-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center mb-4;
    background-color: var(--color-forest-100);
    color: var(--color-forest-700);
  }

  /* ---- PRICE TAG ---- */
  .price {
    @apply text-xl font-bold;
    color: var(--color-forest-800);
  }

  .price-unit {
    @apply text-sm font-normal text-gray-500;
  }

  /* ---- AVAILABILITY ---- */
  .availability {
    @apply inline-flex items-center gap-1.5 text-sm font-medium;
  }

  .availability-dot {
    @apply w-2 h-2 rounded-full;
  }

  .availability-in-stock .availability-dot {
    background-color: var(--color-mint-500);
  }

  .availability-in-stock {
    color: var(--color-mint-700);
  }

  .availability-limited .availability-dot {
    @apply bg-amber-500;
  }

  .availability-limited {
    @apply text-amber-700;
  }

  .availability-out-of-stock .availability-dot {
    @apply bg-gray-400;
  }

  .availability-out-of-stock {
    @apply text-gray-500;
  }

  /* ---- TEXT COLORS ---- */
  .text-forest-50 { color: var(--color-forest-50); }
  .text-forest-100 { color: var(--color-forest-100); }
  .text-forest-200 { color: var(--color-forest-200); }
  .text-forest-300 { color: var(--color-forest-300); }
  .text-forest-400 { color: var(--color-forest-400); }
  .text-forest-500 { color: var(--color-forest-500); }
  .text-forest-600 { color: var(--color-forest-600); }
  .text-forest-700 { color: var(--color-forest-700); }
  .text-forest-800 { color: var(--color-forest-800); }
  .text-forest-900 { color: var(--color-forest-900); }
  .text-forest-950 { color: var(--color-forest-950); }

  .text-mint-50 { color: var(--color-mint-50); }
  .text-mint-100 { color: var(--color-mint-100); }
  .text-mint-200 { color: var(--color-mint-200); }
  .text-mint-300 { color: var(--color-mint-300); }
  .text-mint-400 { color: var(--color-mint-400); }
  .text-mint-500 { color: var(--color-mint-500); }
  .text-mint-600 { color: var(--color-mint-600); }
  .text-mint-700 { color: var(--color-mint-700); }
  .text-mint-800 { color: var(--color-mint-800); }
  .text-mint-900 { color: var(--color-mint-900); }
  .text-mint-950 { color: var(--color-mint-950); }

  .text-allium-500 { color: var(--color-allium-500); }
  .text-allium-600 { color: var(--color-allium-600); }
  .text-allium-700 { color: var(--color-allium-700); }
  .text-allium-800 { color: var(--color-allium-800); }

  /* ---- BACKGROUND COLORS ---- */
  .bg-forest-50 { background-color: var(--color-forest-50); }
  .bg-forest-100 { background-color: var(--color-forest-100); }
  .bg-forest-200 { background-color: var(--color-forest-200); }
  .bg-forest-300 { background-color: var(--color-forest-300); }
  .bg-forest-400 { background-color: var(--color-forest-400); }
  .bg-forest-500 { background-color: var(--color-forest-500); }
  .bg-forest-600 { background-color: var(--color-forest-600); }
  .bg-forest-700 { background-color: var(--color-forest-700); }
  .bg-forest-800 { background-color: var(--color-forest-800); }
  .bg-forest-900 { background-color: var(--color-forest-900); }
  .bg-forest-950 { background-color: var(--color-forest-950); }

  .bg-mint-50 { background-color: var(--color-mint-50); }
  .bg-mint-100 { background-color: var(--color-mint-100); }
  .bg-mint-200 { background-color: var(--color-mint-200); }
  .bg-mint-300 { background-color: var(--color-mint-300); }
  .bg-mint-400 { background-color: var(--color-mint-400); }
  .bg-mint-500 { background-color: var(--color-mint-500); }
  .bg-mint-600 { background-color: var(--color-mint-600); }
  .bg-mint-700 { background-color: var(--color-mint-700); }
  .bg-mint-800 { background-color: var(--color-mint-800); }
  .bg-mint-900 { background-color: var(--color-mint-900); }
  .bg-mint-950 { background-color: var(--color-mint-950); }

  .bg-allium-50 { background-color: var(--color-allium-50); }
  .bg-allium-100 { background-color: var(--color-allium-100); }
  .bg-allium-200 { background-color: var(--color-allium-200); }
  .bg-allium-500 { background-color: var(--color-allium-500); }

  /* ---- BORDER COLORS ---- */
  .border-forest-200 { border-color: var(--color-forest-200); }
  .border-forest-300 { border-color: var(--color-forest-300); }
  .border-forest-500 { border-color: var(--color-forest-500); }
  .border-forest-800 { border-color: var(--color-forest-800); }

  .border-mint-200 { border-color: var(--color-mint-200); }
  .border-mint-300 { border-color: var(--color-mint-300); }
  .border-mint-500 { border-color: var(--color-mint-500); }

  /* ---- GRADIENT UTILITIES ---- */
  .from-forest-50 { --tw-gradient-from: var(--color-forest-50); }
  .from-forest-800 { --tw-gradient-from: var(--color-forest-800); }
  .from-forest-900 { --tw-gradient-from: var(--color-forest-900); }
  .to-mint-50 { --tw-gradient-to: var(--color-mint-50); }
  .to-mint-500 { --tw-gradient-to: var(--color-mint-500); }

  /* ---- RING COLORS ---- */
  .ring-forest-500 { --tw-ring-color: var(--color-forest-500); }
  .ring-mint-500 { --tw-ring-color: var(--color-mint-500); }

  /* ---- HOVER STATES ---- */
  .hover\:bg-forest-50:hover { background-color: var(--color-forest-50); }
  .hover\:bg-forest-700:hover { background-color: var(--color-forest-700); }
  .hover\:bg-mint-50:hover { background-color: var(--color-mint-50); }
  .hover\:bg-mint-600:hover { background-color: var(--color-mint-600); }
  .hover\:text-forest-800:hover { color: var(--color-forest-800); }
  .hover\:text-mint-600:hover { color: var(--color-mint-600); }
  .hover\:border-forest-700:hover { border-color: var(--color-forest-700); }
  .hover\:border-mint-500:hover { border-color: var(--color-mint-500); }
  .hover\:border-mint-600:hover { border-color: var(--color-mint-600); }

  /* ---- FOCUS STATES ---- */
  .focus\:ring-forest-500:focus { --tw-ring-color: var(--color-forest-500); }
  .focus\:ring-mint-500:focus { --tw-ring-color: var(--color-mint-500); }

  /* ---- PEER CHECKED ---- */
  .peer:checked ~ .peer-checked\:border-mint-500 { border-color: var(--color-mint-500); }
  .peer:checked ~ .peer-checked\:bg-mint-50 { background-color: var(--color-mint-50); }

  /* ---- DISPLAY TEXT SIZES ---- */
  .text-display-2xl {
    font-size: var(--text-display-2xl);
    line-height: var(--text-display-2xl--line-height);
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .text-display-xl {
    font-size: var(--text-display-xl);
    line-height: var(--text-display-xl--line-height);
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  .text-display-lg {
    font-size: var(--text-display-lg);
    line-height: var(--text-display-lg--line-height);
    letter-spacing: -0.01em;
    font-weight: 600;
  }

  .text-display-md {
    font-size: var(--text-display-md);
    line-height: var(--text-display-md--line-height);
    letter-spacing: -0.01em;
    font-weight: 600;
  }

  .text-display-sm {
    font-size: var(--text-display-sm);
    line-height: var(--text-display-sm--line-height);
    font-weight: 600;
  }

  .text-body-lg {
    font-size: var(--text-body-lg);
    line-height: var(--text-body-lg--line-height);
  }
}

/* ========================================
   UTILITIES
   ======================================== */

@layer utilities {
  /* Animation delays */
  .delay-100 { animation-delay: 100ms; }
  .delay-200 { animation-delay: 200ms; }
  .delay-300 { animation-delay: 300ms; }
  .delay-400 { animation-delay: 400ms; }
  .delay-500 { animation-delay: 500ms; }

  /* Text gradient */
  .text-gradient {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(135deg, #125744, #00C087);
  }

  /* Line clamp */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* No scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

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

  /* Animation classes */
  .animate-fade-in {
    animation: var(--animate-fade-in);
  }

  .animate-fade-up {
    animation: var(--animate-fade-up);
  }

  .animate-slide-up {
    animation: var(--animate-slide-up);
  }

  .animate-scale-in {
    animation: var(--animate-scale-in);
  }
}

/* ========================================
   TURBO PROGRESS BAR
   ======================================== */

.turbo-progress-bar {
  background: linear-gradient(to right, #125744, #00C087);
  height: 3px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: white !important;
  }
}

/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-300);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-400);
}