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

/* moved from base.html */
body {
    font-family: 'Poppins', sans-serif;
}

/* Custom Loading Animation */
.tennis-bounce {
    animation: tennis-bounce 1s infinite;
}

@keyframes tennis-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
    }
}

/* Custom Transitions */
.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 300ms ease-in;
}

/* Custom Components */
.btn-primary {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-700 transition duration-200;
}

.btn-secondary {
    @apply border-2 border-green-600 text-green-600 px-6 py-3 rounded-lg font-semibold hover:bg-green-50 transition duration-200;
}

.card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-200;
}

.input-field {
    @apply w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400;
}

/* Map Styles */
.map-container {
    @apply w-full h-[500px] rounded-lg overflow-hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-screen.hidden {
    @apply opacity-0 pointer-events-none;
    transition: opacity 0.5s ease-out;
}

.tennis-ball {
    overflow: hidden;
    height: 40px;
    width: 40px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #4ade80;
    box-sizing: border-box;
    animation: bounce 1s ease-in-out infinite;
}

.tennis-ball::before,
.tennis-ball::after {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    border: solid 4px #fff;
    border-radius: 50%;
    box-sizing: border-box;
}

.tennis-ball::before {
    right: 70%;
}

.tennis-ball::after {
    left: 70%;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
    }
}

.loading-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Form Styles */
.form-group {
    @apply space-y-1 mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

/* Match Card Styles */
.match-card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-200;
}

.match-type-singles {
    @apply bg-blue-100 text-blue-800;
}

.match-type-doubles {
    @apply bg-purple-100 text-purple-800;
}

/* Court Details Styles */
.feature-item {
    @apply flex items-center text-gray-600 space-x-2;
}

.feature-icon {
    @apply text-green-600;
}

/* Responsive Navigation */
@media (max-width: 640px) {
    .mobile-menu {
        @apply absolute top-16 left-0 w-full bg-white border-b shadow-lg;
    }

    .mobile-menu-item {
        @apply block px-4 py-2 text-gray-700 hover:bg-gray-50;
    }
}

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

/* Hide scrollbar for Firefox */
.scrollbar-none {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

/* courts container scrollbar: thin thumb with transparent track */
#courts-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.35) transparent; /* thumb then track (Firefox) */
}

/* WebKit browsers (Chrome, Safari, Edge Chromium) */
#courts-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#courts-container::-webkit-scrollbar-track {
  background: transparent;
}
#courts-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.35);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#courts-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.6);
}
#courts-container::-webkit-scrollbar-corner {
  background: transparent;
}