/* turnstile.css - Consolidated Cloudflare Turnstile styling */

/* ======================================
   TURNSTILE POPUP CONTAINERS
   ====================================== */

/* Main Turnstile popup containers */
#turnstile-popup,
#contact-turnstile-popup,
#subscribe-turnstile-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 10000 !important;
    display: none;
    width: auto !important;
    min-height: 0 !important;
}

/* Turnstile widget containers */
#turnstile-container,
#contact-turnstile-container,
#subscribe-turnstile-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px !important;
}

/* Turnstile overlays */
#turnstile-overlay,
#contact-turnstile-overlay,
#subscribe-turnstile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

/* Form container overlays */
.form-container-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999;
    display: none !important;
}

/* Form-specific overlay styling */
.parallax-content .form-container-overlay,
.contact-form-container .form-container-overlay {
    border-radius: 8px;
}

/* ======================================
   CLOUDFLARE IFRAME STYLING
   ====================================== */

/* Cloudflare iframe styling */
iframe[src*="challenges.cloudflare.com"] {
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10001 !important;
}

/* Turnstile visibility states */
body.turnstile-active .manual-floating-label,
body.turnstile-active .form-group.has-value label {
    display: none !important;
}

/* ======================================
   Z-INDEX MANAGEMENT
   ====================================== */

/* High z-index for Turnstile elements */
#turnstile-popup,
#contact-turnstile-popup,
#subscribe-turnstile-popup,
#turnstile-overlay,
#contact-turnstile-overlay,
#subscribe-turnstile-overlay,
iframe[src*="challenges.cloudflare.com"],
#confettiContainer {
    z-index: 10000 !important;
}

/* Lower z-index for form elements */
.manual-floating-label,
.form-group label {
    z-index: 10 !important;
}

/* Show floating label when select has value */
.form-group.select-group.has-value .manual-floating-label {
    display: block !important;
}

/* Handle labels during Turnstile verification */
body.turnstile-active .manual-floating-label,
body.turnstile-active .form-group.has-value label {
    display: none !important;
}

/* ======================================
   ANIMATIONS & TRANSITIONS
   ====================================== */

/* Smooth fade-in for the Turnstile widget */
@keyframes fadeInTurnstile {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

iframe[src*="challenges.cloudflare.com"] {
    animation: fadeInTurnstile 0.2s ease-in forwards;
}

/* ======================================
   BROWSER-SPECIFIC FIXES
   ====================================== */

/* Fix for Safari and iOS */
@supports (-webkit-overflow-scrolling: touch) {
    iframe[src*="challenges.cloudflare.com"] {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ======================================
   BUTTON SPINNER ANIMATION
   ====================================== */

/* Button spinner styling */
.btn-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1.5s linear infinite;
    display: none;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ======================================
   CLOUDFLARE SPECIFIC OVERRIDES
   ====================================== */

/* Override any background that might be applied to Cloudflare elements */
.cloudflare-challenge,
.cloudflare-challenge * {
    background-color: transparent !important;
}

/* ======================================
   SUCCESS AND ERROR MESSAGE STYLES
   ====================================== */

/* Success and error message styles */
.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left: 5px solid #28a745;
    animation: fadeIn 0.3s ease-in-out;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left: 5px solid #dc3545;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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