/* Reset para o header */
* {margin: 0;padding: 0;box-sizing: border-box;}

/* Body padding para header fixo */
body {margin: 0;padding: 0;padding-top: 80px !important;}

/* Container principal */
.container {max-width: 1200px;margin: 0 auto;padding: 0 20px;}

/* Header */
.header {background: white;padding: 1rem 0;position: fixed;top: 0;left: 0;right: 0;width: 100%;z-index: 9998;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);transition: all 0.3s ease;}
.header-container {display: flex;justify-content: space-between;align-items: center;}

/* Logo */
.logo img {height: 50px;width: auto;transition: transform 0.3s;}
.logo:hover img {transform: scale(1.05);}

/* Navigation */
.nav {display: flex;gap: 2rem;}
.nav-link {color: #333;text-decoration: none;font-weight: 500;font-size: 0.9rem;text-transform: uppercase;letter-spacing: 0.5px;position: relative;padding: 5px 0;transition: color 0.3s;}
.nav-link:hover {color: #000;}
.nav-link::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: #000;transition: width 0.3s;}
.nav-link:hover::after {width: 100%;}

/* Header Actions */
.header-actions {display: flex;align-items: center;gap: 1.5rem;}

/* User Area */
.user-area {display: flex;align-items: center;gap: 10px;}
.user-button-group {display: flex;align-items: center;background: #000;border: none;border-radius: 25px;padding: 8px 8px 8px 16px;gap: 0;cursor: pointer;transition: all 0.3s ease;}
.user-button-group:hover {background: #333;transform: scale(1.05);}
.user-welcome {padding: 0 8px;font-size: 13px;color: rgba(255, 255, 255, 0.7);font-weight: 400;white-space: nowrap;}
.user-name {padding: 0 10px;font-size: 14px;color: white;font-weight: 500;white-space: nowrap;border-left: 1px solid rgba(255, 255, 255, 0.2);}
.user-avatar {width: 28px;height: 28px;background: white;color: #000;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 700;margin-left: 8px;}
.user-arrow {padding: 0 10px;color: rgba(255, 255, 255, 0.8);font-size: 10px;transition: transform 0.3s;}
.user-button-group:hover .user-arrow {transform: rotate(180deg);}

/* Login Button */
.login-btn {display: flex;align-items: center;gap: 8px;background: #000;color: white;padding: 10px 20px;border-radius: 25px;text-decoration: none;font-weight: 500;font-size: 0.9rem;transition: all 0.3s;}
.login-btn:hover {background: #333;transform: scale(1.05);}

/* Cart Icon */
.cart-icon {position: relative;cursor: pointer;padding: 15px 20px 8px 8px;transition: transform 0.3s;}
.cart-icon:hover {transform: scale(1.1);}
.cart-count {position: absolute;top: 3px;right: 3px;background: #ff4444 !important;color: white !important;font-size: 10px;padding: 3px 6px;border-radius: 10px;font-weight: bold;min-width: 16px;height: 16px;display: inline-flex !important;align-items: center;justify-content: center;box-shadow: 0 2px 4px rgba(0,0,0,0.3);z-index: 1000;line-height: 1;text-align: center;}
.cart-count[style*="display: none"] {display: none !important;}

/* Mobile Menu */
.mobile-menu-toggle {display: none;flex-direction: column;gap: 4px;background: transparent;border: none;cursor: pointer;padding: 8px;}
.mobile-menu-toggle span {width: 25px;height: 2px;background: #333;transition: all 0.3s;}
.nav-overlay {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 999;}

/* User Dropdown Menu */
.user-dropdown {position: fixed;background: white;border-radius: 15px;box-shadow: 0 5px 30px rgba(0,0,0,0.15);z-index: 10000;display: none;min-width: 280px;opacity: 0;transform: translateY(-10px);transition: opacity 0.3s ease, transform 0.3s ease;overflow: hidden;}
.user-dropdown-header {padding: 20px;border-bottom: 1px solid rgba(0,0,0,0.08);background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;}
.user-info {display: flex;align-items: center;gap: 15px;}
.user-info-avatar {width: 50px;height: 50px;background: white;color: #667eea;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 700;box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
.user-info-details {flex: 1;}
.user-info-name {font-size: 16px;font-weight: 600;margin-bottom: 4px;}
.user-info-email {font-size: 13px;opacity: 0.9;}
.dropdown-menu {padding: 10px;}
.dropdown-item {display: flex;align-items: center;gap: 12px;padding: 12px 15px;text-decoration: none;color: #333;font-size: 14px;border-radius: 8px;transition: all 0.2s;position: relative;}
.dropdown-item:hover {background: #f8f9fa;transform: translateX(5px);}
.dropdown-item i {width: 20px;text-align: center;color: #666;}
.dropdown-item:hover i {color: #667eea;}
.dropdown-separator {height: 1px;background: rgba(0,0,0,0.08);margin: 10px 0;}
.dropdown-item.text-danger {color: #dc3545;}
.dropdown-item.text-danger:hover {background: #fff5f5;color: #bb2d3b;}

/* Cart Drawer */
.cart-drawer {position: fixed;top: 0;right: -400px;width: 400px;height: 100%;background: white;box-shadow: -5px 0 20px rgba(0,0,0,0.1);z-index: 10000;transition: right 0.3s ease;display: flex;flex-direction: column;}
.cart-drawer.open {right: 0;}
.cart-header {padding: 20px;border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;}
.cart-title {font-size: 1.2rem;font-weight: 300;letter-spacing: 2px;margin: 0;}
.cart-close {background: none;border: none;font-size: 1.5rem;cursor: pointer;color: #999;transition: color 0.3s;}
.cart-close:hover {color: #333;}
.cart-items {flex: 1;overflow-y: auto;padding: 20px;}
.cart-item {display: flex;gap: 15px;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #f0f0f0;}
.cart-item img {width: 80px;height: 80px;object-fit: cover;border-radius: 8px;}
.cart-item-details {flex: 1;}
.cart-item-name {font-size: 0.95rem;margin-bottom: 8px;color: #333;}
.cart-item-price {font-size: 0.9rem;color: #666;margin-bottom: 10px;}
.cart-item-quantity {display: flex;align-items: center;gap: 10px;}
.cart-item-quantity button {width: 24px;height: 24px;border: 1px solid #ddd;background: white;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s;}
.cart-item-quantity button:hover {background: #f5f5f5;}
.cart-item-remove {background: none;border: none;color: #999;cursor: pointer;font-size: 1.2rem;transition: color 0.3s;}
.cart-item-remove:hover {color: #ff4444;}
.cart-footer {padding: 20px;border-top: 1px solid #eee;}
.cart-total {display: flex;justify-content: space-between;font-size: 1.1rem;font-weight: 500;margin-bottom: 20px;}
.cart-empty {text-align: center;padding: 40px;color: #999;}
.cart-item-controls {display: flex;align-items: center;gap: 10px;}
.quantity-btn {width: 24px;height: 24px;border: 1px solid #ddd;background: white;cursor: pointer;font-size: 14px;border-radius: 4px;transition: all 0.2s;}
.quantity-btn:hover {background: #f5f5f5;border-color: #999;}
.quantity {padding: 0 8px;font-size: 14px;font-weight: 500;}
.remove-btn {background: none;border: none;color: #999;cursor: pointer;font-size: 18px;margin-left: 10px;transition: color 0.2s;}
.remove-btn:hover {color: #ff4444;}
.cart-item-image {width: 80px;height: 80px;object-fit: cover;border-radius: 8px;}

/* Cart Overlay */
.cart-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 9999;display: none;opacity: 0;transition: opacity 0.3s ease;}

/* Responsive */
@media (max-width: 768px) {
    .user-welcome {display: none;}
    .nav {position: fixed;top: 0;left: -100%;width: 70%;height: 100vh;background: white;flex-direction: column;padding: 2rem;transition: left 0.3s;z-index: 1001;gap: 1rem;}
    .nav.active {left: 0;}
    .nav-overlay.active {display: block;}
    .mobile-menu-toggle {display: flex;}
    .header-actions {gap: 1rem;}
}

@media (max-width: 480px) {
    .cart-drawer {width: 100%;right: -100%;}
}