/* Browser Compatibility CSS - Vendor Prefixes and Fallbacks */

/* Flexbox vendor prefixes */
.landing-header,
.nav-links,
.landing-actions,
.hero-section,
.hero-actions,
.preview-card-container,
.preview-card,
.card-header-mock,
.header-text-mock {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

/* Grid vendor prefixes */
.hero-section,
.features-grid,
.how-it-works-grid {
    display: -ms-grid;
    display: grid;
}

/* Transform vendor prefixes */
@-webkit-keyframes simpleFloat {
    0%, 100% {
        -webkit-transform: translateY(0) rotate(2deg);
        transform: translateY(0) rotate(2deg);
    }
    50% {
        -webkit-transform: translateY(-15px) rotate(4deg);
        transform: translateY(-15px) rotate(4deg);
    }
}

@-moz-keyframes simpleFloat {
    0%, 100% {
        -moz-transform: translateY(0) rotate(2deg);
        transform: translateY(0) rotate(2deg);
    }
    50% {
        -moz-transform: translateY(-15px) rotate(4deg);
        transform: translateY(-15px) rotate(4deg);
    }
}

@keyframes simpleFloat {
    0%, 100% {
        -webkit-transform: translateY(0) rotate(2deg);
        -moz-transform: translateY(0) rotate(2deg);
        -ms-transform: translateY(0) rotate(2deg);
        transform: translateY(0) rotate(2deg);
    }
    50% {
        -webkit-transform: translateY(-15px) rotate(4deg);
        -moz-transform: translateY(-15px) rotate(4deg);
        -ms-transform: translateY(-15px) rotate(4deg);
        transform: translateY(-15px) rotate(4deg);
    }
}

/* Animation vendor prefixes */
.preview-card {
    -webkit-animation: simpleFloat 4s ease-in-out infinite;
    -moz-animation: simpleFloat 4s ease-in-out infinite;
    animation: simpleFloat 4s ease-in-out infinite;
}

/* Transition vendor prefixes */
.btn,
.nav-links a,
.nav-item,
input,
textarea,
select {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Border radius vendor prefixes */
.preview-card,
.btn,
.badge,
input,
textarea,
select {
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

/* Box shadow vendor prefixes */
.preview-card,
.landing-header {
    -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* Appearance reset for form elements */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* User select */
.btn,
.nav-item,
.logo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Flex properties vendor prefixes */
.hero-content,
.hero-image {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* Justify content vendor prefixes */
.landing-header,
.hero-actions {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/* Align items vendor prefixes */
.landing-header,
.landing-actions {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Flex direction vendor prefixes */
.preview-card,
.header-text-mock {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Backdrop filter fallback */
@supports not (backdrop-filter: blur(10px)) {
    .modal-overlay,
    .notification {
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* CSS Grid fallback for older browsers */
@supports not (display: grid) {
    .hero-section,
    .features-grid,
    .how-it-works-grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .hero-content,
    .hero-image,
    .feature-card,
    .step-card {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 300px;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px;
    }
}

/* Object-fit fallback */
@supports not (object-fit: cover) {
    img {
        width: 100%;
        height: auto;
    }
}

/* Sticky position fallback */
@supports not (position: sticky) {
    .landing-header {
        position: fixed;
        width: 100%;
    }
    
    body {
        padding-top: 80px;
    }
}

/* CSS variables fallback for IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE 10/11 fallback colors */
    :root {
        color: #0f172a;
        background-color: #f8fafc;
    }
    
    .btn-primary {
        background-color: #2563eb;
        color: #ffffff;
    }
    
    .btn-primary:hover {
        background-color: #1d4ed8;
    }
    
    body.dark-theme {
        background-color: #020617;
        color: #f8fafc;
    }
}

/* Smooth scrolling fallback */
@media screen and (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}