/* Custom Gold Color for Tailwind */
        .text-gold {
            color: #FFD700; /* Gold */
        }
        .bg-custom-teal {
            background-color: #003d3d; /* Dark Teal */
        }
        /* Search Overlay */
        .search-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .search-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .search-container {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            position: relative;
        }
        .search-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 1.1rem;
        }
        .search-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #333;
        }

        /* Cart Sidebar */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%; /* Full width on small screens */
            max-width: 380px; /* Max width on larger screens */
            height: 100%;
            background-color: white;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
            transform: translateX(100%); /* Start off-screen to the right */
            transition: transform 0.3s ease-in-out;
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }
        .cart-sidebar.open {
            transform: translateX(0); /* Slide into view */
        }
        .cart-overlay-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999; /* Behind sidebar but in front of content */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .cart-overlay-backdrop.open {
            opacity: 1;
            visibility: visible;
        }

        /* Responsive width for sidebar for smaller screens */
        @media (max-width: 640px) {
            .cart-sidebar {
                width: 100%; /* Take full width on small screens */
            }
        }

        /* Define CSS Variables for your theme colors */
:root {
    --color-primary-gold: #FFD700; /* Gold */
    --color-dark-bg-1: #002d2d;   /* Slightly lighter teal for main section */
    --color-dark-bg-2: #003d3d;   /* Your main dark teal for cards/containers */
    --color-text-light: #FFFFFF; /* White for main labels */
    --color-text-fade: #E0E0E0;  /* Off-white for less prominent text */
    --color-text-subtle: #B0B0B0; /* Light grey for subtle hints */
    --color-border-gray: #4A5568; /* A darker gray for borders, similar to Tailwind's gray-700 */
}

/* //////////////////////main functionality of site */
.main {
    background-color: var(--color-dark-bg-1);
    color: var(--color-text-light);
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pop-up {
    /* This was #a080c0 (purple), changed to blend with dark-bg-1 */
    background-color: var(--color-dark-bg-1);
}

.custom-text-gradient {
    /* Updated to Gold to White to Gold gradient */
    background: linear-gradient(90deg, var(--color-primary-gold), var(--color-text-light), var(--color-primary-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* Standard property */
    color: transparent; /* Fallback for browsers that don't support text-fill-color */
}

/* Secondary Button - Keep these as Tailwind @apply in HTML/Tailwind config or re-implement here */
/* .secondary-neon-button styles are now handled by Tailwind @apply in the HTML example from previous response */

/* Input Field Styling */
.neon-input {
    background-color: rgba(0, 0, 0, 0.3); /* Keep it slightly transparent for dark aesthetic */
    border: 1px solid var(--color-border-gray);
    color: var(--color-text-light);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    width: 100%;
}
.neon-input:focus {
    outline: none;
    border-color: var(--color-primary-gold); /* Gold on focus */
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4); /* Gold glow on focus */
}
.neon-input::placeholder {
    color: var(--color-text-subtle);
}

/* Custom Radio/Checkbox styling */
.custom-radio-check {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-primary-gold); /* Gold border for radio/checkbox */
    border-radius: 50%;
    background-color: var(--color-dark-bg-2); /* Dark teal background */
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.custom-radio-check:checked {
    background-color: var(--color-primary-gold); /* Gold when checked */
    border-color: var(--color-primary-gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3); /* Gold glow when checked */
}
.custom-radio-check:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-dark-bg-2); /* Dark teal dot inside checked radio */
}

/* Select dropdown styling */
.neon-select {
    background-color: rgba(0, 0, 0, 0.3); /* Keep it slightly transparent */
    border: 1px solid var(--color-border-gray);
    color: var(--color-text-light);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFD700' d='M9.293 12.95a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L10 10.586 6.707 7.293a1 1 0 00-1.414 1.414l4 4z'/%3E%3C/svg%3E"); /* Custom gold arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.neon-select:focus {
    outline: none;
    border-color: var(--color-primary-gold); /* Gold on focus */
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4); /* Gold glow on focus */
}

