/* ADVANCED RESPONSIVE MOBILE CSS WITH ANIMATIONS - FOOTER SAFE */

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

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* GLOBAL STYLES */
* {
    transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    overflow-x: hidden;
}

/* MOBILE XS (< 480px) */
@media (max-width: 479px) {
    
    /* SECTIONS - EXCLUDE FOOTER */
    section:not(footer) {
        padding: 20px 12px !important;
        animation: slideUp 0.6s ease-out;
    }

    main section {
        padding: 20px 12px !important;
    }

    div:not(footer *)[style*="padding: 60px"] {
        padding: 20px 12px !important;
    }

    /* GRID LAYOUTS - EXCLUDE FOOTER */
    main [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
    section [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        animation: slideUp 0.5s ease-out;
    }

    /* TYPOGRAPHY */
    h1 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        animation: slideUp 0.4s ease-out;
        letter-spacing: -0.01em;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.2 !important;
        animation: slideUp 0.45s ease-out;
    }

    h3 {
        font-size: 18px !important;
        animation: slideUp 0.5s ease-out;
    }

    p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        animation: slideUp 0.55s ease-out;
    }

    span {
        animation: fadeIn 0.3s ease-out;
    }

    /* BUTTONS */
    .btn, button, a.btn, 
    [style*="display: inline-flex"][style*="border-radius: 24px"] {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        animation: scaleIn 0.4s ease-out;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .btn:active, button:active {
        transform: scale(0.98) !important;
    }

    .btn:hover, button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    }

    /* IMAGES */
    main img, section img {
        max-width: 100% !important;
        height: auto !important;
        animation: fadeIn 0.4s ease-out;
    }

    main div[style*="height: 550px"],
    section div[style*="height: 550px"] {
        height: 240px !important;
        border-radius: 20px !important;
        overflow: hidden;
    }

    /* STATS SECTION - EXCLUDE FOOTER */
    main [style*="grid-template-columns: repeat(4"],
    section [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        animation: slideUp 0.6s ease-out;
    }

    .stat-item, .stat-box {
        padding: 12px !important;
        gap: 10px !important;
        animation: slideUp 0.5s ease-out;
        border-radius: 8px !important;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .stat-item:hover, .stat-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
    }

    /* BADGES */
    span[style*="display: inline-flex"][style*="border-radius: 9999px"],
    [style*="border-radius: 9999px"]:not(footer *) {
        font-size: 11px !important;
        padding: 6px 12px !important;
        animation: slideLeft 0.4s ease-out;
    }

    /* CONTAINERS - EXCLUDE FOOTER */
    main .container, section .container {
        padding: 0 12px !important;
    }

    main .container-fluid, section .container-fluid {
        padding: 0 12px !important;
    }

    /* CARDS */
    .card, [style*="border-radius: 16px"],
    [style*="border-radius: 20px"] {
        border-radius: 12px !important;
        animation: scaleIn 0.4s ease-out;
    }

    /* HIDE LARGE ELEMENTS */
    .desktop-only, .lg-only {
        display: none !important;
    }

    /* FLEX LAYOUTS */
    main [style*="display: flex"],
    section [style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* NAVIGATION */
    nav, .navbar {
        padding: 8px 12px !important;
    }

    /* MODALS */
    .modal-dialog {
        margin: 10px !important;
    }

    /* FORMS */
    main input, main textarea, main select,
    section input, section textarea, section select {
        font-size: 16px !important;
        padding: 10px 12px !important;
        border-radius: 6px !important;
        width: 100% !important;
        animation: slideUp 0.3s ease-out;
    }

    /* PRODUCT GRID */
    .product-grid, .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* DECORATIVE ELEMENTS */
    main div[style*="radial-gradient"],
    section div[style*="radial-gradient"],
    main div[style*="position: absolute"][style*="inset: -16px"],
    section div[style*="position: absolute"][style*="inset: -16px"] {
        display: none !important;
    }

}

/* MOBILE (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {

    main section, section {
        padding: 30px 16px !important;
    }

    main [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
    section [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    h1, h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    p {
        font-size: 14px !important;
    }

    main [style*="grid-template-columns: repeat(4"],
    section [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    main div[style*="height: 550px"],
    section div[style*="height: 550px"] {
        height: 280px !important;
    }

    .btn, button {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 13px !important;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    input, textarea, select {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }

}

/* TABLET (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

    main section, section {
        padding: 40px 20px !important;
    }

    main [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
    section [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    h1, h2 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    p {
        font-size: 15px !important;
    }

    main [style*="grid-template-columns: repeat(4"],
    section [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    main div[style*="height: 550px"],
    section div[style*="height: 550px"] {
        height: 400px !important;
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

}

/* DESKTOP (1024px+) */
@media (min-width: 1024px) {

    [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }

    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    div[style*="height: 550px"] {
        height: 550px !important;
    }

    .desktop-only, .lg-only {
        display: block !important;
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

}

/* LANDSCAPE MODE */
@media (max-height: 500px) and (orientation: landscape) {

    section {
        padding: 15px 12px !important;
    }

    h1 {
        font-size: 18px !important;
    }

    p {
        font-size: 12px !important;
    }

    div[style*="height: 550px"] {
        height: 200px !important;
    }

}

/* TOUCH DEVICES OPTIMIZATION */
@media (hover: none) {

    button, .btn, a.btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

}

/* DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {

    body {
        background-color: #0f172a;
        color: #f1f5f9;
    }

    input, textarea, select {
        background-color: #1e293b;
        color: #f1f5f9;
        border-color: #334155;
    }

}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {

    * {
        animation: none !important;
        transition: none !important;
    }

}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: more) {

    body {
        font-weight: 500;
    }

    button, .btn {
        border: 2px solid currentColor;
    }

}

/* UTILITY CLASSES */

.mobile-only {
    display: block;
}

@media (min-width: 1024px) {
    .mobile-only {
        display: none !important;
    }
}

.desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: block !important;
    }
}

.tablet-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: block !important;
    }
}

/* SMOOTH TRANSITIONS */
.smooth-transition {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* BOUNCE EFFECT */
.bounce-on-hover:hover {
    animation: bounce 0.6s ease;
}

/* PULSE EFFECT */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* SCALE UP ON HOVER */
.scale-on-hover:hover {
    transform: scale(1.05);
}

/* RESPONSIVE BREAKPOINT MANAGER */

.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 640px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
}

/* FIX FOR COMMON ISSUES */

body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    max-width: 100%;
}

p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* PRINT STYLES */
@media print {
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    .no-print {
        display: none !important;
    }

    a {
        color: #000;
    }

}

/* FOOTER PROTECTION - DO NOT MODIFY */
footer, footer * {
    animation: none !important;
}