/* Custom styles to complement Tailwind CSS */

/* Paleta y gradientes inspirados en el logo OneContact (azul → naranja) */
:root {
    --oc-blue: #2563eb;   /* azul */
    --oc-sky: #0ea5e9;    /* celeste */
    --oc-orange: #f97316; /* naranja */
    --oc-deep: #0b1220;   /* fondo oscuro neutro */
}

/* Fondo hero con gradientes radiales suaves */
.hero-bg {
    background:
        radial-gradient(800px 400px at 10% 15%, rgba(14,165,233,0.25), transparent 60%),
        radial-gradient(700px 350px at 85% 10%, rgba(37,99,235,0.25), transparent 60%),
        radial-gradient(900px 450px at 20% 85%, rgba(249,115,22,0.22), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
}

/* Gradiente de marca reutilizable */
.brand-gradient {
    background: linear-gradient(135deg, var(--oc-sky) 0%, var(--oc-blue) 50%, var(--oc-orange) 100%);
}

/* Texto con gradiente sutil (para la marca) */
.brand-text {
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 50%, #f8fafc 100%);
    -webkit-background-clip: text;
    background-clip: text; /* propiedad estándar para compatibilidad */
    -webkit-text-fill-color: transparent;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

/* Borde degradado alrededor de la tarjeta */
.card-gradient {
    padding: 1px; /* simula el borde */
    background: linear-gradient(135deg, rgba(14,165,233,0.7), rgba(37,99,235,0.25) 40%, rgba(249,115,22,0.5));
    border-radius: 1rem;
}

/* Botón con gradiente de marca */
.btn-gradient {
    background: linear-gradient(135deg, var(--oc-sky), var(--oc-blue) 55%, var(--oc-orange));
}
.btn-gradient:hover {
    filter: brightness(1.03) saturate(1.05);
}

/* Additional animations and utilities */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* Ensure form elements have proper focus states */
input:focus, button:focus {
    outline: none;
}

/* Animation classes for dynamic content */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

/* Glass morphism effect for background elements */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Print styles */
@media print {
    body {
        background: white !important;
    }
    
    .no-print {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bg-gradient-to-br {
        background: #000 !important;
    }
    
    .text-white {
        color: #fff !important;
    }
    
    .bg-white {
        background: #fff !important;
        border: 2px solid #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-slide-up,
    .animate-fade-in,
    .transition-all {
        animation: none !important;
        transition: none !important;
    }
}

/* reCAPTCHA layout tweaks to avoid overlapping the submit button on mobile */
.grecaptcha-badge {
    right: 12px !important; /* default right position */
    bottom: 12px !important; /* default bottom position */
    z-index: 999; /* keep above page content but below floating buttons */
    transition: bottom 0.2s ease, right 0.2s ease;
}

/* Move the badge slightly up on small screens so it doesn't cover the main button */
@media (max-width: 640px) {
    .grecaptcha-badge {
        bottom: 78px !important; /* push up to free space for bottom buttons */
        right: 12px !important;
    }
    /* Ensure the page container leaves room for the badge */
    #pageContent {
        padding-bottom: 120px; /* enough space for badge + some margin */
    }
}

/* Give submit button higher z-index so it is always clickable */
#submitBtn {
    position: relative;
    z-index: 1001;
}

/* Slightly nudge the badge up on larger screens if a floating element is near bottom */
@media (min-width: 641px) {
    .grecaptcha-badge {
        bottom: 18px !important;
    }
}