/* Custom styles for Sports Club Franeker */

/* Additional hover effects */
.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem);
}

/* Emerald color utilities */
.text-emerald-600 {
    color: #10b981;
}

.text-emerald-100 {
    color: #d1fae5;
}

.bg-emerald-50 {
    background-color: #ecfdf5;
}

.bg-emerald-100 {
    background-color: #d1fae5;
}

.bg-emerald-600 {
    background-color: #10b981;
}

.bg-emerald-700 {
    background-color: #059669;
}

.border-emerald-500 {
    border-color: #10b981;
}

.border-emerald-600 {
    border-color: #10b981;
}

.hover\:bg-emerald-50:hover {
    background-color: #ecfdf5;
}

.hover\:bg-emerald-700:hover {
    background-color: #059669;
}

.hover\:text-emerald-600:hover {
    color: #10b981;
}

.focus\:border-emerald-500:focus {
    border-color: #10b981;
}

.focus\:border-emerald-600:focus {
    border-color: #10b981;
}

/* Teal color utilities */
.text-teal-600 {
    color: #0d9488;
}

.bg-teal-100 {
    background-color: #ccfbf1;
}

.bg-teal-700 {
    background-color: #0f766e;
}

.hover\:bg-teal-50:hover {
    background-color: #f0fdfa;
}

.from-emerald-50 {
    --tw-gradient-from: #ecfdf5;
    --tw-gradient-to: rgba(236, 253, 245, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-teal-100 {
    --tw-gradient-to: #ccfbf1;
}

.from-emerald-600 {
    --tw-gradient-from: #10b981;
    --tw-gradient-to: rgba(16, 185, 129, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-teal-700 {
    --tw-gradient-to: #0f766e;
}

/* Enhanced design elements */
header {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Smooth transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom button styles */
button.open-register-form,
button.open-login-form {
    transition: all 0.3s ease;
}

button.open-register-form:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

/* Card enhancements */
.bg-white.rounded-xl {
    transition: all 0.3s ease;
}

.bg-white.rounded-xl:hover {
    transform: translateY(-4px);
}

/* Modal enhancements */
.register-modal,
.login-modal {
    backdrop-filter: blur(8px);
}