/* NeoCaptcha Component Styles */

/* Main container */
.neocaptcha-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

/* Image container with refresh button */
.neocaptcha-image-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* CAPTCHA image */
.neocaptcha-image {
    border: 1px solid #ccc;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}

.neocaptcha-image:hover {
    opacity: 0.8;
}

/* CAPTCHA input field - Default styling */
.neocaptcha-input {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    width: 100%;
    max-width: 200px;
    text-transform: uppercase;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.1rem;
    background-color: #ffffff;
    color: #212121;
}

.neocaptcha-input::placeholder {
    color: #999999;
}

.neocaptcha-input:focus {
    outline: none;
    border-color: #0071c1;
    box-shadow: 0 0 0 0.1rem rgba(0, 113, 193, 0.25);
}

/* Refresh button - Default styling */
.neocaptcha-refresh-button {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    background-color: #f5f5f5;
    color: #212121;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    transition: background-color 0.2s ease-in-out;
}

.neocaptcha-refresh-button:hover {
    background-color: #e0e0e0;
}

.neocaptcha-refresh-button:active {
    background-color: #d0d0d0;
}

.neocaptcha-refresh-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.1rem rgba(0, 113, 193, 0.25);
}

/* Error message - Default styling */
.neocaptcha-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
}

/* ============================================
   THEME-AWARE STYLING FOR CAPTCHA
   ============================================ */

/* Gold Black Luxe Theme */
[data-theme="GoldBlackLuxe"] .neocaptcha-input {
    background-color: var(--black-surface, #1D1D1D) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    color: #FFFFFF !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-input:focus {
    border-color: var(--gold-primary, #FFD700) !important;
    box-shadow: 0 0 0 0.1rem rgba(255, 215, 0, 0.3) !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-image {
    border-color: rgba(255, 215, 0, 0.3) !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-refresh-button {
    background-color: var(--black-elevated, #2A2A2A) !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
    color: var(--gold-primary, #FFD700) !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    padding: 0.5rem 0.75rem !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-refresh-button:hover {
    background-color: rgba(255, 215, 0, 0.1) !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-refresh-button:focus {
    box-shadow: 0 0 0 0.1rem rgba(255, 215, 0, 0.3) !important;
}

[data-theme="GoldBlackLuxe"] .neocaptcha-error {
    color: #FF6B6B !important;
}

/* Modern Flat Cinema Theme */
[data-theme="ModernFlatCinema"] .neocaptcha-input {
    background-color: #FFFFFF !important;
    border-color: var(--flat-border, rgba(0, 0, 0, 0.23)) !important;
    color: var(--flat-text-primary, #212121) !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-input::placeholder {
    color: var(--flat-text-secondary, #666666) !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-input:focus {
    border-color: var(--flat-accent-red, #E50914) !important;
    box-shadow: 0 0 0 0.1rem rgba(229, 9, 20, 0.25) !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-image {
    border-color: var(--flat-border, rgba(0, 0, 0, 0.23)) !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-refresh-button {
    background-color: var(--flat-bg-secondary, #F5F5F5) !important;
    border-color: var(--flat-border, rgba(0, 0, 0, 0.23)) !important;
    color: var(--flat-text-primary, #212121) !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    padding: 0.5rem 0.75rem !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-refresh-button:hover {
    background-color: rgba(229, 9, 20, 0.08) !important;
    border-color: var(--flat-accent-red, #E50914) !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-refresh-button:focus {
    box-shadow: 0 0 0 0.1rem rgba(229, 9, 20, 0.25) !important;
}

[data-theme="ModernFlatCinema"] .neocaptcha-error {
    color: var(--flat-accent-red, #E50914) !important;
}

/* Neon Cinema Theme */
[data-theme="NeonCinema"] .neocaptcha-input {
    background-color: var(--neon-bg-card, #0A0E27) !important;
    border-color: rgba(0, 234, 255, 0.3) !important;
    color: var(--neon-text-primary, #FFFFFF) !important;
}

[data-theme="NeonCinema"] .neocaptcha-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="NeonCinema"] .neocaptcha-input:focus {
    border-color: var(--neon-blue, #00EAFF) !important;
    box-shadow: 0 0 0 0.1rem rgba(0, 234, 255, 0.3), 0 0 10px rgba(0, 234, 255, 0.2) !important;
}

[data-theme="NeonCinema"] .neocaptcha-image {
    border-color: rgba(0, 234, 255, 0.3) !important;
}

[data-theme="NeonCinema"] .neocaptcha-refresh-button {
    background-color: var(--neon-bg-elevated, #141932) !important;
    border-color: rgba(0, 234, 255, 0.3) !important;
    color: var(--neon-blue, #00EAFF) !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    padding: 0.5rem 0.75rem !important;
}

[data-theme="NeonCinema"] .neocaptcha-refresh-button:hover {
    background-color: rgba(0, 234, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
}

[data-theme="NeonCinema"] .neocaptcha-refresh-button:focus {
    box-shadow: 0 0 0 0.1rem rgba(0, 234, 255, 0.3), 0 0 10px rgba(0, 234, 255, 0.2) !important;
}

[data-theme="NeonCinema"] .neocaptcha-error {
    color: #FF6B6B !important;
}

/* Joomla Cinema Theme */
[data-theme="JoomlaCinema"] .neocaptcha-input {
    background-color: #FFFFFF !important;
    border-color: var(--joomla-border, rgba(0, 0, 0, 0.23)) !important;
    color: var(--joomla-text-primary, #212121) !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-input::placeholder {
    color: var(--joomla-text-secondary, #666666) !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-input:focus {
    border-color: var(--joomla-accent-primary, #E74C3C) !important;
    box-shadow: 0 0 0 0.1rem rgba(231, 76, 60, 0.25) !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-image {
    border-color: var(--joomla-border, rgba(0, 0, 0, 0.23)) !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-refresh-button {
    background-color: var(--joomla-bg-secondary, #F8F9FA) !important;
    border-color: var(--joomla-border, rgba(0, 0, 0, 0.23)) !important;
    color: var(--joomla-text-primary, #212121) !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    padding: 0.5rem 0.75rem !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-refresh-button:hover {
    background-color: rgba(231, 76, 60, 0.08) !important;
    border-color: var(--joomla-accent-primary, #E74C3C) !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-refresh-button:focus {
    box-shadow: 0 0 0 0.1rem rgba(231, 76, 60, 0.25) !important;
}

[data-theme="JoomlaCinema"] .neocaptcha-error {
    color: var(--joomla-accent-primary, #E74C3C) !important;
}

/* CAPTCHA wrapper */
.neocaptcha-wrapper {
    /* Dynamic height via CSS variable (set by JavaScript from data attribute) */
    min-height: calc(var(--captcha-height-value, 120) * 1px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .neocaptcha-input {
        max-width: 100%;
    }
    
    .neocaptcha-image-container {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .neocaptcha-refresh-button {
        width: 100%;
        max-width: 200px;
    }
}