:root {
    --primary-color: #6BA539; /* Matches the green in the logo */
    --secondary-color: #A6C48A; /* A lighter green for accents */
    --text-color: #333333; /* Dark text color */
}

.fas {
    color: var(--text-color); /* Use the text color defined in the root */
}

.bg-primary-color {
    background-color: var(--primary-color); /* Use the primary color defined in the root */
}

.bg-secondary-color h2 {
    color: var(--primary-color); /* Match the primary color of the logo */
}

.header-overlay {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
}

@media (max-width: 640px) {
    .mobile-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Extra small breakpoint for tab text visibility */
@media (min-width: 475px) {
    .xs\:inline {
        display: inline !important;
    }
    .xs\:hidden {
        display: none !important;
    }
}

@media (max-width: 474px) {
    .xs\:inline {
        display: none !important;
    }
    .xs\:hidden {
        display: inline !important;
    }
}

.user-dropdown-menu {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 1.5px 4px rgba(0,0,0,0.10);
    transition: opacity 0.2s;
    opacity: 1;
}
.user-dropdown-menu.hidden {
    display: none;
    opacity: 0;
}
.user-dropdown-menu a {
    transition: background 0.15s;
}
.user-dropdown-menu a:first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.user-dropdown-menu a:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Global link hover effect - make all links bold on hover */
a:hover {
    font-weight: bold;
}

/* ===== MODAL ANIMATIONS AND STYLING ===== */

/* Modal backdrop styling with enhanced darkening */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    transition: all 0.4s ease;
}

.modal-backdrop.modal-entering {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
}

.modal-backdrop.modal-exiting {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
}

/* Modal content zoom animation */
.modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.modal-content.modal-entering {
    transform: scale(0.3) !important;
    opacity: 0 !important;
}

.modal-content.modal-exiting {
    transform: scale(0.8) !important;
    opacity: 0 !important;
    transition: all 0.25s ease-out !important;
}

/* Apply modal styling to all modal containers */
#loginModal,
#emailModal,
#contactModal,
#createContestModal,
#deleteConfirmModal,
#playerSelectionModal {
    transition: all 0.4s ease;
}

/* Ensure modal content has proper styling - be more specific */
#loginModal > div.modal-content,
#emailModal > div.modal-content,
#contactModal > div.modal-content,
#createContestModal > div.modal-content,
#deleteConfirmModal > div,
#playerSelectionModal > div.modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform-origin: center center !important;
}

#loginModal > div.modal-content.modal-entering,
#emailModal > div.modal-content.modal-entering,
#contactModal > div.modal-content.modal-entering,
#createContestModal > div.modal-content.modal-entering,
#deleteConfirmModal > div.modal-entering,
#playerSelectionModal > div.modal-content.modal-entering {
    transform: scale(0.3) !important;
    opacity: 0 !important;
}

#loginModal > div.modal-content.modal-exiting,
#emailModal > div.modal-content.modal-exiting,
#contactModal > div.modal-content.modal-exiting,
#createContestModal > div.modal-content.modal-exiting,
#deleteConfirmModal > div.modal-exiting,
#playerSelectionModal > div.modal-content.modal-exiting {
    transform: scale(0.8) !important;
    opacity: 0 !important;
    transition: all 0.25s ease-out !important;
}

/* ===== MOBILE LOADING SPINNER STYLES ===== */

/* Golf ball-inspired spinner - mobile only */
.golf-ball-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6; /* Light gray background */
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    position: relative;
    animation: golfBallSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Add golf ball dimple effect */
.golf-ball-spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: rgba(107, 165, 57, 0.3); /* Semi-transparent primary color */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: dimplePulse 1.2s ease-in-out infinite;
}

/* Golf ball spin animation */
@keyframes golfBallSpin {
    0% { 
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    100% { 
        transform: rotate(360deg) scale(1);
    }
}

/* Dimple pulse animation */
@keyframes dimplePulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Mobile spinner backdrop */
#mobileLoadingSpinner {
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ===== GLOBAL BUTTON STYLING ===== */

/* Prevent button text from wrapping */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn {
    white-space: nowrap;
}