/* ===================================================
   SPORTSVILLE SHOP STYLES (PAYPAL NAV + GREEN ACCENTS)
   =================================================== */

:root {
    --paypal-dark-navy: #003087;    /* Classic PayPal Deep Navy */
    --paypal-blue:      #0070BA;    /* PayPal Vibrant Electric Blue */
    --sv-brand-green:   #2e7d32;    /* SportsVille Brand Green */
    --sv-brand-hover:   #236327;    /* Darker Hover Green */
}

/* --- 1. Top Navigation Bar (PayPal Blue Theme) --- */
header.w3-black {
    background-color: var(--paypal-dark-navy) !important;
    border-bottom: 3px solid var(--paypal-blue) !important;
}

/* Top-Right Cart Trigger Button in Navbar */
header button.w3-green,
header .w3-bar-item.w3-green {
    background-color: var(--paypal-blue) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px;
    font-weight: bold;
}

header button.w3-green:hover {
    background-color: #005ea6 !important;
}

/* --- 2. Your Form Labels & Primary Buttons --- */
.booking-form-label {
    color: #777;
    font-weight: 550;
}

/* Active Category Tab */
.active-bar-item { 
    background-color: var(--sv-brand-green) !important; 
    color: #ffffff !important;
}

/* Primary Action Button (Show Available!) */
.available-button { 
    background-color: var(--sv-brand-green) !important; 
    color: #ffffff !important;
    transition: background-color 0.2s ease;
}


.available-button:hover {
    background-color: #ccc !important;
}

/* --- 3. Shopping Cart Modal Styling --- */
/* Modal Header Bar */


/* Checkout Button (Matches your green brand color when active) */
#checkout-btn:not(:disabled) {
    background-color: var(--sv-brand-green) !important;
    color: #ffffff !important;
}

#checkout-btn:not(:disabled):hover {
    background-color: var(--sv-brand-hover) !important;
}

/* Customer Info Section Header inside Modal */
#cart-modal h4[style*="color: #2e7d32;"] {
    color: var(--paypal-dark-navy) !important;
}

/* PAYMENT MODAL BACKDROP */
.payment-modal {
    height: auto!important;
    padding: 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
}

/* PAYMENT MODAL CONTENT - NOW PURE CONTAINER ONLY */
.payment-modal-content {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    padding: 0 !important;
}
/* RESULT PANEL */
#resultBox {
    display: none;
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
}

.success {
    background: #e8f5e9;
    color: #2e7d32;
}

.cancelled {
    background: #fff3e0;
    color: #ef6c00;
}

.error {
    background: #ffebee;
    color: #c62828;
}