/* Color Swatch Styling */
.color-swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-swatch.selected {
    border-color: var(--color-primary-gold); /* Gold border for selected swatch */
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5); /* Gold glow for selected swatch */
}

.backboard-style-btn {
    background-color: var(--color-dark-bg-1); /* Slightly lighter teal */
    border: 2px solid var(--color-border-gray); /* Grey border by default */
    color: var(--color-text-fade);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.backboard-style-btn.selected {
    border-color: var(--color-primary-gold); /* Gold border for selected */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); /* Gold glow for selected */
    color: var(--color-text-light);
    transform: translateY(-2px);
}
.backboard-style-btn:hover:not(.selected) {
    border-color: var(--color-primary-gold); /* Gold on hover */
    background-color: rgba(255, 215, 0, 0.1); /* Slight gold tint on hover */
}

#neonSignPreview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

/* Dynamic Neon Glow Classes (Generated by JS or pre-defined) */
/* The JS dynamically adds these styles with correct colors,
   but defining them here provides fallbacks/clarity. */
.neon-glow-red { color: #FF0000; text-shadow: 0 0 5px #FF0000, 0 0 10px #FF0000, 0 0 20px #FF0000, 0 0 30px #FF0000, 0 0 40px #FF0000, 0 0 50px #FF0000, 0 0 60px #FF0000; }
.neon-glow-blue { color: #0000FF; text-shadow: 0 0 5px #0000FF, 0 0 10px #0000FF, 0 0 20px #0000FF, 0 0 30px #0000FF, 0 0 40px #0000FF, 0 0 50px #0000FF, 0 0 60px #0000FF; }
.neon-glow-green { color: #00FF00; text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 30px #00FF00, 0 0 40px #00FF00, 0 0 50px #00FF00, 0 0 60px #00FF00; }
.neon-glow-pink { color: #FF00FF; text-shadow: 0 0 5px #FF00FF, 0 0 15px #FF00FF, 0 0 10px #FF00FF, 0 0 20px #FF00FF, 0 0 20px #FF00FF, 0 0 50px #FF00FF, 0 0 60px #FF00FF; }
.neon-glow-yellow { color: #FFFF00; text-shadow: 0 0 5px #FFFF00, 0 0 10px #FFFF00, 0 0 20px #FFFF00, 0 0 30px #FFFF00, 0 0 40px #FFFF00, 0 0 50px #FFFF00, 0 0 60px #FFFF00; }
.neon-glow-purple { color: #800080; text-shadow: 0 0 5px #800080, 0 0 10px #800080, 0 0 20px #800080, 0 0 30px #800080, 0 0 40px #800080, 0 0 50px #800080, 0 0 60px #800080; }
.neon-glow-white { color: #FFFFFF; text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FFFFFF, 0 0 50px #FFFFFF, 0 0 60px #FFFFFF; }
.neon-glow-orange { color: #FFA500; text-shadow: 0 0 5px #FFA500, 0 0 10px #FFA500, 0 0 20px #FFA500, 0 0 30px #FFA500, 0 0 40px #FFA500, 0 0 50px #FFA500, 0 0 60px #FFA500; }

.neon-off {
    color: #4a4a4a; /* Darker grey when off */
    text-shadow: none;
    opacity: 0.6;
}

/* Media Queries - unchanged as they are layout-specific */
@media(max-width: 768px){
    .pic {
        min-height: 300px;
    }
    #neonSignPreview {
        margin-top: 70px;
    }
    .images {
        margin-top: 130px;
    }
}
@media(max-width: 430px){
    .pic {
        min-height: 218px;
    }
    #neonSignPreview {
        margin-top: 70px;
    }
    .images {
        margin-top: 130px;
    }
}
  /* Custom scrollbar for Webkit browsers (optional, for aesthetics) */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        .text-logo-md {
            color: #10B981; /* Example teal-like color for 'MD' */
        }
        .text-logo-creative {
            color: #06B6D4; /* Example slightly different teal for 'Creative' */
        }
        .footer-social-icon {
            color: #14B8A6; /* Default social icon color */
            transition: color 0.2s ease-in-out;
        }
        .footer-social-icon:hover {
            color: #0D9488; /* Darker teal on hover */
        }