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

/*

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

*/

/* Custom styles */
@layer components {
  .profile_sports {
    @apply flex;
  }

  .check_box_wrapper {
    span.checkbox {
      @apply block pl-6 border-b border-gray-700 hover:cursor-pointer hover:bg-gray-200;
      input[type="checkbox"] {
        @apply mr-4 hover:cursor-pointer;
      }
    }
  }

  input, textarea {
    @apply text-gray-800;
  }
  .check_box_inline_wrapper {
    @apply grid grid-cols-4 gap-4;
    span.checkbox {
      @apply pl-6  hover:cursor-pointer hover:bg-gray-200;
      input[type="checkbox"] {
        @apply mr-4 inline hover:cursor-pointer;
      }
    }
  }
  
  /* Pagination styles */
  [data-controller="pagination"] {
    @apply transition-opacity duration-300;
  }
  
  [data-controller="pagination"].loading {
    @apply opacity-50 pointer-events-none;
  }
  
  /* Animation for the reviews container during loading */
  #reviews_container.loading {
    @apply opacity-70 transition-opacity duration-300;
  }
  
  /* Improve mobile display for pagination */
  @media (max-width: 640px) {
    [data-controller="pagination"] nav {
      @apply flex-wrap justify-center;
    }
    
    [data-controller="pagination"] [data-pagination-target="link"] {
      @apply mb-2;
    }
  }

  /* Form elements with modern styling */
  .form-control {
    @apply block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }
  
  /* Age tag styling */
  .age-tag {
    @apply inline-flex items-center bg-blue-100 text-blue-800 rounded-full py-1 px-3 text-sm font-medium;
    transition: all 0.2s ease;
  }
  
  .age-tag:hover {
    @apply bg-blue-200;
  }
  
  .age-tag-remove {
    @apply ml-1.5 text-blue-500 hover:text-blue-700 focus:outline-none;
    transition: all 0.15s ease;
  }
  
  /* Card styling */
  .card {
    @apply bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-gray-200;
  }
  
  .card-body {
    @apply p-6;
  }
  
  /* Button styling */
  .btn {
    @apply px-4 py-2 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }
  
  .btn-secondary {
    @apply border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
  }

  .selected-option {
    @apply bg-blue-600 border-blue-600 text-white;
  }
}