/* ========================================
   SIPCREW REDESIGNED HERO - ADDITIONAL CSS
   Add this to your existing _Layout.cshtml <style> tag
   or create a separate CSS file
   ======================================== */

/* Ensure Inter font is loaded */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Font family application */
* {
    font-family: 'Inter', sans-serif;
}

/* Hero gradient background (persistent) */
.hero-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
    position: relative;
}

/* Floating animation for background elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }

    33% {
        transform: translateY(-20px) translateX(10px);
    }

    66% {
        transform: translateY(10px) translateX(-10px);
    }
}

/* Fade in up animation */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

/* Bounce animation for scroll indicator */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* Glass morphism effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hover effects for feature cards */
.feature-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .feature-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 40px rgba(6, 182, 212, 0.3);
    }

/* Responsive text sizes */
@media (max-width: 640px) {
    h1 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

/* Additional utility classes for persistent elements */
.persist-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Gradient text utility (if needed) */
.gradient-text-custom {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Ensure proper z-index layering */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.3s ease;
}

    /* Focus states for accessibility */
    a:focus, button:focus {
        outline: 2px solid #06b6d4;
        outline-offset: 2px;
    }

/* Print styles */
@media print {
    .animate-float,
    .animate-bounce {
        animation: none !important;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ========================================
   SIPCREW KYC COMPLIANCE PAGE - CUSTOM CSS
   Add this to your custom.css or create a separate file
   ======================================== */

/* Step indicator active pulse animation */
.step-active {
    animation: stepPulse 2s ease-in-out infinite;
}

.progress-steps-container .flex-1 {
    position: relative;
}

    .progress-steps-container .flex-1 > .flex {
        position: relative;
        z-index: 10;
    }

    .progress-steps-container .flex-1 > .absolute {
        z-index: 1;
    }

.w-12.h-12.rounded-full {
    position: relative;
    z-index: 10;
}

@keyframes stepPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(6, 182, 212, 0);
    }
}

/* Enhanced glass morphism for form card */
.glass {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form input focus glow effect */
.input:focus,
.select:focus,
.textarea:focus,
.file-input:focus {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2), 0 0 20px rgba(6, 182, 212, 0.3);
    transform: translateY(-1px);
}

/* Checkbox custom styling */
.checkbox-primary:checked {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-color: #06b6d4;
    animation: checkboxCheck 0.3s ease;
}

@keyframes checkboxCheck {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* File input custom styling */
.file-input {
    position: relative;
}

    .file-input::file-selector-button {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-right: 1rem;
    }

        .file-input::file-selector-button:hover {
            background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4);
        }

/* Alert styling */
.alert {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Progress line animation */
.progress-line {
    position: relative;
    overflow: hidden;
}

    .progress-line::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.5), transparent );
        animation: shimmer 2s infinite;
    }

@keyframes shimmer {
    to {
        left: 100%;
    }
}

/* Enhanced reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

/* Button hover effects */
.btn {
    position: relative;
    overflow: hidden;
}

    .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn:hover::before {
        width: 300px;
        height: 300px;
    }

/* Gradient border effect for active inputs */
.input-gradient-border {
    position: relative;
}

    .input-gradient-border::before {
        content: '';
        position: absolute;
        inset: -2px;
        background: linear-gradient(135deg, #06b6d4, #8b5cf6);
        border-radius: 0.5rem;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    .input-gradient-border:focus::before {
        opacity: 1;
    }

/* Floating background orbs animation variations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
    }

    33% {
        transform: translateY(-30px) translateX(20px) scale(1.1);
    }

    66% {
        transform: translateY(20px) translateX(-20px) scale(0.9);
    }
}

/* Success modal animation */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Label animation on focus */
.form-control:focus-within .label-text {
    color: #06b6d4;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1e293b;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #0891b2, #06b6d4);
    }

/* Loading spinner for file uploads */
.file-uploading::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #06b6d4;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Enhanced card hover for form sections */
.form-section-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .form-section-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
    }

/* Validation error styling */
.input-error {
    border-color: #ef4444 !important;
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

/* Success checkmark animation */
.success-check {
    animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Typography enhancements */
.gradient-text {
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass {
        padding: 1.5rem !important;
    }

    .reveal {
        transform: translateY(20px);
    }

    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }
}

/* Dark mode text selection */
::selection {
    background: rgba(6, 182, 212, 0.3);
    color: white;
}

::-moz-selection {
    background: rgba(6, 182, 212, 0.3);
    color: white;
}

/* Accessibility: Focus visible */
*:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Loading state for buttons */
.btn-loading {
    position: relative;
    color: transparent !important;
}

    .btn-loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        border: 2px solid white;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

/* Smooth transitions for step changes */
.step-content {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* Progress indicator line */
.progress-indicator {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

    .progress-indicator::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 33.33%;
        background: linear-gradient(90deg, #06b6d4, #0891b2);
        transition: width 0.5s ease;
    }

    .progress-indicator[data-step="2"]::after {
        width: 66.66%;
    }

    .progress-indicator[data-step="3"]::after {
        width: 100%;
    }