: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;
}

/* ===== ANCHOR SCROLL OFFSET FOR FIXED HEADER ===== */

/* Smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}

/* Global scroll margin for all elements with IDs (potential anchor targets) */
/* This accounts for the fixed header height (pt-20 = 5rem = 80px) */
[id] {
    scroll-margin-top: 80px;
}

/* For older browsers that don't support scroll-margin-top, use pseudo-elements */
/* Only apply to section-level elements to avoid layout issues */
section[id]::before,
div[id].mb-8::before,
div[id].bg-white::before {
    content: '';
    display: block;
    height: 80px;
    margin-top: -80px;
    visibility: hidden;
    pointer-events: none;
}

/* ===== 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,
#createGroupModal,
#deleteConfirmModal,
#playerSelectionModal,
#caddieModal {
    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,
#createGroupModal > div.modal-content,
#deleteConfirmModal > div,
#playerSelectionModal > div.modal-content,
#caddieModal > 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,
#createGroupModal > div.modal-content.modal-entering,
#deleteConfirmModal > div.modal-entering,
#playerSelectionModal > div.modal-content.modal-entering,
#caddieModal > 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,
#createGroupModal > div.modal-content.modal-exiting,
#deleteConfirmModal > div.modal-exiting,
#playerSelectionModal > div.modal-content.modal-exiting,
#caddieModal > div.modal-content.modal-exiting {
    transform: scale(0.8) !important;
    opacity: 0 !important;
    transition: all 0.25s ease-out !important;
}

/* ===== GROUP DROPDOWN STYLING ===== */
/* Multi-line display for group options with name and ID */
.group-dropdown {
    line-height: 1.2;
}

.group-dropdown option {
    white-space: pre-line;
    padding: 8px 12px;
    line-height: 1.3;
    font-size: 14px;
}

.group-dropdown option:not(:first-child) {
    border-bottom: 1px solid #e5e7eb;
}

/* Ensure consistent styling across browsers */
.group-dropdown {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
}

/* ===== 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;
}