/* ═══════════════════════════════════════════════════════════════════════════
   SIGNUP FLOW BUTTON STYLES
   Premium button styling for email-entry and profile-section signup flow
   Extracted from index.html for better caching and reduced initial load
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   BASE BUTTON ARCHITECTURE
   Shared foundation for all signup flow buttons
   ═══════════════════════════════════════════════════════════════════ */
.email-entry .terminal-button,
.profile-section .terminal-button {
    /* Refined dimensions and spacing */
    padding: 14px 28px;
    min-width: 140px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    /* Perfect rounded corners - elegant but not excessive */
    border-radius: 12px;

    /* Refined border */
    border: 2px solid transparent;

    /* Smooth, premium transitions */
    transition:
        all 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease-out;

    /* Crisp text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;

    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    /* Base positioning */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME - PRIMARY BUTTONS (SEND, VERIFY, NEXT, SUBMIT)
   Luminous green with sophisticated depth
   ═══════════════════════════════════════════════════════════════════ */
html.theme-dark .email-entry .terminal-button:not(.secondary),
html.theme-dark .profile-section .terminal-button:not(.secondary) {
    /* Rich gradient background */
    background: linear-gradient(
        168deg,
        rgba(0, 255, 0, 0.08) 0%,
        rgba(0, 180, 0, 0.05) 50%,
        rgba(0, 120, 0, 0.08) 100%
    );

    /* Border */
    border: 2px solid rgba(0, 255, 0, 0.6);

    /* Text */
    color: #00FF00;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);

    /* Subtle shadow */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(0, 255, 0, 0.1);
}

/* Dark theme primary hover */
html.theme-dark .email-entry .terminal-button:not(.secondary):hover,
html.theme-dark .profile-section .terminal-button:not(.secondary):hover {
    background: linear-gradient(
        168deg,
        rgba(0, 255, 0, 0.18) 0%,
        rgba(0, 220, 0, 0.12) 50%,
        rgba(0, 180, 0, 0.16) 100%
    );

    border-color: #00FF00;

    transform: translateY(-2px);

    box-shadow:
        0 6px 20px rgba(0, 255, 0, 0.25),
        0 3px 10px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(0, 255, 0, 0.1),
        inset 0 1px 0 rgba(0, 255, 0, 0.2);

    text-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
}

/* Dark theme primary focus - accessibility ring */
html.theme-dark .email-entry .terminal-button:not(.secondary):focus-visible,
html.theme-dark .profile-section .terminal-button:not(.secondary):focus-visible {
    outline: none;
    box-shadow:
        0 6px 20px rgba(0, 255, 0, 0.25),
        0 3px 10px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(0, 255, 0, 0.1),
        inset 0 1px 0 rgba(0, 255, 0, 0.2);
}

/* Dark theme primary active - pressed state */
html.theme-dark .email-entry .terminal-button:not(.secondary):active,
html.theme-dark .profile-section .terminal-button:not(.secondary):active {
    transform: translateY(1px) scale(0.98);

    background: linear-gradient(
        168deg,
        rgba(0, 255, 0, 0.25) 0%,
        rgba(0, 200, 0, 0.18) 50%,
        rgba(0, 150, 0, 0.22) 100%
    );

    box-shadow:
        0 2px 8px rgba(0, 255, 0, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);

    transition: all 0.08s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME - SECONDARY BUTTONS (BACK)
   Subtle, muted appearance with refined interaction
   ═══════════════════════════════════════════════════════════════════ */
html.theme-dark .email-entry .terminal-button.secondary,
html.theme-dark .profile-section .terminal-button.secondary {
    background: linear-gradient(
        168deg,
        rgba(0, 255, 0, 0.08) 0%,
        rgba(0, 180, 0, 0.05) 50%,
        rgba(0, 120, 0, 0.08) 100%
    );

    border: 2px solid rgba(0, 255, 0, 0.6);

    color: #00FF00;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(0, 255, 0, 0.1);
}

/* Dark theme secondary hover */
html.theme-dark .email-entry .terminal-button.secondary:hover,
html.theme-dark .profile-section .terminal-button.secondary:hover {
    background: linear-gradient(
        168deg,
        rgba(0, 255, 0, 0.18) 0%,
        rgba(0, 220, 0, 0.12) 50%,
        rgba(0, 180, 0, 0.16) 100%
    );

    border-color: #00FF00;

    transform: translateY(-2px);

    box-shadow:
        0 6px 20px rgba(0, 255, 0, 0.25),
        0 3px 10px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(0, 255, 0, 0.1),
        inset 0 1px 0 rgba(0, 255, 0, 0.2);

    text-shadow: 0 0 10px rgba(0, 255, 0, 0.6);
    outline: none;
}

/* Dark theme secondary active */
html.theme-dark .email-entry .terminal-button.secondary:active,
html.theme-dark .profile-section .terminal-button.secondary:active {
    transform: translateY(1px) scale(0.98);

    background: linear-gradient(
        168deg,
        rgba(0, 255, 0, 0.25) 0%,
        rgba(0, 200, 0, 0.18) 50%,
        rgba(0, 150, 0, 0.22) 100%
    );

    box-shadow:
        0 2px 8px rgba(0, 255, 0, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);

    transition: all 0.08s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME - PRIMARY BUTTONS (SEND, VERIFY, NEXT, SUBMIT)
   Elegant blue with sophisticated depth
   ═══════════════════════════════════════════════════════════════════ */
html.theme-light .email-entry .terminal-button:not(.secondary),
html.theme-light .profile-section .terminal-button:not(.secondary) {
    /* Premium blue gradient */
    background: linear-gradient(
        168deg,
        #2480FF 0%,
        #1F75FE 40%,
        #1A6AE8 100%
    );

    border: 2px solid rgba(31, 117, 254, 0.9);

    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(31, 117, 254, 0.3);

    box-shadow:
        0 4px 14px rgba(31, 117, 254, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Light theme primary hover */
html.theme-light .email-entry .terminal-button:not(.secondary):hover,
html.theme-light .profile-section .terminal-button:not(.secondary):hover {
    background: linear-gradient(
        168deg,
        #3A8FFF 0%,
        #2480FF 40%,
        #1F75FE 100%
    );

    border-color: #1F75FE;

    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(31, 117, 254, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(31, 117, 254, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    outline: none;
}

/* Light theme primary focus */
html.theme-light .email-entry .terminal-button:not(.secondary):focus-visible,
html.theme-light .profile-section .terminal-button:not(.secondary):focus-visible {
    outline: none;
    box-shadow:
        0 8px 24px rgba(31, 117, 254, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(31, 117, 254, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Light theme primary active */
html.theme-light .email-entry .terminal-button:not(.secondary):active,
html.theme-light .profile-section .terminal-button:not(.secondary):active {
    transform: translateY(1px) scale(0.98);

    background: linear-gradient(
        168deg,
        #1A6AE8 0%,
        #1660D8 40%,
        #1255C8 100%
    );

    box-shadow:
        0 2px 8px rgba(31, 117, 254, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);

    transition: all 0.08s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME - SECONDARY BUTTONS (BACK)
   Refined outline style with elegant interaction
   ═══════════════════════════════════════════════════════════════════ */
html.theme-light .email-entry .terminal-button.secondary,
html.theme-light .profile-section .terminal-button.secondary {
    background: linear-gradient(
        168deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.04) 100%
    );

    border: 2px solid rgba(0, 0, 0, 0.7);

    color: #222222;
    text-shadow: none;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Light theme secondary hover */
html.theme-light .email-entry .terminal-button.secondary:hover,
html.theme-light .profile-section .terminal-button.secondary:hover {
    background: linear-gradient(
        168deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.08) 100%
    );

    border-color: #000000;
    color: #000000;

    transform: translateY(-2px);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.12),
        0 3px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);

    outline: none;
}

/* Light theme secondary active */
html.theme-light .email-entry .terminal-button.secondary:active,
html.theme-light .profile-section .terminal-button.secondary:active {
    transform: translateY(1px) scale(0.98);

    background: linear-gradient(
        168deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.12) 100%
    );

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 2px 4px rgba(0, 0, 0, 0.08);

    transition: all 0.08s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   DISABLED STATE - Both themes
   Clear visual indication of unavailability
   ═══════════════════════════════════════════════════════════════════ */
html.theme-dark .email-entry .terminal-button:disabled,
html.theme-dark .profile-section .terminal-button:disabled {
    background: linear-gradient(
        168deg,
        rgba(51, 51, 51, 0.3) 0%,
        rgba(34, 34, 34, 0.2) 100%
    ) !important;
    border-color: rgba(51, 51, 51, 0.5) !important;
    color: rgba(102, 102, 102, 0.7) !important;
    text-shadow: none !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(51, 51, 51, 0.1) !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.6 !important;
}

html.theme-light .email-entry .terminal-button:disabled,
html.theme-light .profile-section .terminal-button:disabled {
    background: linear-gradient(
        168deg,
        rgba(200, 200, 200, 0.5) 0%,
        rgba(180, 180, 180, 0.4) 100%
    ) !important;
    border-color: rgba(150, 150, 150, 0.6) !important;
    color: rgba(100, 100, 100, 0.8) !important;
    text-shadow: none !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.6 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SPECIAL SUBMIT BUTTON STYLING (cyan/gold accent)
   The terminal-cyan-submit class gets extra visual emphasis
   ═══════════════════════════════════════════════════════════════════ */
html.theme-dark .profile-section .terminal-button.terminal-cyan-submit {
    /* Gold/amber accent for dark theme submit */
    background: linear-gradient(
        168deg,
        rgba(250, 201, 41, 0.2) 0%,
        rgba(230, 182, 37, 0.12) 50%,
        rgba(212, 161, 34, 0.18) 100%
    );

    border: 2px solid rgba(250, 201, 41, 0.8);

    color: #fac929;
    text-shadow:
        0 0 10px rgba(250, 201, 41, 0.5),
        0 0 25px rgba(250, 201, 41, 0.2);

    box-shadow:
        0 0 0 1px rgba(250, 201, 41, 0.15),
        0 4px 14px rgba(250, 201, 41, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(250, 201, 41, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

html.theme-dark .profile-section .terminal-button.terminal-cyan-submit:hover {
    background: linear-gradient(
        168deg,
        rgba(250, 201, 41, 0.3) 0%,
        rgba(240, 191, 39, 0.2) 50%,
        rgba(220, 175, 35, 0.28) 100%
    );

    border-color: #fac929;

    transform: translateY(-2px);

    box-shadow:
        0 0 0 1px rgba(250, 201, 41, 0.3),
        0 8px 28px rgba(250, 201, 41, 0.3),
        0 4px 14px rgba(0, 0, 0, 0.25),
        0 0 50px rgba(250, 201, 41, 0.15),
        inset 0 1px 0 rgba(250, 201, 41, 0.3);

    text-shadow:
        0 0 15px rgba(250, 201, 41, 0.7),
        0 0 35px rgba(250, 201, 41, 0.3);

    outline: none;
}

html.theme-dark .profile-section .terminal-button.terminal-cyan-submit:active {
    transform: translateY(1px) scale(0.98);

    background: linear-gradient(
        168deg,
        rgba(250, 201, 41, 0.4) 0%,
        rgba(240, 191, 39, 0.3) 50%,
        rgba(220, 175, 35, 0.38) 100%
    );

    box-shadow:
        0 0 0 1px rgba(250, 201, 41, 0.5),
        0 2px 10px rgba(250, 201, 41, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.35),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);

    transition: all 0.08s ease-out;
}

/* Light theme submit - use the blue but slightly different */
html.theme-light .profile-section .terminal-button.terminal-cyan-submit {
    background: linear-gradient(
        168deg,
        #1F75FE 0%,
        #1A6AE8 40%,
        #1560D8 100%
    );

    border: 2px solid #1F75FE;

    box-shadow:
        0 4px 16px rgba(31, 117, 254, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN - Mobile & PWA Optimizations
   Perfect experience across all devices
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .email-entry .terminal-button,
    .profile-section .terminal-button {
        /* Optimized touch targets */
        padding: 14px 22px;
        min-width: 125px;
        min-height: 48px;
        font-size: 0.9em;
        letter-spacing: 1.2px;

        /* Slightly smaller radius for mobile */
        border-radius: 11px;
    }

    /* Stack buttons nicely on mobile */
    .email-entry .action-buttons,
    .profile-section .action-buttons {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .email-entry .terminal-button,
    .profile-section .terminal-button {
        padding: 13px 18px;
        min-width: 115px;
        font-size: 0.85em;
        letter-spacing: 1px;
        border-radius: 10px;
    }
}

/* PWA standalone mode */
@media (display-mode: standalone) {
    .email-entry .terminal-button,
    .profile-section .terminal-button {
        /* Enhanced touch response for PWA */
        min-height: 50px;

        /* Prevent iOS safe area issues */
        -webkit-touch-callout: none;
    }
}

/* iOS PWA specific */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        .email-entry .terminal-button,
        .profile-section .terminal-button {
            /* iOS specific touch optimization */
            -webkit-appearance: none;
            touch-action: manipulation;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════
   LOADING STATE - Internal progress bar
   Premium loading animation
   ═══════════════════════════════════════════════════════════════════ */
.email-entry .terminal-button.loading,
.profile-section .terminal-button.loading {
    pointer-events: none;
}

.email-entry .terminal-button.loading::after,
.profile-section .terminal-button.loading::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: rgba(128, 128, 128, 0.3);
    border-radius: 1px;
    z-index: 1;
}

.email-entry .terminal-button.loading::before,
.profile-section .terminal-button.loading::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 8px;
    height: 2px;
    width: 0%;
    border-radius: 1px;
    animation: signupProgressBar 2.5s ease-in-out forwards;
    z-index: 2;
}

html.theme-dark .email-entry .terminal-button.loading::before,
html.theme-dark .profile-section .terminal-button.loading::before {
    background: linear-gradient(90deg, #00FF00, #00cc00);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.6);
}

html.theme-light .email-entry .terminal-button.loading::before,
html.theme-light .profile-section .terminal-button.loading::before {
    background: linear-gradient(90deg, #ffffff, #e0e0e0);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

@keyframes signupProgressBar {
    0% { width: 0%; opacity: 0.5; }
    10% { opacity: 1; }
    100% { width: calc(100% - 16px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   HIGH CONTRAST & ACCESSIBILITY
   Ensures buttons work for all users
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
    .email-entry .terminal-button,
    .profile-section .terminal-button {
        border-width: 3px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .email-entry .terminal-button,
    .profile-section .terminal-button {
        transition: none !important;
        animation: none !important;
    }

    .email-entry .terminal-button:hover,
    .profile-section .terminal-button:hover {
        transform: none !important;
    }
}