@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#unicorn-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif; /* Use Inter font */
    background-color: #0A0A0A; /* New very dark background */
    color: #E5E7EB; /* New light grey for text */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Add scroll if content overflows */
    -webkit-font-smoothing: antialiased; /* Smoother font rendering */
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100%;
    max-width: 500px; /* Adjusted max-width for a cleaner look */
    background-color: #111111; /* New slightly lighter card background */
    padding: 30px; /* Increased padding */
    border-radius: 8px; /* shadcn-like border radius */
    border: 1px solid #374151; /* Subtle border color */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); /* Subtle shadow */
    text-align: center;
    margin-top: 40px; /* Add space from the top */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Added hover transitions */
}

.container:hover {
    border-color: #4F46E5; /* Violet border on hover - optional, or keep it subtle */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); /* Slightly more pronounced shadow */
}

.header {
    margin-bottom: 5px; /* Adjusted margin */
}

.status-label {
    background-color: #4B5563; /* Muted gray background - default */
    color: #E5E7EB; /* Light text */
    padding: 6px 12px; /* Adjusted padding */
    border-radius: 16px; /* Pill shape */
    font-size: 0.8em; /* Smaller font */
    display: inline-block;
    margin-bottom: 5px; /* Adjusted margin */
    font-weight: 500; /* Medium weight */
    text-transform: uppercase;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for color changes */
}

.status-label.accepting {
    background-color: #10B981; /* Green for accepting */
    color: #FFFFFF;
    animation: pulse-green 1.5s infinite alternate ease-in-out;
}

.status-label.on-hold {
    background-color: #EF4444; /* Red for on-hold */
    color: #FFFFFF;
    animation: pulse-red 1.5s infinite alternate ease-in-out;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 5px rgba(16, 185, 129, 0.7), 0 0 10px rgba(16, 185, 129, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(16, 185, 129, 1), 0 0 15px rgba(16, 185, 129, 0.8);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 10px rgba(239, 68, 68, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 1), 0 0 15px rgba(239, 68, 68, 0.8);
    }
}

#unicorn-logo {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 2;
    margin: -45px auto -35px;
}

.logo-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0; /* Adjusted margin */
}

.logo {
    width: 80px; /* Increased size for new theme, was 60px */
    height: auto;
    margin-right: 15px; /* Adjusted space */
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}

.title {
    font-size: 2.2em; /* Adjusted size */
    font-weight: 700; /* Bold */
    text-align: left;
    line-height: 1.1;
    color: #A78BFA; /* Violet accent for title */
    text-transform: uppercase; /* Added for consistency if desired */
    letter-spacing: 0.5px;
}

.input-group {
    margin-bottom: 20px;
    position: relative;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 12px 15px; /* Adjusted padding */
    background-color: #2A213D; /* Dark purple component background */
    border: 1px solid #374151; /* Subtle border */
    border-radius: 6px; /* Standardized border-radius */
    color: #E5E7EB; /* Light text */
    font-size: 1em;
    font-family: 'Inter', sans-serif; /* Ensure consistent font family */
    box-sizing: border-box;
    outline: none;
    /* Removed box-shadow glow effect */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Added transitions */
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: #A78BFA; /* Violet border on focus */
    outline: 1px solid #A78BFA; /* Optional: subtle outline or use box-shadow for focus ring */
    /* box-shadow: 0 0 0 2px #C4B5FD; Alternative focus ring */
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #9CA3AF; /* Muted placeholder color */
}

.input-group .icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF; /* Muted icon color */
    font-size: 1.2em;
}

/* Adjusted to style the SVG icon if it's directly used */
.input-group .icon svg {
    display: block;
    width: 18px; /* Adjust size as needed for SVG */
    height: 18px; /* Adjust size as needed for SVG */
    fill: #9CA3AF; /* Muted color for SVG icon */
}

.button-group {
    display: flex;
    gap: 15px; /* Adjusted space */
    margin-top: 30px; /* Adjusted space */
}

.button-group button {
    flex-grow: 1;
    padding: 12px 18px;
    /* border: 1px solid transparent; No direct border needed */
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    /* transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; Transitions might conflict or be on ::after */
    transition: color 0.2s ease, transform 0.1s ease; /* Keep color and transform */
    position: relative;
    z-index: 1; /* Ensure button content is above pseudo-elements */
    --borderWidth: 3px;
    overflow: hidden; /* Crucial for this effect */
    /* background-color is now handled by ::after */
    /* color is set per button */
}

.button-group button::before { /* The rotating gradient layer */
    content: '';
    position: absolute;
    z-index: -2; /* Behind ::after and content */
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat; /* As per article example */
    /* background-size: 100% 100%, 50% 50%; Article had more complex bg-size for other effects, we need simple gradient */
    /* background-position: 0 0, 100% 0, 100% 100%, 0 100%; */
    animation: bgRotate 3s linear infinite;
}

.button-group button::after { /* The inner background color layer */
    content: '';
    position: absolute;
    z-index: -1; /* Behind content, above ::before */
    left: var(--borderWidth);
    top: var(--borderWidth);
    width: calc(100% - (2 * var(--borderWidth)));
    height: calc(100% - (2 * var(--borderWidth)));
    background-color: #111111; /* Default inner background, overridden by specific buttons */
    border-radius: calc(6px - var(--borderWidth)); /* Inner radius should be slightly smaller */
    transition: background-color 0.2s ease; /* Transition for inner background */
}

@keyframes bgRotate { /* New keyframes from the article */
    100% {
        transform: rotate(1turn);
    }
}

