/* -----------------------------------------------------------------------------
   Fonts
   - Load Unbounded to match the look used site-wide
----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   Global Reset
   - Normalize box model and remove default spacing
----------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -----------------------------------------------------------------------------
   Body
   - Site-wide font, background gradient, text color, and sizing
----------------------------------------------------------------------------- */
body {
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
   Layout Helpers
   - Utility classes for positioning, sizing, spacing, and alignment
----------------------------------------------------------------------------- */
.relative {
    position: relative;
}

.table {
    display: table;
}

.size-full {
    width: 100%;
    height: 100vh;
}

.table-cell {
    display: table-cell;
}

.align-middle {
    vertical-align: middle;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-sm {
    max-width: 24rem;
}

.text-center {
    text-align: center;
}

.select-none {
    user-select: none;
}

.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
/* vertical rhythm helper for stack spacing */
.space-y-8 > * + * {
    margin-top: 2rem;
}

/* -----------------------------------------------------------------------------
   Animations
   - Slide-up entrance
----------------------------------------------------------------------------- */
.animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------------------------------
   Logo link wrapper
   - Keeps logo inline and inherits text color
----------------------------------------------------------------------------- */
.logo-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

/* -----------------------------------------------------------------------------
   Invite Button (Discord)
   - Full-width primary call-to-action above the form
----------------------------------------------------------------------------- */
.invite-button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
    border-radius: 0.5rem;
    border: 2px solid #3b82f6;
    background-color: #2563eb;
    padding: 0.75rem 1rem;
    font-weight: 300;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: .9rem;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
}

    /* hover: brighter blue */
    .invite-button:hover:not(:disabled) {
        border-color: #60a5fa;
        background-color: #3b82f6;
    }

    /* disabled state */
    .invite-button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    /* emoji/icon size inside invite button */
    .invite-button .icon {
        font-size: 1.5rem;
    }

/* -----------------------------------------------------------------------------
   (Legacy) Register button container margin helper
----------------------------------------------------------------------------- */
.register-button-container {
    margin-top: 2rem !important;
}

/* -----------------------------------------------------------------------------
   Base Register Button (pre-pink overrides)
   - Size, shape, and default (pre-theme) colors
----------------------------------------------------------------------------- */
.register-button {
    min-width: 9rem;
    border-radius: 0.5rem;
    border: 2px solid #fb923c;
    background-color: #f97316;
    padding: 0.5rem 1.25rem;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
}

    /* hover/focus for the base (pre-theme) register button */
    .register-button:hover:not(:disabled),
    .register-button:focus-visible:not(:disabled) {
        border-color: transparent;
        background-color: white;
        color: black;
    }

    /* disabled state for the base (pre-theme) register button */
    .register-button:disabled {
        cursor: not-allowed;
        border-color: rgba(251, 146, 60, 0.5);
        background-color: rgba(249, 115, 22, 0.5);
        color: white;
    }

/* -----------------------------------------------------------------------------
   Form Container
   - Vertical stack with controlled gaps
----------------------------------------------------------------------------- */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* remove default fieldset styling */
.fieldset {
    border: none;
    padding: 0;
}

/* group label prefix + input */
.input-group {
    display: flex;
    flex-direction: column;
}

/* side-by-side on small+ screens */
@media (min-width: 640px) {
    .input-group {
        flex-direction: row;
    }
}

/* -----------------------------------------------------------------------------
   Input Prefix (e.g., "redacted.bio/")
   - Box that sits to the left of the input on larger screens
----------------------------------------------------------------------------- */
.input-prefix {
    display: flex;
    height: 41px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 1px solid rgba(168, 162, 158, 0.1);
    border-bottom: 0;
    background-color: rgba(255, 255, 255, 0.02);
    padding: 0.75rem;
    font-size: 0.875rem;
    color: #57534e;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* maintain same height when layout switches to row */
@media (min-width: 640px) {
    .input-prefix {
        height: 41px;
    }
}

/* rounded corners and borders adapted for row layout */
@media (min-width: 640px) {
    .input-prefix {
        justify-content: center;
        border-radius: 0.5rem 0 0 0.5rem;
        border-bottom: 1px solid rgba(168, 162, 158, 0.1);
        border-right: 0;
    }
}

/* -----------------------------------------------------------------------------
   Text Inputs
   - Visual style, focus, disabled, and responsive corner rounding
----------------------------------------------------------------------------- */
.form-input {
    width: 100%;
    height: 41px;
    border-radius: 0 0 0.5rem 0.5rem;
    border: 1px solid rgba(120, 113, 108, 0.1);
    background-color: rgba(255, 255, 255, 0.01);
    padding: 0.75rem 1rem;
    color: #78716c;
    font-size: 1rem;
}

    /* placeholder color */
    .form-input::placeholder {
        color: #57534e;
    }

    /* focus state */
    .form-input:focus {
        outline: none;
        border-color: rgba(168, 162, 158, 0.2);
        background-color: rgba(255, 255, 255, 0.02);
    }

    /* disabled state */
    .form-input:disabled {
        cursor: not-allowed;
        border-color: rgba(168, 162, 158, 0.025);
        background-color: rgba(255, 255, 255, 0.0025);
        color: #57534e;
    }

/* input rounding paired with prefix on small+ screens */
@media (min-width: 640px) {
    .form-input {
        border-radius: 0 0.5rem 0.5rem 0;
    }
}

/* full-width single input (no prefix) corner rounding */
.form-input.full-width {
    border-radius: 0.5rem;
}

/* -----------------------------------------------------------------------------
   Password Field Eye Toggle
   - Position the icon button inside the input
----------------------------------------------------------------------------- */
.password-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #57534e;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* eye icon sizing and subtle hover affordance */
    .password-toggle svg {
        width: 1rem;
        height: 1rem;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        transition: all 0.3s ease;
    }

    .password-toggle:hover svg {
        transform: scale(1.05);
        filter: brightness(1.05);
    }

/* -----------------------------------------------------------------------------
   Terms/Privacy Line
   - Small text with right alignment within max width
----------------------------------------------------------------------------- */
.terms-text {
    max-width: 20rem;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    font-size: 0.75rem;
    color: #a8a29e;
}

.terms-link {
    color: white;
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Background Accents
   - Subtle radial glows behind content
----------------------------------------------------------------------------- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(120,119,198,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(236,72,153,0.12) 0%, transparent 50%), /* pink */
    radial-gradient(circle at 40% 40%, rgba(120,119,198,0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
   - Tighter logo and container at phone sizes
----------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .text-7xl {
        font-size: 3.5rem;
    }

    .max-w-sm {
        max-width: 20rem;
    }
}

/* -----------------------------------------------------------------------------
   Invite Button Icon
   - Size the Discord mark within the blue invite button
----------------------------------------------------------------------------- */
.invite-button .icon-img {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}

/* -----------------------------------------------------------------------------
   Auth Actions (Register + Login row)
   - Center the buttons and control spacing
----------------------------------------------------------------------------- */
.auth-actions {
    margin-top: 2rem !important;
    display: flex;
    gap: .75rem;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   Shared Auth Button Base (button + anchor)
   - Unbounded font, size, and basic button appearance
   - Pink theming is applied further below
----------------------------------------------------------------------------- */
.register-button,
.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9rem;
    border-radius: 0.5rem;
    border: 2px solid #fb923c;
    background-color: #f97316;
    padding: 0.5rem 1.25rem;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none; /* so <a> looks like a button */
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* exact same font */
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
}

    /* base hover/focus styles (pre-theme) */
    .register-button:hover:not(:disabled),
    .register-button:focus-visible:not(:disabled),
    .login-button:hover,
    .login-button:focus-visible {
        border-color: transparent;
        background-color: #fff;
        color: #000;
    }

    /* ensure anchor variant duplicates base hover behavior */
    .login-button:hover,
    .login-button:focus-visible {
        border-color: transparent;
        background-color: white;
        color: black;
    }

/* -----------------------------------------------------------------------------
   Logo Image (GIF)
   - Dimensions for the logo asset
----------------------------------------------------------------------------- */
.logo-img {
    width: 4.5rem; /* same visual size as .text-7xl emoji */
    height: 6.5rem;
    display: inline-block;
    border-radius: .5rem; /* optional */
}

@media (max-width: 640px) {
    .logo-img {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* -----------------------------------------------------------------------------
   Placeholder Font Override
   - Make input placeholders use Unbounded (matching prefix)
----------------------------------------------------------------------------- */
.form-input::placeholder,
.form-input::-webkit-input-placeholder,
.form-input::-moz-placeholder,
.form-input:-ms-input-placeholder,
.form-input::-ms-input-placeholder {
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    /* optional: match the prefix size exactly */
    /* font-size: 0.875rem; */
    color: #57534e; /* keep your existing placeholder color */
}

/* -----------------------------------------------------------------------------
   Pink Theme Tokens
   - Reusable CSS variables for button theming
----------------------------------------------------------------------------- */
:root {
    --pink-500: #ec4899; /* main fill */
    --pink-600: #db2777; /* hover fill (slightly deeper) */
    --pink-700: #be185d; /* dark border */
}

/* -----------------------------------------------------------------------------
   Register Button (Pink Theming)
   - Solid pink with darker border and glow
----------------------------------------------------------------------------- */
.register-button {
    /* keep your size/spacing from earlier */
    background-color: var(--pink-500);
    border-color: var(--pink-700);
    color: #fff;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.25);
}

    /* hover/focus: remain pink and deepen slightly */
    .register-button:hover:not(:disabled),
    .register-button:focus-visible:not(:disabled) {
        background-color: var(--pink-600); /* stay pink on hover */
        border-color: var(--pink-700);
        color: #fff;
    }

    /* disabled: dimmed pink but still themed */
    .register-button:disabled {
        background-color: rgba(236, 72, 153, 0.55);
        border-color: rgba(190, 24, 93, 0.55);
        color: #fff;
        cursor: not-allowed;
    }

/* -----------------------------------------------------------------------------
   Login Button (Transparent Pink)
   - Outline style with pink text and hover fill
----------------------------------------------------------------------------- */
.login-button {
    background-color: transparent;
    border: 2px solid var(--pink-700);
    color: var(--pink-500);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.15);
    text-decoration: none; /* ensure <a> looks like a button */
}

    /* hover/focus: fill with pink */
    .login-button:hover,
    .login-button:focus-visible {
        background-color: var(--pink-500);
        border-color: var(--pink-700);
        color: #fff;
    }
/* A) Inherit the site font (your <body> already uses Unbounded) */
.logo-text {
    font: inherit;
    font-size: 1.6rem; /* your desired size */
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    color: #fff; /* or inherit if you prefer */
}

/* Make form controls inherit the site font */
input, button, select, textarea {
    font: inherit; /* inherits family, size, weight, line-height */
}

/* Or, if you prefer to pin them explicitly to Unbounded: */
.form-input {
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

    /* Placeholders in Unbounded (you already had most of this) */
    .form-input::placeholder,
    .form-input::-webkit-input-placeholder,
    .form-input::-moz-placeholder,
    .form-input:-ms-input-placeholder,
    .form-input::-ms-input-placeholder {
        font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
:root {
    --ui-font: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

html, body {
    font-family: var(--ui-font) !important;
}

/* Inputs don’t reliably inherit – force it */
input, textarea, select, button {
    font-family: var(--ui-font) !important;
    font-size: 1rem; /* keep sizes consistent */
    line-height: 1.2;
}

    /* Your styled inputs (extra belt + suspenders) */
    input.form-input {
        font-family: var(--ui-font) !important;
    }
    /* Placeholder across all vendors */
    input::placeholder,
    textarea::placeholder,
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder,
    input::-moz-placeholder,
    textarea::-moz-placeholder,
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder,
    input::-ms-input-placeholder,
    textarea::-ms-input-placeholder {
        font-family: var(--ui-font) !important;
    }