/**
 * Frontend Custom Styles - Paladar Digital Premium
 */

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

/* Product card hover */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.product-card:active {
    transform: scale(0.98);
}

/* Category chip press */
.category-chip {
    transition: all 0.2s ease;
}

.category-chip:active {
    transform: scale(0.92);
}

/* Modal slide-up animation */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#product-modal > div:last-child {
    will-change: transform;
    animation: slideUp 0.3s ease-out;
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

#toast {
    max-width: 90vw;
    animation: fadeIn 0.3s ease-out;
}

/* Cart item removal */
@keyframes slideOut {
    to { opacity: 0; transform: translateX(100%); }
}

.cart-item-removing {
    animation: slideOut 0.3s ease forwards;
}

/* Form fields */
input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Button states */
button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

button {
    user-select: none;
    -webkit-user-select: none;
}

/* Selection color */
::selection {
    background-color: #ffdad7;
    color: #bb001b;
}

::placeholder {
    color: #94a3b8;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid #bb001b;
    outline-offset: 2px;
}

/* Smooth image loading */
img {
    background-color: #f1f5f9;
}

img[src] {
    opacity: 1;
    transition: opacity 0.3s ease;
}

img:not([src]) {
    opacity: 0;
}

/* Safe area for iPhone */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #cart-fab,
    #cart-bar,
    #checkout-summary,
    #cart-summary {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* QR Code container */
.qr-container {
    background: white;
    padding: 1rem;
    border-radius: 1rem;
}

/* Payment method card selection */
label:has(input:checked) {
    border-color: #bb001b !important;
    background-color: #ffdad7 !important;
}

/* Status timeline connector */
.status-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

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

/* Sidebar nav links - no underline */
a { text-decoration: none; }

/* FAB pulse animation when items added */
@keyframes fabPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

#cart-fab.pulse {
    animation: fabPulse 0.3s ease;
}