/* Turnstile Responsive Styles */
.turnstile-container {
    position: relative !important;
    margin: 0px auto !important;
    padding: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    min-height: 65px !important;
    box-sizing: border-box !important;
    /* Width will be set dynamically to match submit button */
}

/* Fallback width when button width can't be determined */
.turnstile-container:not([style*="width"]) {
    width: 90% !important;
    max-width: 300px !important;
}

/* Cloudflare Turnstile widget responsive adjustments */
.cf-turnstile {
    margin: 0 auto !important;
    max-width: 90% !important;
    width: 90% !important;
    transform-origin: center !important;
}

/* Force Turnstile widget to stretch to container width */
.cf-turnstile iframe {
    width: 90% !important;
    max-width: none !important;
    min-width: 90% !important;
}

/* Override Cloudflare's fixed dimensions */
.cf-turnstile > div {
    width: 90% !important;
    max-width: none !important;
}

.cf-turnstile > div > iframe {
    width: 90% !important;
    height: auto !important;
    min-width: 90% !important;
}

/* More aggressive overrides for Cloudflare's fixed styling */
.turnstile-container .cf-turnstile,
.turnstile-container .cf-turnstile > div,
.turnstile-container .cf-turnstile iframe {
    width: 90% !important;
    max-width: none !important;
    min-width: 90% !important; 
    box-sizing: border-box !important;
}

/* Override any inline styles that Cloudflare might set */
.turnstile-container [style*="width"] {
    width: 90% !important;
}

/* Scale the content if needed */
.cf-turnstile {
    transform-origin: center center !important;
    overflow: hidden !important;
}

/* Ensure proper aspect ratio maintenance while stretching width */
.cf-turnstile iframe {
    object-fit: fill !important;
}

/* Use CSS custom property for width override */
.turnstile-container[style*="--turnstile-width"] .cf-turnstile,
.turnstile-container[style*="--turnstile-width"] .cf-turnstile > div,
.turnstile-container[style*="--turnstile-width"] .cf-turnstile iframe {
    width: var(--turnstile-width) !important;
    max-width: var(--turnstile-width) !important;
    min-width: var(--turnstile-width) !important;
}

/* Extreme override for stubborn Cloudflare styling */
.turnstile-container .cf-turnstile * {
    max-width: none !important;
}

/* Force specific Cloudflare classes to stretch */
.turnstile-container .cf-turnstile .ctp-widget,
.turnstile-container .cf-turnstile .ctp-container {
    width: 100% !important;
    max-width: none !important;
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .turnstile-container {
        margin: 8px auto !important;
        padding: 4px !important;
        max-width: 280px !important;
    }
    
    .cf-turnstile {
        transform: scale(0.9) !important;
        transform-origin: center !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .turnstile-container {
        max-width: 260px !important;
    }
    
    .cf-turnstile {
        transform: scale(0.8) !important;
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .turnstile-container {
        max-width: 320px !important;
    }
}

/* Desktop */
@media (min-width: 769px) {
    .turnstile-container {
        max-width: 300px !important;
    }
}

/* Error message responsive styling */
.turnstile-error {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 8px auto !important;
    font-size: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    display: block !important;
    animation: turnstile-error-fade-in 0.3s ease-out !important;
    /* Width set dynamically to match button/container */
}

@media (max-width: 480px) {
    .turnstile-error {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 360px) {
    .turnstile-error {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
}

/* Smooth fade-in animation for error messages */
@keyframes turnstile-error-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state for submit buttons */
button[type="submit"][disabled] {
    cursor: not-allowed !important;
    position: relative !important;
}

/* Success state styling */
.turnstile-success {
    color: #065f46 !important;
    background-color: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 8px auto !important;
    font-size: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    animation: turnstile-success-fade-in 0.3s ease-out !important;
    /* Width set dynamically to match button/container */
}

@keyframes turnstile-success-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Ensure proper spacing in forms */
form .turnstile-container + button[type="submit"] {
    margin-top: 16px !important;
}

@media (max-width: 480px) {
    form .turnstile-container + button[type="submit"] {
        margin-top: 12px !important;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .turnstile-error {
        color: #fca5a5 !important;
        background-color: #1f1f1f !important;
        border-color: #dc2626 !important;
    }
    
    .turnstile-success {
        color: #86efac !important;
        background-color: #1f1f1f !important;
        border-color: #065f46 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .turnstile-error {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
    
    .turnstile-success {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .turnstile-error,
    .turnstile-success {
        animation: none !important;
    }
    
    .cf-turnstile {
        transition: none !important;
    }
}