/* Custom CSS for additional styling */

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

/* Hide scrollbar for carousel */
#carousel::-webkit-scrollbar {
    display: none;
}

#carousel {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Active button state */
.active\:scale-98:active {
    transform: scale(0.98);
}

/* Cursor styles for carousel */
#carousel.dragging {
    cursor: grabbing !important;
}

/* Review images grid responsive */
@media (max-width: 640px) {
    .review-img {
        aspect-ratio: 1;
    }
}

/* Chat messages scroll area */
#chat-messages {
    max-height: calc(90vh - 160px);
}

/* Toast animation */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes slideOutUp {
    from {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50px) scale(0.95);
    }
}

.toast-enter {
    animation: slideInDown 0.3s ease-out;
}

.toast-exit {
    animation: slideOutUp 0.3s ease-out;
}

/* Popup animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes slideUpIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.popup-backdrop {
    animation: fadeIn 0.3s ease-out;
}

.popup-content {
    animation: scaleIn 0.3s ease-out;
}

.popup-slide-up {
    animation: slideUpIn 0.3s ease-out;
}

/* Loading spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Safe area insets for mobile devices */
@supports (padding: max(0px)) {
    .safe-area-inset-bottom {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
}

/* Prevent text selection on draggable elements */
.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Smooth transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Prevent body scroll when popup is open */
body.no-scroll {
    overflow: hidden;
}

/* Review avatar placeholder */
.review-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Responsive font sizes */
@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #e7003a;
    outline-offset: 2px;
}

/* Hover effects */
button:hover {
    opacity: 0.9;
}

/* Disable hover on touch devices */
@media (hover: none) {
    button:hover {
        opacity: 1;
    }
}

/* Garantindo que os botões tenham o mesmo tamanho */
#add-to-cart-btn, #buy-now-btn {
    flex: 1;
    min-width: 0;
    max-width: 50%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}