/* === components/buttons.css === */

.cta-button {
    display: inline-block;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    font-family: var(--font-body);
    font-size: 1.3rem; /* This was the original larger size for the main CTA */
    font-weight: 600;
    color: var(--color-text-headings);
    background: var(--color-accent-glow);
    padding: var(--spacing-m) var(--spacing-xl); /* e.g., 16px 32px */
    border: 2px solid rgba(150, 0, 255, 0.9);
    border-radius: var(--border-radius-main);
    cursor: pointer;
	margin-top: var(--spacing-l);
	padding: var(--spacing-m) var(--spacing-xl);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: var(--box-shadow-glow-strong);
    letter-spacing: 1px;
    /* width: 100%; -- REMOVE this or make it conditional if you don't want index.html button full width */
    /* margin-bottom: var(--spacing-m); -- REMOVE this if not needed for index.html button */
}

.cta-button:hover {
    background: rgba(150, 0, 255, 0.9);
    transform: scale(1.05); 
    box-shadow: 0 0 25px rgba(150, 0, 255, 1);
}

/* Secondary button style example */
.cta-button.secondary {
    background: transparent;
    border-color: var(--color-highlight-cyber);
    color: var(--color-highlight-cyber);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.cta-button.secondary:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #fff;
    border-color: var(--color-highlight-cyber);
    box-shadow: 0 0 15px var(--color-highlight-cyber);
    transform: scale(1.03);
}

/* === components/buttons.css === */

/* ... your existing .cta-button and .cta-button.secondary styles ... */
.cta-button {
    display: inline-flex; /* Changed to inline-flex for aligning icon and text */
    align-items: center;   /* Vertically align icon and text */
    justify-content: center; /* Center content if button is full-width */
    gap: var(--spacing-s);  /* Space between icon and text */
    /* ... rest of your .cta-button styles ... */
    font-family: var(--font-body);
    font-size: 1.1rem; /* Adjusted for social buttons, or keep as is */
    font-weight: 600;
    color: var(--color-text-headings);
    background: var(--color-accent-glow);
    padding: var(--spacing-m) var(--spacing-l); /* Adjusted padding */
    border: 2px solid rgba(150, 0, 255, 0.9);
    border-radius: var(--border-radius-main);
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: var(--box-shadow-glow-strong);
    letter-spacing: 0.5px; /* Slightly less aggressive letter spacing */
    width: 100%; /* Make social buttons full width of their container by default */
    margin-bottom: var(--spacing-m); /* Add space between social buttons */
}

.cta-button:hover {
    background: rgba(150, 0, 255, 0.9);
    transform: scale(1.02); /* Slightly less aggressive hover scale */
    box-shadow: 0 0 25px rgba(150, 0, 255, 1);
}

.cta-button.secondary {
    background: transparent;
    border-color: var(--color-highlight-cyber);
    color: var(--color-highlight-cyber);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.cta-button.secondary:hover {
    background: rgba(0, 229, 255, 0.1);
    color: #fff;
    border-color: var(--color-highlight-cyber);
    box-shadow: 0 0 15px var(--color-highlight-cyber);
    transform: scale(1.02);
}


/* === New Styles for Social Login Buttons === */

.social-button {
    /* Common styles for all social buttons, if any, beyond .cta-button */
    /* For example, if you wanted them to be slightly smaller or have a different font-weight */
    padding: var(--spacing-s) var(--spacing-m); /* Example: slightly smaller padding */
    font-size: 1rem;
    text-transform: none; /* Social buttons often don't use uppercase */
    letter-spacing: normal;
    justify-content: flex-start; /* Align content (icon + text) to the start */
    gap: var(--spacing-m); /* Increase gap for social icon */
}

.social-icon {
    width: 20px;  /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
    /* margin-right: var(--spacing-s); Moved to gap property on .cta-button / .social-button */
}

.google-button {
    background-color: #FFFFFF; /* Google's typical white */
    color: #4A4A4A;      /* Dark grey text for Google button */
    border: 1px solid #DADCE0; /* Google's typical border */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.google-button:hover {
    background-color: #f8f9fa;
    border-color: #c6c6c6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: scale(1.01); /* Very subtle hover for branded buttons */
}

.discord-button {
    background-color: #5865F2; /* Discord's Blurple */
    color: #FFFFFF;
    border: 1px solid #5865F2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.discord-button:hover {
    background-color: #4B57D3; /* Darker Blurple */
    border-color: #4B57D3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: scale(1.01);
}

/* Optional: Container for social login buttons on auth.html */
.social-login-options {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-l);
    border-top: 1px solid var(--color-border);
    text-align: center; /* Center the "Or sign in using:" text */
}
.social-login-options p {
    margin-bottom: var(--spacing-m);
    color: var(--color-text-muted);
    font
}
/* Header Button */
.header-button {
    display: inline-block;
    font-size: 4rem;
    font-family: "Spectral SC", serif;
    text-transform: uppercase;
    color: #E0E7FF;
    text-shadow: 0 0 10px #A076F9, 0 0 20px #00E5FF;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* Glowing hover effect */
.header-button:hover {
    text-shadow: 0 0 20px #A076F9, 0 0 40px #00E5FF, 0 0 60px #A076F9;
    transform: scale(1.05);
}