/* CarregAqui Global Styles */

/* Mobile App Container */
body {
    display: flex;
    justify-content: center;
    background-color: #ffffff !important;
    margin: 0;
    padding: 0;
}

.mobile-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background-color: #f9fafb;
    position: relative;
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

/* Remix Icon Default Content */
:where([class^="ri-"])::before { 
    content: "\f3c2"; 
}

/* Custom Scrollbar Hiding */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Filter Button Styles */
.filter-btn {
    background-color: #f3f4f6;
    color: #6b7280;
    transition: all 0.2s ease;
}

.filter-btn.active {
    background-color: #2563eb;
    color: white;
}

.filter-btn:hover:not(.active) {
    background-color: #e5e7eb;
}

/* Order Card Styles */
.order-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Animation Classes */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Transition Utilities */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Custom Button Styles */
button:focus, 
a:focus {
    outline: none;
}

/* Modal and Overlay Styles */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Text Truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gradient Backgrounds */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* Custom Input Focus Styles */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Custom Checkbox/Radio Styles */
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

/* Backdrop Blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Footer navigation */
.app-footer-nav a { transition: color .2s, background-color .2s; }
.app-footer-nav a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.app-footer-nav a[data-active="true"] span { font-weight: 600; }
.app-footer-nav a[data-active="true"] i { color: var(--color-primary, #2563eb); }
.app-footer-nav a[data-active="true"] { color: var(--color-primary, #2563eb); }

@media (prefers-reduced-motion: reduce) {
    .app-footer-nav a { transition: none; }
}

/* Visually hidden utility */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Active icon default color override (ensures inactive icons gray) */
.app-footer-nav i { color: #6b7280; }

/* Modal Container - Ensure mobile-sized */
.modal-mobile-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* Modal Animations */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes modalSlideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

@keyframes modalSlideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Modal overlay animation */
.modal-overlay-enter {
    animation: modalFadeIn 0.3s ease-out forwards;
}

.modal-overlay-exit {
    animation: modalFadeOut 0.2s ease-in forwards;
}

/* Modal content animations */
.modal-content-slide-up {
    animation: modalSlideUp 0.3s ease-out forwards;
}

.modal-content-slide-down {
    animation: modalSlideDown 0.3s ease-out forwards;
}

.modal-content-exit {
    animation: modalSlideOutDown 0.2s ease-in forwards;
}

/* Mobile constraint for modal overlays created by createAnimatedModal */
.modal-overlay-enter,
.modal-overlay-exit {
    margin: 0 auto;
    max-width: 480px;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay-enter,
    .modal-overlay-exit,
    .modal-content-slide-up,
    .modal-content-slide-down,
    .modal-content-exit {
        animation: none !important;
    }
}