#submitBtn {
    /* background-color: #8B5CF6; Moved to ::after */
    color: #FFFFFF;
}
#submitBtn::after {
    background-color: #8B5CF6;
}
#submitBtn::before {
    background-image: linear-gradient(60deg, #4F46E5, #7C3AED, #A78BFA, #C4B5FD, #A78BFA, #7C3AED, #4F46E5);
}

#submitBtn:hover::after, #submitBtn:focus::after {
    background-color: #7C3AED; /* Darker violet on hover/focus for inner background */
}
/* Remove old #submitBtn:hover, #submitBtn:focus if they only set background-color */

#submitBtn:disabled {
    /* background-color: #374151; Moved to ::after if we want disabled to look different */
    color: #9CA3AF;
    cursor: not-allowed;
}
#submitBtn:disabled::before { /* Hide gradient on disabled */
    display: none;
}
#submitBtn:disabled::after {
    background-color: #374151; /* Muted inner background for disabled */
}

.learn-more-group {
    margin-top: 15px;
}

#learnMoreBtn {
    display: block;
    width: 100%;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    transition: color 0.2s ease, transform 0.1s ease;
    position: relative;
    z-index: 1;
    --borderWidth: 3px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    box-sizing: border-box;
}

#learnMoreBtn::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    animation: bgRotate 3s linear infinite;
    background-image: linear-gradient(60deg, #A78BFA, transparent), linear-gradient(white, white);
}

#learnMoreBtn::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: var(--borderWidth);
    top: var(--borderWidth);
    width: calc(100% - (2 * var(--borderWidth)));
    height: calc(100% - (2 * var(--borderWidth)));
    background-color: #111111;
    border-radius: calc(6px - var(--borderWidth));
    transition: background-color 0.2s ease;
}

#learnMoreBtn:hover::after {
    background-color: #2D2D2D;
}

#subscribeBtn {
    /* background: #4B5563; Moved to ::after */
    color: #E5E7EB;
    /* border: 1px solid transparent; */
}
#subscribeBtn::after {
    background-color: #111111; /* Solid dark inner background */
}
#subscribeBtn::before {
    background-image: linear-gradient(60deg, #FBBF24, #FDE68A, #FFD700, #DAA520, #FFD700, #FDE68A, #FBBF24);
}

#subscribeBtn:hover::after, #subscribeBtn:focus::after {
    background-color: #1f1f1f; /* Slightly lighter dark bg on hover/focus for inner background */
}
#subscribeBtn:hover, #subscribeBtn:focus {
    color: #FFFFFF; /* Text color change on hover/focus */
    /* border-color: transparent; No direct border */
}

textarea {
    min-height: 100px; /* Give textarea some initial height */
    resize: vertical; /* Allow vertical resizing */
}

.search-results {
    position: absolute;
    top: 100%; /* Position below the input field */
    left: 0;
    right: 0;
    background: #1a1a1a; /* Dark background for results */
    border: 1px solid #00c0a0; /* Teal border */
    border-top: none; /* Avoid double border with input */
    border-radius: 0 0 5px 5px; /* Rounded bottom corners */
    margin-top: 0; /* Align directly below input */
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 192, 160, 0.3); /* Neon glow shadow for dropdown */
}

.search-result {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #0e4f4a; /* Darker teal separator */
    transition: background-color 0.2s;
    text-align: left; /* Align text to the left */
}

.search-result:last-child {
    border-bottom: none;
}

.search-result:hover {
    background-color: #2c3a4b; /* Subtle dark blue/grey highlight on hover */
    color: #E5E7EB; /* Ensure main text color is light */
}

.search-result:hover .track-name,
.search-result:hover .track-artist,
.search-result:hover .track-album {
    color: #FFFFFF; /* Make text white or very light for contrast on hover */
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.track-name {
    font-weight: 600;
    color: #e0e0e0; /* Brighter white for track name */
}

.track-artist, .track-album {
    font-size: 0.9em;
    color: #a0a0a0; /* Lighter grey for artist/album */
}

/* Styles for VIP active state on priority code input - keep or adjust if still needed */
.input-group input#priorityCode.vip-active {
    border-color: #FBBF24; /* Gold/Yellow border for VIP */
    /* box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); */ /* Optional: gold glow */
}

.input-group input#priorityCode.vip-active:focus {
    border-color: #FBBF24;
    outline: 1px solid #FBBF24;
    /* box-shadow: 0 0 0 2px #FDE68A; */ /* Gold focus ring */
}

#priorityCode.has-content::after {
    /* Keeping the VIP badge for now, can be removed if not desired */
    content: 'VIP';
    position: absolute;
    right: -45px; /* Adjust position as needed */
    top: 50%;
    transform: translateY(-50%);
    background-color: #FBBF24;
    color: #422006;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: bold;
    /* animation: vip-badge-pulse 1.5s infinite ease-in-out; */ /* Removed pulse */
}

.input-group input#priorityCode::placeholder {
    color: #FBBF24; /* Gold/Yellow placeholder text */
    opacity: 0.8; /* Optional: adjust opacity if full color is too strong */
}

.subscribe-info-text {
    font-size: 0.8em;
    color: #9CA3AF; /* Muted text color */
    margin-top: 20px;
}

/* Ensure all old glitch keyframes are removed. The ones below were illustrative. 
   Locate @keyframes glitch-border-focus, @keyframes glitch-button-hover, 
   @keyframes glitch-border-focus-vip, @keyframes vip-badge-pulse and remove them. */